⭐ 觉得好用?收藏备用,下次直接打开
模板:
Mermaid 代码
预览
💡 拖拽空白处平移 · /Ctrl + 滚轮缩放

Mermaid 是 GitHub 官方支持的图表 DSL,用类似 markdown 的纯文本语法描述图形,由 mermaid.js 引擎实时渲染成 SVG。本工具集成 mermaid v11,覆盖流程图、时序图、类图、状态图、ER 图、甘特图、思维导图等 14 种主流图表,全程浏览器本地渲染不上传。

14 种图表速览

类型关键字典型用途
流程图flowchart业务流程、决策树、算法流程
时序图sequenceDiagramAPI 调用链、登录流程、消息传递
类图classDiagramOOP 设计、继承关系
状态图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 的优势是轻量 + 文本可控,恰到好处的中小型图表。

📍使用场景

  • 技术文档配图README / Confluence / 语雀 / 飞书文档里贴流程图、时序图、ER 图,代码即图、版本可控。
  • 项目排期沟通一段甘特图代码生成排期,发邮件或贴 Jira 评论,比手画 Excel 表格快十倍。
  • 数据库 / 架构设计用 ER 图、类图、状态机迭代讨论方案,改一行代码图就重渲染,告别画板拖拽。
  • 课件 / 知识整理思维导图、时间轴、用户旅程把抽象概念可视化,导出 SVG 贴 PPT 或 Notion 笔记。

常见问题

Mermaid 是什么?跟 draw.io / ProcessOn 有什么区别?

Mermaid 是一种用文本写图表的 DSL,几行代码就能生成流程图、时序图、ER 图等。和 draw.io / ProcessOn 这类拖拽编辑器最大的区别是:代码即图、可 diff、可版本管理,写技术文档时贴在 Markdown 里和正文一起进 Git,改起来比拖框线快得多。复杂自由布局仍推荐 draw.io。

渲染失败 / 报错怎么办?

90% 的报错来自首行类型声明拼错(如 flowchartsequenceDiagramclassDiagram 大小写或拼写)或者节点/箭头语法错。把右下角红色错误信息复制到 Mermaid 官方文档对照修复即可。另外中文标点(中文逗号、引号)会被识别失败,必须用半角。

支持哪些图表类型?

本工具支持 Mermaid v11 全部稳定语法的 14 种主流图表:流程图、时序图、类图、状态图、ER 图、甘特图、饼图、Git 分支、思维导图、时间轴、象限图、用户旅程、折线柱图、桑基图。点上方"模板"按钮即可切换示例代码对照学习。

导出的 SVG / PNG 能用于商业用途吗?

可以。Mermaid 是 MIT 协议开源软件,你输入的代码和生成的图形归你所有,自由用于商业、印刷、二次发布均无限制。本工具仅作渲染,不会上传你的图表数据,也不对内容主张任何权利。

中文乱码 / 字体跟我电脑的不一样怎么办?

渲染时用的是你浏览器当前系统字体(默认 inherit),所以中文一般无乱码。导出 PNG 时,浏览器会把 SVG 字体光栅化为图片像素,结果就是你看到的样子。如果在别人电脑上打开导出的 SVG 字体变了,那是因为对方系统没装相同字体——把 SVG 转 PNG 后再分享可彻底避免字体差异。

"分享链接"安全吗?数据会上传服务器吗?

不会上传。分享链接把你的 Mermaid 代码 base64 编码后放在 URL 的 #code=... 部分(hash 片段),按 HTTP 规范浏览器不会把 hash 发给服务器。任何拿到链接的人在自己浏览器里本地解码渲染。缺点是代码长时 URL 会很长(通常 < 2KB 都没问题)。