dsh-mermaid-smooth：DeepSeek Harness 默認渲染 Mermaid 圍欄

前言¶

DeepSeek Harness (DSH) 的 web UI 提供了插件化擴展能力。當對話內容中包含 Mermaid 圖表代碼時，通常只以純文本圍欄形式展示。dsh-mermaid-smooth 插件將這一行爲修改爲默認渲染爲 SVG 圖表，並提供了絲滑的縮放、平移與切換功能。

是什麼¶

這是一個插件，由用戶 gitByteFree 維護。它通過將 Mermaid 渲染引擎打包進插件（零 CDN），實現了在 DSH Web 聊天界面中直接查看、交互圖表的能力。

核心功能¶

1. 默認渲染爲 SVG：助手消息中的 Mermaid 圍欄在內容生成完成後，會自動渲染爲 SVG 圖表。非 Mermaid 的代碼圍欄不受影響。
2. 絲滑交互：支持光標錨定的滾輪縮放，以及直接拖拽平移。雙擊圖表可自動適應視圖。若系統開啓“減少動畫”偏好，所有緩動效果會被禁用。
3. 獨立切換與記憶：每個圖表卡片右上角有“圖/文案”切換開關。開關狀態會持久化存儲在 localStorage 中，刷新頁面或重新連接後，每個圍欄的顯示模式會保持上次的設置。
4. 主題跟隨與安全：圖表會跟隨 GUI 的暗黑模式或明亮模式自動重繪。Mermaid 運行在 strict 安全級別，內置了清理腳本，且不包含任何點擊處理程序。引擎完全本地打包，離線可用。

安裝與啓用¶

安裝前請確保 DSH CLI 和 Web 環境已安裝並運行。

1. 使用 npm 包（推薦）

執行以下命令添加插件：

dsh plugin --profile web add dsh-mermaid-smooth

安裝完成後，需要重啓 DSH Web（dsh web 或相關服務），插件纔會生效。

2. 其他安裝方式

• 從 GitHub 安裝（鎖定版本）：

    dsh plugin --profile web add 'github:gitByteFree/dsh-mermaid-smooth#<full-commit-sha>'

• 從本地目錄安裝：

    git clone git@github.com:gitByteFree/dsh-mermaid-smooth.git
    cd dsh-mermaid-smooth
    dsh plugin --profile web add .

典型用法¶

1. 在 DSH 聊天中輸入一段 Mermaid 代碼圍欄（例如流程圖或序列圖）。
2. 等待助手消息生成完成，圍欄會自動轉換爲圖表。
3. 縮放/平移：使用鼠標滾輪縮放，按住鼠標左鍵拖拽移動。
4. 適應視圖：雙擊圖表區域，將其縮放至適應屏幕大小。
5. 切換模式：點擊圖表卡片右上角的開關，可獨立查看 SVG 圖或原始代碼。同一消息中的多個圍欄可獨立切換。

注意事項¶

• 安全性：由於使用了內置的嚴格安全級別，插件不會執行任何外部代碼。
• 兼容性：非 Mermaid 類型的代碼塊不會被渲染，保持原樣。
• 卸載：卸載該插件不會刪除已渲染的圖表，也不會破壞對話歷史，系統會恢復到渲染前的狀態。

總結¶

dsh-mermaid-smooth 解決了在 DSH Web 界面中查看 Mermaid 圖表交互體驗差的問題。它通過本地化引擎、主題跟隨和狀態記憶，提供了穩定且直觀的圖表查看方案。

• GitHub: https://github.com/gitByteFree/dsh-mermaid-smooth
• 目錄: https://www.skillhub.cn/plugins/gitByteFree/dsh-mermaid-smooth