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 时序图示例

六、甘特图的绘制(略)

你可能感兴趣的:(设计模式及其他)