前言¶
在 DeepSeek Harness（DSH）裏和模型對話時，架構說明、流程梳理、時序關係往往以 Markdown 裏的 ```mermaid 代碼塊形式出現。Harness 默認只會把這些塊當普通代碼展示，讀者需要自己複製到外部編輯器或在線工具才能看圖。若希望「模型照舊輸出 Mermaid、界面裏直接變成圖」，且不想依賴額外服務端，就需要在客戶端側做增強。下面介紹社區插件 dsh-flowchart（維護者 jesongit，分類：客戶端），它把聊天中的 Mermaid 塊就地渲染爲可縮放、可導出、可全屏的交互式圖表。
這是什麼¶
dsh-flowchart 是 DeepSeek Harness 的客戶端插件：自動識別對話裏的 Mermaid 代碼塊（歷史消息與新消息均生效），在瀏覽器本地渲染成圖表。渲染與 Mermaid 引擎均在本機完成，不聯網、不上傳內容。插件當前版本爲 1.0.2（見倉庫 package.json），許可證 MIT。
核心功能¶
依據倉庫 README，能力包括：
- 自動渲染：識別
```mermaid圍欄，就地替換爲圖表視圖；渲染失敗時降級爲原始代碼塊，不影響其它消息。 - 工具欄：放大、縮小、適應頁面、複製圖片、下載 SVG、全屏、源碼切換。
- 複製圖片：圖表視圖下以 2× 分辨率導出 PNG 到剪貼板，可粘貼到 QQ、微信等；源碼視圖下複製 Mermaid 源碼。
- 全屏：滾輪以鼠標位置爲中心縮放，左鍵拖動平移，
Esc退出。 - 主題：跟隨 Harness 明/暗主題自動重渲染。
- 體積與加載：Mermaid 引擎（約 1MB gzip）獨立分塊懶加載，首次出現圖表時才下載；基礎插件體積較小。
支持的圖種（Mermaid 11 主流類型）：流程圖、時序圖、類圖、狀態圖、ER 圖、甘特圖、餅圖、Journey、Git 圖、思維導圖、時間線、象限圖、Sankey、xychart、block、C4 等。
安裝與啓用¶
前提：已安裝 DeepSeek Harness，且啓用插件管理器。
從 GitHub 安裝（README 原文命令）：
dsh plugin add github:jesongit/dsh-flowchart
README 說明：目前未發佈到 npm；發佈後可使用 dsh plugin add dsh-flowchart。本地開發時可用 dsh plugin add ./dsh-flowchart（需自行 clone 倉庫，本文不展開）。
安裝後在 設置 → 插件 中應能看到「Mermaid 圖表 / Mermaid Diagrams」。首次對話裏出現 Mermaid 塊時會自動加載 Mermaid 引擎。
DSH 生態採用「一切皆插件」思路；插件目錄站點 skillhub.cn 爲社區收錄，與 DeepSeek / 幻方無官方從屬關係。
典型用法¶
無需改模型提示詞習慣，在消息裏發送標準 Mermaid 圍欄即可。示例（來自 README）：
```mermaid
flowchart LR
A[提問] --> B{是否 Mermaid}
B -->|是| C[渲染成圖]
B -->|否| D[普通代碼塊]
```
發送後，插件會在已渲染的對話 DOM 上增強對應代碼塊；若未來 Harness 的 DOM 結構變化導致匹配失敗，會保持原始代碼塊顯示。
適用場景與注意¶
適合：在 DSH 內做方案評審、寫技術文檔式對話、讓 Agent 輸出流程圖/時序圖/類圖等並直接在界面閱讀與分享 PNG/SVG 的場景。
實現與限制（README 說明）：
- Harness 的 Markdown 渲染器沒有代碼圍欄的插件鉤子，本插件通過觀察已渲染 DOM 增強代碼塊，對 DOM 變更有耦合。
- 超寬或超大圖會等比縮小以適應一屏；細節可用放大或全屏查看。
- 插件以當前 dsh 進程權限 在客戶端 Web 環境運行；安裝前建議閱讀 GitHub 源碼 與 LICENSE，內置 Mermaid 的第三方許可見倉庫
THIRD-PARTY-NOTICES。
結尾¶
dsh-flowchart 把 Mermaid 留在對話流裏完成渲染與交互，避免「代碼塊 + 外部看圖」的斷裂。需要安裝命令、圖種列表與行爲細節時，以倉庫 README 爲準。
