dsh-artifact

Turn natural-language requests into native, interactive ECharts and Mermaid visualizations inside DeepSeek Harness.

简体中文

What it is

dsh-artifact is a visualization renderer for DeepSeek Harness. Ask for a chart or diagram in ordinary language; the model understands the intent, chooses the appropriate native engine, emits a declarative payload, and the result appears directly in the conversation as an interactive canvas.

It is built for a near-native ECharts and Mermaid authoring experience—not a small set of hand-drawn chart templates. The browser receives a real ECharts option or Mermaid source and renders it with the real engine.

Your request  →  model understands the intent  →  ECharts option / Mermaid code  →  interactive canvas

Highlights

From a request to a native canvas

Describe the visualization you need in ordinary language. dsh-artifact keeps the complete workflow inside the conversation: the model reasons about the request, prepares a native engine payload, and renders the result as an interactive canvas with appearance controls and PNG export.

_{One request, from streamed reasoning and tool execution to a native ECharts calendar heatmap. The demonstration preserves the actual DeepSeek Harness interface.}

Built around real rendering engines

Install

Install the DeepSeek Harness CLI first (one time):

npm install -g @deepseek-ai/dsh

If this is your first time using DSH, run dsh web once to initialize the web profile, then stop it before adding the plugin.

# GitHub install (recommended; prebuilt engine assets are included)
dsh plugin --profile web add github:sumarilkkxx/dsh-artifact

# Local development
dsh plugin --profile web add link:/path/to/dsh-artifact

Start or restart dsh web, then hard-refresh the browser (Cmd/Ctrl+Shift+R). pnpm must be available on PATH because the DSH plugin command uses it internally.

Use it naturally

Ask for the result you need. For example:

Compare quarterly revenue and margin for 2024 in a dual-axis chart, highlight the best quarter, and use a dark canvas.

Create a GitHub-style calendar heatmap for this year's daily commits.

Draw a sequence diagram for OAuth login with success and failure paths.

The model calls render_artifact and returns a live canvas in the conversation. Use the Appearance control to switch palette/background where appropriate, and the adjacent Download action to save a PNG.

Engine contract

render_artifact

The plugin passes ECharts options to setOption without translating them into a preset catalogue. Explicit values in an option take precedence over the in-canvas theme, exactly as they do in ECharts. ECharts-GL is loaded only when a supported 3D option requires it; it remains an ECharts compatibility layer, not a separate 3D scene editor.

JavaScript callbacks cannot cross the JSON security boundary. Prefer ECharts string templates such as {c}% for formatters. For genuinely callback-driven custom experiences, use render_html.

render_html

render_html is the deliberately separate escape hatch for custom widgets. It runs in an opaque-origin iframe with a CSP that blocks network access, top-level navigation, and form submission. Its contents cannot be exported by the host, so it intentionally has no PNG download control.

Native ECharts example

{
  "engine": "echarts",
  "title": "2024 quarterly revenue",
  "mode": "dark",
  "option": {
    "tooltip": { "trigger": "axis" },
    "legend": { "top": 28 },
    "xAxis": { "type": "category", "data": ["Q1", "Q2", "Q3", "Q4"] },
    "yAxis": { "type": "value", "name": "Revenue (10k CNY)" },
    "series": [{ "type": "bar", "name": "Revenue", "data": [120, 180, 150, 210] }]
  }
}

Security and compatibility

• The declarative payload is validated as lossless JSON. Functions, undefined, and symbols are rejected.
• Engine assets are served only from the plugin route; traversal attempts are blocked.
• Map visualizations must include legal GeoJSON/SVG through maps; the plugin never fetches map data from the network.
• The plugin ships its renderer assets locally, so ECharts and Mermaid render without a CDN dependency.

Development

npm install
npm run build

# Add the local plugin, then restart dsh web and hard-refresh.
dsh plugin --profile web add .

The plugin has no @deepseek-ai/* runtime imports. ECharts, ECharts-GL, and Mermaid are build-time dependencies used to create the committed local assets.

Roadmap

• [x] Native ECharts and Mermaid canvases
• [x] ECharts-GL compatibility for JSON-expressible ECharts 3D options
• [x] Light/dark appearance controls and PNG export
• [x] Sandboxed HTML escape hatch
• [ ] Optional action round-trip from a canvas back to the model
• [ ] More declarative rendering engines

Contributing

Contributions are welcome. Keep the declarative channel function-free, preserve the sandbox boundary, and commit rebuilt assets whenever an engine version changes.

License

MIT