Hexo优化 --- 利用 Markdown 语法画流程图
Hexo优化 --- 利用 Markdown 语法画流程图
一份执着✘
发布于 2018-06-04 16:21:32
发布于 2018-06-04 16:21:32
添加支持
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#位置指定
cond(no)->sub1(right)->op1 #no的时候到到 sub1，再从sub1的右侧到op1
#还可以这样 cond1(no,right)本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017-07-142，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录