Mermaid 是 GitHub 官方支持的图表 DSL,用类似 markdown 的纯文本语法描述图形,由 mermaid.js 引擎实时渲染成 SVG。本工具集成 mermaid v11,覆盖流程图、时序图、类图、状态图、ER 图、甘特图、思维导图等 14 种主流图表,全程浏览器本地渲染不上传。
| 类型 | 关键字 | 典型用途 |
|---|---|---|
| 流程图 | flowchart | 业务流程、决策树、算法流程 |
| 时序图 | sequenceDiagram | API 调用链、登录流程、消息传递 |
| 类图 | classDiagram | OOP 设计、继承关系 |
| 状态图 | stateDiagram-v2 | 订单状态机、UI 状态切换 |
| ER 图 | erDiagram | 数据库表结构、实体关系 |
| 甘特图 | gantt | 项目排期、里程碑 |
| 饼图 / Git / 思维导图 / 时间轴 / 象限 / 旅程 / 折线柱 / 桑基 | … | 数据/分析/分类 |
左侧输入 Mermaid 代码,右侧 250ms 防抖实时渲染。出错时红色错误信息显示在预览区底部,不会清空已有的正确图形。预览区支持 滚轮缩放(Ctrl/⌘ + 滚轮) 和拖拽平移,复杂图表可放大局部细节。
| 方式 | 适用场景 |
|---|---|
| 下载 SVG | 矢量无损,贴 README / 印刷 / 二次编辑 |
| 下载 PNG(2×) | 贴 PPT / 公众号 / 微信群,可选透明底 |
| 复制 SVG / MMD | 直接粘贴到 Notion、飞书、富文本编辑器 |
| 分享链接 | 代码 base64 编进 URL hash,发给同事打开即见,无需账号 |
图表配色自动跟随站点亮/暗主题——切换右上角 ☀️/🌙 即可看到 mermaid 内置的 light/dark 主题切换效果。所有渲染、所有导出都在你的浏览器本地完成,代码不会发送到任何服务器,可断网使用;分享链接的代码也仅编码在 URL hash 中,HTTP 协议规范下浏览器不会把它上报给服务器。
需要复杂自由布局(任意位置拖框线、自定义图标)、多人协作实时编辑、大型架构图(>100 个节点)时,建议改用 draw.io / ProcessOn / Whimsical。Mermaid 的优势是轻量 + 文本可控,恰到好处的中小型图表。
Mermaid 是一种用文本写图表的 DSL,几行代码就能生成流程图、时序图、ER 图等。和 draw.io / ProcessOn 这类拖拽编辑器最大的区别是:代码即图、可 diff、可版本管理,写技术文档时贴在 Markdown 里和正文一起进 Git,改起来比拖框线快得多。复杂自由布局仍推荐 draw.io。
90% 的报错来自首行类型声明拼错(如 flowchart、sequenceDiagram、classDiagram 大小写或拼写)或者节点/箭头语法错。把右下角红色错误信息复制到 Mermaid 官方文档对照修复即可。另外中文标点(中文逗号、引号)会被识别失败,必须用半角。
本工具支持 Mermaid v11 全部稳定语法的 14 种主流图表:流程图、时序图、类图、状态图、ER 图、甘特图、饼图、Git 分支、思维导图、时间轴、象限图、用户旅程、折线柱图、桑基图。点上方"模板"按钮即可切换示例代码对照学习。
可以。Mermaid 是 MIT 协议开源软件,你输入的代码和生成的图形归你所有,自由用于商业、印刷、二次发布均无限制。本工具仅作渲染,不会上传你的图表数据,也不对内容主张任何权利。
渲染时用的是你浏览器当前系统字体(默认 inherit),所以中文一般无乱码。导出 PNG 时,浏览器会把 SVG 字体光栅化为图片像素,结果就是你看到的样子。如果在别人电脑上打开导出的 SVG 字体变了,那是因为对方系统没装相同字体——把 SVG 转 PNG 后再分享可彻底避免字体差异。
不会上传。分享链接把你的 Mermaid 代码 base64 编码后放在 URL 的 #code=... 部分(hash 片段),按 HTTP 规范浏览器不会把 hash 发给服务器。任何拿到链接的人在自己浏览器里本地解码渲染。缺点是代码长时 URL 会很长(通常 < 2KB 都没问题)。
flowchart TD(流程图)、sequenceDiagram(时序图)、classDiagram(类图)等