10分钟学会使用Markdown绘制UML时序图

Posted 2021-04-17 黑斑马团队

1. Markdown和UML时序图简介

1.1 什么是Markdown？

Markdown是一种语法特别少、特别简单的标记语言，用来编写文档。用Markdown编写的文档是纯文本格式，经过编辑器的渲染，就会形成排版优美的文档，本文就是用Markdown编写的。如果我们使用Markdown来编写文档，就不用再像用Word那样疲累于设置标题、缩进、左右对齐、字体大小等烦杂的工作，而可以完全不考虑排版的事情，专心于写作的内容。Markdown现在已经被广泛使用，一些科技博客的编辑器支持Markdown，一些新兴的写作阅读平台，比如简书，也支持Markdown，还有github上所有项目的README.md就是用Markdown写的。

1.2 什么是UML时序图？

UML时序图是众多UML图中的一种，用图形来表示某个系统中的时序关系。它通过描述对象之间发送消息的时间顺序来显示多个对象之间的交互关系。程序员设计模块的时候，常常会画UML时序图来描述模块中几个对象的交互，以此来理清头绪或者向人解说。

2. 为什么用Markdown来绘制UML时序图？

绘制UML时序图的方法有很多，Visio可以绘制时序图，还有一些网站也可以绘制时序图。但是用这些方式，需要大量的拖拖拽拽，勾勾连连，很费时间。如果用Markdown的话，只需用特别简单易懂的几个语法，很快就可以描绘出时序图。

3. 事先准备

• Markdown编辑器。以下所列的Markdown编辑器都支持绘制UML时序图，选取其中一个即可：

• 为知笔记（为知笔记创建Markdown笔记的方式比较特殊，请读者自行查阅为知笔记的帮助内容)

• 作业部落

• CSDN博客编辑器

• 马克飞象（收费）

4. 语法讲解

上面列出的几种编辑器支持的绘制UML时序图的语法是一样的，只是各编辑器用来标识时序图部分的方法不尽相同。下面的标识方法是以为知笔记为准，其他编辑器的标识方法请具体参考各编辑器的帮助说明。

4.1 标识时序图

```sequence
```

4.2 创建Title

```sequence
title: Title
```

4.3 创建Actor

```sequence
participant A
participant B
participant C as C_Alias
```

创建了A、B、C三个Actor。其中C的创建中，as C_Alias表示给C起一个别名，叫C_Alias。

4.4 Actor的交互

```sequence
A->B: how are you?
B-->>A: fine.
```

->中，-代表实线，>代表实心箭头，还可以用--表示虚线，>>表示非实心箭头。在UML时序图中，实线表示主动发送消息，虚线表示返回（应答）消息，实心箭头表示同步消息（消息发送者停止活动等待应答消息），非实心箭头表示异步消息（消息发送者无须停止活动等待应答消息）。->两边可以是同一个Actor，表示自交互:

```sequence
A->A: 内心os
```

4.5 多个Actor的交互

```sequence
A->B: how are you, B?
B->C: how are you, C?
C->A: how are you, A?
```

4.6 给Actor添加Note

```sequence
Note right of A: I'm A
Note left of A: I'm A
Note over A: I'm A 
Note over A, B: We're friends.
```

到此为止，绘制UML时序图的所有语法都讲完了，很少吧。另外，查阅语法可以看这张图（引用自js-sequence-diagram项目）：

下面，就让我们用Markdown画一个实际的系统吧。

5. 用Markdown绘制典型的客户端登录时序图

登陆流程大致是：用户在客户端输入通行证的账号密码来登陆一个服务器，这里不考虑第三方登陆，不考虑登陆失败的情况。

```sequence
participant 客户端
participant 服务器
participant 通行证中心
Note over 客户端: 用户输入通行证的账号、密码
客户端->通行证中心: 发送账号、密码
Note over 通行证中心: 验证账号、密码
通行证中心-->>客户端: 返回token
客户端->服务器: 发送token
服务器->通行证中心: 验证token
通行证中心-->>服务器: 验证成功
服务器-->>客户端: 登陆成功
```

6. 限制

Markdown绘制UML时序图虽然简单、快速，但是缺少对一些UML时序图基本元素的支持，比如Focus of Control、Combined Fragments、对象的中途创建和对象的销毁。所以当你需要添加一些循环或者分支结构的消息时，或者需要中途创建对象、中途销毁对象时，Markdown就不能满足你的要求了。不过，技术一直在进步，将来Markdown或许能画出更复杂的时序图来。