教你用代码写出清晰又通用的时序图

犯二青年 发布于

前言

在近期我在写一些相关业务的同时，遇到了很多问题，由于业务的复杂度，大大超乎了我脑子的容量，导致我总是会忘记一些流程，非常的头疼，这导致我头大瞬间掉了一半，于是我开始想办法先解决思路不清晰的问题，然后同事就给我介绍了时序图，在一顿了解之后，我的头发感觉回来了一半，我给出一张我画的一个微信商城微服务刷新微信用户信息的时序图给大家看看逻辑是否清晰很多(本图为虚构，请自己按照真实场景构思)：

一、 什么是时序图？

时序图（Sequence Diagram），亦称为序列图、循序图或顺序图，是一种UML交互图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。

时序图是一个二维图，横轴表示对象，纵轴表示时间，消息在各对象之间横向传递，依照时间顺序纵向排列。

二、 时序图的作用是什么？

1、展示对象之间交互的顺序。将交互行为建模为消息传递，通过描述消息是如何在对象间发送和接收的来动态展示对象之间的交互；

2、相对于其他UML图，时序图更强调交互的时间顺序；

3、可以直观的描述并发进程。

三、 组成元素有哪些？

1. 角色（Actor）

  • 系统角色，可以是人、机器、其他系统、子系统；在时序图中用表示。

2. 对象（Object）

（1）对象的三种命名方式

  • 第一种方式包括对象名和类名，例如：直播课时:课时，在时序图中，用“对象：类”表示；

  • 第二种方式只显示类名，即表示它是一个匿名对象，例如： :课程；在时序图中，用“：类”表示；

  • 第三种方式只显示对象名不显示类名，例如：讲师；在时序图中，用“对象”表示。

（2）命名方式的选择

  • 三种命名方式均可，哪种最容易让阅读该时序图的人理解，就选择哪种。

（3）对象的排列顺序

  • 对象的左右顺序并不重要，但是为了作图清晰整洁，通常应遵循以下两个原则：把交互频繁的对象尽可能的靠拢；2.把初始化整个交互活动的对象放置在最左端。

3. 生命线（Lifeline）

  • 在时序图中表示为从对象图标向下延伸的一条虚线，表示对象存在的时间。

4. 控制焦点（Focus of Control）

  • 又称为激活期，表示时间段的符号，在这个时间段内对象将执行相应的操作。它可以被理解成C语言语义中一对花括号{ }中的内容；用小矩形表示。

5. 消息（Message）

  • 消息一般分为同步消息（Synchronous Message），异步消息（Asynchronous Message）和返回消息（Return Message）。

  • 消息的发送者把控制传递给消息的接收者，然后停止活动，等待消息的接收者放弃或者返回控制。用来表示同步的意义；

  • 消息发送者通过消息把信号传递给消息的接收者，然后继续自己的活动，不等待接受者返回消息或者控制。异步消息的接收者和发送者是并发工作的。

  • 返回消息表示从过程调用返回。

  1. 自关联消息
    表示方法的自身调用或者一个对象内的一个方法调用另外一个方法。

  2. 组合片段
    组合片段用来解决交互执行的条件和方式，它允许在序列图中直接表示逻辑组件，用于通过指定条件或子进程的应用区域，为任何生命线的任何部分定义特殊条件和子进程。组合片段共有13种，名称及含义如下：

四、Markdown中使用mermaid画时序图

语法是使用的代码段的语法，只不过代码段的语言注释选择：mermaid

如下的一段时序图：

其实是由这一段代码生成的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
sequenceDiagram
participant web_node_server
participant mall_server
participant db_server
participant mall_user_server
participant user_center_server
participant wechat_api_server
 
web_node_server ->>+ mall_server: 请求刷新当前商城订单微信用户信息(通过http请求微服务网关触发)
mall_server -->>- web_node_server: 异步处理，直接返回请求状态

mall_server ->>+ mall_server: 定时任务自行触发

mall_server ->>+ db_server: 查询数据库获取当前所有订单的微信用户id集合
db_server -->>- mall_server: 返回当前租户所有微信用户id集合，错误记录日志


loop 如果微信用户id超过一定的数量，则开启协程，异步处理(单个协程处理的数量自行预估)

mall_server ->>+ mall_user_server: 请求商城用户服务获取微信用户信息(支持批量)
mall_user_server -->>- mall_server: 返回微信用户信息，错误记录日志

mall_server ->>+ user_center_server: 通过微信用户信息中的open_id调用用户中心服务
user_center_server ->>+ wechat_api_server: 请求微信开放平台，获取用户的最新信息
wechat_api_server -->>- user_center_server: 微信开放平台返回最新用户信息
user_center_server -->>- mall_server: 返回微信开放平台返回最新用户信息，错误记录日志

mall_server ->>+ db_server: 最新微信用户信息有变更或数据库缺少该信息，则更新数据库
db_server -->- mall_server: 成功无响应，错误记录日志

end

