使用 markdown 画流程图、时序图

#使用 markdown 画流程图、时序图| 来源: 网络整理| 查看: 265

在日常工作中，难免会画一些流程图、时序图。之前都是选择使用在线的画图网站，画完然后截图插入到文档。我个人用的比较多的主要是腾讯文档。

相较于截图的方式，代码画图都有哪些好处呢？

使用比较轻便。不需要额外安装类似 draw.io 之类的画图软件，很多 markdown 编辑器都自带了这个功能。使用便捷简单。如果截图的方式，需要考虑图片大小以及对齐问题。流程变动了需要先去在线平台重新绘制，然后重新截图，相对比较麻烦。而代码画图不需要考虑这些。只要按照语法即可快速画图。

下边就来看一下，通过 markdown 语法是如何进行画图的。

markdown 语法

当我需要画图时插入如下这样的一个代码块：

```mermaid 流程图/时序图代码 ``` 复制代码流程图流程图布局

流程图代码以「graph 《布局方向》」开头，布局方向主要有如下几种：

TB，从上到下 TD，从上到下 BT，从下到上 RL，从右到左 LR，从左到右

例：

```mermaid graph TB ``` 复制代码流程常用符号 graph TB A(起止框) A（起止框）复制代码 graph TB B[处理框]

用法如下：

B[处理框] 复制代码

可以使用 HTML 中的实体字符。

A["双引号：#quot;"] 复制代码 graph TB A["双引号: #quot;"] graph TB C{判断框} C{判断框} 复制代码 graph TB D((连接)) D(（连接）) 复制代码流程图连接样式实线，箭头，文字 graph LR A--文字描述--->B graph LR A-- 文字描述 --->B 或 A--> |文字| B 复制代码实线，箭头，无文字 graph LR A-->B graph LR A-->B 复制代码实线，无箭头，无文字 graph LR A---B graph LR A---B 复制代码实线，无箭头，文字 graph LR A -- 文字描述 --- B graph LR A-- 文字描述 ---B 复制代码虚线，箭头，无文字 graph LR; A-.->B; graph LR; A-.->B; 复制代码虚线，箭头，文字 graph LR; A-. 文字 .->B; graph LR; A-. 文字 .->B; 复制代码

综合示例：

```mermaid graph TB A(接口请求) --> B[参数校验] B[参数校验] --> C{校验通过?} C{校验通过?} -- 通过 --> d[处理业务逻辑] C{校验不通过} -- 不通过 --> e[结束] d[处理业务逻辑] --> e(结束) ``` 复制代码 graph TB A(接口请求) --> B[参数校验] B[参数校验] --> C{校验通过?} C{校验通过?} -- 通过 --> d[处理业务逻辑] C{校验不通过} -- 不通过 --> e[结束] d[处理业务逻辑] --> e(结束) 时序图

时序图代码以「sequenceDiagram」开头。时序图中包括如下常见元素：

参与者 sequenceDiagram Title: 标题 participant A as lilei participant B as hanmeimei participant [别名 as ]《参与者名称》。复制代码

语句次序即为参与者横向排列次序。

消息

交互时一方对另一方的操作（比如接口调用）或传递出的信息。

用单向箭头来表示——实线代表主动发出消息；虚线代表响应；末尾带「X」代表异步消息，无需等待回应。

消息语句格式为：

: 。复制代码

其中的写法有：

->> 显示为实线箭头（主动发出消息） -->> 显示为虚线箭头（响应） -x 显示为末尾带「X」的实线箭头（异步消息）复制代码

示例：

sequenceDiagram participant A as lilei participant B as hanmeimei A ->> B: How are you. Note left of A: 对象A的描述(提示) B -->> A: Fine, Thank you. Note right of B: 对象B的描述 A -x B: 我走了复制代码 sequenceDiagram participant A as lilei participant B as hanmeimei A ->> B: How are you. Note left of A: 对象A的描述(提示) B -->> A: Fine, Thank you. Note right of B: 对象B的描述 A -x B: 我走了激活框

从消息接收方的时间线上标记一小段时间，表示对消息进行处理的时间间隔。

[+/-]: 。复制代码

示例：

sequenceDiagram 老板 ->> + 员工: 今年年终奖翻倍员工 -->> - 老板: 持续鼓掌复制代码 sequenceDiagram 老板 ->> + 员工: 今年年终奖翻倍员工 -->> - 老板: 持续鼓掌注解 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走起来循环

相当于编程代码中的 while 循环循环格式为：

loop 循环的描述消息 end 复制代码

示例：

sequenceDiagram 用户 ->> + 网站 : 账号实名认证网站 -->> - 用户 : 资料提交成功，等待审核 loop 一天七次用户 ->> + 网站 : 查看审核进度网站 -->> - 用户 : 审核中 end 复制代码 sequenceDiagram 用户 ->> + 网站 : 账号实名认证网站 -->> - 用户 : 资料提交成功，等待审核 loop 一天七次用户 ->> + 网站 : 查看审核进度网站 -->> - 用户 : 审核中 end 选择(alt)

相当于 if 及 else if 语句。或者理解为 switch 也可以

sequenceDiagram 学生 ->> 学校 : 查询成绩学校 -->> 学生 : 成绩 alt 成绩 > 550 学生 ->> 学校 : 可以上一本了 else 400 < 成绩 < 550 学生 ->> 学校 : 上个二本吧 else 余额 > 300 学生 ->> 学校 : 考虑下专科吧 end 复制代码 sequenceDiagram 学生 ->> 学校 : 查询成绩学校 -->> 学生 : 成绩 alt 成绩 > 550 学生 ->> 学校 : 可以上一本了 else 400 < 成绩 < 550 学生 ->> 学校 : 上个二本吧 else 余额 > 300 学生 ->> 学校 : 考虑下专科吧 end 可选

相当于单个分支的 if 语句。

sequenceDiagram 美女 ->> 帅哥 : 我想找个高富帅 opt 我就是帅哥 -->> 美女 : 加个微信吧 end 复制代码 sequenceDiagram 美女 ->> 帅哥 : 我想找个高富帅 opt 我就是帅哥 -->> 美女 : 加个微信吧 end 并行 sequenceDiagram 老板 ->> 员工 : 开始实行996 par 开始摸鱼员工 ->> 员工 : 刷微博 and 员工 ->> 员工 : 听音乐 end 员工 -->> 老板 : 9点下班复制代码 sequenceDiagram 老板 ->> 员工 : 开始实行996 par 开始摸鱼员工 ->> 员工 : 刷微博 and 员工 ->> 员工 : 听音乐 end 员工 -->> 老板 : 9点下班

基本上掌握这些就可以画出你想要的流程图和时序图。

【本文地址】

公司简介

联系我们