Markdown里面的流程图

Markdown里面的流程图

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

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

​```flow
st=>start: 开始
e=>end: 结束
op=>operation: 操作
sub=>subroutine: 子程序
cond=>condition: 是或者不是?
io=>inputoutput: 输出

st(right)->op->cond
cond(yes)->io(right)->e
cond(no)->sub(right)->op
​```

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

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

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

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

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

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

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

连接定义如下:

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

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

st=>start: Start
e=>end: End
op1=>operation: My Operation
op2=>operation: Stuff
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?
c2=>condition: Good idea
io=>inputoutput: catch something...

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

Created with Raphaël 2.1.0 Start My Operation Yes or No? Good idea catch something... End Stuff My Subroutine yes no yes no

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

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