Hexo-Next 主题的图形工具 -- Mermaid

发表于 更新于 分类于 置顶 精品
阅读次数： 本文字数： 6.1k 阅读时长 ≈ 22 分钟

摘要

  • Mermaid 是一个支持在Markdown文档中绘制流程图、甘特图、序列图等图形的工具。它基于JavaScript实现，能够将Markdown中的元素渲染成HTML元素，从而在网页上直观地展示各种图表‌

  • Next主题中使用Mermaid说明

  • 本文介绍如何在 Hexo-Next 主题中使用 Mermaid

配置和使用方法

  • NexT config file 中找到mermaid配置，并设置为true，theme 可以设置浅色和深色背景的样式，共有4个可用选项

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

  • 使用方法，其中mermaid与endmermaid是固定搭配，type 用于设置图形的种类，如流程图、时序图、甘特图等，下面示例中会介绍

1
2
{% mermaid type %}
{% endmermaid %}

  • 有些小伙伴喜欢使用代码块的形式，使用时去掉前面的#

1
2
3
4
#```mermaid
type

#```

  • 但是此时需要在 Hexo config file 中找到highlight，并添加如下内容，才会使代码块的形式生效

1
2
3
highlight:
  exclude_languages:
    - mermaid

图形示例

  • 这里只介绍常用的一些图表，更多图表的使用方法可以参考Mermaid帮助文档

Flowchart

  • 用于绘制流程图，支持方向（例如从左到右、从上到下）和节点间关系的定义。

  • Mermaid Flowchart

  • type 为 "graph TD"或者"graph LR"，分别表示从上到下和从左到右的方向

1
2
3
4
5
6
- 流程图方向:
  - TB - 从上到下
  - TD - 自上而下，等同于TB
  - BT - 从下到上
  - RL - 从右到左
  - LR - 从左到右

  • "graph TD"：从上到下

1
2
3
4
5
6
{% mermaid graph TD %}
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
{% endmermaid %}

  • 效果

Text

One

Two

Hard

Round

Decision

Result 1

Result 2

  • 说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
graph TD，定义一个从上到下的流程图。
TD 是 Top to Down 的缩写，表示流程图从上向下排列。

A[Hard] -->|Text| B(Round)，定义了一个节点 A，显示为 Hard。
一个带标签的箭头 -->|Text| 指向节点 B，箭头上的标签为 Text。
节点 B 被定义为 Round，这是一个椭圆形节点。

B --> C{Decision}，节点 B 指向节点 C。
节点 C 被定义为 Decision，这是一个决策节点，用大括号 {} 表示。

C -->|One| D[Result 1]，决策节点 C 的一个分支，带标签 One，指向节点 D。
节点 D 显示为 Result 1，这是一个矩形节点。

C -->|Two| E[Result 2]，决策节点 C 的另一个分支，带标签 Two，指向节点 E。
节点 E 显示为 Result 2，也是一个矩形节点。

  • "graph LR"：从左到右

1
2
3
4
5
6
{% mermaid graph LR %}
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D
{% endmermaid %}

  • 效果

链接

长方形

圆

圆角长方形

菱形

  • 说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
graph LR，定义流程图的方向是从左到右（Left to Right）。
节点和箭头从左向右排列。

A[长方形] -- 链接 --> B((圆))，定义了节点 A 和节点 B。
A 是一个长方形节点，显示内容为“长方形”。
B 是一个圆形节点，内容为空。
它们之间通过一个带标签的箭头 -- 链接 --> 连接，箭头上标注了“链接”。

A --> C(圆角长方形)，节点 A 指向节点 C。
C 是一个圆角长方形节点，显示内容为“圆角长方形”。

B --> D{菱形}，节点 B 指向节点 D。
D 是一个菱形节点，显示内容为“菱形”。

C --> D，节点 C 也指向节点 D，箭头不带标签。

节点类型和形状
长方形 [] ：如 A[长方形]，是默认的矩形节点。
圆形 (()) ：如 B((圆))，用于表示一个圆形节点。
圆角长方形 () ：如 C(圆角长方形)，用于表示圆角矩形节点。
菱形 {} ：如 D{菱形}，用于表示决策点或条件分支。

