在 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 仓库 或 技能目录。
