Hexo -13- 利用 Markdown 语法画 flowchart 流程图

hexo默认不支持流程图，flowchart 简便易食，可以瞬间使 hexo 流程图无中生有。本文记录在hexo中添加Markdown flowchart流程图的方法。

添加支持

npm install --save hexo-filter-flowchart

添加Flow代码

• 需要在代码块(ctrl + shift + k)中，选择语言为flow。

• 添加flow代码：

st=>start: 开始节点
in=>inputoutput: 输入
e=>end: 结束节点
op=>operation: 操作节点
cond=>condition: 条件节点
sub=>subroutine: 子例程
out=>inputoutput: 输出
st(right)->in->op->cond
cond(yes,right)->out->e
cond(no)->sub

Flow 语法结构

• 语法概述

flow 语法其实是直截了当的，分为节点定义和节点连接两部分

节点定义

• 语法结构如下：X=>Y: Z 其中，X是变量名， Y是指操作模块名，冒号后面的Z是具体显示的文字内容。需要注意的是，冒号后要加空格才能识别，而X，Y与=>之间不允许有空格。 其中，变量名X和文字内容Z可以比较随意设置，但是Y是有固定的内容，主要有以下几种：

节点连接

• 定义语法节点后，需要理顺节点之间的关系，才能建立正确的流程图；
• 在flow中使用->符号连接两个前后的变量；
• 如： a->b->c，表示节点a转到b又到c节点；
• 上述转接也可以写成：

a->b
b->c

• condition是判断，可以取yes和no两种结果，对于不同结果可以有不同走向。如： cond(yes)->out 表示condition成立时转向out执行； cond(no)->op表示condition不成立时转向op执行；

连接方向

• 连接线有上下左右四个方向，如果需要指定连接线连接到某一特定方向，在连接线开始的元素后面添加方向即可，方向包括：

(top)
(bottom)
(left)
(right)

• 如果要设置条件框连接线方向，在括号中添加即可。条件框只有两个方向可供选择：

# yes向下，no向右（默认）
# yes向右，no向下。
cond(yes,right)
cond(no,bottom)

只需要指定其中一条分支的方向即可。

参考资料

• https://blog.csdn.net/wzh0709zml/article/details/103310405
• http://www.zhaojun.im/hexo-flowchart/
• https://www.jianshu.com/p/f28c94cf1204