mermaid shortcode 使用 Mermaid 库提供绘制图表和流程图的功能.
mermaid 是一个可以帮助你在文章中绘制图表和流程图的库, 类似 Markdown 的语法.
只需将你的 mermaid 代码插入 mermaid shortcode 中即可.
流程图
一个 流程图 mermaid 示例:
1
2
3
4
5
6
7
| {{< mermaid >}}
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
{{< /mermaid >}}
|
呈现的输出效果如下:
时序图
一个 时序图 mermaid 示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
| {{< mermaid >}}
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!
{{< /mermaid >}}
|
呈现的输出效果如下:
甘特图
一个 甘特图 mermaid 示例:
1
2
3
4
5
6
7
8
9
10
11
12
| {{< mermaid >}}
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
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
{{< /mermaid >}}
|
呈现的输出效果如下:
类图
一个 类图 mermaid 示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| {{< mermaid >}}
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()
}
{{< /mermaid >}}
|
呈现的输出效果如下:
状态图
一个 状态图 mermaid 示例:
1
2
3
4
5
6
7
8
9
| {{< mermaid >}}
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
{{< /mermaid >}}
|
呈现的输出效果如下:
Git 图
一个 Git 图 mermaid 示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
| {{< mermaid >}}
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
{{< /mermaid >}}
|
呈现的输出效果如下:
实体关系图
一个 实体关系图 mermaid 示例:
1
2
3
4
5
6
| {{< mermaid >}}
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
{{< /mermaid >}}
|
呈现的输出效果如下:
用户体验旅程图
一个 用户体验旅程图 mermaid 示例:
1
2
3
4
5
6
7
8
9
10
11
| {{< mermaid >}}
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
{{< /mermaid >}}
|
呈现的输出效果如下:
饼图
一个 饼图 mermaid 示例:
1
2
3
4
5
6
| {{< mermaid >}}
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
{{< /mermaid >}}
|
呈现的输出效果如下:
依赖图
一个 依赖图 mermaid 示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| {{< mermaid >}}
requirementDiagram
requirement test_req {
id: 1
text: the test text.
risk: high
verifymethod: test
}
element test_entity {
type: simulation
}
test_entity - satisfies -> test_req
{{< /mermaid >}}
|
呈现的输出效果如下:
