README
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
| 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):
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
| 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) |
更多「Web 界面与前端」插件
dsh-web
作者 zhu1090093659
DeepSeek Harness (DSH) Web 插件聚合生态 · 万物皆插件,通过创意工坊分发||DeepSeek Harness (DSH) Web Plugin Aggregation Ecosystem · Everything is a plugin, distributed via the Creative Workshop
deepseek-balance-whale-widget
作者 meteornox
DeepSeek Harness(DSH)一只住在 DSH 界面右下角的小鲸鱼娘,帮你盯着DeepSeek账户余额。QQ弹弹,支持拖拽吸附、左吸附翻转、数字滚动动画,随界面自动启用,建议直接喊来你的dsh安装
dsh-wallpaper-engine
作者 elysia395
把本机 Wallpaper Engine 的壁纸搬进 DSH 网页界面:场景壁纸由内置 MIT 开源引擎 WebWallGL 实时 WebGL 渲染(粒子 / puppet 骨骼 / SceneScript / 音频反应 / 鼠标交互),失败自动降级内嵌 MP4 与场景静态帧;Web 壁纸严格沙箱 + WE API;iOS 风格液态玻璃 UI 高度自定义,遮挡暂停省电、ffmpeg 帧率上限转码、系统音频频谱与 Now Playing、自定义上传与自动轮播;设置存宿主端,对 agent 零 token 开销。Windows / macOS / Linux 三平台原生(同一个包、同一条命令)。
petdex
作者 crafter-station
面向 Codex、Claude Code、DeepSeek Harness 等智能体的动效宠物公共图库。
