在Hexo的根目录下载插件
1
| npm install -s hexo-filter-mermaid-diagrams
|
添加配置
打开博客根目录下面的_config.yml文件，在底部插入以下代码:
1
2
3
4
5
6
|
mermaid: ## mermaid url https://github.com/knsv/mermaid
enable: true
version: "8.0.0"
options: # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
#startOnload: true // default true
|
添加模板引用
在你的主题目录下找到页脚模板文件，themes/<你的主题文件夹>/layout/_partials/footer.swig，在footer.swig文件最后添加以下代码：
1
2
3
4
5
6
7
8
| {% if theme.mermaid.enable %}
<script src='https://unpkg.com/mermaid@{{ theme.mermaid.version }}/dist/mermaid.min.js'></script>
<script>
if (window.mermaid) {
mermaid.initialize({theme: 'forest'});
}
</script>
{% endif %}
|
Typora中设置
偏好设置markdown扩展语法中“图表”勾上。
graph LR
A –> B
graph LR
A --> B