用 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.

等我解决这个问题吧~ ???

---

点击这里查看博客原文