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
```这段代码渲染出来的流程图如下:
其主要有以下几种关键词:
- start,end, 表示程序的开始与结束
- operation, 表示程序的处理块
- subroutine, 表示子程序块
- condition, 表示程序的条件判断
- inputoutput, 表示程序的出入输出
- right,left, 表示箭头在当前模块上的起点(默认箭头从下端开始)
- 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另, 官方的flowchart.js还支持模块颜色的定义以及超链接的定义.