日常工作中多個項目并行推進(jìn)時，很難描述清楚每個任務(wù)的進(jìn)度，以及當(dāng)前狀態(tài)。之前也想過用甘特圖來管理項目進(jìn)度，但是繪制甘特圖的成本太高，而且不容易掌握。很難在團(tuán)隊中推廣普及。

最近在使用Markdown排版時，發(fā)現(xiàn)Markdown可以快速便捷的生成甘特圖，且能滿足日常工作需求。

下面用一個簡單的實例，簡單講解Markdown mermaid甘特圖的繪制與使用。

該教程主要包括以下幾個部分：

1、選擇工具（使用印象筆記或Typora編制甘特圖）
2、mermaid常用關(guān)鍵寫說明
3、將甘特圖轉(zhuǎn)換為PDF或html格式
4、打印甘特圖
5、附甘特圖實例代碼

1、選擇工具

市面上Markdown編輯器不少（比如：MarkdownPad、cmd markdown、有道筆記、簡書、印象筆記、Typora等等），但是支持mermaid語法的很少。

這幾個里邊也就印象筆記、Typora支持甘特圖。下面附上下載鏈接。

Typora
印象筆記

印象筆記支持左側(cè)編輯右側(cè)實時顯示結(jié)果，Typora也可以支持實時顯示結(jié)果，但結(jié)果與代碼在一個視圖中顯示，不便于查看。

推薦使用印象筆記編制甘特圖，使用Typora渲染甘特圖，導(dǎo)出其它格式。

印象筆記——甘特圖實例.png

2、mermaid關(guān)鍵字說明

詳細(xì)教程請參照官方教程及示例。

mermaid官方教程

mermaid除了繪制甘特圖之外，還可以繪制流程圖、序列圖、統(tǒng)計圖表等，下面開始對常用關(guān)鍵字進(jìn)行說明。

使用印象筆記中的插入甘特圖按鈕插入一個簡單的甘特圖實例。

一個最簡單的甘特圖

接下來用下面代碼實例說明常見任務(wù)屬性。
任務(wù)狀態(tài)：

• done 已完成
• active正在進(jìn)行
• crit 關(guān)鍵任務(wù)
• 默認(rèn)任務(wù)都為待完成狀態(tài)

任務(wù)描述：在des1、des2位置添加任務(wù)描述，其它任務(wù)引用時直接引用des1就可以。
after: 描述任務(wù)時間關(guān)系。des3, after des2表示des3緊跟在des2之后。
任務(wù)時長有三種方式：

• 時間范圍 如：2014-01-06,2014-01-08
• 指定天數(shù) 如：5d
• 指定開始日期+天數(shù) 如：2014-01-06，5d

**PS:所有關(guān)鍵字之間用“,”分隔，關(guān)鍵字需要屬性時用空格分隔(如：after des2,)。

gantt         
       dateFormat  YYYY-MM-DD   
       title 使用mermaid語言定制甘特圖
       section 任務(wù)1
       已完成的任務(wù)           :done,    des1, 2014-01-06,2014-01-08
       正在進(jìn)行的任務(wù)               :active,  des2, 2014-01-09, 3d
       待完成任務(wù)1               :         des3, after des2, 5d
       待完成任務(wù)2              :         des4, after des3, 5d

3、將甘特圖轉(zhuǎn)換為PDF或html格式

將甘特圖復(fù)制至到Typora，導(dǎo)出為需要的格式。

使用Typora導(dǎo)出為PDF、html或圖像.png

4、打印甘特圖

• 使用Typora將甘特圖導(dǎo)出為html格式
  在轉(zhuǎn)換之前可以選擇合適的主題進(jìn)行渲染
• 使用瀏覽器打開html格式
• 使用瀏覽器打印功能打印

5、附甘特圖實例代碼

附甘特圖實例（需在第一行添加mermaid并以開頭，在最后一行添加結(jié)尾）。簡書的Markdown編輯器會自動將代碼第一行及最后一行過濾。

gantt         
       dateFormat  YYYY-MM-DD   
       title 使用mermaid語言定制甘特圖

       section 任務(wù)1
       已完成的任務(wù)           :done,    des1, 2014-01-06,2014-01-08
       正在進(jìn)行的任務(wù)               :active,  des2, 2014-01-09, 3d
       待完成任務(wù)1               :         des3, after des2, 5d
       待完成任務(wù)2              :         des4, after des3, 5d

       section 關(guān)鍵任務(wù)
       已完成的關(guān)鍵任務(wù) :crit, done, 2014-01-06,24h
       已完成的關(guān)鍵任務(wù)2         :crit, done, after des1, 2d
       正在進(jìn)行的關(guān)鍵任務(wù)             :crit, active, 3d
       待完成的關(guān)鍵任務(wù)        :crit, 5d
       待完成任務(wù)           :2d
       待完成任務(wù)2                      :1d

       section 文檔編寫
       描述甘特圖語法               :active, a1, after des1, 3d
       完成甘特圖實例1      :after a1  , 20h
       完成甘特圖實例2    :doc1, after a1  , 48h

END