网站验证码代码网站mp3播放器代码

时序图

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

Mermaid画时序图

文档
在线画图

基本结构示例

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

复杂时序图示例

sequenceDiagramactor 用户 as 小明participant 客户端 as 抖音participant 服务器participant 数据库Note left of 用户: 小明起床刷手机用户->>客户端: 启动应用activate 客户端客户端->>服务器: 请求认证activate 服务器服务器->>数据库: 查询用户activate 数据库数据库-->>服务器: 返回用户数据deactivate 数据库alt 用户有效服务器-->>客户端: 认证成功客户端-->>用户: 显示仪表板Note right of 用户: 小明美滋滋else 用户无效服务器-->>客户端: 认证失败客户端-->>用户: 显示错误Note right of 用户: 小明哭唧唧endrect rgb(191, 223, 255)loop 每分钟用户->>客户端: 频繁请求客户端-->>用户: 一直响应endendNote 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 #LightGreenDB --> Service : 返回结果deactivate DBelse 验证失败Service -->> User : 返回错误deactivate Servicereturnend
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 #FFD700Cache --> 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