Hexo NexT 主题渲染 Mermaid 绘图

发表于 更新于 阅读次数： 评论数： 本文字数： 1.8k 阅读时长 ≈ 2 分钟

版本说明

  • Hexo 5.4.0
  • NexT 8.8.1

Hexo 安装插件

在博客的根目录下，执行以下命令安装 hexo-mermaid-lastest 插件

1
$ npm install hexo-mermaid-lastest --save

NexT 启用 Mermaid

打开 NexT 主题的 _config.yml 配置文件，找到 mermaid 的配置项，并设置 enable: true，如下所示：

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

Hexo 重新编译构建

执行以下命令，重新执行 Hexo 的编译构建操作，并启动 Hexo-Server 的预览服务，若 Mermaid 的绘图正常显示，则说明 Mermaid 成功被渲染。

1
$ hexo clean && hexo generate && hexo server

Hexo 插件的使用

官方文档

Hexo 插件 hexo-mermaid-lastest 的官方文档说明可以看这里。

语法说明

值得注意的是，有一些 Markdown 的编辑工具，比如在 Cmd Markdown 里，Mermaid 的使用语法是这样的：

hexo-mermaid-1

但 hexo-mermaid-lastest 这款插件的使用语法略有不同：

hexo-mermaid-2

  • sequence、graph TD 等 Mermaid Diagram 的具体类型必须写在第一行的内容里
  • 三个点后面要写的是 mermaid，而不是 sequence、graph TD 等 Mermaid Diagram 的具体类型

特别注意

如果在安装 hexo-mermaid-lastest 插件并使用上述语法后，也不能正常渲染 Mermaid 图表，建议关闭 NexT 主题的 Pjax 功能，或者强制刷新一次页面。

使用示例

流程图

1
2
3
4
5
6
7
graph TB
  id1(圆角矩形)--普通线-->id2[矩形];
  subgraph 子图
   id2==粗线==>id3{菱形}
   id3-.虚线.->id4>右向旗帜]
   id3--无箭头---id5((圆形))
  end
graph TB
  id1(圆角矩形)--普通线-->id2[矩形];
  subgraph 子图
   id2==粗线==>id3{菱形}
   id3-.虚线.->id4>右向旗帜]
   id3--无箭头---id5((圆形))
  end

时序图

1
2
3
4
5
6
7
8
9
10
sequenceDiagram

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

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

甘特图

1
2
3
4
5
6
7
8
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
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

饼图

1
2
3
4
5
6
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

类别图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
classDiagram
     Animal <|-- Duck
     Animal <|-- Fish
     Animal <|-- Zebra
     Animal : +int age
     Animal : +String gender
     Animal: +isMammal()
     Animal: +mate()
     class Duck{
         +String beakColor
         +swim()
         +quack()
     }
     class Fish{
         -int sizeInFeet
         -canEat()
     }
     class Zebra{
         +bool is_wild
         +run()
     }
 classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()
      class Duck{
          +String beakColor
          +swim()
          +quack()
      }
      class Fish{
          -int sizeInFeet
          -canEat()
      }
      class Zebra{
          +bool is_wild
          +run()
      }

状态图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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
    }

实体关系图

1
2
3
4
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

参考资料