Markdown高级使用之流程图

流程图在Markdown中的的表现形式就是代码块,代码块语言标记为mermaid。主要内容大体分为:方向、节点、节点间的连接关系,下面就围绕这三个点来整理。

mermaid支持流程图、甘特图和时序图,但是经过这次尝试,结论就是画图的话还是使用专业的画图工具,这个只能作为一种简单选项用在简单场景下。所以这里就只总结一下流程图的使用,其它两种就没必要了,不是怎么好用。


流程图方向

流程图总体分为横向和纵向两种。总共四个方向:T-上,B\D-下;L-左,R-右。使用方式就是横向的两两结合,纵向的两两结合。比如从左到右为LR,从上到下为TB或者TD。

从上到下演示:

​~~~mermaid
graph TD
A --> B
​~~~

从上到下的展示效果:

graph TD A --> B

从左到右演示:

​~~~mermaid
graph LR
	A --> B
​~~~

从左到右展示效果:

graph LR A --> B

流程图节点

下面展示的流程图节点有矩形 '[]',圆角矩形 '()',不对称矩形 '>]',菱形 '{}',圆形 '(())'。在每个节点前面需要唯一标识该节点ID。如下示例:

​~~~mermaid
graph TD
    a1[带文本矩形]
    a2(带文本圆角矩形)
    a3>带文本不对称矩形]
    b1{带文本菱形}
    c1((带文本圆形))
​~~~

其展示效果如下:

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]
​~~~

其展示效果如下:

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]

由同一个节点开始,使用方式如下,对于后面如果使用同一个节点,只用指明ID即可。

​~~~mermaid
graph LR
	A[开始节点] --> B[结束节点1]
	A --> C[结束节点2]
​~~~
graph LR A[开始节点] --> B[结束节点1] A --> C[结束节点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自增
    第二层循环 --no--> i自增["i++"]
    i自增 --> 第一层循环
    第一层循环 --no--> endd([结束])
​~~~

展示效果如下:

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自增 第二层循环 --no--> i自增["i++"] i自增 --> 第一层循环 第一层循环 --no--> endd([结束])
posted @ 2020-12-31 12:26  小白先生哦  阅读(693)  评论(3编辑  收藏