關於 Mermaid
Mermaid.js 是一個開源的 JavaScript 圖表繪製庫，專為各種類型的圖表而設計。
支援的圖表包括：流程圖、甘特圖、時序圖、ER 圖、流程圖、網絡拓撲圖等。
Mermaid.js 提供一種簡單的語法，稱為 Mermaid 語法，類似於 Markdown 的風格，以一種直觀的方式描述圖表的結構和元素。
使用 Mermaid 語法，可以輕鬆地定義圖表中的節點、連線、標籤和樣式，並以文字方式編寫圖表，而不必手動繪製每個元素。
以下是幾個簡單範例，之後再陸續補上更多的圖表。
範例皆以先展示成果圖，然後說明該成果圖的 Mermaid 語法。
請注意：以下 Mermaid 語法說明，結尾無法顯示 ```，故以 ` `` 表示，請自行去除其中空白。
本文設為 WIKI 共筆，如果你有需要，可以用編輯的方式複製到你的發文中。
Flowchart（流程圖）
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
語法說明：
```mermaid height=98,auto
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
` ``
Gantt Chart（甘特圖）
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2024-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2024-01-12 , 12d
another task : 24d
語法說明：
```mermaid height=379,auto
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2024-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2024-01-12 , 12d
another task : 24d
` ``
Sequence Diagram（時序圖）
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
語法說明：
```mermaid height=219,auto
sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can you hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!
` ``
Class Diagram（類別圖）
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 height=178,auto
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()
}
` ``
Mindmap（心智圖）
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
語法說明：
```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
` ``
Pie Chart（圓形統計圖／圓餅圖／餅圖）
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
語法說明：
```mermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
` ``
Git Graph（Git 圖）
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
語法說明：
```mermaid
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
` ``
