點我

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
回到 HackMD 教學首頁

點我

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
給予建議 或回報BUG

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

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

建議 點雙欄模式 檢視原始語法。

  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 描述蓋巨蛋的專案期程可能有點瘋，但簡單規劃一下功能開發的進度，是完全沒問題的。

參考資料

Select a repo