在 DeepSeek Harness (dsh) 的插件生態中，繪製流程圖或架構圖通常需要頻繁在代碼與視圖間切換。mermaid2aichat-dsh 提供了一個右側可關閉的編輯面板，保持畫布與 Mermaid 代碼的雙向同步，並直接與 Agent 交互。
插件定位¶
這是一個專注於可視化編輯與雙向數據流的瀏覽器插件，由 supergameboy 維護。它通過一個獨立的編輯器窗口，解決需要在反覆調整圖表並反饋給 Agent 的場景問題。
核心功能¶
插件包含以下核心能力：
佈局與界面¶
- 右側面板與全屏：面板可通過側邊欄底部的按鈕切換。畫布支持全屏模式以獲得更多操作空間。
- 自適應佈局：編輯器列插入 Shell 網格後，聊天區域會自動收縮以避免遮擋。拖拽調整寬度範圍在 300-1200px 之間，且聊天區域寬度始終保持 ≥400px。雙擊調整手柄可重置寬度。
- 響應式與暗色模式：在小於 420px 的屏幕下，側邊欄自動隱藏，僅保留畫布。支持獨立的暗色模式。
- 插件共存：與 dsh-web-ui 等其他插件共享網格佈局，無衝突。
編輯器能力¶
- 雙向同步：畫布編輯與 Mermaid 代碼編輯實時同步，提交方式爲失焦或 Ctrl+Enter。
- 圖表類型：支持 flowchart、sequenceDiagram、classDiagram、erDiagram。
- 節點操作：支持節點庫拖拽、連線、屬性面板，以及子圖/命名空間/參與者等專用編輯器。
- 會話隔離與持久化：支持多標籤頁，每個標籤頁獨立管理畫布、代碼和視口，數據持久化到 localStorage。
與 Agent 的交互¶
- 工具通道：註冊了全局工具
mermaid_load。Agent 調用該工具時，圖表會自動作爲新標籤頁導入並打開面板。 - 導入對話：自動掃描會話中的 Mermaid 代碼塊，顯示未讀數量，並提供“從對話導入”功能。
- 發送回對話：編輯完成後，點擊“發送到對話”將代碼塊插入當前會話。
- 命令引用：在輸入框輸入
/，在彈出的菜單中選擇當前會話的標籤頁代碼插入草稿。
安裝與啓用¶
插件以 npm 包形式分發，無需構建步驟。
dsh plugin --profile web add mermaid2aichat-dsh
安裝後必須重啓 dsh web，刷新頁面後，側邊欄底部會出現“Mermaid 編輯器”按鈕。
典型用法¶
- Agent 生成並編輯：告訴 Agent “Draw the flow of XXX as a flowchart and send it to the editor”。Agent 調用
mermaid_load後，在編輯器中調整圖表，點擊“發送到對話”。 - 引用代碼：在輸入框輸入
/，在彈出的菜單中選擇已保存的標籤頁代碼。
適用場景與注意¶
- 適用場景：適用於需要反覆編輯並反饋給 Agent 的流程圖、時序圖、類圖或 ER 圖場景。
- 注意：插件直接與 dsh 通信，不觸碰 dsh 源代碼。它不依賴 MCP、服務器或 VS Code 擴展。與 archify 等一次性生成器互補，後者更適合生成最終展示的 HTML 文檔。
結語¶
該插件通過提供可視化的編輯環境和雙向的 Agent 交互通道，將靜態圖表變成了可迭代的開發工具。更多細節可查看 GitHub 倉庫 或 技能目錄。
