Hexo 利用 Markdown 语法画 flowchart 流程图

冷不防 2022-12-24 00:45 241阅读 0赞

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

### 添加支持 ###

npm install --save hexo-filter-flowchart

### 添加Flow代码 ###

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

![d01574db7d802af2ad1810a01861aa4e.png][]

*  添加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

Created with Raphaël 2.2.0开始节点输入操作节点条件节点输出结束节点子例程yesno

### Flow 语法结构 ###

*  语法概述

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

#### 节点定义 ####

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

<table> 
 <thead> 
  <tr> 
   <th>操作模块名</th> 
   <th>表示含义说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>start</td> 
   <td>开始</td> 
  </tr> 
  <tr> 
   <td>end</td> 
   <td>结束</td> 
  </tr> 
  <tr> 
   <td>operation</td> 
   <td>普通操作块</td> 
  </tr> 
  <tr> 
   <td>subroutine</td> 
   <td>子任务块</td> 
  </tr> 
  <tr> 
   <td>condition</td> 
   <td>判断块</td> 
  </tr> 
  <tr> 
   <td>inputoutput</td> 
   <td>输入输出块</td> 
  </tr> 
 </tbody> 
</table>

#### 节点连接 ####

*  定义语法节点后，需要理顺节点之间的关系，才能建立正确的流程图；
 *  在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