Mermaid 是一个开源的图表工具，用类似 Markdown 的文本写出节点和连线，就能渲染成图。它能画流程图、时序图、甘特图等，改图就是改几行字，适合经常写文档、记笔记的人。
是什么：用文字描述图
Mermaid 官方文档介绍它是基于 JavaScript 的图表工具，能把类似 Markdown 的文本渲染成图。
- 开源项目，采用 MIT 许可证，代码公开在 GitHub 上。
- 官方有在线编辑器 Mermaid Live Editor，边写代码边看效果。
和拖拽画图相比，Mermaid 的图就是一段文本，可以复制，可以跟着文档一起保存和修改，节点位置由它自动排好。
它适合常写技术文档、用 Markdown 记笔记、流程经常要改的人；如果每个节点的位置都要精确摆放，拖拽类工具会更顺手。
常见图类型：不止流程图
除了流程图，Mermaid 官方文档还列出了时序图、类图、状态图、ER 图、甘特图、思维导图、时间线等多种图。
每种图的代码第一行要写声明关键字，告诉 Mermaid 画的是哪一种。
下表是常用的几种
| 图类型 | 第一行关键字 | 常用来画 |
|---|---|---|
| 流程图 | flowchart | 业务流程、审批流 |
| 时序图 | sequenceDiagram | 登录、支付等系统交互 |
| 类图 | classDiagram | 面向对象设计 |
| 状态图 | stateDiagram-v2 | 订单、工单的状态流转 |
| ER 图 | erDiagram | 数据库表之间的关系 |
| 甘特图 | gantt | 项目排期 |
| 思维导图 | mindmap | 梳理思路、读书笔记 |
| 用户旅程图 | journey | 用户体验的各个阶段 |
在哪能显示：常见5处
GitHub、GitLab 等代码平台和部分 Markdown 编辑器，都能把 Mermaid 代码块直接显示成图。
- Mermaid Live Editor：官方在线编辑器，可导出 PNG、SVG。
- GitLab：Markdown 里的 mermaid 代码块会渲染，官方文档写明支持 Mermaid 11。
- GitHub：Issue、Discussion、PR、Wiki 和 Markdown 文件里，标注为 mermaid 的代码块会显示成图。
- Typora：在偏好设置的 Markdown 选项里开启图表功能后可以显示。
- VS Code：安装「Markdown Preview Mermaid Support」扩展后，内置的 Markdown 预览就能显示 Mermaid 图。
各平台内置的 Mermaid 版本不同，新语法在旧版本里可能显示不出来。GitHub 文档建议先确认当前使用的 Mermaid 版本，方法是在 mermaid 代码块里写 info。
可以直接运行的示例
下面是一个请假审批流程的示例（示例为虚构），复制到 Mermaid Live Editor 里就能看到图。
第一行 flowchart TD 表示从上到下画；方括号是步骤，花括号是判断，圆括号套方括号是开始和结束。
箭头写作 -->，两条竖线之间是连线上的文字，节点前的字母只用来连线。
照着改的时候注意两点：节点文字里有圆括号或双引号时，把整段文字放进英文双引号，如 A[“提交(草稿)”]；括号、箭头、冒号都用英文半角符号。
总结
Mermaid 把画图变成写文字：第一行声明图类型，下面逐行写节点和连线。先在在线编辑器里把示例跑通，再换成自己的流程。
互动问题：你写文档时常用哪种图？想看哪种图的 Mermaid 写法？
