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

添加支持

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

1	npm install --save hexo-filter-flowchart

演示

一个最简单的流程图

···flow    #由于渲染问题，请自行将 · 替换为 `
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？

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

st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？

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

一个复杂的流程图

···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
···

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 实现的。

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

···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	输入输出块

判断和位置控制

####流程控制
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)