supergameboy/mermaid2aichat-dsh

mermaid2aichat-dsh

Mermaid 可视化编辑器 —— 一个 DeepSeek Harness（dsh）浏览器插件。
一个可关闭的右侧面板，让画布与 Mermaid 代码保持同步，并可直接与智能体协作。

· GitHub · npm

screenshot

支持四种图表类型：flowchart、sequenceDiagram、classDiagram、erDiagram。
编辑器 UI 是核心 —— 无 MCP、无服务器、无 VS Code 扩展；插件直接与 dsh 通信，不触碰任何 dsh 源码。

功能特性

面板与布局

- 从侧边栏底部的“Mermaid 编辑器”按钮切换；当画布需要更多空间时可页内全屏（⧉）
- 聊天区域让位 + 宽度可调：一个 DOM 布局控制器向 shell 网格追加一个编辑器列 —— 聊天区自动收缩，绝不会被遮挡；拖动把手可调整大小（300–1200px，聊天区始终保留 ≥400px），双击可重置
- 与 dsh 侧边栏、会话详情列以及 dsh-web-ui 的右侧面板共存（参见“共存协议”）
- 响应式紧凑模式：低于 420px 时侧边面板隐藏，仅保留画布；“▥ 紧凑”可手动切换
- 独立的深色模式（标题栏切换，仅作用于面板范围）

编辑器

- 可视化画布与 Mermaid 代码之间双向同步（画布编辑 → 代码；代码编辑 → 画布，在失焦或 Ctrl+Enter 时提交）
- 图表类型切换器位于代码区域（flowchart / sequenceDiagram / classDiagram / erDiagram），带确认对话框，另有 flowchart 方向（TB/TD/BT/RL/LR）与连接模式（按方向/就近）选择器以及复制到剪贴板按钮
- 节点库拖放、连接、属性面板，以及针对 subgraph / namespace / entity / participant 的专用编辑器
- 会话隔离 + 多标签页：面板跟随当前会话，标签页按会话存储；可创建 / 切换 / 关闭（确认对话框）/ 双击重命名 / 拖动排序；每个标签页拥有自己的画布、代码与视口
- 画布与代码持久化到 localStorage，刷新后恢复

与智能体协作（双向 Mermaid 传输）

- AI → 编辑器：注册模型工具 mermaid_load（宿主全局层，无需更改预设）—— 当 AI 调用它时，图表会自动导入为新标签页，并打开面板展示
- 对话 → 编辑器：扫描当前会话中的 - 编辑器 → 对话：“发送到对话”将当前活动标签页的代码发送到当前会话
- 输入框引用：输入 /，“mermaid”分组会列出当前会话的标签页 —— 选择其中一个即可将其代码块插入草稿

安装

方式一：npm（推荐）
sh
dsh plugin --profile web add mermaid2aichat-dsh

方式二：GitHub
sh
dsh plugin --profile web add github:supergameboy/mermaid2aichat-dsh

方案三：本地目录（开发）

dsh plugin --profile web add

lib/ 构建产物已提交，因此 git/npm 安装无需构建步骤即可使用。
如果 pnpm 阻止了构建，请在 $DSH_HOME/profiles/web/pnpm-workspace.yaml 中允许该包
（allowBuilds），或使用方案一。

安装后，重启 dsh web（mermaid_load 工具在宿主启动时注册），然后刷新页面——“Mermaid 编辑器”按钮会出现在侧边栏底部。

推荐配置：与 archify 和 dsh-web-ui 协同工作

定位

mermaid2aichat-dsh 的价值不在于“又多了一个图表工具”——它把图表变成了一个可编辑、可回馈给智能体的闭环：

AI 分析 / 绘图 ──mermaid_load──▶ 编辑器（可编辑）──发送到对话──▶ AI 继续
用户绘图 / 编辑 ──编辑器──▶ Mermaid 代码 ──发送到对话──▶ AI 分析 / 按图实现

像 archify 这样的一次性生成器负责“分析 + 精美 HTML 产物”这一端；本插件负责“Mermaid 工作台 + 双向智能体回馈”这一端。两者互补，互不重叠。

推荐安装

本插件（npm）
dsh plugin --profile web add mermaid2aichat-dsh

dsh-web-ui 系列（右侧文件树 / 预览 / 任务看板，在同一网格上共存）
dsh plugin --profile web add @linxin666/dsh-web-ui-all

archify：一个智能体技能（Claude Code / npx skills——见其 README）
npx skills add tt-a1i/archify -g

如何与它们协同工作

