Hexo中插入flowchart

自己原创文章link:https://wangxiaoyu-go.github.io/2018/11/19/hexo-filter-flowchart/


Table of Contents

安装插件

修改配置文件

效果


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

github参考link

安装插件

npm 安装

npm install --save hexo-filter-flowchart

修改配置文件

在hexo的_config.yml文件(根目录的并非主题的)中,添加以下内容

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

效果

e.g.

  • 内容

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

  • 效果

e.g.

  • 内容

 ```flow
    st=>start: Start
    op=>operation: Your Operation
    cond=>condition: Yes or No?
    e=>end
    
    st->op->cond
    cond(yes)->e
    cond(no)->op
```

  • 效果



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

发布了26 篇原创文章 · 获赞 2 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/Olivia_Vang/article/details/92980237