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 倉庫