前言¶

DSH Web GUI 中會渲染 Mermaid 圖。查看長圖、檢查細節或把圖複製到文檔時，需要臨時放大、移動和導出。dsh-mermaid-zoom 爲這類圖提供一組瀏覽器端交互增強。

這是什麼¶

dsh-mermaid-zoom 是一個 DSH 插件，維護者爲 evanfang0054，許可證爲 MIT。它面向 DSH Web GUI 中的 Mermaid 圖，在瀏覽器端增加縮放、平移、重置視圖和複製圖片能力，不依賴任何宿主服務。

核心功能¶

• Ctrl/Cmd + 滾輪縮放，不干擾頁面正常滾動。
• 拖拽平移。
• 雙擊重置視圖。
• hover 工具欄：＋ 放大 / － 縮小 / ⟳ 重置。
• 複製圖片：導出 2x 白底 PNG，剪貼板優先，失敗自動下載。
• 使用 MutationObserver 自動接管流式渲染完成的圖。
• 縮放範圍限制爲 0.4x – 10x。

安裝與啓用¶

官方一鍵安裝¶

先在目標 profile 下添加插件：

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

安裝完成後，重啓 dsh web 即生效。如果 dsh 不在 PATH 中，可以通過 npm 臨時調用：

npx -y @deepseek-ai/dsh plugin --profile web add dsh-mermaid-zoom

手動掛載¶

也可以把包安裝到 profile 目錄：

cd ~/.dsh/profiles/web
pnpm add dsh-mermaid-zoom

然後在 cordis.patch.yml 中插入：

- insert:
    - id: dsh-mermaid-zoom
      name: 'dsh-mermaid-zoom'

兩種方式二選一。如果已經使用手動掛載，切換回官方一鍵安裝前，先從 cordis.patch.yml 刪除對應 insert，避免雙掛載。

開發測試¶

開發運行要求 Node >= 20（來自 package.json engines）。克隆倉庫並運行測試：

git clone https://github.com/evanfang0054/dsh-mermaid-zoom.git
cd dsh-mermaid-zoom
npm test

適用場景與注意¶

適合在 DSH Web GUI 中查看 Mermaid 圖，需要臨時放大、平移或導出 2x 白底 PNG 的使用者。插件本身是純瀏覽器端 DOM 增強，不依賴宿主服務；但安裝和加載仍發生在 DSH 環境中，插件會在當前 dsh 進程權限下運行。安裝前建議檢查源碼和 MIT 許可證，只從可信來源安裝。

資源¶

• GitHub：https://github.com/evanfang0054/dsh-mermaid-zoom
• 目錄頁（來自插件線索，建議訪問前核對）：https://www.skillhub.cn/plugins/evanfang0054/dsh-mermaid-zoom