前言¶
在 DeepSeek Harness (DSH) 的 Web 聊天環境中，直接展示流程圖、架構圖或時序圖通常需要依賴外部工具。dsh-mermaid-renderer 插件解決了這一痛點，它通過純前端解析，將聊天流中的 Mermaid 代碼塊自動轉換爲可交互的圖表卡片，無需離開對話窗口即可預覽技術文檔。
插件簡介¶
這是一個由 timedomain1 維護的客戶端 Web 插件。它的核心作用是在 DSH 的聊天界面中解析並渲染 Mermaid 語法，支持多種圖表類型，並提供查看源碼、縮放、全屏等交互功能。
核心功能¶
-
自動渲染
插件會自動檢測聊天中的 Mermaid 代碼塊（以 ```mermaid 開頭），將其渲染爲圖表卡片。 -
支持的圖表類型
支持以下圖表類型的渲染：- flowchart / graph
- sequenceDiagram
- classDiagram
- stateDiagram
- erDiagram
- journey
- gantt
- pie
- mindmap
- timeline
- C4Context
- gitGraph
-
交互操作
- 視圖切換：卡片支持在“圖表”和“源碼”視圖之間切換。
- 縮放：支持重複縮放（0.25x–4x，步數不限），在卡片內滾動滾輪或使用 Ctrl+滾輪可進行縮放。
- 全屏查看：提供全屏獨立查看器，光標爲中心的滾輪縮放範圍（5%–1000%），支持拖拽平移、雙擊適配寬度/100%、ESC 關閉。
- 其他：支持複製源碼、水平滾動超出容器寬度。
-
技術實現
- 懶加載：Mermaid 引擎僅在首次渲染時按需加載，減少初始負擔。
- 零依賴：瀏覽器端無第三方 UI 框架依賴，使用純 DOM 後處理。
- 容錯：渲染失敗時保留源碼視圖並給出重試提示。
安裝與啓用¶
前置條件
* DeepSeek Harness 版本需爲 0.1.0-rc.8 (Web Profile)。
* 環境需啓用 pnpm。
安裝步驟
1. 使用官方插件命令安裝：
dsh plugin --profile web add git+https://github.com/timedomain1/dsh-mermaid-renderer.git
該命令會自動處理 `dsh.bundle.patch`，無需手動下載或構建。
-
安裝完成後，重啓
dsh web並刷新瀏覽器頁面。 -
驗證：在聊天框發送一個 Mermaid 代碼塊，檢查是否自動生成了圖表卡片。
使用示例¶
基本用法
直接在聊天中發送標準的 Markdown Mermaid 代碼塊：
graph TD
A[Start] --> B{Is it working?}
B -- Yes --> C[Great!]
B -- No --> D[Retry]
高級配置
如果需要使用鏡像 CDN 或本地資源，可以通過設置全局變量覆蓋引擎加載地址：
window.__DSH_MERMAID_URL__ = 'https://your-mirror/mermaid.min.js'
注意事項與適用場景¶
- 網絡要求：Mermaid 引擎依賴網絡加載（默認從 CDN 獲取），因此插件在離線環境下無法正常渲染。
- 離線部署：對於離線環境，需將
mermaid.min.js內聯到插件的加載邏輯中（位於lib/client.js）。 - 權限範圍：插件運行在 DSH 進程的 Web Profile 權限內，不會影響系統其他部分。
- 兼容性：該插件無構建步驟，預編譯的 Bundle 即可直接運行。
結語¶
dsh-mermaid-renderer 爲 DSH 用戶提供了一個輕量級、零依賴的圖表渲染方案。對於需要頻繁在對話中確認架構圖、流程圖或時序圖的開發者而言，這是一個實用的工具。更多細節和源碼可查閱插件目錄或 GitHub 倉庫。
