使用 markdown 画流程图、时序图

mervyn 2021年12月5日16:00:59Tools使用 markdown 画流程图、时序图已关闭评论81

在日常工作中,难免会画一些流程图、时序图。之前都是选择使用在线的画图网站,画完然后截图插入到文档。我个人用的比较多的主要是 腾讯文档文章源自Mervyn's Blog-https://mervyn.life/226.html

相较于截图的方式,代码画图都有哪些好处呢?文章源自Mervyn's Blog-https://mervyn.life/226.html

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

下边就来看一下,通过 markdown 语法是如何进行画图的。文章源自Mervyn's Blog-https://mervyn.life/226.html

markdown 语法

当我需要画图时插入如下这样的一个代码块:文章源自Mervyn's Blog-https://mervyn.life/226.html

    ```mermaid
        流程图/时序图代码
    ```

流程图

流程图布局

流程图代码以「graph 《布局方向》」开头,布局方向主要有如下几种:文章源自Mervyn's Blog-https://mervyn.life/226.html

  • TB,从上到下
  • TD,从上到下
  • BT,从下到上
  • RL,从右到左
  • LR,从左到右

例:文章源自Mervyn's Blog-https://mervyn.life/226.html

    ```mermaid
    graph TB
    ```

流程常用符号

A(起止框)
graph TB A(起止框)
B[处理框]
graph TB B[处理框]

可以使用 HTML 中的实体字符。文章源自Mervyn's Blog-https://mervyn.life/226.html

A["双引号:#quot;"]
graph TB A["双引号: #quot;"]
C{判断框}
graph TB C{判断框}
D((连接))
graph TB 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;

综合示例:文章源自Mervyn's Blog-https://mervyn.life/226.html

graph TB A(接口请求) --> B[参数校验] B[参数校验] --> C{校验通过?} C{校验通过?} -- 通过 --> d[处理业务逻辑] C{校验不通过} -- 不通过 --> e[结束] d[处理业务逻辑] --> e(结束)

时序图

时序图代码以「sequenceDiagram」开头。
时序图中包括如下常见元素:文章源自Mervyn's Blog-https://mervyn.life/226.html

参与者

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

语句次序即为参与者横向排列次序。文章源自Mervyn's Blog-https://mervyn.life/226.html

消息

交互时一方对另一方的操作(比如接口调用)或传递出的信息。文章源自Mervyn's Blog-https://mervyn.life/226.html

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

消息语句格式为:文章源自Mervyn's Blog-https://mervyn.life/226.html

<参与者> <箭头> <参与者> : <描述文本>。

其中 <箭头> 的写法有:文章源自Mervyn's Blog-https://mervyn.life/226.html

->> 显示为实线箭头(主动发出消息)
-->> 显示为虚线箭头(响应)
-x 显示为末尾带「X」的实线箭头(异步消息)

示例:文章源自Mervyn's Blog-https://mervyn.life/226.html

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: 我走了

激活框

从消息接收方的时间线上标记一小段时间,表示对消息进行处理的时间间隔。文章源自Mervyn's Blog-https://mervyn.life/226.html

<参与者> <箭头> [+/-]: <描述文本>。

示例:文章源自Mervyn's Blog-https://mervyn.life/226.html

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 循环
循环格式为:文章源自Mervyn's Blog-https://mervyn.life/226.html

loop 循环的描述
    消息
end

示例:文章源自Mervyn's Blog-https://mervyn.life/226.html

sequenceDiagram
    用户 ->> + 网站 : 账号实名认证
    网站 -->> - 用户 : 资料提交成功,等待审核

    loop 一天七次
        用户 ->> + 网站 : 查看审核进度
        网站 -->> - 用户 : 审核中
    end
sequenceDiagram 用户 ->> + 网站 : 账号实名认证 网站 -->> - 用户 : 资料提交成功,等待审核文章源自Mervyn's Blog-https://mervyn.life/226.html loop 一天七次 用户 ->> + 网站 : 查看审核进度 网站 -->> - 用户 : 审核中 end

选择(alt)

相当于 if 及 else if 语句。或者理解为 switch 也可以文章源自Mervyn's Blog-https://mervyn.life/226.html

sequenceDiagram
    学生 ->> 学校 : 查询成绩
    学校 -->> 学生 : 成绩

    alt 成绩 > 550
        学生 ->> 学校 : 可以上一本了
    else 400 < 成绩 < 550
        学生 ->> 学校 : 上个二本吧
    else 余额 > 300
        学生 ->> 学校 : 考虑下专科吧
    end
sequenceDiagram 学生 ->> 学校 : 查询成绩 学校 -->> 学生 : 成绩文章源自Mervyn's Blog-https://mervyn.life/226.html alt 成绩 > 550 学生 ->> 学校 : 可以上一本了 else 400 < 成绩 < 550 学生 ->> 学校 : 上个二本吧 else 余额 > 300 学生 ->> 学校 : 考虑下专科吧 end

可选

相当于单个分支的 if 语句。文章源自Mervyn's Blog-https://mervyn.life/226.html

sequenceDiagram
    美女 ->> 帅哥 : 我想找个高富帅

    opt 我就是
        帅哥 -->> 美女 : 加个微信吧
    end
sequenceDiagram 美女 ->> 帅哥 : 我想找个高富帅文章源自Mervyn's Blog-https://mervyn.life/226.html opt 我就是 帅哥 -->> 美女 : 加个微信吧 end

并行

sequenceDiagram
    老板 ->> 员工 : 开始实行996
    par 开始摸鱼
        员工 ->> 员工 : 刷微博
    and
        员工 ->> 员工 : 听音乐
    end
    员工 -->> 老板 : 9点下班
sequenceDiagram 老板 ->> 员工 : 开始实行996 par 开始摸鱼 员工 ->> 员工 : 刷微博 and 员工 ->> 员工 : 听音乐 end 员工 -->> 老板 : 9点下班

基本上掌握这些就可以画出你想要的流程图和时序图。文章源自Mervyn's Blog-https://mervyn.life/226.html

weinxin
我的微信公众号
微信扫一扫
mervyn
新入手的Mac需要做的事 Tools

新入手的Mac需要做的事

最近换了一个mac设备,又折腾了一遍各种环境,顺便记录下mac设置需要修改的配置和必要的软件。系统设置系统偏好设置-> 通用 -> 显示滚动条 -> 始终系统偏好设置-> 通用...
Git 常用命令速查表 Tools

Git 常用命令速查表

由于之前一直用sourceTree 对Git的项目进行操作,对 Git 的命令行操作不是很熟。最近切换到了 vsocde 结合remote ssh 插件来开发项目(强烈推荐),个人觉得 vscode ...
PHPStorm 更改 PHP 版本号 Tools

PHPStorm 更改 PHP 版本号

PHPStorm 默认的 PHP 版本是 5.4, 当我们用服务器使用的是 PHP7 时,经常会出现语法错误的提示,这个时候需要将 PHPStorm 中的 PHP 版本进行修改才行。操作步骤如下: P...
更新Github中Fork的代码 Tools

更新Github中Fork的代码

但我们在使用Github的时候,看到觉得不错的项目时,通常会进行 star 或者 fork 操作。 fork 时会将对方的代码同步到我们自己的Github仓库中。但是当我们 fork 了别人的代码以后...
iTerm2 常用操作指南 Tools

iTerm2 常用操作指南

光标控制 ctrl + a : 到行首 ctrl + e : 行末 ctrl + f/b : 前进后退,相当于左右方向键,但是显然比移开手按方向键更快 ctrl + r : 搜索输入过的历史命令 ct...