# 🎨 Mermaid 流程圖樣式與顏色設定範例大全
Mermaid 不僅能畫流程圖，還能透過 `style` 與 `classDef` 調整節點顏色、邊框與文字。
以下示範多種應用方式。
---
## 🧩 1. 基本流程圖 + 顏色設定
```mermaid
flowchart TD
A[開始] --> B[登入系統]
B --> C{帳號正確嗎?}
C -->|是| D[進入主頁]
C -->|否| E[顯示錯誤訊息]
E --> B
D --> F[結束]
style A fill:#dff0d8,stroke:#3c763d,stroke-width:2px,color:#000
style B fill:#d9edf7,stroke:#31708f
style C fill:#fcf8e3,stroke:#8a6d3b
style D fill:#d6e9c6,stroke:#3c763d
style E fill:#f2dede,stroke:#a94442
style F fill:#ddd,stroke:#666
```
---
## 🔄 2. 迴圈與條件結構 (使用 classDef)
```mermaid
flowchart LR
A[啟動程式] --> B{是否還有資料?}
B -->|是| C[處理資料]
C --> B
B -->|否| D[結束]
classDef clsStart fill:#c8e6c9,stroke:#2e7d32,color:#000;
classDef clsDecision fill:#fff9c4,stroke:#fbc02d,color:#000;
classDef clsProcess fill:#bbdefb,stroke:#1565c0,color:#000;
classDef clsEnd fill:#e0e0e0,stroke:#424242,color:#000;
class A clsStart;
class B clsDecision;
class C clsProcess;
class D clsEnd;
```
---
## 🧠 3. 決策樹 (Decision Tree)
```mermaid
flowchart TD
A[收到使用者請求] --> B{請求類型}
B -->|查詢| C[呼叫查詢 API]
B -->|新增| D[呼叫新增 API]
B -->|刪除| E[呼叫刪除 API]
C --> F[回傳結果]
D --> F
E --> F
classDef start fill:#f0f4c3,stroke:#827717,color:#000;
classDef decision fill:#ffe0b2,stroke:#ef6c00,color:#000;
classDef process fill:#bbdefb,stroke:#0d47a1,color:#000;
classDef result fill:#c8e6c9,stroke:#1b5e20,color:#000;
class A start;
class B decision;
class C,D,E process;
class F result;
```
---
## ⚙️ 4. 系統架構圖 (伺服器關聯)
```mermaid
flowchart TB
Client[使用者瀏覽器] -->|HTTP Request| Server[Flask 伺服器]
Server --> DB[(SQLite 資料庫)]
Server --> API[外部 API]
DB --> Server
API --> Server
Server -->|HTML Response| Client
classDef client fill:#e1f5fe,stroke:#0277bd;
classDef server fill:#f3e5f5,stroke:#6a1b9a;
classDef db fill:#fff9c4,stroke:#f57f17;
classDef api fill:#ffebee,stroke:#c62828;
class Client client;
class Server server;
class DB db;
class API api;
```
---
## 📦 5. 專案開發流程
```mermaid
flowchart TD
A[需求分析] --> B[系統設計]
B --> C[前端開發]
B --> D[後端開發]
C --> E[整合測試]
D --> E
E --> F[部署]
F --> G[上線維護]
classDef analysis fill:#fff9c4,stroke:#fbc02d;
classDef design fill:#e1bee7,stroke:#6a1b9a;
classDef dev fill:#bbdefb,stroke:#1976d2;
classDef test fill:#c8e6c9,stroke:#2e7d32;
classDef deploy fill:#ffe0b2,stroke:#ef6c00;
classDef maintain fill:#f5f5f5,stroke:#424242;
class A analysis;
class B design;
class C,D dev;
class E test;
class F deploy;
class G maintain;
```
---
## 🕹️ 6. 遊戲邏輯示意圖
```mermaid
flowchart TD
Start[開始遊戲] --> Move[玩家移動]
Move --> Check{撞到怪物?}
Check -->|是| Dead[遊戲結束]
Check -->|否| Coin[撿到金幣?]
Coin -->|是| AddScore[加分]
Coin -->|否| Move
AddScore --> Move
classDef start fill:#b3e6b3,stroke:#2d862d;
classDef decision fill:#fff0b3,stroke:#b38f00;
classDef event fill:#b3d9ff,stroke:#0047b3;
classDef fail fill:#f2b3b3,stroke:#b30000;
class Start start;
class Move event;
class Check,Coin decision;
class AddScore event;
class Dead fail;
```
---
## 💬 7. 聊天機器人訊息流程
```mermaid
flowchart TD
A[使用者發送訊息] --> B[Webhook 接收]
B --> C[Flask 處理請求]
C --> D{是否需要查資料庫?}
D -->|是| E[查詢 SQLGate API]
D -->|否| F[回覆預設訊息]
E --> G[整合結果]
F --> G
G --> H[回傳至 LINE Bot]
classDef input fill:#d1c4e9,stroke:#512da8;
classDef process fill:#b3e5fc,stroke:#0288d1;
classDef decision fill:#fff9c4,stroke:#fbc02d;
classDef output fill:#c8e6c9,stroke:#2e7d32;
class A input;
class B,C,E,F process;
class D decision;
class G,H output;
```
---
## 🎨 外型總覽 + 樣式示範（安全形狀）
```mermaid
%%{init: {'flowchart': { 'htmlLabels': false }}}%%
flowchart LR
%% === 節點定義（多種形狀，避免使用 / 與 \ ===
A[矩形 Rectangle]
B(圓角矩形 Rounded)
C((圓形 Circle))
D{菱形 Decision}
E([運動場 Stadium])
F[[子程序 Subroutine]]
G[(資料庫 Database)]
H{{六邊形 Hexagon}}
%% === 連線示例 ===
A --> B --> C --> D
D -- 是 --> E --> F --> G
D -- 否 --> H
%% === 類別樣式（安全命名） ===
classDef clsRect fill:#e3f2fd,stroke:#1565c0,color:#0d47a1,stroke-width:2px;
classDef clsRound fill:#e8f5e9,stroke:#2e7d32,color:#1b5e20;
classDef clsCircle fill:#fff3e0,stroke:#ef6c00,color:#e65100;
classDef clsDecision fill:#fffde7,stroke:#f9a825,color:#f57f17,stroke-width:2px;
classDef clsStadium fill:#ede7f6,stroke:#5e35b1,color:#4527a0;
classDef clsSubroutine fill:#fce4ec,stroke:#c2185b,color:#880e4f;
classDef clsDatabase fill:#f1f8e9,stroke:#558b2f,color:#33691e,stroke-dasharray: 3 3;
classDef clsHex fill:#e0f7fa,stroke:#00838f,color:#006064;
%% === 指派類別 ===
class A clsRect;
class B clsRound;
class C clsCircle;
class D clsDecision;
class E clsStadium;
class F clsSubroutine;
class G clsDatabase;
class H clsHex;
```
---
## 🧭 實戰小例：用不同外型表示不同語意（修正版）
```mermaid
%%{init: {'flowchart': { 'htmlLabels': false }}}%%
flowchart TD
IN([輸入/事件]) --> CHECK{條件判斷}
CHECK -- 成立 --> PROC([處理流程])
PROC --> DB[(寫入資料庫)]
CHECK -- 否 --> QUEUE[[送往佇列]]
QUEUE --> OUT((完成))
classDef cIn fill:#e1f5fe,stroke:#0277bd,color:#01579b;
classDef cDecision fill:#fff9c4,stroke:#fbc02d,color:#e65100;
classDef cProcess fill:#ede7f6,stroke:#5e35b1,color:#311b92;
classDef cDB fill:#f1f8e9,stroke:#558b2f,color:#2e7d32;
classDef cQueue fill:#fce4ec,stroke:#c2185b,color:#ad1457;
classDef cDone fill:#e8f5e9,stroke:#2e7d32,color:#1b5e20;
class IN cIn;
class CHECK cDecision;
class PROC cProcess;
class DB cDB;
class QUEUE cQueue;
class OUT cDone;
```
---
## 📝 小抄（Shapes Cheat Sheet，避開 / 與 \ 版本）
- `A[Text]` → **矩形**
- `A(Text)` → **圓角矩形**
- `A((Text))` → **圓形**
- `A{Text}` → **菱形 / 決策**
- `A([Text])` → **運動場**
- `A[[Text]]` → **子程序（雙層矩形）**
- `A[(Text)]` → **資料庫（圓柱）**
- `A{{Text}}` → **六邊形**
> 需要平行四邊形／梯形時，請先確認你的平台對 `/` 與 `\` 的處理是否會被 Markdown 或前端轉義影響。若要使用：
> - `A[/Text/]` → **平行四邊形（右斜）**
> - `A[\Text\]` → **平行四邊形（左斜）**
> - `A[/Text\]` → **梯形**
> - `A[\Text/]` → **反向梯形**
> 若仍報錯，建議改在 Mermaid Live（https://mermaid.live/）測試後再貼回你的平台，或將 `htmlLabels` 設成 `false`。
## 📚 延伸閱讀
- 官方文件：https://mermaid.js.org/
- Mermaid Live Editor：https://mermaid.live/
- HackMD / Obsidian / Typora 皆支援 Mermaid
```mermaid
gantt
title 甘特圖範例
dateFormat YYYY-MM-DD
axisFormat %Y-%m-%d
section 區塊1
項目1 :active, 2024-01-01, 2024-01-10
項目2 : 2024-01-05, 2024-01-15
section 區塊2
項目3 : 2024-01-15, 2024-02-01
項目4 :active, 2024-02-01, 2024-02-15
```
Google Drive
Gist
Clipboard
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
