Mermaid 流程图 v3.8.3

如果要在文章中绘制 Mermaid 流程图，可以使用 Hexo 插件 hexo-filter-mermaid-diagrams。

Mermaid 配置流程

1. 在 Hexo 项目根目录下安装插件 hexo-filter-mermaid-diagrams

   cd your-hexo
   npm install hexo-filter-mermaid-diagrams

2. 在 Hexo 配置文件 _config.yml 增加如下配置

   mermaid:
    enable: true
    version: 10.5.0

   • enable 控制是否启用 Mermaid
   • version 选择 Mermaid.js 版本

使用示例

完成 Mermaid 插件配置之后，即可在文章中使用 Mermaid 代码块进行绘制流程图。

示例一

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

示例二

```mermaid
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!
```

示例三

```mermaid
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
```

TIP

关于 Mermaid 流程图更多的绘制方法，请参考 MermaidJS 官方教程：

• https://github.com/mermaid-js/mermaid

• http://mermaid.js.org/intro/