markdown流程图

博客园并不支持解析流程图，详细效果可在Typora中查看，这里以图片示意

参考

https://segmentfault.com/a/1190000006247465

https://mermaidjs.github.io/

http://flowchart.js.org/

https://bramp.github.io/js-sequence-diagrams/

http://www.360doc.com/content/16/0407/20/5315_548673720.shtml

流程图1

语法

以```flow开头 ， ```结尾

流程图的语法大体分为两部分：

• 前面部分用来定义流程图元素
• 后面部分用来连接流程图元素，指定流程图的执行走向

定义元素阶段的语法是

tag=>type: content:>url

说明：

• tag 是流程图中的标签，名称可以任意，一般为流程的英文缩写和数字的组合。
• type 用来确定标签的类型，=>后面表示类型。由于标签的名称可以任意指定，所以要依赖type来确定标签的类型
• 标签有6种类型：start end operation subroutine condition inputoutput
• content 是流程图文本框中的描述内容，:后面表示内容，中英文均可。特别注意，冒号与文本之间一定要有个空格

开始

st=>start: 开始

操作

op1=>operation: 操作、执行说明

条件

cond=>condition: 确认？

结束

e=>end: 结束

连接流程图元素

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

连接流程图元素阶段的语法就简单多了，直接用->来连接两个元素，几点说明如下：

说明：

• 使用 -> 来连接两个元素
• 对于condition类型，有yes和no两个分支，如示例中的cond(yes)和cond(no)
• 每个元素可以制定分支走向，默认向下，也可以用right指向右边，如示例中sub1(right)。

示例

?```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end: over
st->op->cond
cond(yes)->e
cond(no)->op
?```

流程图2

语法

以```mermaid 开头，```结尾

• 按结构对应分为4种：graph TB/BT/LR/RL

比如

graph LR
A-->B

• 形状

graph LR
A[矩形]
B(圆形)
C{菱形}

• 箭头

---无箭头
-->箭头
-->|插入文本|

graph LR
A---B
B-->C
C-->|insert|D

示例

?```mermaid
graph LR
A[Import] -->B[Tidy]
    B -->C{Understand}
    C -->D[Transform]
    C -->E[Vishualise]
    C -->F[Model]
    Understand -->G[Communicate]
?```

时序图

与前两个类似语法，不再详述

?```sequence
Title: Here is title
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!
?```