用 mermaid 畫甘特圖

今天發現了一個比較好用的畫甘特圖/流程圖的工具：mermaid，官方的介紹是：

「Generation of diagram and flowchart from text in a similar manner as markdown」。

我說好是由於對程序員好，支持命令行操做而且是開源的，貌似還能夠整合進 Markdown，不過我沒找到相關的案例。

使用在線工具繪製

mermaid 提供了一個在線編輯器，能夠迅速在線做圖，下面是官方的 demo

sequenceDiagram
A->> B: Query
B->> C: Forward query
Note right of C: Thinking...
C->> B: Response
B->> A: Forward response

生成的效果是這樣的:

再來一個甘特圖的:

gantt
dateFormat  YYYY-MM-DD
title Shop項目交付計劃

section 里程碑 0.1 
數據庫設計          :active,    p1, 2016-08-15, 3d
詳細設計            :           p2, after p1, 2d

section 里程碑 0.2
後端開發            :           p3, 2016-08-22, 20d
前端開發            :           p4, 2016-08-22, 15d

section 里程碑 0.3
功能測試            :       p6, after p3, 5d
上線               :       p7, after p6, 2d
交付               :       p8, afterp7, 2d

生成的效果:

畫甘特圖能夠參考官方的 Gantt語法文檔。

使用命令行繪製

因爲 mermaid 使用 nodejs 寫的，因此須要 node 環境，這個很少說，根據本身的平臺安裝好 node 便可。
安裝 mermaid 一行命令搞定:

npm install -g phantomjs && npm install -g mermaid

完成以後，就可使用命令行了。
先新建一個文本文件，咱們這裏就來展現一個甘特圖，因此命名 demo.gantt，固然，文件名隨意起就好。demo.gantt 文件內容就用上面的甘特圖的例子，而後使用命令：

mermaid demo.gantt -w 1920 -s -p -o images

就能夠在 images 目錄下生成兩個文件，一個是 PNG 圖片，另外一個是 SVG 矢量圖。

能夠用 mermaid -h 命令查看幫助，這裏我貼上剛剛那條命令裏用到的參數:

-s --svg       輸出 SVG 替代 PNG（試驗性的功能）。
-p --png       若是選擇保存 SVG，那麼加上這個選項能夠同時保存 PNG。
-o --outputDir 保存文件的目錄（若是不存在會自動建立），默認 `cwd`。
-w --width     生成的 PNG 圖片寬度。

整合進 Markdown

事實上，已經有一些相似的工具被整合進 Markdown 了，好比著名的在線 Markdown 編輯器 馬克飛象 採用了 flowchart.js 做爲流程圖引擎，但貌似這個 flowchart 是不支持 gantt 的，因此這裏我也用不上。

至於 mermaid，因爲我沒有找到相關的案例，因此目前只能採用生成圖片插入正文或者用在線編輯器生成連接插入這兩種辦法。

今天無心中在 V2EX 上看到一個帖子: 一款很阪本的 Presentation 工具，無心中發現這個 用 Markdown 編寫簡潔優美的演示文稿 的工具使用了 mermaid 做爲流程圖、甘特圖的解析器。若是你要在 Markdown 中整合 mermaid，能夠參考這個項目 vortex。

一些問題

固然，在使用過程當中也發現了一些問題，最大的一個就是甘特圖日期中的假期排除。

因爲咱們每週通常只工做 5 天，因此這時候我要在甘特圖中排除週末兩天（計算工期須要），固然，若是可能，最好支持法定節假日。

然而官方文檔中並無說起這個功能，因此我找了一下，看到官方 issues 列表中已經有人提過了：Gnatt Chart exclude weekends，做者回應說 mermaid 是使用 d3js 渲染的，因此應該是能夠實現這個功能的。

不過貌似要靠咱們本身了。。。由於做者的最後一句話是:

Good luck! If you find a solution please post it here for reference.

等我解決這個問題吧~ ???

---

點擊這裏查看博客原文