DeepSeek Harness 採用了「一切皆插件」的架構。在 Web UI 中直接渲染 Markdown 中的 Mermaid 圖表曾是難點。dsh-mermaid-web 插件解決了這個問題，將圍欄代碼塊轉換爲可交互的 SVG 圖表。
插件定位¶
這是一個 DeepSeek Harness Web UI 插件，由開發者 terrywangcode 維護。它將標記爲 mermaid 的圍欄代碼塊渲染爲 Mermaid.js SVG 圖表，並提供了縮放控制與全屏工作區。
核心功能¶
- 圖表渲染：識別 Markdown 中的
mermaid代碼塊並渲染爲 SVG。 - 縮放控制：提供鍵盤控制的縮放功能，支持 25% 步進，縮放範圍限制在 50% 到 300%。
- 全屏工作區：提供全屏工作區，支持適應屏幕、指針居中縮放、拖拽平移、快捷鍵（F/0/+/-）及 ESC 關閉。
- 熱模塊替換（HMR）：支持熱模塊替換，更新插件時無需刷新頁面，且能正確清理舊狀態。
安裝與啓用¶
在 DeepSeek Harness 的代碼倉庫根目錄下執行以下命令：
pnpm dsh plugin --profile web add github:terrywangcode/dsh-mermaid-web
pnpm dsh --profile web web
插件構建了瀏覽器 Bundle，因此從 GitHub 安裝無需消費者側進行插件構建。若需安裝特定版本，可在倉庫地址後添加 #v0.1.0。
典型用法¶
在 Markdown 文檔中使用圍欄代碼塊標記 Mermaid 語法：
```mermaid
flowchart LR
Prompt --> Agent --> Tool
```
啓動 Web UI 後，系統會自動識別並渲染這些代碼塊。渲染成功後，原始代碼塊會被隱藏並顯示生成的 SVG 圖表。
工作原理與限制¶
- 依賴 DOM 結構：當前 Harness 未暴露 Markdown 圍欄渲染器槽位，因此該插件依賴 DOM 結構（
.md-code-block），通過觀察 settled 的元素來工作。 - 嚴格安全模式：Mermaid 運行在嚴格安全模式下，禁用了 HTML 流程圖標籤。
- 錯誤處理：如果解析失敗，原始代碼將保留在頁面上，並顯示緊湊的錯誤信息。
- 環境要求：依賴 Node.js 22 或更新版本。
總結¶
dsh-mermaid-web 通過 Web UI 插件的形式，解決了 DeepSeek Harness 中直接渲染 Mermaid 圖表的需求。它提供了全屏工作區與縮放功能，適合需要在 Web 界面中直接展示架構圖、流程圖等場景的開發者。
