时序图

绘制时许图的基本语法如下:

[角色A][箭头][角色B]: 消息描述

比如描述客户端发送登录账号密码给服务器可以这样写:

sequenceDiagram
客户端->>服务器: 发送账号密码

这时服务器会在内部校验密码,可以这么写:

sequenceDiagram
服务器-->>服务器: 校验账号密码

时序图支持8种箭头类型:

Type Description
-> 实线
--> 虚线
->> 带箭头实线
-->> 带箭头虚线
-x 断头实线
--x 断头虚线
-) 表示异步的箭头实线 (async)
--) 表示异步的箭头虚线 (async)

笔记(Notes)

我们可以在流程图上面添加一些笔记或者说明,语法如下:

Note [rightof|leftof|over ] [Actor]

sequenceDiagram
客户端->>服务器: 发送账号密码
Note over 服务器: 超时时间3s
服务器-->>服务器: 校验账号密码

循环,选择控制流

在时序图中是可以表示循环和选择的,比如我们要表示小明的女朋友叫小明每天向她说早安:

sequenceDiagram
actor G as 女朋友
actor XM as 小明
G->>XM: 每天跟我说早安
loop 每天
  XM-->>G: 早安
end

后来小明的女朋友成了他老婆,有一天小明老婆让小明下班时买一斤包子,如果遇到卖西瓜的,就买一个。图示如下:

sequenceDiagram
actor G as 小明老婆
actor XM as 小明
actor BUN as 包子铺
G->>XM: 下班时买一斤包子,如果遇到卖西瓜的,就买一个
alt 遇到卖西瓜的
  XM-->>BUN: 买一个包子
else
  XM-->>BUN: 买一斤包子
end

XM->>G: 回家跪戳衣板

背景高亮

有时候我们想给某块流程设置高亮,可以用以下的语法: