流程圖

Markdown 支持通過 Mermaid 語法創建各種類型的圖表和流程圖，為文檔提供可視化表達能力。

Mermaid 簡介

Mermaid 是一個基於文本的圖表生成工具，支持多種圖表類型：

流程圖 (Flowchart)
序列圖 (Sequence Diagram)
甘特圖 (Gantt Chart)
類圖 (Class Diagram)
狀態圖 (State Diagram)
餅圖 (Pie Chart)
用戶旅程圖 (User Journey)
Git圖 (Git Graph)

基本語法

流程圖 (Flowchart)

markdown

```mermaid
flowchart TD
    A[開始] --> B{是否登錄?}
    B -->|是| C[顯示主頁]
    B -->|否| D[顯示登錄頁]
    C --> E[結束]
    D --> F[用戶登錄]
    F --> G{登錄成功?}
    G -->|是| C
    G -->|否| H[顯示錯誤信息]
    H --> D


**渲染效果**：

```mermaid
flowchart TD
    A[開始] --> B{是否登錄?}
    B -->|是| C[顯示主頁]
    B -->|否| D[顯示登錄頁]
    C --> E[結束]
    D --> F[用戶登錄]
    F --> G{登錄成功?}
    G -->|是| C
    G -->|否| H[顯示錯誤信息]
    H --> D

序列圖 (Sequence Diagram)

markdown

```mermaid
sequenceDiagram
    participant 用戶
    participant 前端
    participant 後端
    participant 數據庫
    
    用戶->>前端: 登錄請求
    前端->>後端: 驗證用戶信息
    後端->>數據庫: 查詢用戶數據
    數據庫-->>後端: 返回用戶信息
    後端-->>前端: 驗證結果
    前端-->>用戶: 登錄響應


**渲染效果**：

```mermaid
sequenceDiagram
    participant 用戶
    participant 前端
    participant 後端
    participant 數據庫
    
    用戶->>前端: 登錄請求
    前端->>後端: 驗證用戶信息
    後端->>數據庫: 查詢用戶數據
    數據庫-->>後端: 返回用戶信息
    後端-->>前端: 驗證結果
    前端-->>用戶: 登錄響應

流程圖詳解

節點類型

markdown

```mermaid
flowchart LR
    A[方形節點]
    B(圓角節點)
    C((圓形節點))
    D{菱形節點}
    E[[子程序]]
    F[(數據庫)]
    G>標簽節點]


**渲染效果**：

```mermaid
flowchart LR
    A[方形節點]
    B(圓角節點)
    C((圓形節點))
    D{菱形節點}
    E[[子程序]]
    F[(數據庫)]
    G>標簽節點]

連接線類型

markdown

```mermaid
flowchart TD
    A --> B
    C --- D
    E -.-> F
    G ==> H
    I --o J
    K --x L


**渲染效果**：

```mermaid
flowchart TD
    A --> B
    C --- D
    E -.-> F
    G ==> H
    I --o J
    K --x L

方向控制

markdown

<!-- 從上到下 -->
```mermaid
flowchart TD
    A --> B

mermaid

flowchart BT
    A --> B

mermaid

flowchart LR
    A --> B

mermaid

flowchart RL
    A --> B


### 復雜流程圖示例

```markdown
```mermaid
flowchart TD
    Start([項目開始]) --> Analysis[需求分析]
    Analysis --> Design[系統設計]
    Design --> Dev{開發階段}
    
    Dev --> Frontend[前端開發]
    Dev --> Backend[後端開發]
    Dev --> Database[數據庫設計]
    
    Frontend --> FrontTest[前端測試]
    Backend --> BackTest[後端測試]
    Database --> DataTest[數據測試]
    
    FrontTest --> Integration[集成測試]
    BackTest --> Integration
    DataTest --> Integration
    
    Integration --> Deploy{部署准備}
    Deploy -->|通過| Production[生產環境]
    Deploy -->|失敗| Bug[修復問題]
    Bug --> Integration
    
    Production --> Monitor[監控運維]
    Monitor --> End([項目完成])
    
    style Start fill:#e1f5fe
    style End fill:#e8f5e8
    style Bug fill:#ffebee


**渲染效果**：

```mermaid
flowchart TD
    Start([項目開始]) --> Analysis[需求分析]
    Analysis --> Design[系統設計]
    Design --> Dev{開發階段}
    
    Dev --> Frontend[前端開發]
    Dev --> Backend[後端開發]
    Dev --> Database[數據庫設計]
    
    Frontend --> FrontTest[前端測試]
    Backend --> BackTest[後端測試]
    Database --> DataTest[數據測試]
    
    FrontTest --> Integration[集成測試]
    BackTest --> Integration
    DataTest --> Integration
    
    Integration --> Deploy{部署准備}
    Deploy -->|通過| Production[生產環境]
    Deploy -->|失敗| Bug[修復問題]
    Bug --> Integration
    
    Production --> Monitor[監控運維]
    Monitor --> End([項目完成])
    
    style Start fill:#e1f5fe
    style End fill:#e8f5e8
    style Bug fill:#ffebee

