前言¶

DSH 的理念是「一切皆插件」。在 DSH Web 會話裏，如果 agent 返回 Mermaid 代碼塊，常見做法是複製代碼塊到外部 Mermaid 渲染工具查看。dsh-mermaid-image-preview 針對這個步驟做了直接預覽：當聊天消息包含 mermaid fenced code block 時，把圖表渲染成圖片顯示在聊天裏。

它由 baconbao 維護，MIT 許可。這裏介紹的插件屬於社區插件，不等同於官方應用商店；如果從社區目錄瀏覽插件，社區目錄是獨立站點，與 DeepSeek / 幻方無官方從屬關係。

這是什麼¶

baconbao/dsh-mermaid-image-preview 是一個 DeepSeek Harness Plugin，用於在 DSH Web 聊天會話中把 Mermaid 圖表渲染成圖片。

它掛載到 conversation.chat.turnTail（chain slot, additive, never shadows shipped UI）。渲染策略是 local renderer first；如果關閉本地渲染，或本地渲染失敗後啓用了 fallback，就可以使用 external or self-hosted rendering engine。插件支持 14 diagram types out of the box。

核心功能¶

• 在 DSH Web 聊天消息包含 mermaid fenced code block 時，將 Mermaid 語法渲染成圖片預覽。
• 本地渲染優先；可配置外部或自建渲染服務作爲 fallback。
• 在 UI setting card 中調整 runtime settings，無需重啓。
• 掛載點爲 conversation.chat.turnTail，chain slot、additive、never shadows shipped UI。
• 圖表以縮略圖顯示；點擊原地放大，再次點擊縮小。
• Light/dark themes 跟隨 UI 自動切換。
• 支持 14 diagram types out of the box。

安裝與啓用¶

下面先安裝，再重啓，再觸發預覽。

1、安裝最新 release：

npx @deepseek-ai/dsh plugin --profile web add github:baconbao/dsh-mermaid-image-preview#latest

2、安裝完成後，重啓 dsh web。

3、在 DSH Web 會話中讓 agent 輸出一段 Mermaid 圖表，例如：

graph TD
  A[Start] --> B{Success?}
  B -->|Yes| C[Done]
  B -->|No| D[Retry]

經過上面的步驟，聊天消息中的 Mermaid fenced code block 會作爲圖片預覽出現。

需要注意，v0.2.0 起 plugin/package id 從 dsh-mermaid-image-preview 變爲 @baconbao/dsh-mermaid-image-preview。

配置渲染 fallback¶

默認情況下，enableLocalRender 爲 true，使用本地渲染。如果要使用外部渲染服務或自建渲染服務，編輯 profile 的 cordis.patch.yml，配置 id 爲 ui-dsh-mermaid-image-preview：

- id: ui-dsh-mermaid-image-preview
  config:
    enableLocalRender: true
    fallbackRenderUrl: https://mermaid.ink
    enableFallback: false

配置項如下：

• enableLocalRender：默認爲 true。設爲 false 時，總是使用 fallback server，並且 enableFallback 會被忽略。
• fallbackRenderUrl：fallback render server，默認爲 https://mermaid.ink。
• enableFallback：本地渲染失敗時使用 fallback server，默認爲 false。

修改這些 profile patch 設置後，需要重啓 dsh web。如果只是調整插件 runtime settings，也可以在 UI setting card 中操作，無需重啓。

適用場景與注意¶

適合在 DSH Web 中頻繁查看 Mermaid 圖、希望減少複製代碼到外部渲染工具步驟的開發者。

安裝前需要檢查插件源碼和許可證；本插件許可證爲 MIT。插件會在當前 dsh 進程權限下運行，因此不建議直接安裝未審查的插件。若配置 fallback 服務，也需要確認 fallbackRenderUrl 指向可信服務。

結尾¶

dsh-mermaid-image-preview 的價值在於把 Mermaid 代碼塊從“需要離開聊天覆制渲染”變成“聊天內直接預覽”，同時保留本地渲染優先和外部 fallback 的切換能力。

已覈實的 GitHub 倉庫地址：

https://github.com/baconbao/dsh-mermaid-image-preview