看上去是不是很清晰？想学嘛？

  • (1) 参与者
    传统时序图概念中参与者有角色和类对象之分，但这里我们不做此区分，用参与者表示一切参与交互的事物，可以是人、类对象、系统等形式。中间竖直的线段从上至下表示时间的流逝。
  • (2) 消息
    交互时一方对另一方的操作（比如接口调用）或传递出的信息。用单向箭头来表示——实线代表主动发出消息；虚线代表响应；末尾带「X」代表异步消息，无需等待回应。
1
2
3
4
5
6
7
8
sequenceDiagram

participant 老板A
participant 员工A

老板A ->> 员工A: “在这里我们都是兄弟！”
老板A -x 员工A: 画个饼
员工A -->> 老板A: 鼓掌
  • (3) 激活框
    从消息接收方的时间线上标记一小段时间，表示对消息进行处理的时间间隔。
1
2
3
4
5
6
7
8
9
sequenceDiagram

participant 老板B
participant 员工B

老板B ->> + 员工B : “你们要669！”
员工B -->> - 老板B : 鼓掌
老板B ->> + 员工B : “悔创本司！”
员工B -->> - 老板B : 鼓掌
  • (4) 注解
1
2
3
4
5
6
7
8
9
10
11
12
13
14
sequenceDiagram

participant 老板A
participant 员工A
participant 老板B
participant 员工B

老板B ->> + 员工B : “你们要669！”
员工B -->> - 老板B : 鼓掌
老板B ->> + 员工B : “悔创本司！”
员工B -->> - 老板B : 鼓掌
Note left of 老板A : 对脸不感兴趣
Note right of 老板B : 对钱不感兴趣
Note over 老板A,老板B : 对996感兴趣
  • (5) 循环（loop）
    在条件满足时，重复发出消息序列。相当于编程语言中的 while 语句。
1
2
3
4
5
6
7
8
9
sequenceDiagram

网友 ->> + X宝 : 网购钟意的商品
X宝 -->> - 网友 : 下单成功

loop 一天七次
网友 ->> + X宝 : 查看配送进度
X宝 -->> - 网友 : 配送中
end
  • (6) 选择（alt）
    在多个条件中作出判断，每个条件将对应不同的消息序列。相当于 if 及 else if 语句。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
sequenceDiagram

土豪 ->> 取款机 : 查询余额
取款机 -->> 土豪 : 余额
 
alt 余额 > 5000
土豪 ->> 取款机 : 取上限值 5000 块
else 5000 < 余额 < 100
土豪 ->> 取款机 : 有多少取多少
else 余额 < 100
土豪 ->> 取款机 : 退卡
end
 
取款机 -->> 土豪 : 退卡
  • (7) 可选（opt）
    在某条件满足时执行消息序列，否则不执行。相当于单个分支的 if 语句。
1
2
3
4
5
6
7
sequenceDiagram

老板C ->> 员工C : 开始实行996
 
opt 永不可能
员工C -->> 老板C : 拒绝
end
  • (8) 并行（Par）
    将消息序列分成多个片段，这些片段并行执行。
1
2
3
4
5
6
7
8
9
10
11
12
13
sequenceDiagram

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

结语

我之前也很不爱写思维导图，时序图的，但是由于业务的复杂程度有时候超乎了你的想象，这时候为了偷懒不做一些准备工作，这样代码写起来也会很不顺畅，上线了自己心里没底，不确定是否会发生问题，因为你流程都还不是很清楚，写出来的东西怎么可能有质量呢？现在我比较喜欢的东西第一个是画时序图，第二个就是通过 OmniGraffle 自己画出代码模型，如要怎么设计代码结构，等等，简单草图就可以用 OmniGraffle 来画图。

文末感谢：传旭，本文的大多数内容都是摘抄字传旭的内部分享，最后愿各位写的代码都 NO BUG

犯二青年

犯二青年

一个平淡的开发者~

69
20
65
TOC
  1. 1. 前言
  2. 2. 一、 什么是时序图？
  3. 3. 二、 时序图的作用是什么？
  4. 4. 三、 组成元素有哪些？
    1. 4.1. 1. 角色（Actor）
    2. 4.2. 2. 对象（Object）
    3. 4.3. 3. 生命线（Lifeline）
    4. 4.4. 4. 控制焦点（Focus of Control）
    5. 4.5. 5. 消息（Message）
  5. 5. 四、Markdown中使用mermaid画时序图
  6. 6. 结语
NOTICE

保持好奇，刻意练习，每日精进！

CATEGORYS
TAGS
API签名 Centos Charles Chrome ChromeDP ChromeDriver Deepin Docker Docker Desktop ElasticSearch ElasticSearch Dump Elasticsearch Filebeat Git Github Actions Golang Hyperf JavaScript Jenkins Kibana Laravel Linux Logstash Mac MySQL MySQL Dump PHP PhpStorm Redis SSH Swoole Ubuntu Vue Windows Xdebug asynq asynqmon deploy gRPC git github golang hyperf k8s k8s教程系列 oh-my-zsh passport php-cs-fixer sql supervisord web逆向 zsh 其他 后端技术 工作总结 并发编程 开发小技巧 微服务 数据迁移 消息队列 生活小技巧 编程感悟 薅羊毛 踩坑日记 运维技巧