序列圖詳解

基本語法

markdown

```mermaid
sequenceDiagram
    Alice->>Bob: 你好Bob，你好嗎？
    Bob-->>Alice: 很好，謝謝！
    Alice-)Bob: 再見！


**渲染效果**：

```mermaid
sequenceDiagram
    Alice->>Bob: 你好Bob，你好嗎？
    Bob-->>Alice: 很好，謝謝！
    Alice-)Bob: 再見！

激活框和生命線

markdown

```mermaid
sequenceDiagram
    participant A as 客戶端
    participant B as 服務器
    
    A->>+B: 請求數據
    Note right of B: 處理請求
    B-->>-A: 返回數據
    
    A->>+B: 另一個請求
    B->>+B: 內部處理
    B-->>-B: 處理完成
    B-->>-A: 返回結果


**渲染效果**：

```mermaid
sequenceDiagram
    participant A as 客戶端
    participant B as 服務器
    
    A->>+B: 請求數據
    Note right of B: 處理請求
    B-->>-A: 返回數據
    
    A->>+B: 另一個請求
    B->>+B: 內部處理
    B-->>-B: 處理完成
    B-->>-A: 返回結果

循環和條件

markdown

```mermaid
sequenceDiagram
    participant U as 用戶
    participant S as 系統
    
    U->>S: 登錄請求
    
    alt 用戶名存在
        S->>S: 驗證密碼
        alt 密碼正確
            S-->>U: 登錄成功
        else 密碼錯誤
            S-->>U: 密碼錯誤
        end
    else 用戶名不存在
        S-->>U: 用戶不存在
    end
    
    opt 記住密碼
        S->>S: 保存登錄狀態
    end


**渲染效果**：

```mermaid
sequenceDiagram
    participant U as 用戶
    participant S as 系統
    
    U->>S: 登錄請求
    
    alt 用戶名存在
        S->>S: 驗證密碼
        alt 密碼正確
            S-->>U: 登錄成功
        else 密碼錯誤
            S-->>U: 密碼錯誤
        end
    else 用戶名不存在
        S-->>U: 用戶不存在
    end
    
    opt 記住密碼
        S->>S: 保存登錄狀態
    end

類圖 (Class Diagram)

