MarkDown流程图全指导

准备工作

Markdown是一个轻量级的标记语言，使用普通文本编辑器就能快速编写，不仅显示格式丰富，功能也毫不含煳，分享一个md格式的API请求流程图。

在使用Markdown图表前，你首先需要有解析工具，在本地开发，用vs code再加Markdown preview插件，显然是可以胜任。

由于有些浏览器渲染不出来，所以少数样式流程图带用了图片插入，在强解析下会呈现出相同的两个效果。

基本原理

Markdown图表支持类型包括：

流程图：指定 mermaid（样式流程图） 或 flow （标准流程图）解析语言

时序图：指定 sequence（标准时序图） 或 mermaid（样式时序图） 解析语言

甘特图：指定 mermaid 解析语言

这些复杂图形的绘制都是使用代码块实现的，指定代码块的解析语言，按照响应的绘制语法即可实现。

一、流程图

1.1标准流程图

一个最简单的流程图

代码：

flow start=>start: 接收到消息 info=>operation: 读取信息 setCache=>operation: 更新缓存 end=>end: 处理结束 start->info->setCache->end 简易四步骤流程图 代码：

st=>start: Start

op=>operation: Your Operation

cond=>condition: Yes or No?

e=>end

st->op->cond

cond(yes)->e

cond(no)->op

简易五步骤流程图

代码：

flow start=>start: API请求 cache=>operation: 读取Redis缓存 cached=>condition: 是否有缓存？ sendMq=>operation: 发送MQ，后台服务更新缓存 info=>operation: 读取信息 setCache=>operation: 保存缓存 end=>end: 返回信息 start->cache->cached cached(yes)->sendMq cached(no)->info info->setCache setCache->end sendMq->end 详解标准流程图 基本语法： 定义模块 id=>关键字: 描述 （“描述”的前面必须有空格，“=>” 两端不能有空格） 关键字： start 流程开始，以圆角矩形绘制 opearation 操作，以直角矩形绘制 condition 判断，以菱形绘制 subroutine 子流程，以左右带空白框的矩形绘制 inputoutput 输入输出，以平行四边形绘制 end 流程结束，以圆角矩形绘制 定义模块间的流向： 模块1 id->模块2 id ：一般的箭头指向 条件模块id (描述)->模块id(direction) ：条件模块跳转到对应的执行模块，并指定对应分支的布局方向 示例： 代码：

st=>start: 开始

ipt=>inputoutput: 输入一个x

op=>operation: 处理加工x+1

cond=>condition: 溢出（是或否？）

sub=>subroutine: 子流程

io=>inputoutput: 输出x

ed=>end: 结束

st->ipt->op->cond

cond(yes)->io->ed

cond(no)->sub->io->ed

复杂三支线流程图

效果：

代码：

flow st=>start: Start|past:>http://www.google.com[blank] e=>end: End:>http://www.google.com op1=>operation: get_hotel_ids|past op2=>operation: get_proxy|current sub1=>subroutine: get_proxy|current op3=>operation: save_comment|current op4=>operation: set_sentiment|current op5=>operation: set_record|current cond1=>condition: ids_remain空? cond2=>condition: proxy_list空? cond3=>condition: ids_got空? cond4=>condition: 爬取成功?? cond5=>condition: ids_remain空? io1=>inputoutput: ids-remain io2=>inputoutput: proxy_list io3=>inputoutput: ids-got st->op1(right)->io1->cond1 cond1(yes)->sub1->io2->cond2 cond2(no)->op3 cond2(yes)->sub1 cond1(no)->op3->cond4 cond4(yes)->io3->cond3 cond4(no)->io1 cond3(no)->op4 cond3(yes, right)->cond5 cond5(yes)->op5 cond5(no)->cond3 op5->e 1.2样式流程图 基本语法： graph 指定流程图方向：graph LR 横向，graph TD 纵向 元素的形状定义： id[描述] 以直角矩形绘制 id(描述) 以圆角矩形绘制 id{描述} 以菱形绘制 id>描述] 以不对称矩形绘制 id((描述)) 以圆形绘制 线条定义： A-->B 带箭头指向 A---B 不带箭头连接 A-.-B 虚线连接 A-.->B 虚线指向 A==>B 加粗箭头指向 A--描述---B 不带箭头指向并在线段中间添加描述 A--描述-->B 带描述的箭头指向 A-.描述.->B 带描述的虚线连指向 A==描述==>B 带描述的加粗箭头指向 子流程图定义 subgraph title graph direction end 示例： graph LR A(开始)-->B(起床) B --天气不好--- C>干活] C ==> D{休息时间到了} D -.yes.-> E((休息)) D -.no.-> C E --> F(吃饭) 代码：

graph LR

A(开始) –>B(起床)

B –天气不好— C>干活]

C ==> D{休息时间到了}

D -.yes.-> E((休息))

D -.no.-> C

E –> F(吃饭)

二、时序图

时序图（Sequence Diagram）用于描述对象之间发送消息的时间顺序或显示多个对象之间的动态协作。时序图中的每条消息对应一个类操作或一个事件。

时序图元素时序图主要有一下几个元素：角色，对象，生命线，激活器和消息

