Mermaid 图表教程：用代码画流程图、时序图、甘特图
📅 2026-05-21 · ☕ 8 分钟阅读
你有没有这样的经历——写文档时需要画个流程图，结果打开 Visio 或 Draw.io，调了半天格式，箭头对不齐，文字歪了，半小时过去了还没画好一张图？
如果告诉你，用几行文字就能生成漂亮的图表，你信吗？这就是 Mermaid 做的事情。
Mermaid 是一个开源的图表生成工具，它用文本语法（类似 Markdown）来定义图表，然后自动渲染成漂亮的 SVG 图形。它已经被 GitHub、GitLab、Notion、Obsidian 等主流平台原生支持，是目前最流行的「代码画图」方案。
🎯 本文你能学到什么
- Mermaid 基础语法：5 分钟画出第一个流程图
- 主流图表类型详解：流程图、时序图、甘特图、类图、饼图
- 如何在不同平台使用 Mermaid（GitHub、Notion、本地工具）
- Mermaid + AI：用 Cursor/Copilot 自动生成图表
一、Mermaid 是什么？为什么它这么火？
Mermaid 由 Knut Sveidqvist 于 2015 年创建，至今已在 GitHub 获得超过 70k Star。它的核心理念是：图表应该是文本。
传统画图工具的问题在于：
- 格式调半天 — 拖拽对齐、调整大小，时间都花在排版上
- 不好版本管理 — PNG/JPG 图片无法 diff，无法放在 Git 里追踪
- 协作困难 — 改个箭头方向要把文件传来传去
Mermaid 解决了所有这些问题。你的图表就是一段文本，可以放在代码仓库里 diff，可以用任何文本编辑器修改，可以自动渲染。
二、5 分钟上手：你的第一个 Mermaid 流程图
Mermaid 的语法非常直观。让我们从最基础的流程图开始：
语法说明
| 元素 | 语法 | 说明 |
|---|---|---|
| 节点 | A[文字] | 方括号 = 矩形节点 |
| 判断节点 | B{文字} | 花括号 = 菱形判断 |
| 连接线 | --> | 箭头 |
| 条件文字 | -->|是| | 竖线中间加条件文字 |
| 方向 | TD | Top-Down（从上到下） |
其他常用节点形状：
| 形状 | 语法 | 效果 |
|---|---|---|
| 圆角矩形 | A(文字) | 默认开始/结束节点 |
| 圆形 | A((文字)) | 开始/结束 |
| 六边形 | A{{文字}} | 准备/预处理 |
| 圆柱 | A[(文字)] | 数据库 |
| 双边矩形 | A[/文字/] | 输入/输出 |
方向设置
| 方向 | 说明 |
|---|---|
TD 或 TB | 从上到下（Top-Down / Top-Bottom） |
BT | 从下到上 |
LR | 从左到右（Left-Right） |
RL | 从右到左 |
三、6 种常用图表类型详解
1. 流程图（Flowchart）— 最常用
流程图是最常用的图表类型，适用于业务流程、算法逻辑、决策树等场景。
2. 时序图（Sequence Diagram）— 适合 API 交互
展示多个角色之间的交互顺序，非常适合 API 调用流程、用户操作流程等。
连线类型：
->>实线箭头（主动发送）-->>虚线箭头（异步返回）-x带叉的线（失败/取消）--x虚线带叉
3. 类图（Class Diagram）— 适合程序员
展示类结构、继承关系、接口实现等，适用于面向对象设计和数据库建模。
4. 甘特图（Gantt Chart）— 项目管理必备
展示项目进度、任务时间线，适用于项目管理、里程碑规划。
5. 饼图（Pie Chart）— 占比一目了然
6. 状态图（State Diagram）— 状态机可视化
四、在哪些平台可以用 Mermaid？
✅ 原生支持
| 平台 | 如何使用 |
|---|---|
| GitHub | 在 Markdown 文件中用 ```mermaid 代码块 |
| GitLab | 同样用 ```mermaid 代码块 |
| Notion | 输入 /mermaid 调出 Mermaid 块 |
| Obsidian | 安装 Mermaid 插件，用代码块渲染 |
| Discord | 用 ```mermaid 代码块 |
🛠️ 在线工具
如果你不想装任何软件，可以在这些在线编辑器里试用 Mermaid：
- Mermaid Live Editor（mermaid.live）— 官方在线编辑器
- Mermaid 在线编辑器（tools.versionman.com 版本）— 中文界面，实时预览
五、Mermaid + AI：效率翻倍的玩法
2025-2026 年，Mermaid 最大的趋势是和 AI 编程工具结合：
在 Cursor/ChatGPT 中生成 Mermaid
你只需要用自然语言描述你想要的图表，AI 就能自动生成 Mermaid 代码：
提示词：
"画一个用户注册的流程图，包括邮箱验证和短信验证两个分支"
AI 输出：
graph TD
A[填写注册信息] --> B{选择验证方式}
B -->|邮箱验证| C[发送验证邮件]
B -->|短信验证| D[发送验证码]
C --> E[验证通过]
D --> E[验证通过]
E --> F[注册成功]
几个实用的 AI 提示词模板：
- "画一个 XX 系统的架构图，用 Mermaid 时序图"
- "帮我生成一个项目排期甘特图，包含设计/开发/测试三个阶段"
- "用 Mermaid 状态图表示订单的生命周期"
六、Mermaid 语法速查表
| 图表类型 | 开头语法 | 适用场景 |
|---|---|---|
| 流程图 | graph TD/LR | 业务流程、算法逻辑、决策树 |
| 时序图 | sequenceDiagram | API 交互、用户操作流程 |
| 类图 | classDiagram | 面向对象设计、数据库建模 |
| 甘特图 | gantt | 项目排期、任务管理 |
| 饼图 | pie | 数据占比、统计展示 |
| 状态图 | stateDiagram-v2 | 状态机、生命周期 |
| ER 图 | erDiagram | 数据库关系建模 |
| 用户旅程图 | journey | 用户体验分析 |
七、常见问题
Mermaid 是免费的吗？
完全免费开源。Mermaid 是 MIT 许可证的开源项目，可以商用，无需付费。
Mermaid 支持中文吗？
支持。Mermaid 完全支持 Unicode，节点文字、评论都可以使用中文。
Mermaid 和 PlantUML 哪个好？
两者思路类似。Mermaid 语法更简洁、上手更快，被 GitHub/Notion 等平台原生支持。PlantUML 功能更强大，但语法稍复杂。如果你只是画流程图、时序图，Mermaid 足够了。
可以在 Word 或 PPT 里用 Mermaid 吗？
可以。在 Mermaid 编辑器中渲染图表后，截图或导出为 SVG/PNG 再插入。或者用 Markdown → Word/PPT 的转换工具。
八、总结
Mermaid 把「画图」这件事从拖拽排版变成了写代码，一旦用上就回不去了。无论你是开发者、产品经理还是写文档的同学，Mermaid 都能让你的图表更高效、更美观、更容易维护。
记住三点：
- 流程图用
graph，时序图用sequenceDiagram - GitHub/Notion 原生支持，写好代码块就能渲染
- AI + Mermaid = 效率翻倍，用自然语言就能生成图表