dsh-artifact：DeepSeek Harness 原生 ECharts 与 Mermaid 渲染器

前言¶

DeepSeek Harness (DSH) 的核心设计理念是“一切皆插件”，这使得开发者可以在对话流中扩展能力。在处理数据分析或架构图绘制时，传统的做法通常需要将图表代码复制粘贴到外部工具，或者依赖预设的模板，这往往限制了灵活性。dsh-artifact 插件旨在解决这一痛点，它允许模型通过自然语言理解意图，直接生成并渲染真实的 ECharts 6 和 Mermaid 11 引擎代码，在对话界面内提供原生级别的交互体验。

插件定位¶

该插件由 sumarilkkxx 维护，是一个专注于可视化渲染的 DSH 插件。它不提供手绘风格的图表模板，而是将完整的 ECharts 配置对象或 Mermaid 源码作为载荷传递给浏览器，由真实的渲染引擎进行绘制。

核心功能¶

插件内置了完整的原生渲染能力，具体包括：

原生引擎支持：支持 ECharts 6 和 Mermaid 11。
丰富的图表类型：
- ECharts：支持笛卡尔坐标系、饼图、雷达图、日历热力图、关系图、桑基图、树图、地图、平行坐标系等系列和组件。
- Mermaid：支持流程图、序列图、类图、状态图、ER 图、甘特图、旅程图等。
交互与外观：
- 画布支持提示框、图例、缩放、平移、3D 控件及响应式调整。
- 提供调色板控制及亮/暗模式切换。
导出：支持将渲染结果导出为 PNG 或 SVG 图片。
安全隔离：使用 CSP 限制的沙箱 iframe 运行自定义 HTML，防止跨域攻击。

安装与启用¶

使用前需确保环境已安装 DeepSeek Harness CLI 并运行 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）。注意：插件内部依赖 pnpm，请确保 pnpm 已添加到系统 PATH 中。

典型用法¶

在对话中直接使用自然语言描述需求，模型将调用渲染工具。

需求示例：
> “对比 2024 年四个季度的营收和利润，使用双轴图表，高亮表现最好的季度，并使用深色背景。”
需求示例：
> “生成今年每日提交记录的 GitHub 风格日历热力图。”
需求示例：
> “绘制 OAuth 登录的序列图，包含成功和失败路径。”

模型返回后，画布支持在对话内直接进行交互，并提供外观控制和图片下载功能。

技术细节与注意事项¶

1. 安全边界¶

插件通过纯 JSON 传递配置，防止执行非受控的 JavaScript 代码。JavaScript 回调函数无法跨过 JSON 安全边界，建议在 ECharts 格式化器中使用字符串模板（如 {c}%）代替函数。

2. 地图渲染¶

ECharts 的地图可视化必须通过 maps 参数传入合法的 GeoJSON 或 SVG 数据，插件不会从网络请求地图数据。

3. 3D 与扩展¶

ECharts-GL 仅在选项中明确需要 3D 功能时才加载，并非默认开启。

4. HTML 转义通道¶

如果需要极其复杂的自定义交互，可以使用 render_html 工具。该工具运行在隔离的 iframe 中，无法被宿主程序导出图片，且不支持网络访问。

示例配置¶

以下是一个标准的 ECharts 双轴图表 JSON 示例：

{
  "engine": "echarts",
  "title": "2024 年季度营收",
  "mode": "dark",
  "option": {
    "tooltip": { "trigger": "axis" },
    "legend": { "top": 28 },
    "xAxis": { "type": "category", "data": ["Q1", "Q2", "Q3", "Q4"] },
    "yAxis": [
      { "type": "value", "name": "营收 (万元)" },
      { "type": "value", "name": "利润 (万元)" }
    ],
    "series": [
      { "type": "bar", "name": "营收", "data": [120, 180, 150, 210] },
      { "type": "line", "name": "利润", "data": [80, 90, 100, 130] }
    ]
  }
}

总结¶

dsh-artifact 为 DSH 提供了与专业图表工具对等的渲染能力，同时保持了对话界面的连贯性。通过原生引擎和安全的沙箱机制，它适合需要在 AI 对话流中快速生成、交互和导出图表的场景。

GitHub 仓库