Hexo优化 --- 利用 Markdown 语法画流程图

添加支持

Hexo 默认是不支持流程图的 Markdown 语法的,需要添加支持:

1
npm install --save hexo-filter-flowchart

演示

一个最简单的流程图

1
2
3
4
5
6
7
8
9
10
···flow    #由于渲染问题,请自行将 · 替换为 `
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认?

st->op->cond
cond(yes)->e
cond(no)->op
···
1
2
3
4
5
6
7
8
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认?

st->op->cond
cond(yes)->e
cond(no)->op

一个复杂的流程图

1
2
3
4
5
6
7
8
9
10
11
12
13
···flow    #由于渲染问题,请自行将 · 替换为 `
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
···
1
2
3
4
5
6
7
8
9
10
11
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

语法详解

Hexo 中的流程图是依赖于 flowchart.js 实现的。

以上面那个复杂的流程图为例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
···flow    #由于渲染问题,请自行将 · 替换为 `
//定义部分
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes or No?:>http://www.google.com
io=>inputoutput: catch something...

//判断和位置控制
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
···

例如这一句:

1
st=>start: Start|past:>http://www.google.com[blank]

其中,st 是变量名, start 是指操作模块名,冒号后面就是内容了。需要注意的是,冒号后要加空格才能识别

操作模块语法

操作模块 说明
start 开始
end 结束
opration 普通操作块
condition 判断块
subroutine 子任务块
inputoutput 输入输出块

判断和位置控制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
####流程控制
st->op1->e

# -> 作为控制流程的操作符,就是指向下一步要操作的。
# 每一条都算是一条流程

# 你也可以断开写,怎么方便怎么来,如:下面两个是一样的。

#分着写
st->op1
op1->e

#合着写
st->op1->e

####判断
cond(yes)->io->e #yes的时候到io,再到e
1
2
3
#位置指定
cond(no)->sub1(right)->op1 #no的时候到到 sub1,再从sub1的右侧到op1
#还可以这样 cond1(no,right)
坚持原创技术分享,您的支持将鼓励我继续创作!