Mermaid.js时序图进阶：并行流程与条件分支的表达

时序图（Sequence Diagram）是描述对象间交互行为的重要工具，但复杂业务逻辑往往包含并行处理、条件分支等高级场景。本文基于官方时序图语法文档，详解如何用Mermaid.js表达这些进阶场景，帮助开发者绘制更贴近真实业务的交互流程图。

条件分支：alt与opt关键字的应用

在用户登录场景中，系统需要根据账号状态返回不同结果。Mermaid提供alt（多条件分支）和opt（可选流程）关键字实现条件逻辑表达。

多条件分支（alt）

sequenceDiagram
    participant 用户
    participant 认证服务
    participant 数据库
    
    用户->>认证服务: 提交账号密码
    activate 认证服务
    认证服务->>数据库: 查询用户状态
    activate 数据库
    数据库-->>认证服务: 返回用户信息(正常/锁定/不存在)
    deactivate 数据库
    
    alt 用户不存在
        认证服务-->>用户: 错误:账号不存在
    else 用户已锁定
        认证服务-->>用户: 错误:账号已锁定
    else 密码错误
        认证服务-->>用户: 错误:密码错误
    else 验证通过
        认证服务-->>用户: 登录成功
    end
    deactivate 认证服务

可选流程（opt）

当某些步骤仅在特定条件下执行时，使用opt关键字：

sequenceDiagram
    participant 客户端
    participant 服务器
    
    客户端->>服务器: 请求数据
    activate 服务器
    服务器-->>客户端: 返回数据
    deactivate 服务器
    
    opt 数据异常
        客户端->>客户端: 显示错误提示
    end

语法提示：条件块必须以end关键字结束，分支标签建议使用动宾结构描述条件（如"用户不存在"而非"不存在"），增强可读性。

并行流程：par关键字的嵌套使用

微服务架构中，订单创建后通常需要同时通知库存、支付和物流系统。Mermaid的par关键字支持并行流程表达，且支持多层嵌套。

基础并行流程

sequenceDiagram
    participant 订单服务
    participant 库存服务
    participant 支付服务
    participant 物流服务
    
    订单服务->>订单服务: 创建订单记录
    par 并行通知
        订单服务->>库存服务: 扣减库存
        订单服务->>支付服务: 创建支付单
        订单服务->>物流服务: 预约配送
    end
    订单服务-->>客户端: 订单创建成功

嵌套并行流程

在电商大促场景中，并行流程内部可能包含更细粒度的并行操作：

sequenceDiagram
    participant 用户
    participant 购物车服务
    participant 结算服务
    
    用户->>购物车服务: 提交订单
    activate 购物车服务
    购物车服务->>结算服务: 发起结算
    activate 结算服务
    
    par 主流程并行处理
        par 商品处理
            结算服务->>结算服务: 验证商品库存
            结算服务->>结算服务: 计算商品价格
        end
        par 用户处理
            结算服务->>结算服务: 验证用户等级
            结算服务->>结算服务: 应用优惠券
        end
    end
    
    结算服务-->>购物车服务: 结算结果
    deactivate 结算服务
    购物车服务-->>用户: 订单提交结果
    deactivate 购物车服务

最佳实践：并行块标签应明确说明并行目的（如"主流程并行处理"），嵌套层级建议不超过2层，避免图结构过于复杂。

复杂场景综合案例

以电商下单完整流程为例，综合运用条件分支、并行流程和异常处理：

sequenceDiagram
    autonumber
    participant 用户
    participant 前端
    participant 订单服务
    participant 库存服务
    participant 支付服务
    
    用户->>前端: 点击"提交订单"
    frontend->>订单服务: 创建订单请求
    activate 订单服务
    
    alt 库存不足
        订单服务-->>前端: 返回库存不足
        frontend-->>用户: 显示库存提示
    else 验证通过
        orderService->>orderService: 锁定订单信息
        
        par 并行处理
            orderService->>inventoryService: 预扣库存
            orderService->>paymentService: 创建支付单
        end
        
        opt 支付超时
            paymentService->>orderService: 支付超时通知
            orderService->>inventoryService: 释放库存
        end
    end
    deactivate orderService

高级语法特性

背景高亮（rect）

使用rect关键字为重要流程添加彩色背景：

sequenceDiagram
    participant A
    participant B
    
    rect rgb(200, 255, 200)
        A->>B: 核心业务请求
        B-->>A: 处理结果
    end
    rect rgba(255, 200, 200, 0.5)
        A->>B: 非核心统计数据
        B-->>A: 统计结果
    end

关键区域（critical）

标记必须成功的关键操作及异常处理：

sequenceDiagram
    participant 客户端
    participant 数据库
    
    critical 数据库连接
        客户端->>数据库: 建立连接
    option 连接超时
        客户端->>客户端: 重试机制
    option 认证失败
        客户端->>客户端: 提示配置错误
    end

实战技巧与避坑指南

1. 消息箭头类型
   确保使用正确的箭头类型表达消息性质：

   • ->>：同步调用（实线带箭头）
   • -->>：异步响应（虚线带箭头）
   • -x：消息失败（实线带叉）

2. 激活状态管理
   使用activate/deactivate或+/-简化参与者激活状态管理：

   sequenceDiagram
       A->>+B: 请求(自动激活B)
       B-->>-A: 响应(自动释放B)
   

3. 编号与注释
   通过autonumber开启消息编号，使用%%添加代码注释：

   sequenceDiagram
       autonumber
       A->>B: 业务请求
       %% 此处应添加日志记录
       B-->>A: 处理结果
   

总结与扩展学习

掌握并行流程（par）和条件分支（alt/opt）是绘制复杂时序图的基础，结合背景高亮、关键区域等高级特性，可大幅提升图表表现力。建议进一步学习：

• 官方时序图完整语法
• Mermaid配置项
• 实战案例库

通过合理运用这些工具，开发者能够将复杂业务逻辑转化为清晰直观的可视化图表，有效提升团队沟通效率。