在 DeepSeek Harness (DSH) 的 Web 端中直接預覽 Mermaid 流程圖、時序圖等圖表，是開發者目前需要通過插件擴展實現的功能。dsh-mermaid 插件由 MrmoLabs 維護，其核心價值在於將 Markdown 中的 Mermaid fenced code blocks 直接渲染爲 SVG 格式的可視化圖表，並提供代碼與圖表的切換視圖。
該插件內置了 Mermaid 11.17.0 運行時，無需依賴外部 CDN，支持流式響應、暗黑模式、全屏查看（支持縮放、平移、重置及適應窗口）以及 SVG 導出。它採用嚴格的 Mermaid 安全模式，並在渲染失敗時自動回退到源代碼顯示，確保頁面穩定性。
核心功能¶
- 圖表渲染：支持
mermaid、mermaidjs和mmd三種 fenced code block 標記的渲染。 - 交互控制：提供“代碼/圖表”切換按鈕。圖表支持全屏查看，內置縮放、平移、重置及適應窗口功能。
- 導出與本地化：支持將渲染後的 SVG 圖表導出爲獨立文件。界面文本支持簡體中文或英文自動跟隨頁面語言。
- 容錯機制：採用 Mermaid 的
securityLevel: strict模式。若渲染失敗，會自動回退顯示源代碼，並抑制 Mermaid 內置的錯誤 SVG 圖標。 - 性能與安全：渲染通過串行隊列執行，避免阻塞頁面。單個圖表大小限制在 50,000 字符或 2,000 行以內。
安裝與啓用¶
在終端中執行以下命令安裝插件。安裝完成後需要重啓 DSH Web 或刷新頁面。
dsh plugin --profile web add -w dsh-mermaid
如果本地未配置全局 dsh 命令，可以使用 npx 調用：
npx.cmd --yes @deepseek-ai/dsh plugin --profile web add -w dsh-mermaid
典型用法¶
在對話中輸入包含 Mermaid 代碼塊的 Markdown 文本。插件會自動識別並注入渲染控制欄，默認以圖表視圖打開。
```mermaid
flowchart LR
A[Code] --> B[Diagram]
```
注意事項與適用場景¶
- DSH 開發者預覽狀態：DSH 目前處於開發者預覽階段，插件可能與未來版本存在兼容性破壞性變更。
- 安全限制：插件使用 Mermaid 的
securityLevel: strict，這意味着部分非標準的 Mermaid 語法可能會被拒絕渲染。 - 單圖限制：單個圖表如果超過 50,000 字符或 2,000 行，插件將拒絕渲染。
- 開發依賴：插件開發環境需要 Node.js 22.19 或更高版本，但普通用戶安裝不需要此環境。
該插件適合需要在 Web 界面中直觀展示架構圖、流程圖、時序圖等靜態圖表的場景。它增強了技術文檔的可讀性，同時保持了與 DeepSeek Harness Web 現有界面的融合。
