加载流程图
粘贴 Mermaid 流程图代码、拖入文件，或加载示例。
或把文件拖到页面任意位置 · 支持格式：.mmd、.mermaid、.md、.txt
不会改写你没有动过的部分的结构编辑器
这个工具读取 Mermaid 流程图语法（mermaid.live 和许多文档工具使用的 graph / flowchart 语法），让你通过检查器面板增删节点和连线、修改标签或形状、把节点移入或移出 subgraph 分组、更改整体方向，然后把结果导出为代码。
加载的源码按行逐一记录。没有编辑过的行会原样输出，连换行符都不变。注释、样式指令，以及本工具尚未支持的语法（连续箭头、分号分隔的复合语句、非 ASCII 节点 ID 等）都会原样保留，不会被自动重新格式化或悄悄丢弃。
它不用于从零绘制图形或导出图片 — 如果你只需要「输入代码、实时看 SVG 预览、导出 SVG/PNG」这种简单工具,请看姊妹工具 draw-flowchart。这个工具专门用于通过 GUI 重新组织已有流程图的代码结构,再拿回干净的代码。
为什么你的流程图不会离开你的设备
这里的隐私保护是结构性的,不是一句承诺。因为根本没有可以上传的服务器:
- 解析、编辑和预览渲染全部在你的浏览器里完成。
- 这个页面以静态文件形式提供,不会发出携带你流程图内容的请求。
- 没有会把图表编码进 URL 的分享链接功能。
- 源代码是公开的,任何人都可以查看(MIT 许可)。
- 可以离线使用 — 这也正是因为没有任何数据离开设备。
如果你想亲自确认,可以在编辑时打开浏览器的网络(Network)面板 — 不会有任何请求携带你的流程图内容。 查看源代码。
使用方法
-
加载流程图
粘贴 Mermaid 流程图代码,拖入 .mmd / .mermaid / .md / .txt 文件,或点击"加载示例"。直接粘贴 AI 聊天的回复也可以,系统会自动提取 ```mermaid 代码块中的内容。
-
编辑结构
从列表中选择节点或连线(如果映射可用,也可以直接点击预览图中的元素),编辑其标签、形状或连接关系。也可以从工具栏添加节点和连线、调整节点所属的 subgraph 分组、更改整体方向。
-
查看结果
预览图和代码栏都会实时更新。如果某一行无法解析,编辑操作会暂停并显示出错的位置,同时保留最后一次成功的预览,你可以直接在代码栏中修正。
-
导出代码
可以复制代码、复制为带 ```mermaid 标记的代码块、下载 .mmd 文件,也可以用"复制给 AI"一键生成 before/after 格式的修改指令(见下文)。
常见问题
我的流程图会被上传到某个地方吗?
不会。解析、编辑和渲染全部在你的浏览器中完成。没有服务器端处理,也没有分享链接功能,所以流程图内容根本没有离开设备的途径。
"未修改的行逐字节保留"具体是什么意思?
如果你加载一个文件后不做任何修改就导出,输出结果会和原文件逐字节完全一致,包括空白字符、注释和换行符。如果你做了修改,也只有实际编辑过的那些行会被重写,其余的行完全不变。
这个工具不支持的语法会怎么样?
会原样保留,并在预览中正常显示,但无法通过 GUI 编辑。比如 classDef / style / linkStyle / click 等指令,以及连续箭头(A --> B --> C)等写法。编辑器底部的统计信息会显示这类行的数量。你仍然可以在代码栏中直接编辑它们。
可以拖动节点来调整位置吗?
不可以,这是有意为之,不是功能缺失。Mermaid 的流程图语法根本没有记录坐标的语法,布局始终是自动计算的,所以拖动出来的位置从原理上就无法写回代码。这里提供的每一项编辑功能,都对应文本格式中真实存在的东西。
可以重命名节点的 ID 吗?
不可以(只能修改标签)。重命名 ID 可能会悄悄破坏本工具不会编辑的那些行(比如不支持的 click 或 style 指令)中的引用,所以这个功能不在范围内。你可以直接在代码栏中编辑 ID,这样能亲眼看到并修正所有相关引用。
"复制给 AI"是做什么用的?
它会把加载时的代码(before)和当前代码(after)分别复制为带标签的 ```mermaid 代码块,可以直接粘贴到 AI 聊天窗口作为修改指令。这对应一个具体场景:用"容器 = subgraph、组件 = 节点"的约定把 UI 结构画成流程图,在这里编辑,再把 before/after 交给 AI。
可以离线使用吗?
可以。它是 PWA,第一次访问后会被缓存,没有网络也能使用。你也可以把它添加到主屏幕。