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. ```text 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 | | Capability | |---|---| | **Native engines** | ECharts 6, the official ECharts-GL extension when an option needs it, and Mermaid 11 | | **Broad ECharts coverage** | Native JSON-expressible series and components: cartesian, pie, radar, calendar heatmap, graph, sankey, tree, map, parallel, timeline, `dataset`, `visualMap`, `dataZoom`, and more | | **Diagram-first Mermaid** | Flowcharts, sequence, class, state, ER, gantt, journey, pie, and other Mermaid-supported diagrams | | **Interactive canvas** | Tooltips, legends, zoom, pan, 3D controls, and responsive resizing come from the actual renderer | | **Appearance controls** | In-canvas ECharts-inspired palettes and light/dark backgrounds; photographic globes retain their real-world surface and expose background mode only | | **Image download** | Download ECharts, ECharts-GL, and Mermaid canvases as 2× PNG images using the active background; standard ECharts and Mermaid diagrams also support SVG download | | **Safe by design** | Pure JSON across the declarative boundary; isolated custom HTML runs in a CSP-restricted sandbox iframe | ## Install Install the DeepSeek Harness CLI first (one time): ```sh 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. ```sh # 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` | Parameter | Type | Purpose | |---|---|---| | `engine` | string | `echarts` (default) or `mermaid` | | `option` | object / string | A native ECharts option for `echarts`; pure JSON only, no JavaScript functions | | `maps` | object / string | Optional legal GeoJSON/SVG registry for ECharts `geo` and `map` visualizations | | `code` | string | Mermaid source for `mermaid` | | `theme` | string | `auto`, `tech-blue`, `minimal`, `night-purple`, `forest`, or `amber` | | `mode` | string | `auto`, `light`, or `dark` | | `title` | string | Conversation card title | | `height` | number | Canvas height in px (default `360`, minimum `120`) | 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` | Parameter | Type | Purpose | |---|---|---| | `html` | string | Self-contained HTML fragment or document; inline CSS/JS is allowed | | `title` | string | Conversation card title | | `height` | number | Canvas height in px (default `400`, minimum `120`) | `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 ```json { "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 ```sh npm install npm run build # Add the local plugin, then restart dsh web and hard-refresh. dsh plugin --profile web add . ``` | Path | Description | |---|---| | `index.js` | Host tool definitions, validation, prompt guidance, and local asset route | | `client.js` | DeepSeek Harness toolviews, renderer dispatch, appearance controls, and PNG export | | `assets/` | Committed ECharts, ECharts-GL, Mermaid, and project media assets | | `docs/showcase/` | Source and pixel assets for the README motion study | | `scripts/build.mjs` | Copies renderer distributions into `assets/` | 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](LICENSE)