什么是流程图？
一个流程图是一种基础的行为图，用于可视化逐步的操作流程、算法过程或顺序的业务逻辑。通过将系统操作表示为不同的几何形状，并使用方向箭头来绘制控制流，流程图使得软件工程师和系统架构师能够轻松追踪条件执行路径、隔离单点故障模块，并在编写实际后端代码之前分析系统逻辑循环。
使用Mermaid.js你无需花费数小时拖拽方框、微调网格线或重新计算内边距变量。布局引擎会根据你的原始声明式脚本动态计算节点坐标，让你可以完全专注于系统底层逻辑。
核心语法指南：元素与结构
要在 Mermaid 中设计出优雅且高度可读的流程图，你必须掌握画布方向指示符、几何节点封装、链接布线变量以及结构子图。
1. 设置画布方向
你的流程图方向由第一行应用到graph或flowchart包装器上。你可以使用四个主要方向键来控制布局的视觉缩放方向：
flowchart TD（自上而下 / 垂直方向）flowchart BU（自下而上方向）flowchart LR（从左到右 / 水平方向）flowchart RL（从右到左方向）
2. 自定义节点几何形状（形状）
默认情况下，一个简单的ID声明会渲染为一个锐角矩形框。为了使你的图表更易于扫描，可以使用 Mermaid 的专用包围括号，为不同的工作流程步骤注入即时的视觉上下文。每个定义块都必须以方向性布局标记开头，才能正确解析：
- 圆角：
id(文本)— 表示一个通用的处理步骤。 - 体育场/胶囊形状：
id([文本])— 标准标记，用于表示开始和停止的边界里程碑。 - 子程序/预定义流程：
id[[文本]]— 表示封装的系统例程或外部类脚本。 - 圆柱体/数据库：
id[(文本)]— 表示数据库持久化、缓存或数据仓库。 - 菱形/决策菱形：
id{文本}— 表示条件开关、if/else 分支或评估点。 - 平行四边形：
id[/文本/]或id[文本]— 渲染倾斜的边界以表示明确的数据输入/输出（I/O）。
流程图 TD
start_node([开始执行])
query_db[(PostgreSQL 实例)]
validate_check{是否已授权？}
3. 连接线布线规则与内联标签
您可以调整连接线以表示不同的结构关系和通信风格。为了保持图表整洁，可直接将描述性标签注入到连接线路径上：
流程图 TD
%% 带文本标签的标准连接箭头
A --> |"JSON 负载"| B
%% 带文本标签的虚线/异步线
B -.-> |"异步事件"| C
%% 带文本标签的粗体线
C ==> |"关键写入"| D
4. 通过子图实现模块化隔离
为了建立清晰的网络边界、分组微服务或隔离团队职责，将您的元素分组在结构化的子图 包装器中。您可以通过为其分配内部 ID、可选的显示标题，并用一个结束 标签：
流程图 TD
子图 auth_sub["安全边界"]
gateway[API 网关] --> auth_worker(令牌验证器)
结束
清晰流程图的最佳实践
- 水平解耦布局： 对于长而多步骤的工程流水线，选择一个
流程图 LR方向。与长垂直布局相比，这种布局在标准宽屏横屏显示器上可扩展性更好，更清晰。 - 隔离复杂循环： 如果工作流包含一个复杂的重复循环，请清晰地标记反向连接器（例如，
retry --> |"尝试重置"| start），以防止读者将循环误认为是标准的正向路径。 - 避免混合图类型： 坚持使用现代
流程图关键字，而不是旧的图标志来渲染复杂地图。流程图引擎使用更新的布局算法，支持高级箭头组合和更清晰的路径路由。
现实世界中的 Mermaid.js 流程图示例
示例 1：微服务事件驱动的摄入网格（从左到右架构）
此功能蓝图模拟了一个网络遥测数据摄入服务。它展示了如何在清晰的水平画布上结合数据输入、决策菱形和云数据库形状。
流程图 LR
%% 使用显式几何形状定义元素节点
init([Webhook 触发]) --> input_io[/捕获 HTTP 请求/]
input_io --> auth_check{验证令牌}
auth_check --> |"无效令牌"| err_stop([返回 401 未授权])
auth_check --> |"有效 JWT"| write_queue[[发布到 Kafka 队列]]
write_queue --> worker_proc(消费者守护进程)
worker_proc --> db_store[(TimescaleDB 集群)]
db_store --> term([终止流程])
%% 快速自定义样式覆盖
style auth_check fill:#fff3cd,stroke:#ffc107,stroke-width:2px
style err_stop fill:#f8d7da,stroke:#dc3545,stroke-width:1px
语法分解： 此图从左到右流畅地流动。验证步骤使用黄色的决策菱形形状（auth_check{验证令牌}），它将执行路径清晰地分为两个不同的结果。由于其自定义的数据库圆柱体（[(TimescaleDB 集群)]）和平行四边形输入，数据存储部分一目了然。
示例 2：企业多层用户注册引擎（垂直嵌套子图）
此高级企业蓝图描绘了一个应用程序注册流程。它将步骤垂直分布在三个独立的结构子图中，以表示不同的架构层级。
flowchart TD
subgraph Client_Tier["表示层 UI 层"]
app[移动应用 UI]
web[Web SPA 前端]
end
subgraph Service_Tier["核心网关路由器"]
proxy[[Nginx 入口反向代理]]
auth_svc(认证服务工作进程)
end
subgraph Persistence_Tier["安全数据中心"]
main_db[(用户账户主数据库)]
cache_node[(Redis 会话缓存)]
end
%% 定义子系统层级之间的通信管道
app -- "HTTPS 请求" --> proxy
web -- "HTTPS 请求" --> proxy
proxy --> |"路由 /v1/auth"| auth_svc
auth_svc --> |"验证会话"| cache_node
auth_svc --> |"提交账户"| main_db
语法分解： 从上到下的方向指示符（flowchart TD）强制布局引擎将组件从上到下整齐堆叠。边界块将相关组件分组为不同的层级（客户端、服务和持久化），使整体架构呈现出直观且高度结构化的感受。