1、角色（Actor）任何主体都可以是角色，角色对外发布消息。示例中，客户端，打印机，数据库都是角色。

2，对象(Object)对象代表时序图中的对象在交互中所扮演的角色，位于时序图顶部和对象代表类角色。有的时候可能有多个打印机 ，那么这些打印机都是同一角色的不同对象

3，生命线(Lifeline)生命线代表时序图中的对象在一段时期内的存在。时序图中每个对象和底部中心都有一条垂直的线，这就是对象的生命线，对象间 的消息存在于两条虚线间。

4，激活期(Activation)激活期代表时序图中的对象执行一项操作的时期，在时序图中每条生命线上的窄的矩形代表活动期。它可以被理解成C语言语义中一对花括号“{}”中的内容。csdn的Markdown中并没有这一举行，只能以右侧或左侧的注解来表示“ python 5，消息(Message)消息是定义交互和协作中交换信息的类，用于对实体间的通信内容建模，信息用于在实体间传递信息。允许实体请求其他的服务，类角色通过发送和接受信息进行通信。 2.1标准时序图 基本语法： Title:标题 ：指定时序图的标题 Note direction of 对象:描述 ： 在对象的某一侧添加描述，direction 可以为 right/left/over ， 对象 可以是多个对象，以 , 作为分隔符 participant 对象 ：创建一个对象 loop...end ：创建一个循环体 对象A->对象B:描述 ： 绘制A与B之间的对话，以实线连接 -> 实线实心箭头指向 --> 虚线实心箭头指向 ->> 实线小箭头指向 -->> 虚线小箭头指向 示例： 代码：

Title:时序图示例

客户端->服务端: 我想找你拿下数据 SYN

服务端–>客户端: 我收到你的请求啦 ACK+SYN

客户端->>服务端: 我收到你的确认啦，我们开始通信吧 ACK

Note right of 服务端: 我是一个服务端

Note left of 客户端: 我是一个客户端

Note over 服务端,客户端: TCP 三次握手

participant 观察者

再来一个UML时序图：

代码：

sequence 客户端->打印机: 打印请求(id) 打印机->数据库:请求数据(id) Note right of 数据库: 执行SQL获取数据 数据库-->打印机:返回数据信息 Note right of 打印机:使用数据打印 打印机-->>客户端:返回打印结果 客户端->客户端:等待提取结果 2.2带样式时序图 基本语法同标准时序图，不同的是 需要使用 mermaid 解析，并在开头使用关键字 sequenceDiagram 指明 线段的样式遵循 mermaid 的解析方式 -> ： 实线连接 --> ：虚线连接 ->> ：实线箭头指向 -->> ：虚线箭头指向 示例： sequenceDiagram 对象A->对象B:中午吃什么？ 对象B->>对象A:随便 loop 思考 对象A->对象A:努力搜索 end 对象A-->>对象B:火锅？ 对象B->>对象A:可以 Note left of 对象A:我是一个对象A Note right of 对象B:我是一个对象B participant 对象C Note over 对象C:我自己说了算 代码：

sequenceDiagram

对象A->对象B:中午吃什么？

对象B->>对象A: 随便

loop 思考

对象A->对象A: 努力搜索

end

对象A–>>对象B: 火锅？

对象B->>对象A: 可以

Note left of 对象A: 我是一个对象A

Note right of 对象B: 我是一个对象B

participant 对象C

Note over 对象C: 我自己说了算

三、甘特图

基本语法：

使用 mermaid 解析语言，在开头使用关键字 gantt 指明

deteFormat 格式 指明日期的显示格式

title 标题 设置图标的标题

section 描述 定义纵向上的一个环节

定义步骤：每个步骤有两种状态 done（已完成）/ active（执行中）

描述: 状态,id,开始日期,结束日期/持续时间

描述: 状态[,id],after id2,持续时间

crit ：可用于标记该步骤需要被修正，将高亮显示

如果不指定具体的开始时间或在某个步骤之后，将默认依次顺序排列

示例：

gantt

dateFormat YYYY-MM-DD

title 软件开发甘特图

section 设计

需求:done,des1,2019-01-06,2019-01-08

原型:active,des2,2019-01-09,3d

UI设计:des3, after des2,5d

未来任务:des4, after des3,5d

section 开发

学习准备理解需求:crit,done,2019-01-06,24h

设计框架:crit,done, after des2,2d

开发:crit, active,3d

未来任务:crit,5d

休息时间:2d

section 测试

功能测试:active, a1, after des3,3d

压力测试:after a1,20h

测试报告:48h

代码：

`mermaid

gantt

dateFormat YYYY-MM-DD

title 软件开发甘特图

section 设计

需求:done,des1, 2019-01-06,2019-01-08

原型:active,des2, 2019-01-09, 3d

UI设计:des3, after des2, 5d

未来任务:des4, after des3, 5d

section 开发

学习准备理解需求:crit, done, 2019-01-06,24h

设计框架:crit, done, after des2, 2d

开发:crit, active, 3d

未来任务:crit, 5d

休息时间:2d

section 测试

功能测试:active, a1, after des3, 3d

压力测试:after a1, 20h

测试报告: 48h