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

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

下面用一個(gè)簡單的實(shí)例秀睛，簡單講解Markdown mermaid甘特圖的繪制與使用。

該教程主要包括以下幾個(gè)部分：

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

1、選擇工具

市面上Markdown編輯器不少（比如：MarkdownPad抹估、cmd markdown缠黍、有道筆記、簡書药蜻、印象筆記瓷式、Typora等等），但是支持mermaid語法的很少语泽。

這幾個(gè)里邊也就印象筆記贸典、Typora支持甘特圖。下面附上下載鏈接踱卵。

Typora
印象筆記

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

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

印象筆記——甘特圖實(shí)例.png

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

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

mermaid官方教程

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

使用印象筆記中的插入甘特圖按鈕插入一個(gè)簡單的甘特圖實(shí)例宙拉。

一個(gè)最簡單的甘特圖

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

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

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

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

**PS:所有關(guān)鍵字之間用“,”分隔，關(guān)鍵字需要屬性時(shí)用空格分隔(如：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晃洒、附甘特圖實(shí)例代碼

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

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
       完成甘特圖實(shí)例1      :after a1  , 20h
       完成甘特圖實(shí)例2    :doc1, after a1  , 48h

END