Preface
Mermaid 是一个支持Markdown的流行的js图标库。
让你可以直接在Markdown中画流程图,支持流程图,甘特图,序列图等等。
之前的笔记中已经有写了一个流程图,但是一直没有渲染出来。
搁置今日去解决了一下
Steps
1. 安装Mermaid插件
在当前文件夹下面运行如下命令:
1 | npm i hexo-filter-mermaid-diagrams |
2. 修改 _config.yml
theme/hexo-theme-next-7.1.1*下面有一个 *_config.yml ,hexo支持的样式和配置都在这里找的。
找到mermaid相关:
1 | # Mermaid tag |
复制到项目项目的 _config.yml 中去,然后修改为如下:
1 | mermaid: |
3. 添加Mermaid页面嵌入
进入 theme/hexo-theme-next-7.1.1/layout/ 中,打开footer.swig,在最后面添加如下代码:
1 | {% if mermaid.enable %} |
4. 重启
运行
1 | hexo g |
此时,可以在页面上看到图表正常渲染出来了。
Tips
遇到问题可以查看Terminal和浏览器的console看是否有异常。
其他
Hexo多tags格式是
1 | tags: [tag1,tag2] |
已测
或者
1 | tags: |
未测