---
title: 如何繪製甘特圖？
description: 說明如何用 mermaid.js 繪製甘特圖
tags: post, tutorial
---

甘特圖是經典的專案管理工具。大專案經過層層拆解成小任務，繪製成直條，直條的長度代表所需時間，一眼就能看出專案各部分所需時間，以及瓶頸所在。

先前我們示範了流程圖和圓餅圖的畫法，甘特圖一樣是透過 mermaid 的語法完成的。所以一樣是撇撇撇（\`\`\`），加上語法的關鍵詞「mermaid」。接下來請直接看筆記：

### 建議 [點雙欄模式](https://hackmd.io/Sc-2rS3TT4Oym51QuKiJaA?both) 檢視原始語法。
1. 宣告甘特圖
2. 定義日期格式
3. 用 `section` 宣告一個區塊
4. 給區塊的內容定義：任務名稱、開始日期、持續天數
5. 如果有多個任務，可以模仿範例的 `b2, after b1` 方式來接續下一個任務

gantt
%% 宣告這是甘特圖
    title 甘特圖
		%% 給它一個標題
    dateFormat  MM-DD
		%% 日期格式
		axisFormat  %m-%d
		%% 縱軸的日期格式
		
		section 我的厲害網站
		%% 宣告一個區塊
		  規劃 : crit, done, plan, 05-15, 10d
			%%語法：
			%%甘特圖上的任務名稱 : [crit], [active|done], 任務名稱, [日期|after 任務名稱], 長度
			開工 : active, work, after plan, 180d
			測試 : test, 08-01, 70d
		
    section 撰寫程式
      CSS  :b1, after implement copyright, 30d
      JavaScript  :b2, after b1, 20d
			整合 : after b2, 40d
    
		section 設計
      線稿      : active, wire, 06-12  , 12d
      切版      : implement, after wire, 24d
			UX 測試		: crit, uxt, after implement, 24d
		
		section 文案
		  撰寫文案  : copyright, 07-29, 12d
		  %%todayMarker off

（製作本範例過程中，沒有任何網站受到傷害。）

值得一提的是，mermaid 中的甘特圖，任務可以相依於多個任務，意思是，如果 CSS 要等切版和文案（只是舉例），就把被等候的任務全部寫進 `after` 後面，以空白隔開。

持平而論，圖愈複雜、需要的調整愈多，寫語法作圖會愈棘手，尤其不適合邊做邊調整。

然而在文件中，我們常常需要說明**局部**的情況、描述少數幾項事物之間的關係，那麼用純文字作圖反而容易維護，直接讀也多少讀得懂。用 HackMD 描述蓋巨蛋的專案期程可能有點瘋，但簡單規劃一下功能開發的進度，是完全沒問題的。

# 參考資料

- [Mermaid.js 的說明文件](https://mermaid-js.github.io/mermaid/#/gantt?id=syntax)