hexo主题pure启用mermaid

安装

1
npm install --save hexo-filter-mermaid-diagrams

配置

  • 在主题的配置文件,添加以下配置内容。
1
2
3
4
5
6
# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
enable: true # default true
version: "7.1.2" # default v7.1.2
options: # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
#startOnload: true // default true

并且修改主题的文件

编辑文件 themes/pure/layout/_common/footer.ejs,添加以下内容。

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: 'pure'});
}
</script>
<% } %>
  • 编辑完成后,应该看起来是这样的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
<%- partial('_common/social', null, {cache: !config.relative_link}) %>
<div class="copyright">
<% if(theme.site.copyright) { %>
&copy; <%= date(new Date(), 'YYYY') %> <%= config.author || config.title %>
<% } %>
<div class="publishby">
<%= __('copyright.theme_by') %> <a href="https://github.com/cofess" target="_blank"> cofess </a><%= __('copyright.base_on') %> <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>.
</div>
</div>
<% 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: 'pure'});
}
</script>
<% } %>
</footer>

语法实例

别忘了再添加语法类型为mermaid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
graph LR
单独节点
开始 -- 带注释写法1 --> 结束
开始 -->|带注释写法2| 结束
实线开始 --- 实线结束
实线开始 --> 实线结束
实线开始 -->|带注释| 实线结束
虚线开始 -.- 虚线结束
虚线开始 -.-> 虚线结束
虚线开始 -.->|带注释| 虚线结束
粗线开始 === 粗线结束
粗线开始 ==> 粗线结束
粗线开始 ==>|带注释| 粗线结束
subgraph 子图标题
子图开始 --> 子图结束
end
节点1[方形文本框] --> 节点2{菱形文本框}
节点3(括号文本框) --> 节点4((圆形文本框))

效果预览