对话绘图 sumarilkkxx/dsh-artifact

把自然语言请求变成原生、可交互的 ECharts 和 Mermaid 可视化，直接呈现在 DeepSeek Harness 里。

这是什么

dsh-artifact 是 DeepSeek Harness 的可视化渲染器。用日常语言描述你要的图表或示意图，模型会理解意图，选择合适的原生引擎，输出声明式 payload，结果直接出现在对话里，成为一块可交互的画布。

它追求的是接近原生的 ECharts 和 Mermaid 编写体验，而不是一小撮手绘图表模板。浏览器拿到的是真正的 ECharts option 或 Mermaid 源码，用真正的引擎渲染。

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

亮点

从一句请求到原生画布

用日常语言描述你要的可视化。dsh-artifact 把完整工作流留在对话里：模型推理请求，准备原生引擎 payload，再把结果渲染成可交互画布，带外观控件和 PNG 导出。

一句请求，从流式推理、工具执行，到原生 ECharts 日历热力图。演示保留了真实的 DeepSeek Harness 界面。

围绕真实渲染引擎构建

| | 能力 |
| 原生引擎 | ECharts 6，option 需要时启用官方 ECharts-GL 扩展，以及 Mermaid 11 |
| ECharts 覆盖广 | 原生支持 JSON 可表达的系列与组件：直角坐标系、饼图、雷达图、日历热力图、关系图、桑基图、树图、地图、平行坐标、时间轴、dataset、visualMap、dataZoom 等 |
| 图表优先的 Mermaid | 流程图、时序图、类图、状态图、ER 图、甘特图、旅程图、饼图，以及 Mermaid 支持的其他图表 |
| 可交互画布 | 提示框、图例、缩放、平移、3D 控件、自适应尺寸，全部来自真实渲染器 |
| 外观控制 | 画布内提供 ECharts 风格调色板和浅色/深色背景；实景地球保留真实地表，只开放背景模式 |
| 图片下载 | 把 ECharts、ECharts-GL、Mermaid 画布按当前背景下载为 2× PNG 图片；标准 ECharts 和 Mermaid 图表还支持下载 SVG |
| 安全设计 | 声明式边界内全是纯 JSON；隔离的自定义 HTML 运行在受 CSP 限制的沙箱 iframe 中 |

安装

先安装 DeepSeek Harness 命令行（只需一次）：

npm install -g @deepseek-ai/dsh

如果你是第一次用 DSH，先运行一次 dsh web 初始化 web 配置档，然后停掉它，再添加插件。

GitHub 安装（推荐；已包含预构建的引擎资源）
dsh plugin --profile web add github:sumarilkkxx/dsh-artifact

本地开发
dsh plugin --profile web add link:/path/to/dsh-artifact

启动或重启 dsh web，然后强制刷新浏览器（Cmd/Ctrl+Shift+R）。PATH 中必须有 pnpm，因为 DSH 插件命令内部会用到它。

自然使用

直接说出你想要的结果。例如：

用双轴图对比 2024 年各季度营收和利润率，高亮表现最好的季度，用深色画布。

为今年的每日提交记录画一张 GitHub 风格日历热力图。

画一张 OAuth 登录的时序图，包含成功和失败路径。

模型会调用 render_artifact，在对话中返回一张实时画布。需要时用 Appearance 控件切换调色板/背景，用旁边的 Download 操作保存 PNG。

引擎契约

render_artifact

| 参数 | 类型 | 用途 |
| engine | string | echarts（默认）或 mermaid |
| option | object / string | 给 echarts 用的原生 ECharts option；只能是纯 JSON，不能有 JavaScript 函数 |
| maps | object / string | 可选，合法的 GeoJSON/SVG 注册表，供 ECharts geo 和 map 可视化使用 |
| code | string | 给 mermaid 用的 Mermaid 源码 |
| theme | string | auto、tech-blue、minimal、night-purple、forest 或 amber |
| mode | string | auto、light 或 dark |
| title | string | 对话卡片标题 |
| height | number | 画布高度，单位 px（默认 360，最小 120） |
插件把 ECharts 配置项直接传给 setOption，不会先转成预设目录。配置项里写死的值优先于画布内主题，这一点和 ECharts 完全一致。只有遇到受支持的 3D 配置项时才会加载 ECharts-GL；它始终是 ECharts 的兼容层，不是独立的 3D 场景编辑器。

JavaScript 回调无法穿过 JSON 安全边界。格式化请优先用 ECharts 字符串模板，比如 {c}%。确实需要回调驱动的自定义效果，就用 render_html。

render_html

| 参数 | 类型 | 用途 |
| html | string | 自包含的 HTML 片段或文档；允许内联 CSS/JS |
| title | string | 会话卡片标题 |
| height | number | 画布高度，单位 px（默认 400，最小 120） |

render_html 是专门为自定义组件留的独立逃生通道。它运行在 opaque-origin iframe 里，CSP 会拦截网络访问、顶层跳转和表单提交。宿主无法导出它的内容，所以它有意不提供 PNG 下载控件。

原生 ECharts 示例

{
"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] }]
}
}

安全与兼容性

- 声明式载荷按无损 JSON 校验。函数、undefined 和 symbol 一律拒绝。
- 引擎资源只从插件路由提供；路径穿越尝试会被拦截。
- 地图可视化必须通过 maps 提供合法的 GeoJSON/SVG；插件绝不从网络拉取地图数据。
- 插件把渲染器资源打包在本地，所以 ECharts 和 Mermaid 渲染不依赖 CDN。

开发

npm install
npm run build

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

| 路径 | 说明 |
| index.js | 宿主工具定义、校验、提示词引导，以及本地资源路由 |
| client.js | DeepSeek Harness toolviews、渲染器分发、外观控件和 PNG 导出 |
| assets/ | 已提交的 ECharts、ECharts-GL、Mermaid 和项目媒体资源 |
| docs/showcase/ | README 动效演示的源文件和像素资源 |
| scripts/build.mjs | 把渲染器发行版复制到 assets/ |

插件没有 @deepseek-ai/* 运行时导入。ECharts、ECharts-GL 和 Mermaid 都是构建期依赖，用来生成已提交的本地资源。

路线图

- [x] 原生 ECharts 和 Mermaid 画布
- [x] 对可用 JSON 表达的 ECharts 3D 配置项提供 ECharts-GL 兼容
- [x] 明暗外观控件和 PNG 导出
- [x] 沙箱化 HTML 逃生通道
- [ ] 画布到模型的可选操作往返
- [ ] 更多声明式渲染引擎

贡献

欢迎贡献。保持声明式通道不含函数，守住沙箱边界，引擎版本一变就提交重新构建的产物。

许可证

MIT