Flowchart过滤器扩展

Hexo

流程图绘制

项目地址

https://github.com/bubkoo/hexo-filter-flowchart

语法

使用```flow代码块
首先定义节点

1
节点别名=>节点类型(start|end|operation|subroutine|condition|inputoutput): 显示文字

然后用别名定义节点间连接关系

1
节点别名->节点别名

可指定连接线文字以及连接方向

1
节点别名(线上文字，方向[left|right])->节点别名

更多语法参考
http://flowchart.js.org/

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
st=>start: Start
e=>end: End
op1=>operation: My Operation
op2=>operation: Stuff
sub1=>subroutine: My Subroutine
cond=>condition: Yes or No?
c2=>condition: Good idea
io=>inputoutput: catch something...

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

注意事项

生成的流程图svg指定了绝对的宽和高，如果页面大小不够可能会破坏页面布局
通过查看前端代码发现流程图div自带名为flow-chart的css类，可以添加滚动条支持

1
2
3
.flow-chart{
	overflow:auto
}

bug:其他code代码块不能出现在页面最后，页面最后有flowchart引入的script等，会发生解析错误，暂时的解决方案是在代码块后添加文字，避免让代码块成为页面内容结尾处。

版权声明

This site by Linest is licensed under a Creative Commons BY-NC-ND 4.0 International License.
由Linest创作并维护的博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证。

本文永久链接：http://linest.github.io/2016/10/03/hexo-ext-flowchart/