Mermaid 可以直接在 Markdown 中寫流程圖、甘特圖、序列圖等。除了 Quarto 外，大部分 Markdown 編輯器（如 GitHub、Obsidian、Typora）都支援 Mermaid。

flowchart TD
    A[開始] --> B{是否完成任務?}
    B -- 是 --> C[結束]
    B -- 否 --> D[繼續努力]
    D --> B

解析： - flowchart TD → 表示從上到下（Top → Down）的流程圖。 - A[開始] → 方框節點。 - B{是否完成任務?} → 菱形節點（決策）。 - --> → 普通箭頭。 - -- 是 --> → 帶標籤的箭頭。

效果：

flowchart TD
    A[開始] --> B{是否完成任務?}
    B -- 是 --> C[結束]
    B -- 否 --> D[繼續努力]
    D --> B

Mermaid 甘特圖（Gantt Chart）

gantt
    title 專案計畫
    dateFormat  YYYY-MM-DD
    section 計畫階段
    研究           :a1, 2026-05-01, 7d
    設計           :after a1, 5d
    實作           :2026-05-10, 10d
    測試           :2026-05-21, 4d

解析： - gantt → 甘特圖 - dateFormat → 日期格式 - section → 甘特圖分段 - :a1, 2026-05-01, 7d → 節點 ID, 起始日期, 持續天數 - after a1 → 從 a1 結束後開始

效果：

gantt
    title 專案計畫
    dateFormat  YYYY-MM-DD
    section 計畫階段
    研究           :a1, 2026-05-01, 7d
    設計           :after a1, 5d
    實作           :2026-05-10, 10d
    測試           :2026-05-21, 4d

Mermaid Block Diagram（區塊圖）

Mermaid 支援 subgraph 來模擬區塊圖：

flowchart TD
    subgraph 前端
        FE1[登入頁]
        FE2[首頁]
        FE3[設定頁]
    end

    subgraph 後端
        BE1[認證服務]
        BE2[資料庫]
    end

    FE1 --> BE1
    FE2 --> BE2
    FE3 --> BE2

解析：
- subgraph 名稱 → 建立區塊（模擬 Block Diagram）
- 節點之間用箭頭表示關聯
- 可以用方框、圓角方框等節點類型增強可讀性

效果：

flowchart TD
    subgraph 前端
        FE1[登入頁]
        FE2[首頁]
        FE3[設定頁]
    end

    subgraph 後端
        BE1[認證服務]
        BE2[資料庫]
    end

    FE1 --> BE1
    FE2 --> BE2
    FE3 --> BE2

GitGraph Diagram（版本控制分支圖）

GitGraph 用於描述 Git 分支、合併、標籤等歷史。

gitGraph
    commit id: "初始化專案"
    branch develop
    commit id: "加入新功能A"
    branch feature/login
    commit id: "實作登入功能"
    checkout develop
    merge feature/login id: "合併登入功能"
    commit id: "釋出版本 v1.0"

解析：
- commit id: "訊息" → 新增一個提交節點
- branch 分支名 → 建立新分支
- checkout 分支名 → 切換分支
- merge 分支名 id: "訊息" → 合併分支

這個圖對呈現 Git 流程非常直觀。

效果：

gitGraph
    commit id: "初始化專案"
    branch develop
    commit id: "加入新功能A"
    branch feature/login
    commit id: "實作登入功能"
    checkout develop
    merge feature/login id: "合併登入功能"
    commit id: "釋出版本 v1.0"
無符合的項目