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

摘要

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

• Next主题中使用Mermaid说明

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

配置和使用方法

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

mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme:
    light: dark
    dark: dark

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

{% mermaid type %}
{% endmermaid %}

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

#```mermaid
type

#```

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

highlight:
  exclude_languages:
    - mermaid

图形示例

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

Flowchart

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

• Mermaid Flowchart

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

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

• "graph TD"：从上到下

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

• 效果

graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

• 说明

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"：从左到右

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

• 效果

graph LR
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D

• 说明

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"

{% 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 %}

• 效果

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 和 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"

{% 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 %}

• 效果

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
    定义一个类图，展示类的属性、方法以及它们之间的关系。
类和修饰符
    使用 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"

{% mermaid stateDiagram %}
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
{% endmermaid %}

• 效果

stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

• 说明

基本结构
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

• 用于绘制实体关系图，显示实体之间的关系，包括关联、依赖等。

• Mermaid Entity Relationship Diagram

• type 为 "erDiagram"

{% mermaid erDiagram %}
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
{% endmermaid %}

• 效果

erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : has

• 说明

基本结构
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"

{% 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 %}

• 效果

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

• 说明

基本结构
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"

{% 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 %}

• 效果

%%{init: {"pie": {"textPosition": 0.4}, "themeVariables": {"pieOuterStrokeWidth": "5px","pie1": "#ff9999","pie2": "#99ccff","pie3": "#99ff99"}} }%%
pie showData
title Expenses
"Rent" : 200
"Food" : 200
"Transport" : 400

• 说明

基本结构
%%{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 还处在改进阶段

{% 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 %}

• 效果

---
config:
    xyChart:
        width: 900
        height: 600
    themeVariables:
        xyChart:
            titleColor: "#ff0000"
---
xychart-beta
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]

• 说明

代码结构解析
%%{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"

{% 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 %}

• 效果

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

• 说明

基本结构
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

• 用于绘制需求图，显示系统的功能需求和依赖关系。

• Mermaid Requirement Diagram

• type 为 "requirementDiagram"

{% 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 %}

• 效果

requirementDiagram
requirement "测试需求" {
    id: 1
    text: "测试文本"
    risk: High
    verifymethod: test
}
requirement "测试需求2" {
    id: 2
    text: "测试文本"
    risk: High
    verifymethod: test
}
element "测试实体" {
    type: "模拟"
}
"测试实体" - satisfies -> "测试需求"
"测试实体" - satisfies -> "测试需求2"

• 说明

基本结构
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

• 用于绘制Git图，显示代码仓库的提交历史和分支关系。

• Mermaid Gitgraph Diagram

• type 为 "gitgraph"

{% mermaid gitGraph %}
commit
commit
commit
branch newbranch
checkout newbranch
commit
commit
checkout main
merge newbranch
{% endmermaid %}

• 效果

gitGraph
commit
commit
commit
branch newbranch
checkout newbranch
commit
commit
checkout main
merge newbranch

• 说明

基本结构
gitGraph
    定义这是一个 Git 图。
commit
    表示一次提交操作，每个 commit 节点代表代码仓库的某个提交点。
branch
    创建一个新分支。
    格式：branch 分支名称。
checkout
    切换到指定分支。
    格式：checkout 分支名称。
merge
    将指定分支合并到当前分支。
    格式：merge 分支名称。

Mindmap

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

• Mermaid Mindmap

• type 为 "mindmap"

{% 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 %}

• 效果

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

• 说明

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

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

QuadrantChart

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

• Mermaid QuadrantChart

• type 为 "quadrantChart"

{% 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 %}

• 效果

%%{init: {"quadrantChart": {"chartHeight": 600, "chartWidth": 800, "pointTextPadding": 10}, "themeVariables": {"quadrant1Fill": "#ff0000", "quadrant2Fill": "#FFFF00", "quadrant3Fill": "#32CD32", "quadrant4Fill": "#800080"}}}%%
quadrantChart
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]

• 说明

基本结构
%%{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	标题颜色