流程图代码
使用 Mermaid 流程图语法，需以 graph 或 flowchart 开头。
或拖入 .mmd、.mermaid、.md、.txt 文件
预览
流程图将显示在这里。
把写好的代码变成图形
用纯文本写流程图 —— 每个节点一行，每条箭头一行 —— 输入的同时就能看到渲染出的图形。这个工具使用 Mermaid 的流程图语法，也就是 mermaid.live 和很多文档工具使用的同一种文本格式：图形以 graph 或 flowchart 开头，后面跟方向以及节点和连接的列表。
这个工具只做一件事：输入流程图语法，输出 SVG 或 PNG 图像。Mermaid 还能画时序图、甘特图、类图等，但这个工具只支持流程图 —— 这是刻意划定的范围，而不是功能缺失。也没有把图形转换回可编辑代码的功能，下载图片即完成。
为什么你的图不会离开设备
这里的隐私来自结构，而不是承诺。没有"上传"这一步，是因为根本没有可供上传的服务器：
- 解析和渲染全部在你的浏览器内完成。
- 页面以静态文件的形式分发，不会发出携带流程图文本的请求。
- 源代码公开，任何人都可以查看（MIT）。
- 可以离线使用 —— 既然不依赖服务器，离线自然也能用。
想自己确认的话，输入时打开浏览器的网络（Network）面板 —— 没有任何请求携带你的文本。 查看源代码。
使用方法
-
输入或粘贴你的流程图
在文本框里书写流程图语法 —— 以 graph 或 flowchart 开头，然后描述节点和箭头，例如 A[开始] --> B[结束]。不知道从哪里开始？点击"加载示例"。
-
查看实时预览
停止输入约 300 毫秒后，图形会自动重新渲染。只支持流程图，输入其他 Mermaid 图表类型会显示提示信息，而不会被渲染。
-
修正语法错误
如果某一行无法解析，预览会显示提示信息，而不是猜测你的意图 —— 对照上一次能正常显示的代码进行检查。
-
导出结果
下载 SVG 可得到可缩放的矢量文件，能在 Illustrator、Inkscape 中编辑；下载 PNG 可得到适合文档和幻灯片使用的位图。
常见问题
我输入的流程图文本会被上传到某个地方吗？
不会。解析和渲染全部在你的浏览器内完成。没有服务器端处理，你的文本没有离开设备的途径。
使用的是什么语法？
Mermaid 的流程图语法 —— 也是 mermaid.live 等很多文档平台使用的文本格式。图形以 graph 或 flowchart 开头，接着是方向（例如 TD 表示从上到下），然后是节点和箭头的列表。
可以在这里画时序图、甘特图或其他类型的图吗？
不可以。这个工具只支持流程图。不支持其他 Mermaid 图表类型是刻意划定的范围，而不是技术限制。
可以用鼠标编辑图形的形状，或把渲染好的图转换回代码吗？
不可以。这个工具是单向的：输入文本，输出图像。没有 GUI 节点编辑功能，也无法把渲染好的图转换回文本。
可以离线使用吗？
可以。它是 PWA，第一次访问后会被缓存，没有网络也能使用。你也可以把它添加到主屏幕。
SVG 和 PNG 下载有什么区别？
SVG 是可缩放的矢量文件 —— 无论放大到多大都保持清晰，并且可以在矢量工具中编辑。PNG 是固定分辨率的位图，导出尺寸比屏幕预览更大，适合在文档和幻灯片中清晰显示。