理解系统交互：UML时序图

时序图

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

Mermaid画时序图

基本结构示例

客户端服务器登录请求响应结果客户端服务器

text 复制代码

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结束。

复杂时序图示例

小明抖音服务器数据库小明起床刷手机启动应用请求认证查询用户返回用户数据认证成功显示仪表板小明美滋滋认证失败显示错误小明哭唧唧 alt [用户有效] [用户无效] 频繁请求一直响应 loop [每分钟] 小明间接和系统服务器、数据库交互小明抖音服务器数据库

text 复制代码

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画时序图

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

复杂图示例

text 复制代码

@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