本文最后更新于：2024年5月7日 下午

hexo默认不支持流程图，flowchart是一种简便好用的解决方案，但由于其语法过于简单，导致其在应付稍复杂一些的流程图时捉襟见肘，本文记录在hexo中添加Mermaid流程图的方法。

简介

  • Mermaid是一个基于Javascript的图表工具，它使用Markdown启发的文本定义和一个渲染器来创建和修改复杂的图表。Mermaid的主要目的是帮助文档工作跟上发展。

  • 图解和文档花费了开发人员宝贵的时间，而且很快就会过时。但是，没有图表或文档会破坏生产力，难以直观表达信息。Mermaid通过减少创建可修改的图表所需的时间、精力和工具来解决这个问题，使内容更智能、更可重复使用。Mermaid图表的文本定义允许它很容易被更新，它也可以成为生产脚本（和其他代码）的一部分。

  • 官方github：https://github.com/mermaid-js/mermaid

添加支持

安装插件

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

fluid 可以不需要安装插件

Hexo 配置

  • 在Hexo配置文件中修改

主题配置

Next
  • 在主题配置文件中找到mermaid选项，将enable设置为true。

Fluid

  • 在主题配置文件中找到mermaid选项，将enable设置为true。

其他主题根据具体情况配置。

加入mermaid代码块

官网有最全的说明文档 https://mermaidjs.github.io/ ，此处记录常用使用方法。

1
2
3
4
5
6
7
8
9
10
graph TD
    B((开始)) -->C{判断}
    C --  a=1 -->D[执行语句1]
    C --  a=2  -->E[执行语句2]
    C --  a=3 -->F[执行语句3]
    C -- a=4  -->G[执行语句4]
    D--> AA((结束))
    E--> AA
    F--> AA
   G--> AA  
graph TD
    B((开始)) -->C{判断}
    C --  a=1 -->D[执行语句1]
    C --  a=2  -->E[执行语句2]
    C --  a=3 -->F[执行语句3]
    C -- a=4  -->G[执行语句4]
    D--> AA((结束))
    E--> AA
    F--> AA
   G--> AA
  • 另一种写法
1
2
3
4
5
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

流程图语法

方向

方向 含义
TB 从上到下
BT 从下到上
RL 从右到左
LR 从左到右
TD 与TB相同

节点

语法结构如下：A[名称] --> B(名称)
其中，A、B均代表形状名称， -->表示箭头指向，形状样式用后面的括号来表示，括号里面的内容是形状中要显示的文本内容。其中有以下几种形状：

括号形式 形状样式
[ ] 矩形框
( ) 圆角矩形框
{ } 菱形
(( )) 圆形

连接线

符号 箭头
–> 箭头
— 没有箭头
– 文字 — / — |文字| 带文字的连接线
–>|文字| / – 文字 --> 带箭头和文字的连接
-.-> 虚线
-. 文字 .-> 带文字的虚线连接
==> 粗连接线
== 文本 ==> 带文本的粗连接

子图

语法：

1
2
3
subgraph title
    graph definition
end
1
2
3
4
5
6
7
8
9
10
11
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

样式链接

1
2
3
4
graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5

注释

  • mermaid注释为%%

综合应用

1
2
3
4
5
6
7
8
graph TB
    id1(圆角矩形)--普通线-->id2[矩形]
    subgraph 子图表
        id2==粗线==>id3{菱形}
        id3-.虚线.->id4>右向旗帜]
        id3--无箭头---id5((圆形))
    end
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
graph TB
    id1(圆角矩形)--普通线-->id2[矩形]
    subgraph 子图表
        id2==粗线==>id3{菱形}
        id3-.虚线.->id4>右向旗帜]
        id3--无箭头---id5((圆形))
    end
    style id1 fill:#f9f,stroke:#333,stroke-width:4px

甘特图

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
7
8
9
10
11
12
13
14
15
16
classDiagram
Class01 <|-- AveryLongClass : Cool
<<interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}
classDiagram
Class01 <|-- AveryLongClass : Cool
<<interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}

泛化 （Generalization）

继承关系，子类与父类的关系。

1
2
classDiagram
    A<|--B
classDiagram
    A<|--B

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()
    }

实现（Realization)

1
2
3
4
5
6
7
classDiagram
   class IFlyable{
     <<interface>>
     + flying()
   }
   IFlyable<|..Bat
   Bat:+flying()
classDiagram
   class IFlyable{
     <<interface>>
     + flying()
   }
   IFlyable<|..Bat
   Bat:+flying()

