在技术文档、项目管理和团队沟通中，图表是不可或缺的表达工具。然而，传统的拖拽式绘图工具往往效率低下，修改维护成本高。Mermaid 的出现彻底改变了这一现状——它让你能够用简单的文本代码快速创建出专业级别的图表。
本文将带你从零开始，全面掌握 Mermaid 的核心概念、基础语法和实用技巧，让你能在几分钟内画出漂亮的流程图、时序图、甘特图等常见图表类型。
什么是 Mermaid？
Mermaid 是一个基于 JavaScript 的图表绘制工具，它的核心理念是**"Diagram as Code"（图表即代码）**。与传统的 Visio、ProcessOn 等拖拽式工具不同，Mermaid 允许你通过编写类似 Markdown 的文本语法来定义图表结构，然后由渲染引擎自动生成对应的可视化图形。
这种方式带来了诸多显著优势：
- 版本控制友好：图表代码可以像源代码一样纳入 Git 管理，每次修改都有完整的版本历史记录
- 高效迭代：修改文字远比重新拖拽图形来得快捷，特别是在大型图表中
- 团队协作：开发者可以直接在代码仓库中查看和修改图表，无需额外的设计软件
- 自动化生成：可以结合脚本和 CI/CD 流程自动生成和更新文档中的图表
- 跨平台兼容：Mermaid 语法被 GitHub、GitLab、Notion 等众多平台原生支持
Mermaid 支持哪些图表类型？
Mermaid 目前支持超过 15 种图表类型，涵盖了绝大多数技术场景：
| 图表类型 | 用途说明 | 适用场景 |
|---|---|---|
| Flowchart | 流程图 | 业务流程、算法逻辑、决策树 |
| Sequence Diagram | 时序图 | API 交互、系统调用、消息传递 |
| Class Diagram | 类图 | 面向对象设计、系统架构 |
| State Diagram | 状态图 | 状态机、工作流、系统行为建模 |
| ER Diagram | 实体关系图 | 数据库设计、数据模型 |
| Gantt Chart | 甘特图 | 项目管理、进度规划 |
| Pie Chart | 饼图 | 数据占比、统计分析 |
| Git Graph | Git 分支图 | 版本控制历史、分支策略 |
| Mindmap | 思维导图 | 知识整理、头脑风暴 |
| Timeline | 时间线 | 历史事件、里程碑展示 |
对于初学者来说，建议从**流程图（Flowchart）**入手，因为它语法最直观，应用场景也最广泛。
如何编写第一个 Mermaid 流程图？
流程图是 Mermaid 中最常用的图表类型。它的基本语法非常简单，主要通过节点和连线来描述流程。
基础语法结构
每个 Mermaid 流程图以 graph 关键字开头，后面紧跟方向指示符：
graph TD
A[开始] --> B[处理]
B --> C[结束]
方向指示符决定了图表的整体布局：
TB或TD：从上到下（Top to Bottom / Top Down）BT：从下到上（Bottom to Top）LR：从左到右（Left to Right）RL：从右到左（Right to Left）
节点形状
Mermaid 提供了丰富的节点形状，通过不同的括号符号来定义：
graph LR
A[矩形] --> B(圆角矩形)
B --> C{菱形}
C --> D((圆形))
D --> E>旗帜形]
常用节点形状速查表：
| 语法 | 形状 | 典型用途 |
|---|---|---|
[文本] | 矩形 | 普通步骤 |
(文本) | 圆角矩形 | 开始/结束节点 |
{文本} | 菱形 | 判断/决策 |
((文本)) | 圆形 | 连接点 |
[/文本/] | 平行四边形 | 输入/输出 |
[\文本\] | 梯形 | 手动操作 |
连线样式
连线不仅表示流向，还可以通过不同样式表达特定含义：
graph TD
A --> B
A -.-> C
A ==> D
A -- 带标签 --> E
| 语法 | 样式 | 含义 |
|---|---|---|
--> | 实线箭头 | 标准流程 |
-.-> | 虚线箭头 | 可选流程、注释 |
==> | 粗线箭头 | 重要流程、强调 |
-- 标签 --> | 带文字标签 | 条件说明 |
一个完整的业务逻辑示例
让我们用一个用户登录流程来展示完整的流程图写法：
graph TD
A([开始]) --> B{用户已登录?}
B -->|是| C[跳转到首页]
B -->|否| D[显示登录表单]
D --> E{验证成功?}
E -->|是| F[创建会话]
E -->|否| G[显示错误信息]
G --> D
F --> C
C --> H([结束])
这个例子展示了判断节点、循环回退、标签注释等常见流程图元素。
进阶技巧：子图与样式定制
当流程变得复杂时，可以使用子图（Subgraph）来组织相关节点，让图表结构更清晰。
使用子图分组
graph TB
subgraph 认证模块
A[输入用户名] --> B{验证格式}
B -->|有效| C[查询数据库]
B -->|无效| D[提示错误]
end
subgraph 会话管理
C --> E[生成 Token]
E --> F[设置 Cookie]
end
D --> A
F --> G[返回首页]
自定义节点样式
你可以为节点添加颜色和样式，以突出显示重要步骤或区分不同类型的节点：
graph LR
A[普通步骤] --> B[关键步骤]
B --> C[成功结束]
B --> D[失败处理]
style B fill:#f9f,stroke:#333,stroke-width:2px
style C fill:#9f9,stroke:#333
style D fill:#f99,stroke:#333
样式属性说明：
fill：填充颜色（支持十六进制、RGB、颜色名称）stroke：边框颜色stroke-width：边框粗细stroke-dasharray：虚线边框
在哪里可以使用 Mermaid？
Mermaid 的强大之处在于其广泛的兼容性。以下平台均原生支持 Mermaid 渲染：
- GitHub / GitLab：在 Markdown 文件中直接编写 Mermaid 代码块即可渲染
- Notion：添加 Code 块并选择 Mermaid 语言
- Obsidian：安装 Mermaid 插件后可直接预览
- Markdown 编辑器：Typora、MarkText 等支持 Mermaid 渲染
- 文档站点：MkDocs、Docusaurus、VuePress 等可通过插件集成
如果你的目标平台不支持 Mermaid，可以使用 Mermaid2Img 这样的工具将 Mermaid 代码转换为 PNG、SVG 或 PDF 图片，然后插入到任何支持图片的平台上。
学习建议与资源
掌握 Mermaid 的最佳方式是边学边练。以下是一些实用的学习建议：
- 从流程图开始：流程图语法最直观，应用场景最多，建议先精通这一种
- 善用官方文档：Mermaid 官方文档（mermaid.js.org）非常详尽，遇到不确定的语法可以直接查阅
- 使用在线编辑器：Mermaid Live Editor（mermaid.live）是练习和调试语法的最佳工具
- 建立个人模板库：收集和整理常用的图表模板，可以大幅提高后续工作效率
- 关注可读性：图表的核心价值在于清晰传达信息，避免过度复杂化
总结
Mermaid 通过 "Diagram as Code" 的理念，将图表创作从图形界面操作转变为文本编码工作，极大地提升了技术人员的绘图效率和协作体验。无论你是开发者、产品经理还是技术写作者，掌握 Mermaid 都能让你的文档和沟通变得更加专业高效。
从本文介绍的流程图基础语法出发，你可以逐步探索时序图、类图、甘特图等更多图表类型。记住，好的图表不在于花哨的视觉效果，而在于能否清晰准确地传达信息。开始你的 Mermaid 之旅吧！
想要将 Mermaid 图表快速导出为高清图片？试试 Mermaid2Img，免费在线工具，支持 PNG、SVG、PDF 等多种格式导出，完全在浏览器端运行，保护你的代码隐私。