Mermaid 图表编辑器
实时把 Mermaid 文本语法渲染成流程图、时序图、类图、甘特图等。基于 mermaid v11，渲染全部在浏览器内完成。
示例：
Mermaid 源代码
正在加载编辑器…
预览
正在加载 Mermaid 渲染引擎…
关于本工具
Mermaid 图表在线编辑器：把 Mermaid 文本语法实时渲染为 SVG 图表，支持流程图（flowchart）、时序图（sequence）、类图（class）、甘特图（gantt）、ER 图等 16+ 图表类型。基于 mermaid v11.x，可下载 SVG 嵌入文档。
什么时候用
- GitHub README / 内部 wiki 的架构图与流程图
- 技术方案文档里的时序图与状态机
- 项目排期甘特图，用文本管理便于版本控制
- DB 设计的 ER 图——比 dbdiagram.io 等工具更轻量
常见问题
- 支持哪个 Mermaid 版本？
- v11.x（含全部图表类型与新版语法）。你在 GitHub README 里写的 ```mermaid 块用的就是同一个引擎，所以预览效果一致。
- 能导出 PNG 吗？
- 目前只导出 SVG。SVG 可以无损放大、文字可被搜索；如需 PNG，浏览器右键另存为图片，或用命令行 `inkscape` 转换。
- 图表渲染失败怎么办？
- 本站把 mermaid 的 errorRendering 关了——错误以独立提示出现而不是挤进 SVG。最常见原因是节点 ID 含特殊字符（如冒号），用引号包起来即可。
- 能切换 light / dark 主题吗？
- 全站强制 dark mode，所以 mermaid 也用 dark 主题。如果你想看 light 版本，可以下载 SVG 然后在自己的文档里用。
- 实时渲染会不会很卡？
- 我们做了 200ms 防抖，连续输入不会每次按键都重新解析。复杂图表（大量节点）单次渲染在毫秒级。
最近更新：