文章目录
一、简述
流程图、时序图、甘特图,这些复杂图形的绘制都是使用代码块来实现的。指定代码块的解析语言,按照相应的绘制语法即可实现。
图形类型 | 解析语言 |
---|---|
标准流程图 | flow |
样式流程图 | mermaid |
标准时序图 | sequence |
样式时序图 | mermaid |
甘特图 | mermaid |
二、标准流程图的绘制(flow)
绘制流程图分为两步:1.定义元素;2.定义元素之间的走向。
定义元素的语法
element_name=>element_type: content:>url
//注意:element_type后的冒号与文本之间一定要有个空格。
//url是一个连接,与框框中的文本绑定
- element_type有如下6种:
- start # 开始
- end # 结束
- operation # 操作
- subroutine # 子程序
- condition # 条件
- inputoutput # 输入或产出
连接元素的语法
用->
来连接两个元素,需要注意的是condition类型的连接。
element1=>start: 开始
element2=>inputoutput: 输入参数
element3=>operation: 处理操作
element4=>condition: 条件判断
element5=>subroutine: 子程序
element6=>inputoutput: 输出结果
element7=>end: 结束
element1->element2->element3->element4
element4(no)->element5->element6->element7
element4(yes)->element6->element7
三、样式流程图的绘制(mermaid)
基本语法
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
带描述的加粗箭头指向
graph LR
A(开始) -->B(起床)
B --天气不好--- C>干活]
C ==> D{休息时间到了}
D -.yes.-> E((休息))
D -.no.-> C
E --> F(吃饭)
四、标准时序图的绘制(sequence)
基本语法
-
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 观察者
五、样式时序图的绘制(mermaid)
基本语法
需要使用 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: 我自己说了算