前言¶

在 DeepSeek Harness (DSH) 中，.mmd 文件通常以純文本形式展示，聊天消息裏的 ```mermaid 代碼塊也只顯示語法高亮，缺少直觀的圖表預覽。這在使用 Mermaid 繪製架構圖或流程圖時，需要頻繁在編輯器和外部工具間切換。

dsh-plugin-mermaid-preview 插件接管了 DSH 客戶端中這兩個位置的渲染邏輯，將文本圖表轉換爲可視化的矢量圖。

插件介紹¶

這是一個爲 DeepSeek Harness 客戶端開發的預覽插件，由 huiyeo 維護。它通過擴展點註冊文件預覽和 Markdown 代碼塊渲染，利用 Mermaid 11 在本地瀏覽器中生成圖表。

插件通過以下方式實現圖表渲染：

文件預覽：註冊了 .mmd 和 .mermaid 文件的後綴，在右側文檔查看器中直接展示圖表。
聊天代碼塊：註冊 mermaid 語言到 Markdown fence registry，使聊天消息中的代碼塊渲染爲圖表。
渲染引擎：內置 Mermaid 11，支持 flowchart、sequence、class、state、entity-relationship、gantt、pie、git graph、mindmap、timeline、quadrant、requirement、sankey、block、architecture 等多種圖表類型。
主題跟隨：渲染邏輯會採樣 DSH 的淺色/深色主題，並在主題切換時自動重新渲染。
縮放控制：支持按視圖縮放（使用控件或 Ctrl/Cmd + 滾輪），縮放比例記憶在每個預覽標籤頁中獨立保存。
流式傳輸處理：在聊天中，當代碼塊內容仍在流式傳輸時，會保持顯示源碼，等待傳輸完成後再渲染，避免出現殘缺的圖表。
錯誤處理：如果圖表解析失敗，會顯示源碼和具體的錯誤信息，不會隱藏內容。

安裝該插件需要 DSH 的 web profile (@deepseek-ai/dsh-web-app)。

執行以下命令安裝：

dsh plugin --profile web add dsh-plugin-mermaid-preview

安裝完成後，需要重啓 dsh web 進程以使插件生效。

Profile 依賴：插件依賴 DSH 的 web profile，需要 @deepseek-ai/dsh-client-ui-sidebar-documentpreview 服務已掛載。
聊天代碼塊依賴：聊天中的 Mermaid 代碼塊渲染需要 Harness 提供 ui-primitives 的 registeredFences 接口。在舊版本的 Harness 中，代碼塊可能僅顯示爲普通的代碼塊，插件會記錄日誌提示，不會導致功能失效。
縮放精度：爲了防止渲染模糊，縮放必須對齊設備像素網格。插件在計算 SVG 大小時，確保 width * devicePixelRatio 爲整數。
重啓生效：修改配置或安裝後，必須重啓 dsh web 進程才能加載新的插件層。

該插件解決了 DSH 環境下 Mermaid 圖表預覽的需求，統一了文檔側邊欄和聊天消息中的渲染表現。你可以通過 GitHub 或社區目錄獲取源碼。