使用Markdown流程图教程

前言

Markdown是一个轻量级的标记语言，不仅显示格式丰富，功能也毫不含糊，使用Markdown可以生产标准流程图，本片文章就介绍相关功能。

先看一个效果图

该流程图对应的Markdown代码如下：

st=>start: Start:>http://www.baidu.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: linear or polynomial :>http://www.baidu.com
io=>inputoutput: catch something...
para=>parallel: 3 possibilities

st->op1->cond
cond(true@linear)->io->e
cond(false@polynomial)->sub1(right)
sub1(right)->para
para(path1@an1, top)->cond
para(path2@an2, right)->op1
para(path3@an3, bottom)->e

语法

nodeName=>nodeType: nodeText[|flowstate][:>urlLink]

1. **[ ]**中的为可选项；
2. nodeName 为定义的节点变量的名称；
3. nodeType 为节点类型，详见“节点类型”章节；
4. nodeText为插入到节点中的文本，允许换行；
5. flowstate为可选的，它使用|指定节点的额外样式；
6. urlLink为可选的，它使用:>指向要链接的url；

节点类型

定义节点的外形及功能。

1. start

用于定义流程图的开始节点，外形如下图中的“开始”节点。

st=>start: 开始

2. end

用于定义流程图的结束节点，外形如上图中的“结束”节点。

e=>end: 结束

3. operation

表示该节点要进行一些操作，外形如下图中的“do somethings”节点。

op=>operation: do somethings

4. inputoutput

表示在流程图中，该节点有输入输出发生，外形如下图中的“inputoutput”节点。

io=>inputoutput: inputoutput

5. subroutine

表示该节点为子程序，并且应该有另外一个流程图来说明该子程序的执行过程，外形如下图所示。

sub=>subroutine: This is a subroutine

6. condition

该节点为一个判断节点，会产生两个分支，如下图所示。

st=>start: 开始
e=>end: 结束

op=>operation: do somethings
cond=>condition: yes or no?

st->cond(yes)->e
cond(no)->op

7. parallel

允许多条事件流同时发生，如下图所示。

st=>start: 开始
e=>end: 结束

op=>operation: do somethings
cond=>condition: yes or no?
parallel=>parallel: 3 possibilities

st->op->cond(yes)->e
cond(no)->parallel
parallel(path1,top)->cond
parallel(path2,right)->op
parallel(path3,bottom)->e

连接

在以上的示例中，符号“->”表示从一个节点到下一个节点的连接，多个节点连接可以写在一行，也可以分多行写，语法如下所示：

<node variable name>[(<specification1>[, <specification2])]-><node variable name>[[(<specification1>[, <specification2])]-><node variable name>]

方向

从一个节点到下一个节点的连接方向是可以指定的，如下所示：

startVar(<direction>)->nextNode

operationVar(<direction>)->nextNode

subroutineVar(<direction>)->nextNode

conditionalVar(yes, <direction>)->nextNode1

parallelVar(path1, <direction>)->nextNode1

上面的例子中****可以选择的值为

• left
• right
• top
• bottom

给分支起个别的名字

在节点类型章节的第6小节，分支的名字为yes或者no，那是否可以设置别的条件名字呢，答案是肯定的，如下所示：

st=>start: 开始
e=>end: 结束

op=>operation: do somethings
cond=>condition: yes or no?

st->cond
cond(yes@正确)->e
cond(no@错误)->op

参考文献：https://github.com/adrai/flowchart.js