mermaid图表渲染

  1. 1. 背景
  2. 2. 共通
  3. 3. 流程图 flowchart
    1. 3.1. 代码
    2. 3.2. 图形
  4. 4. 时序图 Sequence diagram
    1. 4.1. 代码
    2. 4.2. 图形
  5. 5. 甘特图 Gantt diagram
    1. 5.1. 代码
    2. 5.2. 图形
  6. 6. Class diagram (experimental)
    1. 6.1. 代码
    2. 6.2. 图形

记录mermaid图表的使用方法

背景

发现mermaid这一渲染图表的神器,只可惜Hexo原生不支持,
调查一圈发现有插件hexo-filter-mermaid-diagrams支持。
不过要使用的话,需要修改主题那块代码,
本着能紧跟最新版本 (lǎn de xiū gǎi dài mǎ) 的原则,
发了一条GitHub Issue,请求主题的作者,作者立马就改好了。感谢作者大大( •̀ ω •́ )✧

共通

  1. 安装hexo-filter-mermaid-diagrams
    1
    2
    3
    # 二选一
    npm i hexo-filter-mermaid-diagrams --save
    yarn add hexo-filter-mermaid-diagrams
  2. 编写内容
    • 如同一般一般代码块,先写三个反引号
    • 后面接上mermaid
    • 最后再加3个反引号
  3. 例如

流程图 flowchart

代码

1
2
3
4
5
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;

图形

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

时序图 Sequence diagram

代码

1
2
3
4
5
6
7
8
9
10
11
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 diagram

代码

1
2
3
4
5
6
7
8
9
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram 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

图形

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram 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

Class diagram (experimental)

代码

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

图形

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