0. 甘特圖長啥樣
這是筆者在軟件協同課上摸魚十分鐘裏運用markdown的mermaid工具畫出來的這學期課程項目的甘特圖。
那麼什麼是甘特圖？
1.甘特圖介紹
先搬運段度娘上甘特圖的詞條介紹
甘特圖（Gantt chart）又稱爲橫道圖、條狀圖(Bar chart)。其通過條狀圖來顯示項目，進度，和其他時間相關的系統進展的內在關係隨着時間進展的情況。以提出者亨利·勞倫斯·甘特（Henry Laurence Gantt）先生的名字命名。
通過這樣的一張__甘特圖__，可以很清晰地將整個項目的規劃非常清晰的展現出來，便於項目成員明確項目進度與時間安排，有效避免組員以不清楚項目時間規劃爲由鴿項目進度。
因此在項目管理，甘特圖是一個非常有用的工具。
傳統上是使用Visio、Project之類的笨重工具來繪製甘特圖，但是現在可以通過markdown的mermaid工具非常方便地繪製。
2.mermaid介紹
mermaid的意爲美人魚，很有詩意。
這是一種類似於markdown的簡單腳本語言，用於通過javascript從文本生成圖表。
事實上，除了繪製甘特圖之外，meimaid還可以繪製流程圖、序列圖、餅圖、類圖等常用圖表。
根據其官方教程及示例上的介紹，這個工具獲得2019年“最令人興奮的技術使用”類別的JS開放源代碼獎。
2.1 選擇markdown編輯器
想要使用mermaid，需要選擇一個支持mermaid的markdown編輯器。
印象筆記、Typora以及VS Code都支持mermaid。
印象筆記和VS Code都支持左側編輯右側實時顯示結果，而Typora號稱最強的MD編輯器，支持實時顯示結果，個人強推。
2.2 運用mermaid畫甘特圖
因爲是腳本語言，所以使用mermaid需要學習一些關鍵字。
不過別擔心，這些關鍵字的非常簡單易懂。
根據二八法則，你只需學習一些常用關鍵字，就能解決多數繪圖需要了。
詳細關鍵字說明與教程可以參照官方教程及示例。
接下來以文章開頭的甘特圖爲例，介紹甘特圖中常用的一些關鍵字
```mermaid
gantt
title 這是個甘特圖的栗子🌰dateFormat MM-DD
section 軟件協同開發課程
項目啓動 :done,des1,03-09,7d
項目計劃 :done,des2,after des1,6d
需求分析 :done,des3,after des2,9d
軟件設計 :done,des4,after des3,12d
軟件編碼 :crit,active,des5,04-07,20d
軟件測試 :des6,04-14,15d
項目交付 :des7,after des6,4d
```
title：圖名，可選關鍵字，例如title 這是個甘特圖的栗子🌰，如沒有則不顯示
dateFormat ：自定義時間日期格式，可省略，默認輸入日期格式爲YYYY-MM-DD，常用的有月日 MM-DD 日時(24小時制)DD-HH
section：部分名，例如section 軟件協同開發課程
接下來是任務參數，基本格式如下：
任務名:參數一, 參數二, 參數三, 參數四，參數五
參數一：可選，crit，表示是否強調，如果有會示爲紅色
參數二：可選，done、active 或不填，分別表示已完成，正在進行中和未開始
參數三：可選，任務別名，例如des3，主要用於跟在其他任務後面
參數四：任務開始時間，可以爲具體的時間，如04-14，或者跟在其他任務後面，例如after des3
參數五：任務結束時間，可以是具體的時間，如04-07，或任務進行的週期，如3d
例如示例中的任務字段：
項目計劃 :done,des2,after des1,6d
軟件設計 :done,des4,after des3,12d
邊做邊學是快速瞭解一件東西的最好方式
根據下面你可以快速學會用markdown畫出你想要的甘特圖
示例
以下是官方教程中給出的甘特圖示例：
MD代碼（代碼語言選擇mermaid）：
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes :excludes the named dates/days from being included in a charted task..
(Accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2020-01-06,2020-01-08
Active task :active, des2, 2020-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2020-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
除此以外，mermaid還支持畫其他以下一些常用圖表
餅狀統計圖
(CSDN的Markdown編輯器並不完全支持mermaid語法，只能截圖）
MD代碼：
title 看文章經常點讚的程序員的脫單情況
"已和女神結婚" : 200
"已脫單，對象非常漂亮" : 132
"已女神被表白，考慮是否接受" : 40
"女神即將表白" : 1
類圖
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
class Test{
+int a
+func()
+int b
}
順序圖
MD代碼如下：
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts<br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
如有幫助，歡迎點贊/轉載~
（聽說給文章點讚的人代碼bug特別少）
聯繫郵箱：[email protected]
有問題歡迎通過郵箱交流。