前言

MarkDown的简便性让人越来越喜欢。虽然MarkDown也不是万能的，有些排版等MarkDown做起来也不是那么完美，尤其是涉及图片操作。

在日常的文档生产中，难免要用到一些流程图，一般用亿图图示等流程图软件画好了导出一张图片贴在MarkDown文档中，但其实MarkDown也是可以利用 Flowchart.js 画出流程图的，初用可能麻烦点，但用熟了语法也不是那么难，而且可以少插入一张外部图片。

Flowchart.js 仅需几行代码即可在 Web 上完成流程图的构建。可以从文字表述中画出简单的 SVG 流程图，也可以画出彩色的图表。

Draws simple SVG flow chart diagrams from textual representation of the diagram http://flowchart.js.org/

基本语法

MarkDown中的流程图语法叫flow，该语法只有两个注意事项：

定义元素
连接定义好的元素

定义元素

1	tag=>type: content:>url

tag：标签，用于连接元素时使用，相当于是定义了一个常量
=>：标签定义等式。
content：流程语句中放置的内容
- type:与content之间一定要有一个空格，否则会出问题
:>：超链接定义等式
url：指向链接，与流程语句绑定，选填。
type：该标签的类型。共有6种类型如下：

元素类型	代表意义
start	开始
end	结束/完成
operation	流程操作
subroutine	预定子流程
condition	条件判断
inputoutput	输入输出

连接元素

使用->符号，如：

s=>start: 开始
e=>end: 结束
o=>operation: 操作项

s->o(成功)->e

怎么画？

以上面的流程代码为例，在代码块标志后加上flow即可：

\`\`\`flow
s=>start: 开始
e=>end: 结束
o=>operation: 操作项

s->o->e
\`\`\` #代码块标识会被解析，实际上写代码块时不用添加转义符“\”

有些MarkDown编辑器，如typora，在你插入代码时选择flow语法即可，就只需要输入流程图要用到的代码。

操作示例

最简单的流程图

以上面的流程图代码为例，我们可以得到这样的流程图

s=>start: 开始
e=>end: 结束
o=>operation: 操作项

s->o->e

闰年判断逻辑

来个复杂点的:

\`\`\`flow
st=>start: Start
i=>inputoutput: 输入年份n
cond1=>condition: n能否被4整除？
cond2=>condition: n能否被100整除？
cond3=>condition: n能否被400整除？
o1=>inputoutput: 输出非闰年
o2=>inputoutput: 输出非闰年
o3=>inputoutput: 输出闰年
o4=>inputoutput: 输出闰年
e=>end
st->i->cond1
cond1(no)->o1->e
cond1(yes)->cond2
cond2(no)->o3->e
cond2(yes)->cond3
cond3(yes)->o2->e
cond3(no)->o4->e
\`\`\`

得到下面的流程图：

st=>start: Start
i=>inputoutput: 输入年份n
cond1=>condition: n能否被4整除？
cond2=>condition: n能否被100整除？
cond3=>condition: n能否被400整除？
o1=>inputoutput: 输出非闰年
o2=>inputoutput: 输出非闰年
o3=>inputoutput: 输出闰年
o4=>inputoutput: 输出闰年
e=>end

st->i->cond1
cond1(no)->o1->e
cond1(yes)->cond2
cond2(no)->o3->e
cond2(yes)->cond3
cond3(yes)->o2->e
cond3(no)->o4->e

更多高级语法可参考这里

MarkDown文档中如何画出流程图