✨ Mermaid 流程图符号大揭秘：[] vs {}，这次真懂了！

小丁学Java

已于 2025-05-21 17:24:20 修改

阅读量885

点赞数 17

分类专栏： Mermaid 文章标签：流程图数据库 java

于 2025-05-21 17:22:04 首次发布

本文链接：https://blog.csdn.net/m0_65152767/article/details/148120139

版权

9 篇文章

订阅专栏

✨ Mermaid 流程图符号大揭秘：`[]` vs `{}`，这次真懂了！📝

大家好！👋 在使用 Mermaid 绘制流程图时，[]（矩形）和 {}（菱形）是最为基础且关键的两种节点形状。它们分别代表着流程中的不同含义。今天，就让我们彻底搞清楚它们之间的区别与用法，让你的流程图更加清晰准确！🚀

符号	Mermaid 定义	节点形状	常见语义	主要用途
`[]`	`id["文本"]`	矩形 (Rectangle)	步骤 (Step) / 操作 (Action) / 任务 (Task)	表示流程中的一个具体执行环节、操作或状态
`{}`	`id{"文本"}`	菱形 (Diamond)	判断 (Decision) / 条件 (Condition)	表示流程中的一个决策点，通常引出两条或多条分支

注意： 在Mermaid中，还有其他形状如 () 圆角矩形, (()) 圆形, ([]) 体育场形, [[]] 子程序形, [( )] 圆柱形, {{}} 六边形等。本文我们主要聚焦于最常用的 [] 和 {}。

在 Mermaid 流程图中，[] 用于定义一个矩形节点。它通常代表流程中的一个：

语法示例：

👆流程图描述：

这是一个典型的线性处理流程：

与矩形节点不同，{} 在 Mermaid 流程图中用于定义一个菱形节点。菱形节点的核心作用是表示：

通常，从菱形节点会引出两条或更多的路径，每条路径对应一个判断结果（例如：“是/否”，“成功/失败”，“条件A/条件B”等）。

语法示例：

👆流程图描述：

这个流程图演示了一个简单的用户登录判断流程：

流程从“开始”节点启动。
用户“输入用户名和密码”。
接下来是一个关键的判断节点：“信息校验是否通过?”（使用 {} 定义）。
- 如果校验 “是”（通过），则流程走向“登录成功”。
- 如果校验 “否”（不通过），则流程走向“提示错误信息”，并且通常会允许用户重新尝试（箭头指回“输入用户名和密码”）。
“登录成功”后流程到达“结束”。

看，{} 在这里完美地扮演了决策点的角色！

我们顺便也回顾一下序列图。在序列图中，参与者（Participant）和消息（Message）的文本通常不需要双引号包裹，除非文本中包含特殊字符或空格。

序列图示例：

👆时序图描述：

这个时序图展示了用户通过客户端App向服务端API购买商品的交互过程：

用户点击客户端App的购买按钮。
客户端App向服务端API发送创建订单的请求，携带商品ID和数量。
服务端API被激活，开始处理。
服务端API内部检查库存与价格。
这里使用了 alt (alternative) 组合片段来表示条件分支：
- 如果库存充足，服务端API返回订单创建成功的响应给客户端App。
- 如果库存不足，服务端API返回订单创建失败（原因为库存不足）的响应给客户端App。
服务端API处理完毕，失活。
客户端App将订单状态显示给用户。