因为笔记主要记录一些开发的内容，不可避免的要用到流程图。搜索后发现了这个工具hexo-filter-mermaid-diagrams。实际使用中唯一的问题就是插件js加载速度的问题，切换到jsdelivr后也完美解决。
hexo-filter-mermaid-diagrams 安装过程
安装依赖
yarn add hexo-filter-mermaid-diagrams
//或者
npm install hexo-filter-mermaid-diagrams
添加配置
然后主题目录的_config.yml配置文件里添加
mermaid: ## mermaid url https://github.com/knsv/mermaid
enable: true # default true
version: "8.8.3" # 最新的版本已经升级到8.8.3
options: # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
startOnload: true # default true 这注释要打开，不然js取它的config时会报错
修改模板
这里没有使用官方的版本，而是修改如下：
if theme.mermaid.enable == true && page.mermaid == true
script(type='text/javascript', id='maid-script' mermaidoptioins=theme.mermaid.options src='https://cdn.jsdelivr.net/npm/mermaid@'+ theme.mermaid.version + '/dist/mermaid.min.js' + '?v=' + theme.version)
script.
if (window.mermaid) {
var options = JSON.parse(document.getElementById('maid-script').getAttribute('mermaidoptioins'));
mermaid.initialize(options);
}
由于只有少数文章需要流程图，所以特地添加一个额外的处理，就是 page.mermaid==true的判断，这样可以自由控制是否加载mermaid插件。要开启插件，只需要在文章的meta里增加对应的配置即可：
---
title: "Mermaid: 在Hexo上使用mermaid渲染流程图"
tags: ["Hexo", "Mermaid"]
categories: ["Hexo"]
mermaid: true
---
官方demo示例
Flowchart
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
Sequence diagram
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!
prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!
Gantt diagram
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
Class diagram
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
Git graph - exclamation experimental
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
Entity Relationship Diagram - exclamation experimental
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
User Journey Diagram
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
sequenceDiagram
actor u as web
participant z as ZenDesk
participant h as 帮助中心后台服务
participant m as 中台
u->>+h: /api/help/widget/login
h->>+m: 读取当前登录用户的信息
m-->>-h: 返回用户信息{userNO:long,email:string}
note over h: 已登录:token=buildJwtToken(userNO,email)
note over h: 未登录:token=buildJwtToken(0,email)
h-->>-u: {data: {token:string}}
rect rgb(200, 200, 200)
note right of u: Widget SDK
u->>z: zE.loginUser({token:string})
u->>z: zE.open() 打开聊天窗口
u->>z: 聊天或工单
end