Sequence Diagram

  • 用于绘制时序图，显示多个实体之间的交互关系，包括消息、时间、状态和数据交换。

  • Mermaid Sequence Diagram

  • type 为 "sequenceDiagram"

1
2
3
4
5
6
7
8
9
10
{% mermaid 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!
{% endmermaid %}

  • 效果

BobJohnAliceBobJohnAliceloop[Healthcheck]Rational thoughts!Hello John, how are you?Fight against hypochondriaGreat!How about you?Jolly good!

  • 说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
基本结构说明
sequenceDiagram: 定义一个序列图，表示消息和事件的时间顺序。
参与者
    Alice、John 和 Bob 是参与者。
    每个参与者在图中会以垂直排列的形式显示。
消息和箭头
    ->> 表示一个消息的发送，方向由箭头决定。
    消息内容写在箭头旁边。
循环（loop）
    使用 loop 定义一个循环块，循环中的消息会重复执行，表示某种持续行为。
备注（Note）
    Note right of John 定义了一条备注，显示在 John 的右侧，用来补充说明。

代码逐步解析
Alice->>John: Hello John, how are you?
    表示 Alice 给 John 发送一条消息：“Hello John, how are you?”
loop Healthcheck
    定义一个循环块，标题为“Healthcheck”（健康检查）。
    循环内容是：
        John->>John: Fight against hypochondria
        表示 John 自己向自己发送一条消息：“Fight against hypochondria”（与疑病症抗争）。
Note right of John: Rational thoughts!
    定义了一条备注，显示在 John 的右侧。
    备注内容为：“Rational thoughts!”（理性思考！）。
John-->>Alice: Great!
    John 回复 Alice 一条消息：“Great!”（很好！）。
    使用 -->> 表示回复消息。
John->>Bob: How about you?
    John 询问 Bob 一条消息：“How about you?”（你怎么样？）。
Bob-->>John: Jolly good!
    Bob 回复 John 一条消息：“Jolly good!”（非常好！）。

Class Diagram

  • 用于绘制类图，显示对象之间的关系，包括继承、关联、依赖等。

  • Mermaid Class Diagram

  • type 为 "classDiagram"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% mermaid 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()
}
{% endmermaid %}

  • 效果

Cool

Where am i?

«interface»

Class01

int chimp

int gorilla

size()

AveryLongClass

Class09

C2

C3

Class07

Object[] elementData

equals()

«service»

Class10

int id

size()

  • 说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
基本结构
classDiagram
    定义一个类图，展示类的属性、方法以及它们之间的关系。
类和修饰符
    使用 class ClassName 定义一个类。
    类的属性和方法定义在 class 块内。
    特殊修饰符如 <<interface>> 和 <<service>> 用于说明类的角色或类型。
关系符号
    <|-- 表示继承（extends）。
    --|> 表示实现（implements，接口的实现）。
    --> 表示关联（普通引用）。
    --* 表示组合关系（一个类包含另一个类）。
    : 后跟关系的说明或注释。


代码逐步解析
Class01 <|-- AveryLongClass : Cool
    表示 AveryLongClass 继承了 Class01，关系名称为 Cool。
    <|-- 表示继承（父类到子类）。
<<interface>> Class01
    将 Class01 标记为一个接口。
Class09 --> C2 : Where am i?
    表示 Class09 与 C2 有一个关联关系，注释为 “Where am i?”。
Class09 --* C3
    表示 Class09 与 C3 有一个组合关系。
    Class09 包含一个或多个 C3 的实例。
Class09 --|> Class07
    表示 Class09 实现了 Class07。
    --|> 通常用于表示接口实现。
Class07 : equals()
    表示 Class07 定义了一个方法 equals()。
Class07 : Object[] elementData
    表示 Class07 有一个属性 elementData，类型是 Object[]（数组）。
Class01 : size()
    表示 Class01 有一个方法 size()。
Class01 : int chimp 和 Class01 : int gorilla
    表示 Class01 有两个整型属性：chimp 和 gorilla。
class Class10 { ... }
    定义了一个名为 Class10 的类。
    类中有一个修饰符 <<service>>，表示这是一个服务类。
    属性和方法：
        int id：整型属性。
        size()：方法。

