对Hexo添加mermaid支持

Posted on Edited on In Views:

本篇博客是关于在hexo中添加配置mermaid的记录

安装Mermaid插件

在博客文件夹运行命令：

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

修改配置文件

在路径theme/next（主题文件夹）下找到配置文件

在其中找到mermaid相关代码段并修改：

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

测试

1
2
3
4
5
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
1
2
3
4
5
6
7
8
9
10
11
12
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts 
prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!