本文最后更新于:2024年5月7日 下午

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

添加支持

1
npm install --save hexo-filter-flowchart

添加Flow代码

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

  • 添加flow代码:
1
2
3
4
5
6
7
8
9
10
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是具体显示的文字内容。需要注意的是,冒号后要加空格才能识别,而XY=>之间不允许有空格。
    其中,变量名X和文字内容Z可以比较随意设置,但是Y是有固定的内容,主要有以下几种:
操作模块名 表示含义说明
start 开始
end 结束
operation 普通操作块
subroutine 子任务块
condition 判断块
inputoutput 输入输出块

节点连接

  • 定义语法节点后,需要理顺节点之间的关系,才能建立正确的流程图;
  • 在flow中使用->符号连接两个前后的变量;
  • 如: a->b->c,表示节点a转到b又到c节点;
  • 上述转接也可以写成:
1
2
a->b
b->c
  • condition是判断,可以取yes和no两种结果,对于不同结果可以有不同走向。如:
    cond(yes)->out 表示condition成立时转向out执行;
    cond(no)->op表示condition不成立时转向op执行;

连接方向

  • 连接线有上下左右四个方向,如果需要指定连接线连接到某一特定方向,在连接线开始的元素后面添加方向即可,方向包括:
1
2
3
4
(top)
(bottom)
(left)
(right)
  • 如果要设置条件框连接线方向,在括号中添加即可。条件框只有两个方向可供选择:
1
2
3
4
# 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



文章链接:
https://www.zywvvd.com/notes/hexo/website/13-flowchart/flowchart/


“觉得不错的话,给点打赏吧 ୧(๑•̀⌄•́๑)૭”

微信二维码

微信支付

支付宝二维码

支付宝支付

Hexo -13- 利用 Markdown 语法画 flowchart 流程图
https://www.zywvvd.com/notes/hexo/website/13-flowchart/flowchart/
作者
Yiwei Zhang
发布于
2020年11月23日
许可协议