前言¶

在 DSH Web 聊天裏，模型有時會用 Mermaid 代碼塊描述流程、時序、狀態、ER 圖、甘特圖和餅圖等內容。代碼塊本身能保留結構，但直接閱讀源碼不如圖形直觀。dsh-web-mermaid 是一個 DSH Web 插件，用於把聊天裏的 Mermaid 代碼塊離線渲染成 SVG 流程圖，並保留代碼視圖和查看操作。

這是什麼¶

dsh-web-mermaid 由 demo007x 維護，許可證爲 MIT。它把 DSH Web 聊天消息中的 Mermaid 代碼塊渲染成 SVG 圖，默認展示圖片視圖，也可以切迴帶語法高亮的源碼視圖。

核心功能¶

• 離線渲染 Mermaid 代碼塊爲 SVG 流程圖
• mermaid 運行時內置，不依賴在線 CDN
• 點擊圖片可放大、縮放，支持鼠標左鍵拖拽平移
• 代碼視圖和圖片視圖可切換
• 內置輕量 tokenizer，爲 Mermaid 源碼提供語法高亮
• 跟隨 DSH 淺色 / 深色主題自動重渲染
• 支持 flowchart、sequenceDiagram、classDiagram、stateDiagram、erDiagram、gantt、pie 等 Mermaid 11 圖表類型

安裝與啓用¶

1、通過 dsh plugin 安裝到 web profile：

dsh plugin --profile web add github:demo007x/dsh-web-mermaid

2、安裝後重啓 dsh web 生效：

dsh web

典型用法¶

在聊天裏直接寫 Mermaid 代碼塊，插件會把代碼塊渲染成流程圖。例如：

```mermaid
flowchart TD
    A[開始] --> B{是否通過?}
    B -- 是 --> C[結束]
    B -- 否 --> D[重試]
    D --> B
```

渲染後可以進行以下操作：

1、默認展示圖片視圖。

2、點擊圖片或放大按鈕，打開遮罩彈窗；可以使用按鈕縮放，並用鼠標左鍵拖拽平移。

3、切換到代碼視圖，查看帶語法高亮的 Mermaid 源碼；複製按鈕仍然可用。

使用注意¶

• 渲染髮生在客戶端瀏覽器內，大圖可能佔用一定內存。
• 如果 Mermaid 源碼無法渲染，插件會保留源碼並顯示一行渲染失敗提示。
• 切換 DSH 淺色 / 深色主題時，頁面內已渲染的圖會重新生成。
• SVG 以 inline 方式注入，節點點擊等交互事件默認未綁定。
• 插件會以當前 dsh 進程權限運行，安裝前建議檢查源碼、依賴和許可證。本文已覈實許可證爲 MIT。

鏈接¶

已覈實資料未給出目錄頁 URL。GitHub 倉庫爲：

https://github.com/demo007x/dsh-web-mermaid