前言

Github：https://github.com/HealerJean

博客：http://blog.healerjean.com

```mermaid
时序图代码
```

1、参与者

传统时序图概念中参与者有角色和类对象之分，但这里我们不做此区分，用参与者表示一切参与交互的事物，可以是人、类对象、系统等形式。中间竖直的线段从上至下表示时间的流逝。

```mermaid
sequenceDiagram
Title: 小明买书
    participant 客户端
    participant 服务器
```

sequenceDiagram
Title: 小明买书
    participant 客户端
    participant 服务器

2、消息

交互时一方对另一方的操作（比如接口调用）或传递出的信息。 消息语句格式为：<参与者> <箭头> <参与者> : <描述文本>。

<箭头>的写法有：

2.1、->> ：主动发出消息 实线带有箭头

->> 显示为实线箭头（主动发出消息）

2.2、-->> ：响应 虚线带有箭头

-->> 显示为虚线箭头（响应）

2.3、 -x ：异步消息

-x 显示为末尾带「X」的实线箭头（异步消息）

```mermaid
sequenceDiagram
    participant 老板A
    participant 员工A

    老板A ->> 员工A : “在这里我们都是兄弟！”
    老板A -x 员工A : 画个饼
    员工A -->> 老板A : 鼓掌
```

sequenceDiagram
    participant 老板A
    participant 员工A

    老板A ->> 员工A : “在这里我们都是兄弟！”
    老板A -x 员工A : 画个饼
    员工A -->> 老板A : 鼓掌

2.4、->：没有箭头的实线

```mermaid
sequenceDiagram
Title: 小明买书
	participant 老板
	participant 员工
	
	老板 -> 员工 : 今天辛苦加班
	
```

sequenceDiagram
Title: 小明买书
	participant 老板
	participant 员工
	
	老板 -> 员工 : 今天辛苦加班
	

2.5、-->：没有监听的虚线

```mermaid
sequenceDiagram
Title: 小明买书
	participant 老板
	participant 员工
	
	老板 --> 员工 : 今天辛苦加班
	
```

sequenceDiagram
Title: 小明买书
	participant 老板
	participant 员工
	
	老板 --> 员工 : 今天辛苦加班
	

3、激活框 + -

participant <参与者名称> 这句可以省略，省略后参与者横向排列的次序，由消息语句中其出现的次序决定。如后续示例所示。

⬤ 画法如下，注意体会箭头符号后的 + 和 - 的使用方法和效果，它们相当于激活框的开关：

```mermaid
sequenceDiagram
    老板B ->> + 员工B : “你们要669！”
    员工B -->> - 老板B : 鼓掌
    
    老板B ->> + 员工B : “悔创本司！”
    员工B -->> - 老板B : 鼓掌
```

sequenceDiagram
    老板B ->> + 员工B : “你们要669！”
    员工B -->> - 老板B : 鼓掌
    
    老板B ->> + 员工B : “悔创本司！”
    员工B -->> - 老板B : 鼓掌

4、注解

看图就明白了

```mermaid
sequenceDiagram
    Note left of 老板A : 对脸不感兴趣
    Note right of 老板B : 对钱不感兴趣
    Note over 老板A,老板B : 对996感兴趣
```

sequenceDiagram
    Note left of 老板A : 对脸不感兴趣
    Note right of 老板B : 对钱不感兴趣
    Note over 老板A,老板B : 对996感兴趣

5、选择alt：（if else）

在多个条件中作出判断，每个条件将对应不同的消息序列。相当于 if 及else if 语句。

```mermaid
sequenceDiagram    
    土豪 ->> 取款机 : 查询余额
    取款机 -->> 土豪 : 余额
    
    alt 余额 > 5000
        土豪 ->> 取款机 : 取上限值 5000 块
    else 5000 < 余额 < 100
        土豪 ->> 取款机 : 有多少取多少
    else 余额 < 100
        土豪 ->> 取款机 : 退卡
    end
    
    取款机 -->> 土豪 : 退卡
```

sequenceDiagram    
    土豪 ->> + 取款机 : 查询余额
    取款机 -->> - 土豪 : 余额
    
    alt 余额 > 5000
        土豪 ->> 取款机 : 取上限值 5000 块
    else 5000 < 余额 < 100
        土豪 ->> 取款机 : 有多少取多少
    else 余额 < 100
        土豪 ->> 取款机 : 退卡
    end
    
    取款机 -->> 土豪 : 退卡

6、并行 Par

将消息序列分成多个片段，这些片段并行执行。

```mermaid
sequenceDiagram
    老板C ->> + 员工C : 开始实行996
    
    par 并行
        员工C ->> 员工C : 刷微博
    and
        员工C ->> 员工C : 工作
    and
        员工C ->> 员工C : 刷朋友圈
    end
    
    员工C -->>  - 老板C : 9点下班
```

sequenceDiagram
    老板C ->> + 员工C : 开始实行996
    
    par 并行
        员工C ->> 员工C : 刷微博
    and
        员工C ->> 员工C : 工作
    and
        员工C ->> 员工C : 刷朋友圈
    end
    
    员工C -->>  - 老板C : 9点下班

练习：

```mermaid
sequenceDiagram
	participant 商城
	participant 承保服务
	participant 理赔服务
	Note left of 商城 : 卖东西的
	Note left of 承保服务 : 出单
	Note right of 理赔服务 : 理赔
  Note over  商城,理赔服务 : 一条龙
	
	商城 ->> + 理赔服务 : 查询是否支持理赔
	
	理赔服务 ->> + 承保服务 : 查询是否有保单
	承保服务 -->> - 理赔服务 : 有保单
	

	par 并行
		理赔服务 ->> 理赔服务 : 售后数量大于1
	and
		理赔服务 ->> 理赔服务 : 保险有效期内
	end
	
	理赔服务 -->> - 商城 : 支持理赔
	
	
```

sequenceDiagram
	participant 商城
	participant 承保服务
	participant 理赔服务
	Note left of 商城 : 卖东西的
	Note left of 承保服务 : 出单
	Note right of 理赔服务 : 理赔
  Note over  商城,理赔服务 : 一条龙
	
	商城 ->> + 理赔服务 : 查询是否支持理赔
	
	理赔服务 ->> + 承保服务 : 查询是否有保单
	承保服务 -->> - 理赔服务 : 有保单
	

	par 并行
		理赔服务 ->> 理赔服务 : 售后数量大于1
	and
		理赔服务 ->> 理赔服务 : 保险有效期内
	end
	
	理赔服务 -->> - 商城 : 支持理赔