【Android -- 写作工具】Markdown 时序图

1. 前言

Markdown 的原生语法不支持绘制图形，但通过扩展模块，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、”饼图” 等。

本节将重点介绍如何通过 Mermaid 绘制「时序图」。

时序图 (Sequence Diagram) ，用来体现对象之间的时间顺序关系，可以表达出对象的交互过程，也就是 “从哪到哪” 的图形化描述。

环境说明：
考虑到 Markdown 工具之间的不兼容，有的内容直接从页面复制粘贴到本地不会正常显示，大家学习时自己动手写是肯定没问题的。本节所有实例代码及演示效果均使用 Typora 工具完成。

2. 语法详解

2.1 基本的时序图
时序图由以矩形代表参与者，参与者下方代表生存期间的长实线，连接线之间代表消息的箭头和控制焦点组成。

时序图的内容也需要书写在「mermaid」类型代码块之间，如下：

​```mermaid
​```

绘制时序图，必须包含时序图类型声明、对象及消息三个部分。

实例 1：

基本的时序图。

李雷 韩梅梅 Hi LiLei, How do you do? How do you do! 李雷 韩梅梅

实例 2：

以别名形式定义对象。

李雷 韩梅梅 Hello Hanmeimei, how are you? Hello Lilei, I am fine, thank you, and you? I am fine, thank you. 李雷 韩梅梅

时序图中的消息是对参与者之间通信的时机与内容的描述，其声明方式如：[发起者][连线类型][接收者]:消息内容。

实例 3：

在时序图中增加聚焦。

李雷 韩梅梅 Hello, what's your name? Hello, my name is Hanmeimei! 李雷 韩梅梅

实例 4：

聚焦的简写。

李雷 韩梅梅 Hello, what's your name? Hello, my name is Hanmeimei! 李雷 韩梅梅

实例 5：

在参与者的生命线右侧增加备注。

李雷 韩梅梅 Hi Hanmeimei, How do you do? Lesson 1 How do you do! 李雷 韩梅梅

实例 6：

在参与者的生命线之上增加备注。

李雷 韩梅梅 Hi Hanmeimei, How do you do? Lesson 1 How do you do! 李雷 韩梅梅

2.2 时序图的逻辑

• 循环
  循环代表时序图中的一项活动，有可能执行一次，有可能重复执行多次，每次在临界点判断循环的条件是否满足。

实例 7：

李雷 韩梅梅 Hello Hanmeimei, how are you? Great! loop [不停地说] 李雷 韩梅梅

3. 使用场景及应用实例

时序图作为展示对象交互顺序的工具，可以更直观的描述顺序及并发过程。

实例 9：

学生使用教务系统时序图展示。

学生 教务系统 课程 成绩 用户名/密码 opt [认证] 请求课程列表 获取课程列表 返回课程列表 获取成绩信息 返回成绩信息 显示成绩 学生 教务系统 课程 成绩

4. 小结

• 时序图是用来描述交互过程的图形组合，描述了对象间的动态协作；
• 时序图最核心的元素是对象、生命线和消息；
• 我们可以通过判断、循环、并行描述复杂的消息传递及处理流程。