共计 1698 个字符，预计需要花费 5 分钟才能阅读完成。
流程图在 Markdown 中的的表现形式就是代码块，代码块语言标记为 mermaid。次要内容大体分为：方向、节点、节点间的连贯关系，上面就围绕这三个点来整顿。
mermaid 反对流程图、甘特图和时序图，然而通过这次尝试，论断就是画图的话还是应用业余的画图工具，这个只能作为一种简略选项用在简略场景下。所以这里就只总结一下流程图的应用，其它两种就没必要了，不是怎么好用。
流程图方向
流程图总体分为横向和纵向两种。总共四个方向：T- 上，BD- 下；L- 左，R- 右。应用形式就是横向的两两联合，纵向的两两联合。比方从左到右为 LR，从上到下为 TB 或者 TD。
从上到下演示：
~~~mermaid
graph TD
A --> B
~~~ 从上到下的展现成果：
A
B
从左到右演示：
~~~mermaid
graph LR
A --> B
~~~ 从左到右展现成果：
A
B
流程图节点
上面展现的流程图节点有矩形 ‘[]’，圆角矩形 ‘()’，不对称矩形 ‘>]’，菱形 ‘{}’，圆形 ‘(())’。在每个节点后面须要惟一标识该节点 ID。如下示例：
~~~mermaid
graph TD
a1[带文本矩形]
a2(带文本圆角矩形)
a3> 带文本不对称矩形 ]
b1{带文本菱形}
c1((带文本圆形))
~~~ 其展现成果如下：
带文本矩形
带文本圆角矩形
带文本不对称矩形
带文本菱形
带文本圆形
节点间的连贯关系
- 节点之间的连接线分为：实线 ‘—‘、加粗实线 ‘===’、虚线 ‘-.-‘。
- 带箭头的连接线分为：带箭头实线 ‘–>’、带箭头加粗实线 ‘==>’，带箭头虚线 ‘-.->’。
-
如果要在连接线上加上备注，则下面两类加备注的形式如下：
- 实线备注 ‘–yes—‘，加粗实线备注 ‘yes=’，虚线备注 ‘-.yes.-‘。
- 带箭头实线备注 ‘–yes–>’，带箭头加粗实线备注 ‘yes>’，带箭头虚线备注 ‘-.yes.->’
其中，每种连贯符号的右边是开始节点，左边是完结节点，能够由同一个节点指向不同节点，也能够由不同节点指向同一个节点，实现各种指向形式都是通过节点 ID 标注。
示例如下：
~~~mermaid
graph LR
A10[A10] --- A11[A11]
A20[A20] === A21[A21]
A30[A30] -.- A31[A31]
B10[B10] --> B11[B11]
B20[B20] ==> B21[B21]
B30[B30] -.-> B31[B31]
C10[C10] --yes--> C11[C11]
C20[C20] ==yes==> C21[C21]
C30[C30] -.yes.-> C31[C31]
~~~ 其展现成果如下：
yes
yes
yes
A10
A11
A20
A21
A30
A31
B10
B11
B20
B21
B30
B31
C10
C11
C20
C21
C30
C31
由同一个节点开始，应用形式如下，对于前面如果应用同一个节点，只用指明 ID 即可。
~~~mermaid
graph LR
A[开始节点] --> B[完结节点 1]
A --> C[完结节点 2]
~~~ 开始节点
完结节点 1
完结节点 2
冒泡排序流程图
在这里用一个冒泡排序来简略的练习一下下面的几个点，首先将冒泡排序的伪码粘贴上来：
BUBBLESORT(A)
for i = 1 to A.length-1
for j = A.length downto i + 1
if A[j] < A[j - 1]
exchange A[j] with A[j - 1] 演示代码如下：
~~~mermaid
graph TD
start([开始]) --> 赋值 arr[赋值 arr]
赋值 arr --> 赋值 len[len = arr.length]
赋值 len --> 赋值 i[i = 0]
赋值 i --> 第一层循环 {i < len}
第一层循环 --yes--> 赋值 j[j = 1]
赋值 j --> 第二层循环 {"j < len - i ?"}
第二层循环 --yes--> 判断 {"arr[j - 1] < arr[j] ?"}
判断 --yes--> 定义长期变量 ["int temp = arr[j - 1]"]
定义长期变量 --> 替换 aj["arr[j - 1] = arr[j]"]
替换 aj --> 替换 aj-1["arr[j] = temp"]
替换 aj-1 --> j 自增 ["j++"]
j 自增 --> 第二层循环
判断 --no--> j 自增
