企业官网建设流程全解析

时序图也能画并行？Mermaid 里 par、alt、opt 的正确用法

【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid

写 Mermaid 时序图时，一到"多分支""同时发生"就容易卡壳：消息只能从上往下排，业务逻辑却会分叉、会并发。这篇进阶教程带你补齐条件分支（alt/opt）与并行流程（par）两大块，外加 rect 高亮、critical 关键区域，学完就能独立画出带分支和并发的完整时序图。

先看效果：一张图装下分支、并行与高亮

下面这张支付回调时序图同时用了alt决策分支、嵌套par双车道并行和rect背景色，整条"验签→落库→双写→通知"链路一图看穿：

白话解读：验签走决策树，通过才进蓝色高亮落库区，随后一条事件在两条车道上分头处理——扣库存和发通知互不等待，最后统一给网关回执。

条件分支：alt 决策树与 opt 可选流程

alt把一段消息拆成互斥的分支，像一棵决策树，每个岔路口用else分隔、整体以end收尾；opt只描述"满足条件才走"的可选路径，没有 else。先看一个 Webhook 验签的例子：

一句话：alt管"二选一"，opt管"要不要做"。提醒：分支条件写成"动作+结果"（如"验签失败"而不是"失败"），读图的人不用回头猜。

嵌套 par 的正确打开方式

par把一个区域拆成并行的"车道"，车道之间用and分隔，最外层以end收尾；par块里可以再嵌一层par，实现多车道里的二次分叉。消息队列消费端扇出通知时最典型：

解读：消费端收到事件后开两条车道，"发通知"车道内部又开"短信/邮件"两小股，共两层嵌套。

⚠️ 提醒：每加一层par就多一个end，写完后数一数配对数量；嵌套超过两层，图宽会指数膨胀，不如把内层单独拆图。

rect 高亮与 critical 关键区域

rect给一段消息垫背景色，用来把"必须成功"的核心动作从流程里拎出来；critical圈出关键操作，块内用option列出每种失败兜底，收尾同样靠end。两个迷你示例：

白话解读：rect画"重点在哪"，critical画"失败了怎么办"。提醒：critical里至少放一个option，否则它和rect没区别；高亮区域别超过整图三分之一，否则失去对比。

语法速查表：时序图进阶关键字一览

避坑问答：时序图进阶教程里最常见的 4 个坑

3 种箭头别选错

->>实线箭头表示同步调用；-->>虚线箭头表示返回响应；-x实线尾带叉，表示消息失败或调用被拒绝；-)开放箭头是"发出即忘"的异步消息。常见错配：把返回响应写成->>，图看起来就像调用方还在等一个永远不会来的回答。口诀：去程实线、回程虚线、失败加叉。

忘记写 end 会怎样

alt、opt、par、rect、critical五类结构块每个都要一个end。漏掉时解析器把后续消息全部吞进该块，轻则错位、重则直接报语法错误，而且错的位置往往离真正的漏点很远。写完用折叠视图数一遍"开块数 = end 数"。

嵌套 par 到底可以几层

语法上不封顶，可读性上限是两层：超过两层时泳道被反复切分，消息标签互相挤压，评审时没人看得懂。三层需求的标准解法是把内层单独拆一张时序图，外层用一条消息指过去。

participant 命名不一致会怎样

消息里写的是 participant 声明时左边的标识符，不是右边的显示名。participant A as 网关之后写API->>B会直接报错或冒出多余泳道。建议：标识符用稳定短名（API、MQ），显示名只出现在as后面，全图保持一致。

alt管岔路、par管并排、rect/critical管重点，这套结构语法能让 Mermaid 时序图从"直线聊天"升级到能表达真实业务并发与分支的进阶时序图。配套资料：

• 时序图官方语法文档
• 全局配置项说明
• 时序图在线示例（含 alt/par 演示）

【免费下载链接】mermaidGeneration of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown项目地址: https://gitcode.com/GitHub_Trending/me/mermaid