html 绘制甘特图,Markdown绘制甘特图教程

日常工作中多个项目并行推进时，很难描述清楚每个任务的进度，以及当前状态。之前也想过用甘特图来管理项目进度，但是绘制甘特图的成本太高，而且不容易掌握。很难在团队中推广普及。

最近在使用Markdown排版时，发现Markdown可以快速便捷的生成甘特图，且能满足日常工作需求。

下面用一个简单的实例，简单讲解Markdown mermaid甘特图的绘制与使用。

该教程主要包括以下几个部分：

1、选择工具(使用印象笔记或Typora编制甘特图)

2、mermaid常用关键写说明

3、将甘特图转换为PDF或html格式

4、打印甘特图

5、附甘特图实例代码

1、选择工具

市面上Markdown编辑器不少(比如：MarkdownPad、cmd markdown、有道笔记、简书、印象笔记、Typora等等)，但是支持mermaid语法的很少。

这几个里边也就印象笔记、Typora支持甘特图。下面附上下载链接。

印象笔记支持左侧编辑右侧实时显示结果，Typora也可以支持实时显示结果，但结果与代码在一个视图中显示，不便于查看。

推荐使用印象笔记编制甘特图，使用Typora渲染甘特图，导出其它格式。

印象笔记——甘特图实例.png

2、mermaid关键字说明

详细教程请参照官方教程及示例。

mermaid官方教程

mermaid除了绘制甘特图之外，还可以绘制流程图、序列图、统计图表等，下面开始对常用关键字进行说明。

使用印象笔记中的插入甘特图按钮插入一个简单的甘特图实例。

一个最简单的甘特图

mermaid：图中红框第一行内容与最后一行内容，表示当前使用的语言为mermaid。

gantt：表示图表类型为甘特图

dateFormat：指定日期格式(Y表示年，M表示月，D表示日)。YYYY-MM-DD(2019-03-14)，YY-MM-DD(19-03-14)

section： 项目关键字，空格之后输入项目名称。

任务行： section后每一行为一个任务。第一个字符串为任务名称，之后以:开头，添加任务属性。

接下来用下面代码实例说明常见任务属性。

任务状态：

done 已完成

active正在进行

crit 关键任务

默认任务都为待完成状态

任务描述：在des1、des2位置添加任务描述，其它任务引用时直接引用des1就可以。

after: 描述任务时间关系。des3, after des2表示des3紧跟在des2之后。

任务时长有三种方式：

时间范围 如：2014-01-06,2014-01-08

指定天数 如：5d

指定开始日期+天数 如：2014-01-06，5d

**PS:所有关键字之间用“,”分隔，关键字需要属性时用空格分隔(如：after des2,)。

gantt

dateFormat YYYY-MM-DD

title 使用mermaid语言定制甘特图

section 任务1

已完成的任务 :done, des1, 2014-01-06,2014-01-08

正在进行的任务 :active, des2, 2014-01-09, 3d

待完成任务1 : des3, after des2, 5d

待完成任务2 : des4, after des3, 5d

3、将甘特图转换为PDF或html格式

将甘特图复制至到Typora，导出为需要的格式。

使用Typora导出为PDF、html或图像.png

4、打印甘特图

使用Typora将甘特图导出为html格式

在转换之前可以选择合适的主题进行渲染

使用浏览器打开html格式

使用浏览器打印功能打印

5、附甘特图实例代码

附甘特图实例(需在第一行添加mermaid并以开头，在最后一行添加结尾)。简书的Markdown编辑器会自动将代码第一行及最后一行过滤。

gantt

dateFormat YYYY-MM-DD

title 使用mermaid语言定制甘特图

section 任务1

已完成的任务 :done, des1, 2014-01-06,2014-01-08

正在进行的任务 :active, des2, 2014-01-09, 3d

待完成任务1 : des3, after des2, 5d

待完成任务2 : des4, after des3, 5d

section 关键任务

已完成的关键任务 :crit, done, 2014-01-06,24h

已完成的关键任务2 :crit, done, after des1, 2d

正在进行的关键任务 :crit, active, 3d

待完成的关键任务 :crit, 5d

待完成任务 :2d

待完成任务2 :1d

section 文档编写

描述甘特图语法 :active, a1, after des1, 3d

完成甘特图实例1 :after a1 , 20h

完成甘特图实例2 :doc1, after a1 , 48h

END