理解系统交互：UML时序图

时序图

时序图（Sequence Diagram），又名序列图，是一种交互图，它显示了进程如何相互操作以及操作顺序。

Mermaid画时序图

文档
在线画图

基本结构示例

sequenceDiagram
    participant A as 客户端
    participant B as 服务器
    A->>B: 登录请求
    B-->>A: 响应结果

基本元素

• 参与者: participant A 或 actor A，后加as添加别名，如：actor A as 小明
  • 在指令前添加 create 或 destroy 创建和销毁角色，如：create participant Carl、destroy Carl
• 消息：-实线，--虚线
  • 实线，无箭头: ->
  • 虚线，无箭头: -->
  • 实线带箭头: ->>
  • 虚线带箭头: -->>
  • 实线，有双向箭头 (v11.0.0+)：<<->>
  • 虚线，有双向箭头 (v11.0.0+)：<<-->>
  • 实线，末端带叉号：-x
  • 虚线，末端带叉号：--x
  • 实线，末端带开放箭头 (异步)：-)
  • 虚线，末端带开放箭头 (异步)：--)
• 给每个箭头添加序列号：autonumber
• 激活和停用框/角色: activate 和 deactivate
  • 还可以通过在消息箭头后附加 +/- 后缀来使用，如：
    Alice->>John: ... activate John 等同于 Alice->>+John:...
  • 对于同一个角色，可以重复激活，激活样式会堆叠表示
• 注释: Note left of, Note right of, Note over则横跨2个参与者
  • 编辑器忽略内容型注释：以 %%（双百分号）为前缀
• 换行：<br/>
• 循环: loop [文本]
• 条件分支: alt [文本] 和 else [文本]
• 可选路径: opt [文本]
• 并行路径: par [文本]，用and添加多个路径，可以嵌套
• 添加分组/方框：box，box后加方框颜色，默认透明
• 自动发生并带条件处理的操作：critical [文本]，用option添加条件(可省)
• 中断：break [文本]
• 背景高亮：rect rgb(191, 223, 255)
• 转义字符：格式类似这样#9829;
• 给角色添加弹出式菜单添加链接：links actorname:{"链接名字":"链接"}，可添加多个链接，点击角色弹出菜单显示

注意：像循环、分支、方框类会换行的元素，最后面需要加end结束。

复杂时序图示例

sequenceDiagram
    actor 用户 as 小明
    participant 客户端 as 抖音
    participant 服务器
    participant 数据库

    Note left of 用户: 小明起床刷手机
    用户->>客户端: 启动应用
    activate 客户端
    
    客户端->>服务器: 请求认证
    activate 服务器
    
    服务器->>数据库: 查询用户
    activate 数据库
    数据库-->>服务器: 返回用户数据
    deactivate 数据库
    
    alt 用户有效
        服务器-->>客户端: 认证成功
        客户端-->>用户: 显示仪表板
	    Note right of 用户: 小明美滋滋
    else 用户无效
        服务器-->>客户端: 认证失败
        客户端-->>用户: 显示错误
	    Note right of 用户: 小明哭唧唧
    end
    rect rgb(191, 223, 255)
	    loop 每分钟
	        用户->>客户端: 频繁请求
	        客户端-->>用户: 一直响应
	    end
    end
    
	Note over 用户,数据库: 小明间接和系统服务器、数据库交互
    
    deactivate 服务器
    deactivate 客户端

PlantUML画时序图

功能较多，语法复杂点，效果更灵活，效果示例如下，有需要可以深入了解一下
文档
在线画图

复杂图示例

@startuml
' 设置标题和页脚
title PlantUML 时序图综合示例
footer 包含所有核心元素用法

' 定义参与者（多种类型）
actor 用户 as User #blue
participant "客户端" as Client
control "服务控制器" as Service
entity "数据库" as DB
database "缓存系统" as Cache
collections "消息队列" as MQ
boundary "API网关" as Gateway

' 初始消息
User -> Gateway : 提交请求
activate Gateway

' 分组示例
group 认证流程
    Gateway -> Service : 验证请求
    activate Service #LightBlue
    
    ' 条件分支
    alt 验证成功
        Service -> DB : 查询数据
        activate DB #LightGreen
        DB --> Service : 返回结果
        deactivate DB
    else 验证失败
        Service -->> User : 返回错误
        deactivate Service
        return
    end
end

' 创建新对象（正确用法）
create Service
Gateway -> Service ** : 创建服务实例
activate Service

' 异步消息
Service ->> MQ : 发布事件
activate MQ #FFFFCC

' 激活嵌套
Service -> Service : 内部处理
activate Service #CCCCCC
Service --> Service : 完成
deactivate Service

' 循环分组
loop 3 次重试
    Service -> Cache : 获取缓存
    activate Cache #FFD700
    Cache --> Service : 返回空
    deactivate Cache
end

' 注释示例
note over User, Client : 用户交互区域
note right of MQ : 异步消息系统\n解耦处理
note left of Service
  **服务控制器职责**：
  1. 请求路由
  2. 数据处理
  3. 错误处理
end note

' 延迟标记
Service --> Client : 处理中...
... 网络延迟 ...
Client -> User : 请等待

' 返回消息
Service <-- Cache : 缓存响应

' 生命线结束
destroy Service
Gateway --> User : 最终响应

' 自动编号
autonumber
Service -> DB : 保存日志
DB --> Service : 确认保存
autonumber stop

' 分组颜色
group #LightPink 清理资源
    Service -> Cache : 清除临时数据
    Service ->> MQ : 发送清理事件
end
@enduml