这篇文章是图表的演示，使用了 mermaid 和 goat 工具。
Mermaid
时序图示例
```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!
```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
prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
类图示例
```mermaid
---
title: Animal example
---
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
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()
}
```---
title: Animal example
---
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
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
%%{init: { "theme": "forest" } }%%
gantt
accTitle: My Gantt Chart Accessibility Title
accDescr: My Gantt Chart Accessibility Description
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
```%%{init: { "theme": "forest" } }%%
gantt
accTitle: My Gantt Chart Accessibility Title
accDescr: My Gantt Chart Accessibility Description
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
GoAT
点击这里查看更多示例。
树形结构
```goat
. . . .--- 1 .-- 1 / 1
/ \ | | .---+ .-+ +
/ \ .---+---. .--+--. | '--- 2 | '-- 2 / \ 2
+ + | | | | ---+ ---+ +
/ \ / \ .-+-. .-+-. .+. .+. | .--- 3 | .-- 3 \ / 3
/ \ / \ | | | | | | | | '---+ '-+ +
1 2 3 4 1 2 3 4 1 2 3 4 '--- 4 '-- 4 \ 4
```点阵网格
```goat
o o o o o * * * * * * * o o * o o o * * * o o o · * · · · · · ·
o o o o o * * * * * o o o o * o o o o * * * * * o * * · * * · · · · · ·
o o o o o * * * * * o * o o o o o o o o * * * * * o o o o o · o · · o · · * * ·
o o o o o * * * * * o * o o o o o o o * * * * o * o o · · · · o · · * ·
o o o o o * * * * * * * * * o o o o * * * o * o · · · · · · · *
```大型节点
```goat
.---. .-. .-. .-. .-.
| A +----->| 1 +<---->| 2 |<----+ 4 +------------------. | 8 |
'---' '-' '+' '-' | '-'
| ^ | ^
v | v |
.-. .-+-. .-. .-+-. .-. .+. .---.
| 3 +---->| B |<----->| 5 +---->| C +---->| 6 +---->| 7 |<---->| D |
'-' '---' '-' '---' '-' '-' '---'
```电路图
```goat
____ *
| |_____.---. |
o _____| )----------)-------.
/ \ | '---' | __|__
/___\ | | \ /
| '-------------. | \ /
A ----------------' | | o
.-------------------. o-----)-------' |
| |___.---. | |___.---.
B ---*---.__.---. ___| )--*--.__..---. ____) )----- Y
__| o----*--' '---' ______)) )---' '---'
C -------' '---' | | ''---'
| o
| / \
| /___\
| |
'--------------'
```