组合(Composition)

1
2
3
4
5
classDiagram
  Computer *-- CPU
  Computer *-- Mainboard
  Computer *-- HardDisk
  Computer *-- MemeryCard
classDiagram
  Computer *-- CPU
  Computer *-- Mainboard
  Computer *-- HardDisk
  Computer *-- MemeryCard

聚合(Aggregation)

1
2
classDiagram
  Company o-- Empolyee
classDiagram
  Company o-- Empolyee

关联(Association)

1
2
3
classDiagram
  Reader "1..*" -- "1..*" Book
  Book "1..*"--> "1"Author
classDiagram
  Reader "1..*" -- "1..*" Book
  Book "1..*"--> "1"Author

依赖(Dependency)

1
2
classDiagram
  Animal..>Food
classDiagram
  Animal..>Food

总结

泛化=实现>组合>聚合>关联>依赖

1
2
3
4
5
6
7
8
classDiagram
classA --|> classB : Generalization
classM ..|> classN : Realization
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Association
classK ..> classL : Dependency
classDiagram
classA --|> classB : Generalization
classM ..|> classN : Realization
classC --* classD : Composition
classE --o classF : Aggregation
classG --> classH : Association
classI -- classJ : Association
classK ..> classL : Dependency

状态图

1
2
3
4
5
6
7
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

饼图

1
2
3
4
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15

旅程图

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: 3: Me
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: 3: Me

序列图语法

使用以下语法开始序列图

1
2
3
sequenceDiagram
    [参与者1][消息线][参与者2]:消息体
    ...

参与者

定义参与者

1
2
3
4
5
sequenceDiagram
    participant 参与者 1
    participant 参与者 2
    ...
    participant 简称 as 参与者 3 #该语法可以在接下来的描述中使用简称来代替参与者 312345

消息线

|类型|描述|
|->|无箭头的实线|
|-->|无箭头的虚线|
|->>|有箭头的实线|
|-->>|有箭头的虚线|
|-x|末端为叉的实线（表示异步）|
|--x|末端为叉的虚线（表示异步）|

处理中

在消息线末尾增加 + ，则消息接收者进入当前消息的“处理中”状态；
在消息线末尾增加 - ，则消息接收者离开当前消息的“处理中”状态。

或者使用以下语法直接说明某个参与者进入“处理中”状态

1
activate 参与者1

标注

语法如下

1
Note 位置表述 参与者: 标注文字1

其中位置表述可以为

表述 含义
right of 右侧
left of 左侧
over 在当中，可以横跨多个参与者

循环

语法如下

1
2
3
loop 循环的条件
    循环体描述语句
end123

判断

1
2
3
4
5
6
7
alt 条件 1 描述
    分支 1 描述语句
else 条件 2 描述 # else 分支可选
    分支 2 描述语句
else ...
    ...
end1234567

如果遇到可选的情况，即没有 else 分支的情况，使用如下语法：

1
2
3
opt 条件描述
    分支描述语句
end

综合应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
sequenceDiagram
    participant z as 张三
    participant l as 李四
    loop 日复一日
        z->>l: 吃了吗您呐？
        l-->>z: 吃了，您呢？
        activate z
        Note left of z: 想了一下
        alt 还没吃
            z-xl: 还没呢，正准备回去吃
        else 已经吃了
            z-xl: 我也吃过了，哈哈
        end
        opt 大过年的
            l-->z: 祝您新年好啊
        end
    end
sequenceDiagram
    participant z as 张三
    participant l as 李四
    loop 日复一日
        z->>l: 吃了吗您呐？
        l-->>z: 吃了，您呢？
        activate z
        Note left of z: 想了一下
        alt 还没吃
            z-xl: 还没呢，正准备回去吃
        else 已经吃了
            z-xl: 我也吃过了，哈哈
        end
        opt 大过年的
            l-->z: 祝您新年好啊
        end
    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!

参考资料



文章链接：
https://www.zywvvd.com/notes/hexo/website/14-mermaid/mermaid/

“觉得不错的话，给点打赏吧 ୧(๑•̀⌄•́๑)૭”

微信二维码

微信支付

支付宝二维码

支付宝支付

Hexo > Website
#Hexo #Website
Hexo -14- 利用 Markdown 语法画 mermaid 流程图
https://www.zywvvd.com/notes/hexo/website/14-mermaid/mermaid/
作者
Yiwei Zhang
发布于
2020年11月24日
许可协议