这些复杂图形的绘制都是使用代码块实现的,指定代码块的解析语言,按照响应的绘制语法即可实现。
- 流程图——指定
mermaid
(样式流程图) 或flow
(标准流程图)解析语言 - 时序图——指定
sequence
(标准时序图) 或mermaid
(样式时序图) 解析语言 - 甘特图——指定
mermaid
解析语言
一、流程图
1. 样式流程图
基本语法:
-
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
示例:
```mermaid
graph LR
A(开始) -->B(起床)
B --天气不好--- C>干活]
C ==> D{休息时间到了}
D -.yes.-> E((休息))
D -.no.-> C
E --> F(吃饭)
![](http://upload-images.jianshu.io/upload_images/12676317-b63ab8eef60d29b1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
样式流程图
2. 标准流程图
基本语法:
定义模块
id=>关键字: 描述
(“描述”的前面必须有空格,“=>” 两端不能有空格)-
关键字:
-
start
流程开始,以圆角矩形绘制 -
opearation
操作,以直角矩形绘制 -
condition
判断,以菱形绘制 -
subroutine
子流程,以左右带空白框的矩形绘制 -
inputoutput
输入输出,以平行四边形绘制 -
end
流程结束,以圆角矩形绘制
-
-
定义模块间的流向:
-
模块1 id->模块2 id
:一般的箭头指向 -
条件模块id (描述)->模块id(direction)
:条件模块跳转到对应的执行模块,并指定对应分支的布局方向
-
示例:
```mermaid
flowchat
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
![](http://upload-images.jianshu.io/upload_images/12676317-6eb0483055b2236f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
标准流程图
二、 时序图
1. 标准时序图
基本语法:
-
Title:标题
:指定时序图的标题 -
Note direction of 对象:描述
: 在对象的某一侧添加描述,direction
可以为right/left/over
,对象
可以是多个对象,以,
作为分隔符 -
participant 对象
:创建一个对象 -
loop...end
:创建一个循环体 -
对象A->对象B:描述
: 绘制A与B之间的对话,以实线连接-
->
实线实心箭头指向 -
-->
虚线实心箭头指向 -
->>
实线小箭头指向 -
-->>
虚线小箭头指向
-
示例:
```sequence
Title:时序图示例
客户端->服务端: 我想找你拿下数据 SYN
服务端-->客户端: 我收到你的请求啦 ACK+SYN
客户端->>服务端: 我收到你的确认啦,我们开始通信吧 ACK
Note right of 服务端: 我是一个服务端
Note left of 客户端: 我是一个客户端
Note over 服务端,客户端: TCP 三次握手
participant 观察者
![](http://upload-images.jianshu.io/upload_images/12676317-96e74c1bfe903fe3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
标准时序图
2. 带样式时序图
基本语法同标准时序图,不同的是
- 需要使用
mermaid
解析,并在开头使用关键字sequenceDiagram
指明 - 线段的样式遵循
mermaid
的解析方式-
->
: 实线连接 -
-->
:虚线连接 -
->>
:实线箭头指向 -
-->>
:虚线箭头指向
-
示例:
```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: 我自己说了算
![](http://upload-images.jianshu.io/upload_images/12676317-5ffc0d3fdcb2790c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
样式时序图
三、甘特图
基本语法:
- 使用
mermaid
解析语言,在开头使用关键字gantt
指明 -
deteFormat 格式
指明日期的显示格式 -
title 标题
设置图标的标题 -
section 描述
定义纵向上的一个环节 - 定义步骤:每个步骤有两种状态
done
(已完成)/active
(执行中)描述: 状态,id,开始日期,结束日期/持续时间
描述: 状态[,id],after id2,持续时间
-
crit
:可用于标记该步骤需要被修正,将高亮显示 - 如果不指定具体的开始时间或在某个步骤之后,将默认依次顺序排列
示例:
```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
![](http://upload-images.jianshu.io/upload_images/12676317-2dd0b0e562af7a86.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
甘特图