流程图是最常用的图表类型之一，无论是描述业务逻辑、系统架构还是算法步骤，流程图都能以直观的方式展现信息流转过程。Mermaid 的流程图功能非常强大，从简单的线性流程到复杂的多分支决策，都能用简洁的文本语法精确表达。
本文将深入讲解 Mermaid 流程图的全部核心特性，帮助你从入门进阶到熟练运用。
流程图的方向控制
Mermaid 流程图支持四种基本方向布局，通过 graph 关键字后的方向代码来指定：
graph TD
A[顶部] --> B[底部]
| 方向代码 | 说明 | 适用场景 |
|---|---|---|
TD 或 TB | 从上到下 | 线性流程、时间线 |
BT | 从下到上 | 依赖关系、层级结构 |
LR | 从左到右 | 业务流程、系统交互 |
RL | 从右到左 | 特定语言阅读习惯 |
方向选择会显著影响图表的可读性。一般来说，自上而下的布局适合描述步骤顺序，从左到右的布局适合描述系统交互和并行流程。
节点定义的完整语法
Mermaid 提供了超过 20 种节点形状，可以满足绝大多数流程图的需求。
基础形状
graph LR
A[矩形] --> B(圆角矩形)
B --> C{菱形}
C --> D((圆形))
D --> E>不对称形]
高级形状
graph LR
A[/平行四边形/] --> B[\梯形\]
B --> C{{六边形}}
C --> D[(圆柱形)]
D --> E[/\双斜线形\/]
形状的语义化使用建议
不同的形状在流程图中有约定俗成的含义，遵循这些惯例可以让你的图表更容易被理解：
- 圆角矩形
()：通常表示流程的开始和结束节点 - 菱形
{}：表示判断或决策点，通常有多个出口 - 矩形
[]：表示普通的处理步骤或操作 - 平行四边形
[/ /]：表示数据的输入或输出 - 圆柱形
[( )]：常用于表示数据库或数据存储 - 圆形
(())：表示连接点，用于将流程线汇聚或分支
连线的丰富表达
连线是流程图的骨架，Mermaid 提供了多种连线样式来表达不同类型的关系。
基础连线
graph LR
A --> B
A -.-> C
A ==> D
A --- E
带标签的连线
当流程的分支需要条件说明时，可以给连线添加文字标签：
graph TD
A{是否有库存?} -->|有| B[处理订单]
A -->|无| C[通知补货]
B --> D[发货]
C --> E[等待到货]
E --> A
多节点连线
为了提高代码的简洁性，Mermaid 支持一次性定义多条连线：
graph LR
A --> B & C --> D
E --> F --> G
连线样式总结
| 语法 | 视觉效果 | 推荐用途 |
|---|---|---|
--> | 细实线箭头 | 标准流程 |
--- | 细实线无箭头 | 无方向关联 |
-.-> | 虚线箭头 | 注释、参考、可选流程 |
==> | 粗实线箭头 | 主要流程、强调 |
-- 文字 --> | 带标签实线 | 条件分支 |
-. 文字 .-> | 带标签虚线 | 条件注释 |
== 文字 ==> | 带标签粗线 | 主要分支说明 |
使用子图组织复杂流程
当流程图节点数量增多时，使用子图（Subgraph）可以有效提升可读性。子图会将相关节点框选在一起，并显示一个分组标题。
子图基础用法
graph TB
subgraph 前端处理
A[接收用户输入] --> B[表单验证]
B --> C{验证通过?}
end
subgraph 后端处理
C -->|是| D[创建订单]
D --> E[扣减库存]
E --> F[生成响应]
end
subgraph 结果反馈
C -->|否| G[返回错误]
F --> H[显示成功]
G --> I[显示失败]
end
子图的方向控制
子图内部也可以指定自己的布局方向，与主图方向独立：
graph LR
subgraph 从上到下的子图
direction TB
A --> B --> C
end
subgraph 从左到右的子图
direction LR
D --> E --> F
end
C --> D
子图特别适合描述微服务架构、模块化系统和分层应用等场景。
样式与主题定制
默认的 Mermaid 图表虽然功能完整，但视觉风格较为朴素。通过样式定制，你可以让图表更符合品牌调性或更突出重点。
节点级别样式
使用 style 关键字为单个节点设置 CSS 样式：
graph TD
A[默认样式] --> B[自定义样式]
B --> C[成功状态]
B --> D[失败状态]
style B fill:#e1f5ff,stroke:#01579b,stroke-width:2px
style C fill:#c8e6c9,stroke:#2e7d32,color:#1b5e20
style D fill:#ffcdd2,stroke:#c62828,color:#b71c1c
类级别样式
当多个节点需要相同样式时，使用类（Class）可以避免重复代码：
graph TD
A[开始] --> B[步骤一]
B --> C[步骤二]
C --> D[结束]
classDef startEnd fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
classDef process fill:#fff3e0,stroke:#ff9800,stroke-width:1px
class A,D startEnd
class B,C process
推荐的配色方案
| 场景 | 填充色 | 边框色 | 文字色 |
|---|---|---|---|
| 正常流程 | #e3f2fd | #1976d2 | #0d47a1 |
| 成功/完成 | #e8f5e9 | #388e3c | #1b5e20 |
| 警告/注意 | #fff8e1 | #f9a825 | #f57f17 |
| 错误/失败 | #ffebee | #d32f2f | #b71c1c |
| 决策/判断 | #f3e5f5 | #7b1fa2 | #4a148c |
实战案例：电商订单流程
让我们综合运用以上知识，创建一个完整的电商订单处理流程图：
graph TD
Start([用户下单]) --> Validate{库存检查}
Validate -->|库存充足| Create[创建订单]
Validate -->|库存不足| Notify[通知补货]
Notify --> Wait[等待到货]
Wait --> Validate
Create --> Pay{支付状态}
Pay -->|支付成功| Process[处理发货]
Pay -->|支付失败| Retry{重试?}
Retry -->|是| Pay
Retry -->|否| Cancel[取消订单]
Process --> Ship[物流发货]
Ship --> Deliver{是否签收}
Deliver -->|已签收| Complete[订单完成]
Deliver -->|拒收| Return[退货处理]
Cancel --> End1([结束])
Complete --> End2([结束])
Return --> End3([结束])
style Start fill:#e8f5e9,stroke:#4caf50
style Complete fill:#c8e6c9,stroke:#2e7d32
style Cancel fill:#ffcdd2,stroke:#c62828
style Return fill:#fff3e0,stroke:#ff9800
这个案例展示了循环回退、并行分支、多终点以及语义化配色等高级技巧。
常见问题与解决方案
在使用 Mermaid 流程图的过程中，你可能会遇到以下常见问题：
中文显示问题
某些渲染环境下，中文字符可能出现乱码或显示为方框。解决方案包括：
- 确保文件编码为 UTF-8
- 在 Mermaid 配置中指定中文字体
- 使用 SVG 导出格式而非 PNG（矢量格式对字体支持更好）
图表过大导致显示不全
当流程图节点过多时，可能会超出容器边界。可以通过以下方式优化：
- 合理划分子图，将大图拆分为多个小图
- 调整布局方向，利用横向空间
- 简化不必要的节点，合并相似步骤
连线交叉过多
复杂的流程图可能出现大量连线交叉，影响可读性。建议：
- 调整节点位置，让相关节点尽量靠近
- 使用连接点节点
(())来引导连线走向 - 考虑将部分逻辑提取到独立的子图中
最佳实践总结
- 保持一致性：在同一张图表中，相同类型的节点使用相同的形状和颜色
- 控制复杂度：单张图表的节点数量建议控制在 15-20 个以内，超出时考虑拆分
- 语义化命名：节点文字应该简洁明了，避免过长的描述
- 善用标签：给关键连线添加条件标签，让分支逻辑一目了然
- 评审可读性：完成图表后，让同事或用户试读，根据反馈调整布局
结语
Mermaid 流程图是技术沟通和文档编写的利器。从简单的三节点流程到复杂的多层子图结构，Mermaid 都能用简洁的文本语法优雅表达。掌握本文介绍的基础语法、高级特性和最佳实践后，你就能够创建出既美观又实用的专业流程图。
如果你在创作过程中需要将 Mermaid 图表导出为图片用于演示文稿、博客或文档，欢迎使用 Mermaid2Img。它支持实时预览、多格式导出，并且完全在浏览器端运行，确保你的图表代码不会上传到任何服务器。
继续学习：下一篇文章将深入讲解 Mermaid **时序图（Sequence Diagram）**的完整语法，带你掌握如何绘制专业的系统交互图。