前言¶
在 DeepSeek Harness（DSH）裏讓模型「畫圖」，常見做法是輸出 Markdown 代碼塊或寫文件：內容會進對話上下文，幾張 SVG 源碼就足以佔滿窗口，模型還容易開始複述代碼。DSH 生態按「一切皆插件」擴展能力；社區插件目錄在獨立站點維護，與 DeepSeek / 幻方無官方從屬關係。下面介紹維護者 tonebean 的客戶端插件 dsh-inline-visualizer（npm：dsh-inline-visualizer@2.0.2，MIT），它把內聯可視化拆成兩個內置工具：先加載設計契約，再就地渲染卡片，圖走 UI 旁路，不進模型上下文。
這是什麼¶
dsh-inline-visualizer 是 DSH 的 Inline visualizer：在對話內就地渲染 SVG 或經沙箱隔離的 HTML 卡片。純 JavaScript，無構建步驟、無第三方運行時依賴；Host 側使用宿主提供的 @deepseek-ai/dsh-tools，瀏覽器側只從宿主模塊表取 react。
適用 DSH 0.2.1-rc.5（engines.dsh: >=0.2.1-rc.5 <0.3.0）。不安裝時，圖只能以代碼塊或文件形式出現；安裝後卡片直接在對話裏渲染，可交互、可下載，並跟隨主題。
- 目錄頁：https://www.skillhub.cn/plugins/tonebean/dsh-inline-visualizer
- 源碼與文檔：https://github.com/tonebean/dsh-inline-visualizer
核心功能¶
兩個工具¶
| 工具 | 參數 | 作用 |
|---|---|---|
widget_guidelines |
modules: ('diagram'\|'chart'\|'mockup'\|'interactive'\|'art')[] |
返回設計契約（令牌、排版、間距、硬約束 + 所選模塊） |
show_widget |
title, widget_code, loading_messages |
就地渲染一張卡片；工具返回值只是一句極短 ack，不含片段內容 |
widget_code 爲裸 <svg …>…</svg>（首選）或一段 HTML 片段。模型可先調用 widget_guidelines 弄清配色與模塊約束，再調用 show_widget 提交代碼。
設計契約與主題¶
內置設計契約：8 色系 × 6 級色階、語義令牌、排版與硬約束，按模塊（diagram / chart / mockup / interactive / art）按需加載；模型不必猜配色。主題只讀文檔化入口 ctx.theme 與 --dsw-alias-*，切換深淺色時卡片重算配色。
兩條渲染路徑¶
- SVG：白名單清洗後轉
data:URI，用<img>展示；矢量清晰，不執行腳本。 - HTML：
sandbox="allow-scripts"的不透明源 iframe，帶default-src 'none'的 CSP；能交互但讀不到宿主。
界面與元數據¶
locale/{en,zh}.json 提供 meta.title / meta.description 與運行期詞條；icon.svg 隨包發佈。倉庫 README 稱含 197 項自測，啓用真實 dsh-tools 的 Part C 後共 205 項。
它不做什麼¶
- 不做流式逐字渲染：圖在工具調用完成後一次出現。
- 不做光柵化：輸出始終是矢量 SVG，不轉 PNG。
- 不解析 Mermaid；不內置圖表庫（圖表由模型手寫原生 SVG）。
安裝與啓用¶
包已發佈到 npm（dsh-inline-visualizer@2.0.2）。在 DSH 裏用插件管理器安裝（推薦）：
plugin_manager { action: "install_bundle", target: "dsh-inline-visualizer" }
該操作需要 danger-full-access 審批；target 傳 pnpm 可識別的安裝 spec——包名（從 npm 安裝）或本地目錄的絕對路徑均可。
手工裝（僅開發時）：把包放進 $DSH_HOME/profiles/<profile>/node_modules/dsh-inline-visualizer（例如 ~/.dsh/profiles/desktop/node_modules/dsh-inline-visualizer），並在該 profile 的 cordis.patch.yml 追加：
- insert:
- id: visualizer
name: 'dsh-inline-visualizer'
安裝新包可經 HMR 生效；替換已安裝的包必須重啓才能加載新的 JS 代碼。
可選配置¶
- id: visualizer
name: 'dsh-inline-visualizer'
config:
maxCodeChars: 200000 # 單張圖上限，1000 ~ 1000000
典型用法¶
經過上面的安裝步驟後，對話中的模型可按以下順序使用（流程來自 README 設計，非虛構案例）：
- 調用
widget_guidelines，在modules裏傳入需要的模塊，例如['diagram', 'chart']，拿到設計契約文本。 - 按契約生成
widget_code（SVG 或 HTML 片段）。 - 調用
show_widget，傳入title、widget_code，可選loading_messages；界面在對話內渲染卡片，工具返回僅爲 ack。
適用場景與注意¶
適合誰：需要在 DSH 對話裏直接看到示意圖、簡易圖表、mockup 或輕量交互卡片，且希望 SVG/HTML 源碼不灌回模型上下文的開發者。
權限與安全：插件在當前 DSH 進程權限下運行；安裝前建議閱讀源碼與 MIT 許可證。README 寫明：SVG 淨化爲正則級，mXSS、實體編碼繞過不在覆蓋範圍內；HTML 分支依賴 CSP 與 sandbox。沒有真實瀏覽器 E2E，部分邊界需在真實宿主中自行驗證。
依賴：Node >=20；peer 依賴 @deepseek-ai/dsh-tools（optional meta，測試與 schema 編譯會用到）。
結尾¶
dsh-inline-visualizer 用 widget_guidelines + show_widget 把「說清怎麼畫」和「在對話裏畫出來」分開，產物不進模型上下文，SVG 與 HTML 分路徑處理風險。若要安裝或查變更記錄，見 npm 包 dsh-inline-visualizer@2.0.2、GitHub 倉庫 與 SkillHub 目錄頁。