State Diagram

  • 用于绘制状态图，显示对象的状态转移和行为。

  • Mermaid State Diagram

  • type 为 "stateDiagram"

1
2
3
4
5
6
7
8
{% mermaid stateDiagram %}
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
{% endmermaid %}

  • 效果

Still

Moving

Crash

  • 说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
基本结构
stateDiagram
    定义这是一个状态图，用于表示状态和状态之间的转换。
[*]
    表示初始状态或终止状态。
    起始状态通常有箭头指向第一个状态。
    终止状态通常有箭头指向它。
状态
    用状态名称定义状态，例如 Still、Moving、Crash。
箭头
    --> 表示状态之间的转换方向。



代码逐步解析
[*] --> Still
    系统从初始状态进入 Still 状态。
Still --> [*]
    系统从 Still 状态可以直接进入终止状态（系统结束）。
Still --> Moving
    系统从 Still 状态可以转换为 Moving 状态。
Moving --> Still
    系统从 Moving 状态可以返回到 Still 状态。
Moving --> Crash
    系统从 Moving 状态可以进入 Crash 状态。
Crash --> [*]
    系统从 Crash 状态可以进入终止状态（表示系统崩溃或终止）。

Entity Relationship Diagram

1
2
3
4
5
{% mermaid erDiagram %}
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
{% endmermaid %}

  • 效果

CUSTOMERORDERITEMDELIVERY-ADDRESSplacescontainshas

  • 说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
基本结构
erDiagram
    定义这是一个实体关系图。
    展示数据库中表（实体）之间的关系。
实体
    例如 CUSTOMER、ORDER 和 ITEM，每个实体对应数据库中的一个表。
