hexo-next主题mermaid配置

发表于 更新于 阅读次数：

hexo加入mermaid支持, 可以用mermaid语法用代码生成流程图、甘特图等…

安装hexo插件

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

_config.next.yml配置

找到这里,按照如下修改

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

完毕

流程图

graph TD
    B((开始)) -->C{判断}
    C --  a=1 -->D[执行语句1]
    C --  a=2  -->E[执行语句2]
    C --  a=3 -->F[执行语句3]
    C -- a=4  -->G[执行语句4]
    D--> AA((结束))
    E--> AA
    F--> AA
    G--> AA

甘特图

gantt
section Section
Completed :done,    des1, 2014-01-06,2014-01-08
Active        :active,  des2, 2014-01-07, 3d
Parallel 1   :         des3, after des1, 1d
Parallel 2   :         des4, after des1, 1d
Parallel 3   :         des5, after des3, 1d
Parallel 4   :         des6, after des4, 1d

类图

classDiagram
Class01 <|-- AveryLongClass : Cool
<> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla

状态图

stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

饼图

pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15

具体参考：https://juejin.cn/post/7030074642559664135