介绍基于Hexo的流程图、时序图、饼图、甘特图等图形的显示方法

  • 有时候需要用流程图来说明思路，使用图片的话，加载太慢，使用markdown的语法来画流程图是一个不错的办法。
  • vscode自带的markdown预览功能似乎不支持显示流程图，需要安装一个插件Markdown Preview Enhanced
  • hexo中默认不支持流程图的markdown语法，需要安装相关的插件来进行渲染。

1. 流程图模块

不同的模块，安装和使用方法也不相同，这里我安装mermaid

2. 安装Mermaid

步骤1

1

 npm i hexo-filter-mermaid-diagrams --save

步骤2

修改Hexo配置文件_config.yml

1
2
3
4
5
6

# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
  enable: true  # default true
  version: "9.3.0" # default v7.1.2
  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
  #startOnload: true  // default true

步骤3

在主题目录里，有个footer.ejs文件（一般在layout目录下面），把下面代码加到最后

1
2
3
4

<% if (config.mermaid && config.mermaid.enable && page.mermaid) { %>
  <script src="https://cdn.bootcdn.net/ajax/libs/mermaid/<%= config.mermaid.version %>/mermaid.min.js"></script>
    </script>
<% } %>

步骤4

把mermaid: true 加入页面文件

1
2
3
4
5
6

---
title: Hexo支持流程图
date: 2023-02-03 13:04:06
tags: Markdown
mermaid: true
---

3. Mermaid功能

Mermaid支持以下图形：

另外还有几种实验性质的图形，不一定能用

4. Mermaid使用方法

把流程图代码用 ==```mermaid ```== 包裹起来。

5. 示例

==若下面不显示图形，刷新本页==

1. 流程图 mermaid flowchart TB/TD/BT/RL/LR

流程图基本单元 有方形框 、圆角框、菱形等十几种节点，节点间的连接线也有好几种，详见流程图基本单元

  • 横向流程图 `mermaid flowchart RL/LR
1
2
3
4
5
6

flowchart LR
    A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[从左至右横向流程图]

1
2
3
4
5
6

flowchart LR
    A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[从左至右横向流程图]

1
2
3
4
5
6

flowchart RL
    A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[从右至左横向流程图]
  • 竖向流程图 mermaid flowchart TD/TB/BT
1
2
3
4
5
6

flowchart TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]

1
2
3
4
5
6

flowchart TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[从上往下竖向流程图]

1
2
3
4
5
6

flowchart BT
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[从下往上竖向流程图]
  • 带有样式的更大的流程图
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
     class sq,e green
     class di orange

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

graph TB
    sq[Square shape] --> ci((Circle shape))

    subgraph A
        od>Odd shape]-- Two line<br/>edge comment --> ro
        di{Diamond with <br/> line break} -.-> ro(Rounded<br>square<br>shape)
        di==>ro2(Rounded square shape)
    end

    %% Notice that no text in shape are added here instead that is appended further down
    e --> od3>Really long text with linebreak<br>in an Odd shape]

    %% Comments after double percent signs
    e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)

    cyr[Cyrillic]-->cyr2((Circle shape Начало));

     classDef green fill:#9f6,stroke:#333,stroke-width:2px;
     classDef orange fill:#f96,stroke:#333,stroke-width:4px;
     class sq,e green
     class di orange

2. 时序图 mermaid sequenceDiagram

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

%% 时序图例子,-> 直线，-->虚线，->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

%% 时序图例子,-> 直线，-->虚线，->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!

3. 饼图 mermaid pie

1
2
3
4
5
6

pie
    title 饼图
    "Joplin" : 42.96
    "Qdown" : 50.05
    " 黑科技" : 10.01
    "其它" :  5

1
2
3
4
5
6

pie
    title 饼图
    "Joplin" : 42.96
    "Qdown" : 50.05
    " 黑科技" : 10.01
    "其它" :  5

4. 甘特图 mermaid

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

gantt
dateFormat  YYYY-MM-DD
title 软件开发甘特图
section 设计
需求                      :done,    des1, 2014-01-06,2014-01-08
原型                      :active,  des2, 2014-01-09, 3d
UI设计                     :         des3, after des2, 5d
未来任务                     :         des4, after des3, 5d
section 开发
学习准备理解需求                      :crit, done, 2014-01-06,24h
设计框架                             :crit, done, after des2, 2d
开发                                 :crit, active, 3d
未来任务                              :crit, 5d
耍                                   :2d
section 测试
功能测试                              :active, a1, after des3, 3d
压力测试                               :after a1  , 20h
测试报告                               : 48h

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

gantt
dateFormat  YYYY-MM-DD
title 软件开发甘特图
section 设计
需求                      :done,    des1, 2014-01-06,2014-01-08
原型                      :active,  des2, 2014-01-09, 3d
UI设计                     :         des3, after des2, 5d
未来任务                     :         des4, after des3, 5d
section 开发
学习准备理解需求                      :crit, done, 2014-01-06,24h
设计框架                             :crit, done, after des2, 2d
开发                                 :crit, active, 3d
未来任务                              :crit, 5d
耍                                   :2d
section 测试
功能测试                              :active, a1, after des3, 3d
压力测试                               :after a1  , 20h
测试报告                               : 48h

5. 类图 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

 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

6. Git分支图 Git graph - ❗️ experimental

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

    commit "Ashish"
    branch newbranch
    checkout newbranch
    commit id:"1111"
    commit tag:"test"
    checkout main
    commit type: HIGHLIGHT
    commit
    merge newbranch
    commit
    branch b2
    commit

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

gitGraph:
    commit "Ashish"
    branch newbranch
    checkout newbranch
    commit id:"1111"
    commit tag:"test"
    checkout main
    commit type: HIGHLIGHT
    commit
    merge newbranch
    commit
    branch b2
    commit

7. 状态图 State Diagram

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

stateDiagram-v2
    [*] --> Active

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

stateDiagram-v2
    [*] --> Active

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

8. 实体关系图 Entity Relationship Diagram

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string firstName
        string lastName
        int age
    }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

erDiagram
    CAR ||--o{ NAMED-DRIVER : allows
    CAR {
        string registrationNumber
        string make
        string model
    }
    PERSON ||--o{ NAMED-DRIVER : is
    PERSON {
        string firstName
        string lastName
        int age
    }

9. 用户旅程图 User Journey

1
2
3
4
5
6
7
8
9

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

1
2
3
4
5
6
7
8
9

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

10. 需求图 Requirement Diagram

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req

11. C4C Diagram （未测试）

官网链接

12. 脑图 Mindmaps （未测试）

官网链接