Hexo -13- 利用 Markdown 语法画 flowchart 流程图-工具盒子

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

添加支持 {#添加支持}

添加Flow代码 {#添加Flow代码}

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

添加flow代码：

Flow 语法结构 {#Flow-语法结构}

语法概述

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

节点定义 {#节点定义}

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

| 操作模块名 | 表示含义说明 | |-------------|--------| | start | 开始 | | end | 结束 | | operation | 普通操作块 | | subroutine | 子任务块 | | condition | 判断块 | | inputoutput | 输入输出块 |

节点连接 {#节点连接}

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

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

连接方向 {#连接方向}

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

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

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

参考资料 {#参考资料}

https://blog.csdn.net/wzh0709zml/article/details/103310405
http://www.zhaojun.im/hexo-flowchart/
https://www.jianshu.com/p/f28c94cf1204st=>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{"scale":1,"line-width":2,"line-length":50,"text-margin":10,"font-size":12}