关系
    ||--o{ 表示一对多关系（1:N）。
    ||--|{ 表示一对多关系（1:N），但强调实体的唯一性（每个子记录属于唯一的父记录）。
    }|..|{ 表示多对多关系（N:M）。
注释
    : 后的文字是关系的描述，例如 places、contains、has。


代码逐步解析
CUSTOMER ||--o{ ORDER : places
    表示一个客户 (CUSTOMER) 可以下多个订单 (ORDER)。
    ||--o{ 表示 一对多关系（1:N），即一个客户对应多个订单。
ORDER ||--|{ ITEM : contains
    表示一个订单 (ORDER) 包含多个商品 (ITEM)。
    ||--|{ 表示 一对多关系，且每个商品的记录与某个订单唯一对应。
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
    表示一个客户 (CUSTOMER) 可以有多个配送地址 (DELIVERY-ADDRESS)，而每个配送地址也可能对应多个客户。
    }|..|{ 表示 多对多关系（N:M）。

Gantt Chart

  • 用于绘制甘特图，显示任务计划、进度和资源分配。

  • Mermaid Gantt Chart

  • type 为 "gantt"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% mermaid gantt %}
title Project Timeline
dateFormat  YYYY-MM-DD
section Section1
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
section Section2
Task 1 :  t1,after des6,5d
Task 2 :  t2,after t1,3d
{% endmermaid %}

  • 效果

01/06/201401/07/201401/08/201401/09/201401/10/201401/11/201401/12/201401/13/201401/14/201401/15/201401/16/201401/17/201401/18/2014Completed Active Parallel 1 Parallel 2 Parallel 3 Parallel 4 Task 1 Task 2 Section1Section2Project Timeline

  • 说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
基本结构
gantt
    定义一个甘特图，用于表示任务的时间分布和依赖关系。
title
    定义甘特图的标题，这里是 Project Timeline。
dateFormat
    定义日期格式，这里是 YYYY-MM-DD（年-月-日）。
section
    定义任务的分类（部分）。
    每个 section 下包含一组任务，任务在图表中分组显示。
任务格式
    每个任务按以下格式定义：
        任务名称 : 状态, 标识符, 开始日期或依赖, 持续时间
    任务名称：任务的描述。
    状态：可选，表示任务状态：
        done：已完成。
        active：正在进行。
    标识符：任务的唯一标识符，用于定义依赖关系。
    时间：可以是开始日期、结束日期、或依赖任务。


代码逐步解析
section Section1
    定义一个名为 Section1 的部分，包含一组任务。
Completed :done, des1, 2014-01-06,2014-01-08
    任务名称：Completed。
    状态：done（已完成）。
    标识符：des1。
    开始日期：2014-01-06。
    结束日期：2014-01-08。
Active :active, des2, 2014-01-07, 3d
    任务名称：Active。
    状态：active（正在进行）。
    标识符：des2。
    开始日期：2014-01-07。
    持续时间：3d（3天）。
Parallel 1 : des3, after des1, 1d
    任务名称：Parallel 1。
    无状态（默认值）。
    标识符：des3。
    开始时间：依赖任务 des1（在任务 Completed 后开始）。
    持续时间：1d（1天）。
Parallel 2 : des4, after des1, 1d
    任务名称：Parallel 2。
    无状态。
    标识符：des4。
    开始时间：依赖任务 des1（在任务 Completed 后开始）。
    持续时间：1d（1天）。
Parallel 3 : des5, after des3, 1d
    任务名称：Parallel 3。
    无状态。
    标识符：des5。
    开始时间：依赖任务 des3（在任务 Parallel 1 后开始）。
    持续时间：1d（1天）。
Parallel 4 : des6, after des4, 1d
    任务名称：Parallel 4。
    无状态。
    标识符：des6。
    开始时间：依赖任务 des4（在任务 Parallel 2 后开始）。
    持续时间：1d（1天）。
section Section2
    定义甘特图的第二部分，用于分组显示后续任务。
    任务属于不同的部分以便分类和分组。
Task 1 : t1, after des6, 5d
    任务名称：Task 1。
    标识符：t1。
    开始时间：依赖任务 des6（Parallel 4）完成后开始。
    持续时间：5d（5天）。
Task 2 : t2, after t1, 3d
    任务名称：Task 2。
    标识符：t2。
    开始时间：依赖任务 t1（Task 1）完成后开始。
    持续时间：3d（3天）。

Pie Chart

  • 用于绘制饼状图，显示数据分布情况。

  • Mermaid Pie Chart

  • type 为 "pie"

1
2
3
4
5
6
7
{% mermaid pie showData %}
%%{init: {"pie": {"textPosition": 0.4}, "themeVariables": {"pieOuterStrokeWidth": "5px","pie1": "#ff9999","pie2": "#99ccff","pie3": "#99ff99"}} }%%
title Expenses
"Rent" : 200
"Food" : 200
"Transport" : 400
{% endmermaid %}

  • 效果

50%25%25%ExpensesTransport [400]Rent [200]Food [200]

  • 说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
基本结构
%%{init: ...}%%：
    Mermaid.js 的初始化配置，用于全局设置图表属性和样式。
    pie 属性
        textPosition: 设置饼图数据标签的相对位置。
            值范围为 0 到 1，表示标签距离饼图中心的比例。0.4 表示标签距离中心较近，接近 40% 的半径位置。
    themeVariables
        pieOuterStrokeWidth: 设置饼图外环的宽度。设置为 5px，表示饼图有明显的外边框。
        "pie1": "#ff9999","pie2": "#99ccff","pie3": "#99ff99": 配置每个分区的颜色。
pie
    定义这是一个饼图。
showData
    显示数据项的数值。
title Expenses
    设置饼图的标题为 Expenses（费用）。
数据项
    数据项定义了饼图的各个部分：
        "Rent" : 200，占比：200 / (200 + 200 + 400) = 1/4 = 25%。
        "Food" : 200，占比：200 / (200 + 200 + 400) = 1/4 = 25%。
        "Transport" : 400，占比：400 / (200 + 200 + 400) = 1/2 = 50%。
    每个数据项包含：
        标签：如 "Rent"、"Food"、"Transport"。
        数值：如 200、400，表示该部分的权重或数值大小。

XY Chart

  • 用于绘制 XY 轴图(柱状图和折线图)，显示数据分布和趋势。

  • Mermaid XY Chart

  • type 为 "xychart-beta"，目前 xychart-beta 还处在改进阶段

1
2
3
4
5
6
7
8
{% mermaid xychart-beta %}
%%{init: {"xyChart": {"width": 900,"height":600}, "themeVariables": {"xyChart":{"titleColor": "#ff0000"}}} }%%
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
{% endmermaid %}

  • 效果

Sales Revenuejanfebmaraprmayjunjulaugsepoctnovdec110001050010000950090008500800075007000650060005500500045004000Revenue (in $)

  • 说明

1
2
3
4
5
6
7
8
9
10
11
12
13
代码结构解析
%%{init: ...}%%：
    Mermaid.js 的初始化配置，用于全局设置图表属性和样式。
    xyChart.width 和 xyChart.height : 设置图表的宽度和高度。
    themeVariables.xyChart.titleColor: 设置标题的颜色。
title
    设置图表的标题。
坐标轴定义
    x-axis：X轴标签为月份（从1月到12月）。
    y-axis：Y轴范围从 $4000 到 $11000，单位为美元。
数据
    bar：柱状图数据，表示每个月的销售收入。
    line：折线图数据，表示每个月的销量趋势。

Journey Diagram

  • 用于绘制旅程图，显示用户的体验流程，包括用户进入系统、操作、退出系统等。

  • Mermaid Journey Diagram

  • type 为 "journey"

1
2
3
4
5
6
7
8
9
10
11
12
13
{% mermaid journey %}
title My working day
section Morning
  wake up : 5 : me
  go to work : 3 : me,you
section Lunch
  have lunch : 5 : me,you
  go to work : 1 : me,you
section Dinner
  finish your meal : 5 : me
section Go home
  go home : 5 : me
{% endmermaid %}

  • 效果

meyou
Morning
Morningme
wake up
wake up meyou
go to work
go to work
Lunch
Lunchmeyou
have lunch
have lunch meyou
go to work
go to work
Dinner
Dinnerme
finish your meal
finish your meal
Go home
Go homeme
go home
go home My working day

  • 说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
基本结构
journey
    定义这是一个旅程图。
title My working day
    设置旅程图的标题为 "My working day"（我的工作日）。
section
    定义旅程图的分段，用于表示一天中的不同阶段，例如：
        Morning（早晨）。
        Lunch（午餐时间）。
        Dinner（晚餐）。
        Go home（回家）。
任务格式
    任务描述 : 满意度评分 : 参与者
        任务描述：描述具体的任务或活动。
        满意度评分：从 1 到 5，表示对任务或活动的满意程度。
        参与者：参与任务的人，可以是 me（自己）、you（其他人）或两者。



代码逐步解析
section Morning
    wake up : 5 : me
        活动：wake up（起床）。
        满意度：5（非常满意）。
        参与者：me（自己）。
    go to work : 3 : me,you
        活动：go to work（去工作）。
        满意度：3（中等满意）。
        参与者：me 和 you（自己和其他人）。
section Lunch
    have lunch : 5 : me,you
        活动：have lunch（吃午饭）。
        满意度：5（非常满意）。
        参与者：me 和 you（自己和其他人）。
    go to work : 1 : me,you
        活动：go to work（吃完饭继续工作）。
        满意度：1（非常不满意）。
        参与者：me 和 you。
section Dinner
    finish your meal : 5 : me
        活动：finish your meal（吃完饭）。
        满意度：5（非常满意）。
        参与者：me（自己）。
section Go home
    go home : 5 : me
        活动：go home（回家）。
        满意度：5（非常满意）。
        参与者：me（自己）。

Requirement Diagram

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{% mermaid requirementDiagram %}
requirement "测试需求" {
    id: 1
    text: "测试文本"
    risk: High
    verifymethod: test
}
requirement "测试需求2" {
    id: 2
    text: "测试文本"
    risk: High
    verifymethod: test
}
element "测试实体" {
    type: "模拟"
}
"测试实体" - satisfies -> "测试需求"
"测试实体" - satisfies -> "测试需求2"
{% endmermaid %}

  • 效果

<<Requirement>>测试需求Id: 1Text: 测试文本Risk: HighVerification: Test<<Requirement>>测试需求2Id: 2Text: 测试文本Risk: HighVerification: Test<<Element>>测试实体Type: 模拟Doc Ref: None<<satisfies>><<satisfies>>

  • 说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
基本结构
requirementDiagram
    定义这是一个需求图。
requirement
    定义一个需求节点，包含需求的详细属性，如：
        id：需求编号。
        text：需求的描述。
        risk：需求的风险级别（如 High 表示高风险）。
        verifymethod：验证需求的方法（如 test 表示通过测试验证）。
element
    定义一个元素，用于表示系统中的某个实体或对象。
    包含属性，如：
        type：实体的类型（如 模拟 表示模拟实体）。
关系定义
    定义了两个关系：
        "测试实体" - satisfies -> "测试需求"  : 测试实体 满足了 测试需求
        "测试实体" - satisfies -> "测试需求2" : 测试实体 满足了 测试需求2
    - satisfies ->：satisfies 表示满足关系，箭头方向从实体指向需求

代码逐步解析
需求定义
    requirement "测试需求"
        定义第一个需求，显示名称为 测试需求。
        属性：
            id: 1（需求编号为 1）。
            text: "测试文本"（描述文本为 "测试文本"）。
            risk: High（高风险需求）。
            verifymethod: test（验证方法为测试）。
    requirement "测试需求2"
        定义第二个需求，显示名称为 测试需求2。
        属性：
            id: 2（需求编号为 2）。
            text: "测试文本"（描述文本与第一个需求相同）。
            risk: High（高风险需求）。
            verifymethod: test（验证方法为测试）。
实体定义
    element "测试实体"
        定义一个系统实体，显示名称为 测试实体。
        属性：
            type: "模拟"（实体类型为 "模拟"）。

Gitgraph Diagram

1
2
3
4
5
6
7
8
9
10
11
{% mermaid gitGraph %}
commit
commit
commit
branch newbranch
checkout newbranch
commit
commit
checkout main
merge newbranch
{% endmermaid %}

  • 效果

mainnewbranch0-dc818d81-07d459c2-7c667903-2d463b84-f75802f

  • 说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
基本结构
gitGraph
    定义这是一个 Git 图。
commit
    表示一次提交操作，每个 commit 节点代表代码仓库的某个提交点。
branch
    创建一个新分支。
    格式：branch 分支名称。
checkout
    切换到指定分支。
    格式：checkout 分支名称。
merge
    将指定分支合并到当前分支。
    格式：merge 分支名称。

Mindmap

  • 用于绘制思维导图，显示主题和子主题之间的 hierarchical 关系。

  • Mermaid Mindmap

  • type 为 "mindmap"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% mermaid mindmap %}
root((mindmap))
    (origins)
        Long history
        ::icon(fa fa-book)
        Popularisation
            British popular psychology author Tony Buzan
    [Research]
        On effectivness<br/>and features
        On Automatic creation
            Uses
                Creative techniques
                Strategic planning
                Argument mapping
    Tools
        Pen and paper
        Mermaid
{% endmermaid %}

  • 效果

mindmaporiginsResearchToolsLong history
PopularisationOn effectivnessand featuresOn Automatic creationPen and paperMermaidBritish popularpsychology author TonyBuzanUsesCreative techniquesStrategic planningArgument mapping

  • 说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
基本结构
mindmap
    定义这是一个思维导图。
root((mindmap))
    定义思维导图的根节点，显示为圆形并标注为 "mindmap"。
子节点使用缩进表示从属关系：
    每一级缩进代表一个层级的子节点。
    子节点可以直接添加内容或通过 <br/> 换行。
::icon(...)
    为节点添加图标。Mermaid.js 支持使用 FontAwesome 的图标。

节点形状
长方形 [] ：如 [长方形]，是默认的矩形节点。这个是默认的节点类型。
圆形 (()) ：如 ((圆))，用于表示一个圆形节点。
圆角长方形 () ：如 (圆角长方形)，用于表示圆角矩形节点。

QuadrantChart

  • 用于绘制象限图，显示不同维度之间的比较关系。

  • Mermaid QuadrantChart

  • type 为 "quadrantChart"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% mermaid quadrantChart %}
%%{init: {"quadrantChart": {"chartHeight": 600, "chartWidth": 800, "pointTextPadding": 10}, "themeVariables": {"quadrant1Fill": "#ff0000", "quadrant2Fill": "#FFFF00", "quadrant3Fill": "#32CD32", "quadrant4Fill": "#800080"}}}%%
title Reach and engagement of carpaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 we should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3,0.6]
Campaign B: [0.45,0.23]
Campaign C: [0.57,0.69]
Campaign D: [0.78,0.34]
Campaign E: [0.40,0.34]
Campaign F: [0.35,0.78]
{% endmermaid %}

  • 效果

we should expandNeed to promoteRe-evaluateMay be improvedCampaign FCampaign ECampaign DCampaign CCampaign BCampaign ALow ReachHigh ReachLow EngagementHigh EngagementReach and engagement of carpaigns

  • 说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
基本结构
%%{init: ...}%%
    这是 Mermaid.js 的初始化配置块，用于自定义图表的全局参数和样式。
    配置内容，详见下文：
        quadrantChart：自定义象限图的相关参数。
        themeVariables： 图表主题配色。
quadrantChart
    定义这是一个象限图。
title
    标题

坐标轴，定义 X 轴和 Y 轴的范围和方向：
x-axis Low Reach --> High Reach
    X 轴 从 “Low Reach” 到 “High Reach”。
y-axis Low Engagement --> High Engagement
    Y 轴 从 “Low Engagement” 到 “High Engagement”。

象限定义
quadrant-1 we should expand
    象限 1（右上）："we should expand"
quadrant-2 Need to promote
    象限 2（左上）："Need to promote"
quadrant-3 Re-evaluate
    象限 3（左下）："Re-evaluate"
quadrant-4 May be improved
    象限 4（右下）："May be improved"

数据点
Campaign A: [0.3,0.6]
Campaign B: [0.45,0.23]
Campaign C: [0.57,0.69]
Campaign D: [0.78,0.34]
Campaign E: [0.40,0.34]
Campaign F: [0.35,0.78]
定义了 6 个活动（Campaign）的数据点，使用 [name]: [x, y] 的格式来添加数据点，其中 [name] 是数据点的名称，[x, y] 是数据点在 x 轴和 y 轴上的坐标值，对于点x和y值，最小值为0，最大值为1。
X 值：表示活动的 Reach（覆盖面）。
Y 值：表示活动的 Engagement（参与度）。

  • 初始化配置

    • quadrantChart：自定义象限图的相关参数
    参数 描述 默认值
    chartHeight 图表的高度 500
    chartWidth 图表的宽度 500
    pointLabelFontSize 点文本字体大小 12
    pointRadius 要绘制的点的半径 5
    pointTextPadding 点和下面文本之间的填充 5
    quadrantExternalBorderStrokeWidth 象限外边框描边宽度 2
    quadrantInternalBorderStrokeWidth 象限内的边框描边宽度 1
    quadrantLabelFontSize 象限文本字体大小 16
    quadrantPadding 所有象限外的填充 5
    quadrantTextTopPadding 当文本绘制在顶部时象限文本顶部填充（那里没有数据点） 5
    titlePadding 标题的顶部和底部填充 10
    titleFontSize 标题字体大小 20
    xAxisLabelPadding x 轴文本的顶部和底部填充 5
    xAxisLabelFontSize X 轴文本字体大小 16
    xAxisPosition x 轴的位置（顶部、底部）如果有点，则 x 轴将始终渲染在底部 ‘top’
    yAxisLabelPadding y 轴文本的左右填充 5
    yAxisLabelFontSize Y 轴文本字体大小 16
    yAxisPosition y 轴位置（左、右） ‘left’

    • themeVariables： 图表主题配色

    参数 描述
    quadrant1Fill 右上象限的填充颜色
    quadrant2Fill 左上象限的填充颜色
    quadrant3Fill 左下象限的填充颜色
    quadrant4Fill 右下象限的填充颜色
    quadrant1TextFill 右上象限的文本颜色
    quadrant2TextFill 左上象限的文本颜色
    quadrant3TextFill 左下象限的文本颜色
    quadrant4TextFill 右下象限的文本颜色
    quadrantPointFill 点填充颜色
    quadrantPointTextFill 点文本颜色
    quadrantXAxisTextFill X 轴文本颜色
    quadrantYAxisTextFill Y 轴文本颜色
    quadrantInternalBorderStrokeFill 象限内边框颜色
    quadrantExternalBorderStrokeFill 象限外边框颜色
    quadrantTitleFill 标题颜色