Markdown语法之流程图

关于Markdown里面的序列图，请移步这里。
关于使用mermaid插件支持画流程图，请移步这里。
转载自Subson的blog。

在众多的markdown编辑器中,作者使用Typora, 它具有实时渲染可见与编辑的特点, 并且还支持自定义渲染效果(只需要更改CSS文件即可). 该软件的流程图由flowchart.js支持, 另外也支持mermaid插件来画流程图，详见Markdown中使用mermaid画流程图（基础）.流程图的代码段包裹在markdown格式的代码块中, 只需要更改相应的标记即可. 例如:

​```flowst=>start: 开始e=>end: 结束op=>operation: 操作sub=>subroutine: 子程序cond=>condition: 是或者不是?io=>inputoutput: 输出st(right)->op->condcond(yes)->io(right)->econd(no)->sub(right)->op​```
1
2
3
4
5
6
7
8
9
10
11
12

这段代码渲染出来的流程图如下:

Created with Raphaël 2.1.0开始操作是或者不是?输出结束子程序yesno

其主要有以下几种关键词:

1. start,end, 表示程序的开始与结束
2. operation, 表示程序的处理块
3. subroutine, 表示子程序块
4. condition, 表示程序的条件判断
5. inputoutput, 表示程序的出入输出
6. right,left, 表示箭头在当前模块上的起点(默认箭头从下端开始)
7. yes,no, 表示condition判断的分支(其可以和right,left同时使用)

通过模块(流程图各个模块)与连接定义, 再结合以上关键词即可定义简单流程图的各个模块.

模块定义(模块标识与模块名称可以任意定义名称,关键词不可随意取名)如下:

模块标识=>模块关键词: 模块名称
1

连接定义如下:

模块标识1->模块标识2模块标识1->模块标识2->模块标识3... ...
1
2
3

再进行连接的时候, 可以通过right,left确定箭头的起点. 值得注意的是, 使用condition关键词定义的判断框的连接需要结合yes或者no进行. 如下代码与其对应的流程图:

st=>start: Starte=>end: Endop1=>operation: My Operationop2=>operation: Stuffsub1=>subroutine: My Subroutinecond=>condition: Yesor No?c2=>condition: Good ideaio=>inputoutput: catch something...st->op1(right)->condcond(yes, right)->c2cond(no)->sub1(left)->op1c2(yes)->io->ec2(no)->op2->e
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Created with Raphaël 2.1.0StartMy OperationYesor No?Good ideacatch something…EndStuffMy Subroutineyesnoyesno

另, 官方的flowchart.js还支持模块颜色的定义以及超链接的定义.

关于Markdown里面的序列图，请移步这里。
关于使用mermaid插件支持画流程图，请移步这里。