- 需要一个你会持续编辑并回馈给智能体的图表（flowchart / sequenceDiagram / classDiagram / erDiagram）？让智能体调用 mermaid_load 加载到本编辑器中，调整后再“发送到对话”。
- 需要一个一次性精美产物（架构 / 数据流 / 生命周期，用于文档 / PR / README）？让智能体用 archify 生成一个自包含的 HTML。
- 两者可以在同一会话中共存：dsh-web-ui 的右侧面板与本插件的编辑器列通过共存协议共享外壳网格。

相关项目

- archify —— 智能体技能：用自然语言生成精美、自包含的 HTML 技术图表
- dsh-web-ui —— 一系列 dsh 插件（右侧文件树 / 预览、任务看板等）

与智能体协同工作

告诉智能体：

把 XXX 的流程画成 flowchart 并发送到编辑器。

智能体会调用 mermaid_load，图表会出现在一个新的编辑器标签页中（面板自动打开）。在编辑器中调整后，点击“发送到对话”将更新后的代码发回；或者在输入框中输入 / 来引用任意标签页的代码块。

架构

一个 npm 包扮演三种角色：

1. bundle（补丁层）：dsh.bundle.patch → cordis.patch.yml 将插件注册为一行 dsh.client；
2. 宿主插件（Node 侧）：注册模型工具 mermaid_load（全局层，对每个会话的 agent 可见）；
3. 客户端插件（浏览器侧）：注册启动器（sidebar.footer.action）、面板入口（shell.overlay）、输入触发器（inputTriggers）以及 DOM 布局控制器（client/layout.ts）。

数据流（无 MCP，无服务器）：

canvas ──onCanvasChange──▶ state.ts (localStorage, per-session)
state ──「发送到对话」──▶ SessionFace.prompt('queue')
mermaid_load tool ──result──▶ blocks source ──▶ auto-import
session ──blocks source──▶「从对话导入」──▶ new tab
input '/' ──trigger「mermaid」──▶ current-session tabs ──▶ insert code block

src/
index.ts              host half (registers the mermaid_load tool)
client/               dsh plugin (state, panel, launcher, trigger, block scan, layout controller)
editor/               editor UI (canvas, node library, property panel, code editor)
serializer/           parser/serializer (jison parsers + serializers for the 4 types)
cordis.patch.yml        bundle patch layer
lib/                    build artifacts (committed; installs work out of the box)

编辑器和序列化器被打包进 lib/client.js（内联了 @xyflow/react、dagre-cluster-fix、js-yaml；react 及其相关依赖来自 dsh shell 的模块表）。

布局与共存协议（无需修改 dsh）

编辑器列是布局控制器在 DOM 层面追加的一个 grid 轨道：它镜像 shell 的内联 grid-template-columns（兼容 2/3 轨道），并追加自己的轨道，与侧边栏、聊天和详情列完全解耦——不依赖 ctx.layout，不遮蔽插槽，也不要求宿主版本。

dsh-web-ui（aionui-panel）对其文件树/预览面板使用了相同的技术。当检测到它们的列时，控制器会切换到协作协议：它写入 6 个轨道（shell 3 个 + 编辑器 + 它们的预览 + 它们的文件树），将编辑器列保持在它们的列之前，在它们写入 5 轨道的同一帧内重新追加，用一次仅含 shell 3 轨道的写入进行微调，以便在它们的 HMR/延迟挂载后收敛，并带有写入突发防护，使观察者级联永远不会冻结页面。两个面板并排显示。

开发

pnpm install      # install dependencies
pnpm run build    # builds lib/index.js (host) + lib/client.js (browser)
pnpm run typecheck
pnpm run watch    # tsdown watch rebuild

修改源码后，重新运行 pnpm run build；宿主侧更改（工具注册）需要重启 dsh web，浏览器侧更改只需刷新页面。

已知限制

- 仅支持 flowchart / sequenceDiagram / classDiagram / erDiagram；解析其他类型会报告“不支持”
- “从对话导入”仅扫描当前会话的已加载消息窗口；更早的页面需要先滚动到视图中
- 客户端包体积较大（内联了 React Flow 和所有编辑器依赖）；首次打开面板时才会获取
- / 输入触发会用代码块替换草稿（setDraft 语义），且无法追加到现有草稿文本
- 编辑器列宽仅在拖拽结束、双击重置和窗口调整大小时持久化；侧边栏/详情面板的切换仅影响当前显示宽度，绝不会影响偏好设置（与 dsh 自身的布局偏好语义一致）

致谢

DOM 布局控制器（镜像 shell 的网格、追加自己的列轨道，并绘制自定义拖拽手柄）的灵感来自 dsh-web-ui 中的 aionui-panel 包。感谢其作者分享这一方法——本插件的共存协议正是围绕该行为构建的，以便两者能在同一 GUI 中并行运行。

许可证

MIT