前言

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. 定义元素
  2. 连接定义好的元素

定义元素

1
tag=>type: content:>url
  1. tag:标签,用于连接元素时使用,相当于是定义了一个常量

  2. =>:标签定义等式。

  3. content:流程语句中放置的内容

    • type:与content之间一定要有一个空格,否则会出问题
  4. :>:超链接定义等式

  5. url:指向链接,与流程语句绑定,选填。

  6. type:该标签的类型。共有6种类型如下:

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

连接元素

使用->符号,如:

1
2
3
4
5
s=>start: 开始
e=>end: 结束
o=>operation: 操作项

s->o(成功)->e

怎么画?

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

1
2
3
4
5
6
7
​```flow
s=>start: 开始
e=>end: 结束
o=>operation: 操作项

s->o->e

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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



# 操作示例

## 最简单的流程图

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

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

s->o->e

闰年判断逻辑

来个复杂点的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
​```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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
得到下面的流程图:

```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