Hexo中插入mermaid图表

1. mermaid简介

mermaid是一种基于文本的格式生成图表和流程图的工具，是markdown文本很好的补充。
可以生成各种图表，其中包括流程图, 时序图, 甘特图等等．

2. vscode安装mermaid插件　(可选)

由于我使用的是vscode来编辑markdown文档，所以需要安装Markdown Preview Mermaid Support
插件才能看到mermaid预览图.

3. 安装mermaid插件

hexo中要使用mermaid图表

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

4. 修改配置

修改主题文件_config.yml
这里很多教程说修改根目录下的，而不是主题，但是我发现我需要修改主题的， 例如， 对于next主题，修改themes/next下的_config.yml，
对于icarus 则修改_config.icarus.yml 如下所示

# Mermaid tag
mermaid:
  enable: true

很多博客说需要手动修改foot模板引入mermaid，实际测试在我当前使用的next 版本中不需要任何手动修改．

如果是icarus主题，则需要修改scripts.jsx,添加一行引入mermaid.min.js, 版本是hardcode的，可以使用配置替换。

return <Fragment>
    <script src={cdn('jquery', '3.3.1', 'dist/jquery.min.js')}></script>
    <script src={cdn('moment', '2.22.2', 'min/moment-with-locales.min.js')}></script>
    {clipboard && <script src={cdn('clipboard', '2.0.4', 'dist/clipboard.min.js')} defer></script>}
    <script dangerouslySetInnerHTML={{ __html: `moment.locale("${language}");` }}></script>
    <script dangerouslySetInnerHTML={{ __html: embeddedConfig }}></script>
    <script data-pjax src={url_for('/js/column.js')}></script>
    <Plugins site={site} config={config} page={page} helper={helper} head={false} />
    <script data-pjax src={url_for('/js/main.js')} defer></script>
    <script src='https://unpkg.com/mermaid@8.11.0/dist/mermaid.min.js'></script>
</Fragment>;

5. 测试一段mermaid图表

在markdown文档中插入一段mermaid图标
下面是三个mermaid图表实例，很明显文字已经转换成了漂亮的图表．

• 流程图(FLOWCHART)　　

  　文本:

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

  图表

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

• 甘特图
  文本

  gantt
     dateFormat  YYYY-MM-DD
     title Adding GANTT diagram functionality to mermaid
     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
     section Critical tasks
     Completed task in the critical line :crit, done, 2014-01-06,24h
     Implement parser and jison          :crit, done, after des1, 2d
     Create tests for parser             :crit, active, 3d
     Future task in critical line        :crit, 5d
     Create tests for renderer           :2d
     Add to mermaid                      :1d

  图表

      gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        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
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

• 饼图
  文本：

  pie
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

  图表：

      pie
        title Key elements in Product X
        "Calcium" : 42.96
        "Potassium" : 50.05
        "Magnesium" : 10.01
        "Iron" :  5

• 状态图
  文本：

  stateDiagram
  
    [*]-->Active
    state Active {
        [*]-->NumLockOff
        NumLockOff-->NumLockOn : EvNumLockPressed
        NumLockOn-->NumLockOff : EvNumLockPressed
        --
        [*]-->CapsLockOff
        CapsLockOff-->CapsLockOn : EvCapsLockPressed
        CapsLockOn-->CapsLockOff : EvCapsLockPressed
        --
        [*]-->ScrollLockOff
        ScrollLockOff-->ScrollLockOn : EvCapsLockPressed
        ScrollLockOn-->ScrollLockOff : EvCapsLockPressed
            }

  图表：

    stateDiagram
  
    [*]-->Active
    state Active {
        [*]-->NumLockOff
        NumLockOff-->NumLockOn : EvNumLockPressed
        NumLockOn-->NumLockOff : EvNumLockPressed
        --
        [*]-->CapsLockOff
        CapsLockOff-->CapsLockOn : EvCapsLockPressed
        CapsLockOn-->CapsLockOff : EvCapsLockPressed
        --
        [*]-->ScrollLockOff
        ScrollLockOff-->ScrollLockOn : EvCapsLockPressed
        ScrollLockOn-->ScrollLockOff : EvCapsLockPressed
            }
  

6. 相关阅读

使用Hexo搭建自己的博客网站

Hexo命令详解

Hexo博客添加评论功能

Hexo配置Next主题

Hexo配置Icarus主题

Hexo博客搜索引擎优化