MarkDown流程图与时序图

一、简述

流程图、时序图、甘特图，这些复杂图形的绘制都是使用代码块来实现的。指定代码块的解析语言，按照相应的绘制语法即可实现。

图形类型	解析语言
标准流程图	flow
样式流程图	mermaid
标准时序图	sequence
样式时序图	mermaid
甘特图	mermaid

二、标准流程图的绘制（flow）

绘制流程图分为两步：1.定义元素；2.定义元素之间的走向。

定义元素的语法

element_name=>element_type: content:>url

//注意:element_type后的冒号与文本之间一定要有个空格。
//url是一个连接，与框框中的文本绑定

• element_type有如下6种：

1. start # 开始
2. end # 结束
3. operation # 操作
4. subroutine # 子程序
5. condition # 条件
6. 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

Created with Raphaël 2.2.0 开始 输入参数 处理操作 条件判断 输出结果 结束 子程序 yes no

三、样式流程图的绘制(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(吃饭)

天气不好

yes

no

开始

起床

干活

休息时间到了

休息

吃饭

四、标准时序图的绘制(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 观察者

客户端 服务端 观察者 我想找你拿下数据 SYN 我收到你的请求啦 ACK+SYN 我收到你的确认啦，我们开始通信吧 ACK 我是一个服务端 我是一个客户端 TCP 三次握手 客户端 服务端 观察者 时序图示例

五、样式时序图的绘制(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: 我自己说了算

对象A 对象B 对象C 对象C 中午吃什么？ 随便 努力搜索 loop [ 思考 ] 火锅？ 可以 我是一个对象A 我是一个对象B 我自己说了算 对象A 对象B 对象C 对象C 时序图示例

六、甘特图的绘制（略）