Use mermaid in Hexo

Posted on In

1. 使用mermaid，大致上有两种方法：

1.1如果你的主题是Next，那么可以直接使用next主题内置的

直接修改next主题文件夹下“_config.yml”中mermaid属性为true，就可以直接使用了。

1
2
3
4
5
# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: neutral

注意：如果要使用```mermaid的语法，有一些需要注意的地方。见2.2

1.2 使用单独的mermaid插件的方式，比如hexo-filter-mermaid-diagrams

经试验，如果使用hexo-filter-mermaid-diagrams, 那就需要按照官方提供方法的方法进行设置
1.2.1 安装 

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

1.2.2 修改js这一步按照官方操作无法成功的话可能是theme.mermaid.变量无法正常获取导致的，去掉原本的判断条件
下面是官方提供的片段 

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({{ JSON.stringify(theme.mermaid.options) }});
    }
  </script>
{% endif %}

下面是修改后的

1
2
3
4
5
6
<script src='https://unpkg.com/mermaid@7.1.2/dist/mermaid.min.js'></script>
<script>
if (window.mermaid) {
  mermaid.initialize({ theme: 'default' });
}
</script>

2. 关于语法

2.1 下面为next内置的一种写法，（与github默认支持的不兼容，无法在github预览中正常显示）

1
2
3
4
5
6
{% mermaid graph TD %}
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
{% endmermaid %}
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

2.2 下面为Fenced Code Blocks风格的写法，hexo-filter-mermaid-diagrams 中和next中都可以常显示（与github默认支持的兼容）

2.2.1 如果是较高版本，next本身已经提供了支持，不过需要在hexo中添加block高亮例外:
1
2
3
4
5
"_config.yml"

highlight:
  exclude_languages:
    - mermaid

reference: mermaid部分能不能像typora一样

2.2.2 较低版本则需要自己处理字符串或者安装hexo-filter-mermaid插件

npm install hexo-filter-mermaid-diagrams --save
关于 hexo-filter-mermaid-diagrams，本质是使得由markdown语法Fenced Code Blocks转写成<pre>标签，这个库并不真正的执行渲染，可以点进去看源码里面基本上就是一个字符串处理的过程

1
2
3
4
5
6
7
8
``` mermaid
flowchart TD;
A-->B;
A-->C;
B-->D;
C-->D;
D-->E;
```
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
D-->E;

3.调整mermaid显示效果

3.1 找到next主题mermaid初始化的地方，可以在这里对mermaid进行进一步的自定义设置

可能根据版本会有差异，大致是类似下面的一段代码
比如我把线条的直线改成来basis基础曲线

1
2
3
4
5
6
7
mermaid.initialize({
  theme    : '{{ theme.mermaid.theme }}',
  logLevel : 3,
  flowchart: { curve     : 'basis' },
  gantt    : { axisFormat: '%m/%d/%Y' },
  sequence : { actorMargin: 50 }
});

3.2 mermaid位置，居中显示,

(如果是较高版本可能已经默认居中了，不需要手动修改)
通过添加css来实现
我是放在了 themes/next/source/css/main.styl
添加居中

1
2
3
4
/*mermaid图居中*/
.mermaid{
  text-align: center;
}