---
# System prepended metadata

title: "\U0001F3A8 Mermaid 流程圖樣式與顏色設定範例大全"

---

# 🎨 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
```