Markdown 时序图
1. 前言
Markdown 的原生语法绘制图形,但通过扩展模块,我们可以将一些格式化的渲染成我们需要的图形。常用的图形有 “流程图”、“”、“类图”、“状态图”、“甘特图”、"饼图" 等。
本节将重点介绍如何通过 Mermaid 绘制「」。
(Sequence Diagram) ,用来体现对象之时间顺序关系,可以表达出对象的交互过程,也就是 “从哪到哪” 的图形化描述。
环境说明:
考虑到 Markdown 工具之不兼容,有的直接从复制粘贴到本地不会正常,大家学习时自己动手写是肯定没问题的。本节所有实例及演示均使用 Typora 工具完成。
Mermaid 为 Markdown 扩展语法,需要在 Typora 设置中开启对图表的语法。其方式为:「设置」->「Markdown」->「Markdown 扩展语法」-> 勾选「图表」,如下图:
2. 语法详解
由以矩形代表参与者,参与者下方代表生存期长实线,连接线之间代表消息的箭头和控制焦点组成。
的也需要书写在「mermaid」类型块之间,如下:
```mermaid ```
绘制,必须包含类型声明、对象及消息三个部分。
实例 1:
基本的。
```mermaid sequenceDiagram 李雷->>韩梅梅: Hi LiLei, How do you do? 韩梅梅-->>李雷: How do you do!```
其渲染如下:
中的对象可以通过别名形式简化书写。
实例 2:
以别名形式定义对象。
```mermaid sequenceDiagram participant l as 李雷 participant h as 韩梅梅 l->>h: Hello Hanmeimei, how are you? h->>l: Hello Lilei, I am fine, thank you, and you? l-->h: I am fine, thank you.```
其渲染如下:
中的消息是对参与者之间通信的时机与的描述,其声明方式如:[发起者][连线类型][接收者]:消息
。
其中连接类型有如下几种形式:
聚焦代表一条消息在其对象的生命周期中的处理活动。
实例 3:
在中聚焦。
```mermaid sequenceDiagram 李雷->>韩梅梅: Hello, what's your name? activate 韩梅梅 韩梅梅-->>李雷: Hello, my name is Hanmeimei! deactivate 韩梅梅```
渲染如下:
聚焦可以使用 +
/ -
符号简化书写。
实例 4:
聚焦的简写。
sequenceDiagram 李雷->>+韩梅梅: Hello, what's your name? 韩梅梅-->>-李雷: Hello, my name is Hanmeimei!
当我们无法用以上图形信息充分表达思路时,可以备注信息。备注需要通过单独一行的声明实现。
实例 5:
在参与者的生命线右侧备注。
```mermaid sequenceDiagram 李雷->>韩梅梅: Hi Hanmeimei, How do you do? Note right of 韩梅梅: Lesson 1 韩梅梅-->>李雷: How do you do!```
渲染如下:
实例 6:
在参与者的生命线之上备注。
```mermaid sequenceDiagram 李雷->>韩梅梅: Hi Hanmeimei, How do you do? Note over 李雷,韩梅梅: Lesson 1 韩梅梅-->>李雷: How do you do!```
渲染如下:
循环代表中的一项活动,有可能执行一次,有可能重复执行多次,每次在临界点判断循环的条件是否满足。
实例 7:
```mermaid sequenceDiagram 李雷->韩梅梅: Hello Hanmeimei, how are you? loop 不停地说 韩梅梅-->李雷: Great! end```
其渲染结果如下:
选择代表中的判断逻辑,即一项结果可能发生,也有可能不发生。
实例 8:
其渲染如下:
3. 使用场景及应用实例
作为展示对象交互顺序的工具,可以更直观的描述顺序及并发过程。
实例 9:
学生使用教务系统展示。
sequenceDiagram participant a as 学生 participant b as 教务系统 participant c as 课程 participant d as 成绩 opt 认证 a->>b: /密码 end a->>+b: 请求课程列表 b->>+c: 课程列表 c-->>-b: 返回课程列表 b->>+d: 成绩信息 d-->>-b: 返回成绩信息 b-->>-a: 成绩
其渲染如下:
4. 小结
是用来描述交互过程的图形组合,描述了对象动态协作;
最核心的元素是对象、生命线和消息;
我们可以通过判断、循环、并行描述复杂的消息传递及处理流程。