Hexo中插入flowchart

Posted on | Edited on | In | Views: 355

以下是使用中的hexo插入flowchart的方法。

github参考link

安装插件

npm 安装

1
npm install --save hexo-filter-flowchart

修改配置文件

在hexo的_config.yml文件（根目录的并非主题的）中，添加以下内容：

1
2
3
4
flowchart:
  # raphael:   # optional, the source url of raphael.js
  # flowchart: # optional, the source url of flowchart.js
  options: # options used for `drawSVG`

效果

e.g.

  • 内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
` ` `flow 
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
` ` `

flow前后的三个点之间加了空格(环境限制无法嵌套引用flow)，实际使用时需要去掉空格

  • 效果
Created with Raphaël 2.2.0StartMy OperationYesor No?Good ideacatch something...EndStuffMy Subroutineyesnoyesno

e.g.

  • 内容
1
2
3
4
5
6
7
8
9
10
` ` `flow
    st=>start: Start
    op=>operation: Your Operation
    cond=>condition: Yes or No?
    e=>end
    
    st->op->cond
    cond(yes)->e
    cond(no)->op
` ` `

flow前后的三个点之间加了空格(环境限制无法嵌套引用flow)，实际使用时需要去掉空格

  • 效果
Created with Raphaël 2.2.0StartYour OperationYes or No?Endyesno



本地环境就能看到效果了。
其他还是执行hexo g, hexo d发布网站到master分支上。