【个人博客】在Butterfly主题的Hexo个人博客中展示Mermaid绘图内容

使用方法

Butterfly主题下，使用mermaid进行绘图并展示十分的方便，打开项目的_config.butterfly.yml文件，将mermaid下的enable处参数设置为true。

1
2
3
4
5
6
7
8
# mermaid
# see https://github.com/mermaid-js/mermaid
mermaid:
  enable: true
  # built-in themes: default/forest/dark/neutral
  theme:
    light: default
    dark: dark

在你的博客markdown文档中，在mermaid和endmermaid标签中添加你的mermaid代码。

1
2
3
{% mermaid %}
some mermaid statements
{% endmermaid %}

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% mermaid %}
stateDiagram-v2
    [*] --> Active
state Active {
    [*] --> NumLockOff
    NumLockOff --> NumLockOn : EvNumLockPressed
    NumLockOn --> NumLockOff : EvNumLockPressed
    --
    [*] --> CapsLockOff
    CapsLockOff --> CapsLockOn : EvCapsLockPressed
    CapsLockOn --> CapsLockOff : EvCapsLockPressed
    --
    [*] --> ScrollLockOff
    ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
    ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
}
{% endmermaid %}

注意事项

  1. 用这种方法要注意在{% mermaid %}`与`{% endmermaid %}两个标签中的代码可能因为markdown语法原因变化格式，要将其修复为无格式的形式。

  2. 一个及其不好的点是markdown中的mermaid格式与hexo中的mermaid不同，因此没有同时在markdown与hexo中同时展示绘图结果的方法。

其他Mermaid绘图方案