前言¶

在 DeepSeek Harness（DSH）Web 聊天界面中，Markdown 中的圍欄代碼塊通常以純文本形式展示。對於流程圖、時序圖等場景，直接查看代碼或手動截圖效率較低。dsh-web-mermaid 插件解決了這一問題，它能在對話結束後自動將 Mermaid 代碼渲染爲可交互的 SVG 圖表。

插件介紹¶

dsh-web-mermaid 是一個 DeepSeek Harness Web 插件，由 vtxf 維護，基於 MIT 許可證開源。它通過純插件方式運行，無需修改 DSH 核心源碼，主要負責將聊天消息中的 ```mermaid 代碼塊自動轉換爲 SVG 圖表。

安裝與啓用¶

使用 DSH 官方插件命令即可完成安裝：

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

安裝或卸載後，重啓 dsh web 即可生效。

核心功能¶

1. 自動渲染：助手回覆中的 mermaid 圍欄塊在消息結束後自動渲染爲可交互 SVG 圖表（流式傳輸期間不渲染，避免半截圖）。
2. 錯誤處理：若渲染失敗（語法錯誤或資源缺失），插件會保留原始代碼塊，並顯示錯誤信息與「重試」按鈕。語法錯誤不會被渲染成無法關閉的錯誤 SVG。
3. 主題跟隨：切換深淺色主題時，已渲染的圖表會自動重渲染以適配新主題。
4. 零侵入：插件以純插件方式運行，不修改 DSH 核心源碼。
5. 資源定製：若在頁面加載前執行 window.__DSH_MERMAID_ASSET__ = '...'，可覆蓋 mermaid 資源地址（默認爲同源路由）。

使用示例¶

無需任何額外操作，只需讓助手輸出 mermaid 代碼塊，消息結束後圖表即可出現。

```mermaid
graph TD
  A[開始] --> B{判斷}
  B -->|是| C[繼續]
  B -->|否| D[結束]

```

注意事項¶

1. 用戶消息不渲染：DSH 當前對用戶消息的處理邏輯爲純文本（非 Markdown），因此 mermaid 渲染僅對助手消息生效，這是 DSH 的現狀，非本插件缺陷。
2. 流式期間不渲染：圖表僅在消息結束後出現，以避免流式輸出過程中的半截圖問題。
3. 首次加載：首圖渲染需先加載內置的 mermaid.min.js（約 3.4MB），之後由瀏覽器緩存。
4. 離線範圍：離線指 mermaid 運行時（插件內置），但圖表內容若引用外部圖片或鏈接，仍由內容本身決定是否需要網絡。

參考資料¶

• 插件目錄：https://www.skillhub.cn/plugins/vtxf/dsh-web-mermaid
• GitHub 倉庫：https://github.com/vtxf/dsh-web-mermaid