markdown

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    
    class Dog {
        +String breed
        +bark()
        +wagTail()
    }
    
    class Cat {
        +String color
        +meow()
        +purr()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat
    
    class Owner {
        +String name
        +feedPet()
    }
    
    Owner --> Animal : owns


**渲染效果**：

```mermaid
classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    
    class Dog {
        +String breed
        +bark()
        +wagTail()
    }
    
    class Cat {
        +String color
        +meow()
        +purr()
    }
    
    Animal <|-- Dog
    Animal <|-- Cat
    
    class Owner {
        +String name
        +feedPet()
    }
    
    Owner --> Animal : owns

狀態圖 (State Diagram)

markdown

```mermaid
stateDiagram-v2
    [*] --> 空閒
    空閒 --> 運行 : 開始
    運行 --> 暫停 : 暫停
    運行 --> 完成 : 結束
    暫停 --> 運行 : 繼續
    暫停 --> 停止 : 停止
    停止 --> 空閒 : 重置
    完成 --> 空閒 : 重置
    完成 --> [*]
    
    state 運行 {
        [*] --> 初始化
        初始化 --> 處理中
        處理中 --> 驗證
        驗證 --> [*]
    }


**渲染效果**：

```mermaid
stateDiagram-v2
    [*] --> 空閒
    空閒 --> 運行 : 開始
    運行 --> 暫停 : 暫停
    運行 --> 完成 : 結束
    暫停 --> 運行 : 繼續
    暫停 --> 停止 : 停止
    停止 --> 空閒 : 重置
    完成 --> 空閒 : 重置
    完成 --> [*]
    
    state 運行 {
        [*] --> 初始化
        初始化 --> 處理中
        處理中 --> 驗證
        驗證 --> [*]
    }

甘特圖 (Gantt Chart)

markdown

```mermaid
gantt
    title 項目開發時間線
    dateFormat  YYYY-MM-DD
    section 需求分析
    需求收集          :done,    des1, 2024-01-01,2024-01-05
    需求分析          :done,    des2, after des1, 5d
    需求評審          :done,    des3, after des2, 2d
    
    section 設計階段
    系統設計          :active,  design1, 2024-01-12, 7d
    UI設計           :         design2, after design1, 5d
    數據庫設計        :         design3, after design1, 3d
    
    section 開發階段
    前端開發          :         dev1, after design2, 10d
    後端開發          :         dev2, after design3, 12d
    測試              :         test1, after dev1, 5d


**渲染效果**：

```mermaid
gantt
    title 項目開發時間線
    dateFormat  YYYY-MM-DD
    section 需求分析
    需求收集          :done,    des1, 2024-01-01,2024-01-05
    需求分析          :done,    des2, after des1, 5d
    需求評審          :done,    des3, after des2, 2d
    
    section 設計階段
    系統設計          :active,  design1, 2024-01-12, 7d
    UI設計           :         design2, after design1, 5d
    數據庫設計        :         design3, after design1, 3d
    
    section 開發階段
    前端開發          :         dev1, after design2, 10d
    後端開發          :         dev2, after design3, 12d
    測試              :         test1, after dev1, 5d

餅圖 (Pie Chart)

markdown

```mermaid
pie title 網站訪問來源
    "搜索引擎" : 45
    "社交媒體" : 25
    "直接訪問" : 20
    "郵件營銷" : 7
    "其他" : 3


**渲染效果**：

```mermaid
pie title 網站訪問來源
    "搜索引擎" : 45
    "社交媒體" : 25
    "直接訪問" : 20
    "郵件營銷" : 7
    "其他" : 3

用戶旅程圖 (User Journey)

markdown

```mermaid
journey
    title 用戶購物旅程
    section 發現
      訪問主頁: 3: 用戶
      瀏覽商品: 4: 用戶
      搜索產品: 4: 用戶
    section 考慮
      查看詳情: 4: 用戶
      比較價格: 3: 用戶
      閱讀評價: 5: 用戶
    section 購買
      加入購物車: 4: 用戶
      結算: 3: 用戶
      支付: 2: 用戶
    section 使用
      收到商品: 5: 用戶
      使用產品: 4: 用戶
      寫評價: 4: 用戶


**渲染效果**：

```mermaid
journey
    title 用戶購物旅程
    section 發現
      訪問主頁: 3: 用戶
      瀏覽商品: 4: 用戶
      搜索產品: 4: 用戶
    section 考慮
      查看詳情: 4: 用戶
      比較價格: 3: 用戶
      閱讀評價: 5: 用戶
    section 購買
      加入購物車: 4: 用戶
      結算: 3: 用戶
      支付: 2: 用戶
    section 使用
      收到商品: 5: 用戶
      使用產品: 4: 用戶
      寫評價: 4: 用戶

Git 圖 (Git Graph)

markdown

```mermaid
gitgraph
    commit id: "初始提交"
    commit id: "添加用戶模塊"
    branch feature/auth
    commit id: "添加登錄功能"
    commit id: "添加注冊功能"
    checkout main
    commit id: "修復主頁bug"
    merge feature/auth
    commit id: "版本v1.0"
    branch hotfix
    commit id: "緊急修復"
    checkout main
    merge hotfix
    commit id: "版本v1.0.1"


**渲染效果**：

```mermaid
gitgraph
    commit id: "初始提交"
    commit id: "添加用戶模塊"
    branch feature/auth
    commit id: "添加登錄功能"
    commit id: "添加注冊功能"
    checkout main
    commit id: "修復主頁bug"
    merge feature/auth
    commit id: "版本v1.0"
    branch hotfix
    commit id: "緊急修復"
    checkout main
    merge hotfix
    commit id: "版本v1.0.1"

實際應用場景

系統架構圖

markdown

```mermaid
flowchart TB
    subgraph "用戶層"
        Web[Web瀏覽器]
        Mobile[移動應用]
        API[API客戶端]
    end
    
    subgraph "網關層"
        Gateway[API網關]
        Auth[認證服務]
    end
    
    subgraph "服務層"
        UserService[用戶服務]
        OrderService[訂單服務]
        PaymentService[支付服務]
        NotificationService[通知服務]
    end
    
    subgraph "數據層"
        UserDB[(用戶數據庫)]
        OrderDB[(訂單數據庫)]
        Cache[(Redis緩存)]
        Queue[消息隊列]
    end
    
    Web --> Gateway
    Mobile --> Gateway
    API --> Gateway
    
    Gateway --> Auth
    Gateway --> UserService
    Gateway --> OrderService
    Gateway --> PaymentService
    
    UserService --> UserDB
    OrderService --> OrderDB
    PaymentService --> Queue
    NotificationService --> Queue
    
    UserService --> Cache
    OrderService --> Cache
    
    style Gateway fill:#e1f5fe
    style Auth fill:#fff3e0
    style Cache fill:#f3e5f5


### API 調用流程

```markdown
```mermaid
sequenceDiagram
    participant C as 客戶端
    participant G as API網關
    participant A as 認證服務
    participant U as 用戶服務
    participant D as 數據庫
    participant R as Redis
    
    C->>G: 請求用戶信息
    G->>A: 驗證Token
    A->>R: 檢查Token緩存
    R-->>A: Token有效
    A-->>G: 認證成功
    
    G->>U: 獲取用戶信息
    U->>R: 檢查用戶緩存
    alt 緩存存在
        R-->>U: 返回用戶數據
    else 緩存不存在
        U->>D: 查詢數據庫
        D-->>U: 返回用戶信息
        U->>R: 更新緩存
    end
    
    U-->>G: 返回用戶信息
    G-->>C: 響應用戶數據


### 業務流程圖

```markdown
```mermaid
flowchart TD
    Start([用戶下單]) --> Check{檢查庫存}
    Check -->|有庫存| Reserve[預留庫存]
    Check -->|無庫存| OutOfStock[庫存不足]
    OutOfStock --> Notify[通知用戶]
    Notify --> End1([結束])
    
    Reserve --> Payment{支付處理}
    Payment -->|成功| ConfirmOrder[確認訂單]
    Payment -->|失敗| ReleaseStock[釋放庫存]
    ReleaseStock --> PaymentFailed[支付失敗]
    PaymentFailed --> End2([結束])
    
    ConfirmOrder --> UpdateInventory[更新庫存]
    UpdateInventory --> SendNotification[發送通知]
    SendNotification --> Logistics[安排物流]
    Logistics --> End3([訂單完成])
    
    style Start fill:#e8f5e8
    style End1 fill:#ffebee
    style End2 fill:#ffebee
    style End3 fill:#e8f5e8
    style OutOfStock fill:#ffebee
    style PaymentFailed fill:#ffebee


## 樣式和主題

### 節點樣式

```markdown
```mermaid
flowchart LR
    A[默認樣式] --> B[樣式1]
    A --> C[樣式2]
    A --> D[樣式3]
    
    style B fill:#f9f,stroke:#333,stroke-width:4px
    style C fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
    style D fill:#f96,stroke:#333,stroke-width:4px,color:#fff


### 類樣式

```markdown
```mermaid
flowchart LR
    A[節點A]:::classA --> B[節點B]:::classB
    A --> C[節點C]:::classC
    
    classDef classA fill:#e1f5fe,stroke:#01579b,stroke-width:2px
    classDef classB fill:#f3e5f5,stroke:#4a148c,stroke-width:2px
    classDef classC fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px


## 配置和兼容性

### VitePress 配置

```javascript
// .vitepress/config.js
export default {
  markdown: {
    mermaid: true
  }
}

GitHub 支持

GitHub 原生支持 Mermaid，可以直接在 Markdown 文件中使用：

markdown

```mermaid
graph LR
    A --> B


### 其他平台支持

| 平台 | 支持狀態 | 配置要求 |
|------|----------|----------|
| **GitHub** | ✅ 原生支持 | 無需配置 |
| **GitLab** | ✅ 原生支持 | 無需配置 |
| **VitePress** | ✅ 插件支持 | 需要配置 |
| **Jekyll** | ✅ 插件支持 | 安裝插件 |
| **Hugo** | ✅ 主題支持 | 依賴主題 |

## 最佳實踐

### 設計建議

```markdown
✅ 推薦做法：

1. **保持簡潔**：
   - 避免過於復雜的圖表
   - 使用清晰的標簽和連接

2. **合理布局**：
   - 選擇合適的圖表方向
   - 保持邏輯流向清晰

3. **統一樣式**：
   - 使用一致的顏色主題
   - 保持圖表風格統一

4. **添加說明**：
   - 為復雜圖表添加標題
   - 提供必要的文字說明

❌ 避免做法：

1. 圖表過於復雜難以理解
2. 連接線交叉過多
3. 標簽模糊不清
4. 缺少必要的圖例

性能考慮

markdown

- **大型圖表優化**：
  - 考慮拆分復雜圖表
  - 使用子圖組織結構

- **加載性能**：
  - 避免在單頁面使用過多圖表
  - 考慮懶加載實現

- **移動端適配**：
  - 確保圖表在小屏幕上可讀
  - 考慮橫向滾動設計

工具和資源

在線編輯器

Mermaid Live Editor: 官方在線編輯器
Draw.io: 通用圖表繪制工具
Lucidchart: 專業圖表制作平台
Excalidraw: 手繪風格圖表工具

開發工具

Mermaid CLI: 命令行工具
VS Code Mermaid: Visual Studio Code 插件
Atom Mermaid: Atom 編輯器插件
IntelliJ Mermaid: JetBrains IDE 插件

參考資源

Mermaid 官方文檔: 完整語法參考
Mermaid 示例庫: 各種圖表示例
GitHub Mermaid: 在 GitHub 中使用
Awesome Mermaid: 相關資源收集

通過掌握流程圖語法，您可以在文檔中創建專業的可視化圖表，提升內容的表達效果和理解度。

流程圖 ​

Mermaid 簡介 ​

基本語法 ​

流程圖 (Flowchart) ​

序列圖 (Sequence Diagram) ​

流程圖詳解 ​

節點類型 ​

連接線類型 ​

方向控制 ​

序列圖詳解 ​

基本語法 ​

激活框和生命線 ​

循環和條件 ​

類圖 (Class Diagram) ​

狀態圖 (State Diagram) ​

甘特圖 (Gantt Chart) ​

餅圖 (Pie Chart) ​

用戶旅程圖 (User Journey) ​

Git 圖 (Git Graph) ​

實際應用場景 ​

系統架構圖 ​

GitHub 支持 ​

性能考慮 ​

相關語法 ​

工具和資源 ​

在線編輯器 ​

開發工具 ​

參考資源 ​

流程圖

Mermaid 簡介

基本語法

流程圖 (Flowchart)

序列圖 (Sequence Diagram)

流程圖詳解

節點類型

連接線類型

方向控制

序列圖詳解

基本語法

激活框和生命線

循環和條件

類圖 (Class Diagram)

狀態圖 (State Diagram)

甘特圖 (Gantt Chart)

餅圖 (Pie Chart)

用戶旅程圖 (User Journey)

Git 圖 (Git Graph)

實際應用場景

系統架構圖

GitHub 支持

性能考慮

相關語法

工具和資源

在線編輯器

開發工具

參考資源