Mermaid.js 甘特圖語法指南

什麼是甘特圖？

一個甘特圖是一種專案管理的視覺化工具，用於在水平時間軸上繪製專案進度、任務持續時間以及關鍵路徑的里程碑。透過將工作包表示為條狀，並將結構性依賴關係表示為連續流程，使團隊能夠追蹤進度、識別潛在瓶頸，並有效溝通截止日期。

使用Mermaid.js，您可使用宣告式、基於文字的語法來定義專案進度。引擎會自動計算條狀的相對偏移量，處理基於日期的網格軸縮放，並呈現完成百分比，讓您直接在文件中生成專業的專案路徑圖。

核心語法指南：元素與構造

要在 Mermaid 中設計出有效且可執行的專案進度表，您必須掌握時間軸設定、任務宣告、區段分組以及里程碑標記。

1. 初始化甘特圖時間軸

您可在第一行使用gantt關鍵字來初始化甘特圖畫布。每個甘特圖都需要標題、日期格式定義，以及一個特定的起始日期，以固定時間軸網格。

gantt
    標題 專案 Alpha 進度表
    dateFormat YYYY-MM-DD
    axisFormat %Y-%m-%d
    排除週末

2. 定義任務與持續時間

任務由其狀態（活躍、完成或關鍵）、顯示標籤、內部識別碼以及時間持續時間來定義。您可以使用天數（d）、小時（h）或特定的起訖日期來指定持續時間。

• 完成：已完成的工作包。
• 活躍：目前進行中的工作。
• 關鍵：關鍵路徑任務（以明顯的強調顏色顯示）。

gantt
    區段 規劃
    初步探索 :done, des1, 2026-06-01, 5d
    需求收集 :active, des2, 在 des1 之後, 7d

3. 實施里程碑和依賴關係

里程碑是標示專案重要成就的零持續時間點。依賴關係透過工作編號建立，確保前驅工作完成時，視覺條形能正確對齊。

甘特圖
    節點 發布
    Beta 上線 :里程碑, m1, 2026-07-15, 0天
    最終測試 :關鍵, qa1, 在 m1 之後, 10天

專案時程的最佳實務

• 使用具描述性的節點名稱： 使用 節點 使用此關鍵字將您的工作分組為邏輯上的專案階段（例如：開發、測試、部署）。這會建立一個垂直分段的格線，比起單一長清單更容易閱讀。
• 善用「在…之後」關鍵字： 不需手動計算日期，請使用 在 [工作編號] 之後 語法。這可確保若專案起始日期變動，您的整個時程會自動更新，無需手動編輯。
• 排除非工作日： 若您的專案遵循標準商業週，請加入 排除週末 指令。這可讓您的時程保持現實，並避免產生不切實際的「週末」工作預測。

真實世界的 Mermaid 甘特圖範例

範例 1：軟體基礎設施遷移路線圖

此功能藍圖模擬了多階段的雲端遷移專案，利用節點將架構規劃與實作及測試分開。

甘特圖
    標題 雲端基礎設施遷移路線圖
    日期格式 YYYY-MM-DD
    軸格式 %m-%d
    排除週末

    節點 架構
    雲端設計   :已完成, a1, 2026-06-01, 10天
    安全審核 :進行中, a2, 在 a1 之後, 5天

    節點 遷移
    資料傳輸  :關鍵, m1, 在 a2 之後, 15天
    應用程式重新部署  :m2, 在 m1 之後, 8天

    節點 里程碑
    正式上線 :里程碑, m3, 在 m2 之後, 0天

語法解析： 此圖表清楚地將規劃、執行與專案里程碑分開。透過將 `資料傳輸` 工作標記為關鍵，它會獲得明顯的強調，將觀眾的注意力引向遷徙過程中風險最高的階段。