今天发现一个比较好用的画甘特图/流程图的工具：mermaid，官方介绍是：《Generationofdiagramandflowchartfromtextinasimilarmannerasmarkdown》。我说是的，因为它对程序员很好，支持命令行操作，而且是开源的，而且好像可以集成到Markdown中，但是我没有找到相关的案例。使用在线工具画美人鱼提供了在线编辑器可以快速在线绘制，下面是官方的demosequenceDiagramA->>B:QueryB->>C:Forwardquery注右C:Thinking...C->>B:ResponseB->>A：Forwardresponse生成的效果如下：另一个甘特图：ganttdateFormatYYYY-MM-DDtitleShopprojectdeliveryplansectionmilestone0.1Databasedesign:active,p1,2016-08-15,3ddetailedDesign:p2,p1之后,2dsectionMilestone0.2后端开发:p3,2016-08-22,20d前端开发:p4,2016-08-22,15dsectionMilestone0.3功能测试:p6,p3之后,5dlaunch:p7,p6之后，2d投递：p8，p7之后，2d生成的效果：绘制甘特图，可以参考官方的甘特语法文档。使用命令行绘制，因为美人鱼是用nodejs写的，所以需要node环境。这个不多说，根据自己的平台安装node即可。一行命令安装美人鱼：npminstall-gphantomjs&&npminstall-gmermaid完成后，就可以使用命令行了。先新建一个文本文件，我们这里展示一个甘特图，所以命名为demo.gantt，当然文件名可以随意。demo.gantt文件内容使用上面的甘特图示例，然后使用命令：mermaiddemo.gantt-w1920-s-p-oimages在images目录下生成两个文件，一个是PNG图片，另一个一个是SVG矢量图像。可以使用mermaid-h命令查看帮助。这里我粘贴刚才命令中使用的参数：-s--svg输出SVG而不是PNG（实验功能）。-p--png如果你选择保存SVG，添加这个选项同时保存PNG。-o--outputDir保存文件的目录（如果不存在会自动创建），默认`cwd`。-w--width生成的PNG图像宽度。集成到Markdown实际上，一些类似的工具已经集成到Markdown中。比如著名的在线Markdown编辑器MarkFeixiang就使用了flowchart.js作为流程图引擎，但是这个流程图好像不支持甘特图，所以这里我也无法使用。至于美人鱼，由于没有找到相关案例，只能生成图片插入文字或者使用在线编辑器生成链接插入。今天无意中看到V2EX上的一个帖子：一个很坂本的Presentation工具。无意中发现，这个用Markdown写出简洁漂亮的演示文稿的工具，使用了mermaid作为流程图和甘特图的解析器。如果你想在Markdown中集成美人鱼，你可以参考这个项目漩涡。一些问题当然在使用过程中也发现了一些问题，最大的就是甘特图日期中的节假日排除问题。由于我们一般每周只工作5天，所以我此时会在甘特图中排除两天周末（计算时长需要）。当然，如果可以的话，最好支持法定节假日。不过官方文档里并没有提到这个功能，于是找了一下，官方issues列表里已经有人提到了：GnattChartexcludeweekends，作者回复说mermaid是用d3js渲染的，所以应该是可能实现这个功能。但这似乎取决于我们。..因为作者的最后一句话是：Goodluck！如果您找到解决方案，请在此处发布以供参考。等我来解决这个问题~？？？点此查看原博客
