这是笔者在软件协同课上摸鱼十分钟里运用markdown的mermaid工具画出来的这学期课程项目的甘特图。

那么什么是甘特图？

先搬运段度娘上甘特图的词条介绍

甘特图（Gantt chart）又称为横道图、条状图(Bar chart)。其通过条状图来显示项目，进度，和其他时间相关的系统进展的内在关系随着时间进展的情况。以提出者亨利·劳伦斯·甘特（Henry Laurence Gantt）先生的名字命名。

通过这样的一张__甘特图__，可以很清晰地将整个项目的规划非常清晰的展现出来，便于项目成员明确项目进度与时间安排，有效避免组员以不清楚项目时间规划为由鸽项目进度。

因此在项目管理，甘特图是一个非常有用的工具。 传统上是使用Visio、Project之类的笨重工具来绘制甘特图，但是现在可以通过markdown的mermaid工具非常方便地绘制。

mermaid的意为美人鱼，很有诗意。 这是一种类似于markdown的简单脚本语言，用于通过javascript从文本生成图表。

事实上，除了绘制甘特图之外，meimaid还可以绘制流程图、序列图、饼图、类图等常用图表。

根据其官方教程及示例上的介绍，这个工具获得2019年“最令人兴奋的技术使用”类别的JS开放源代码奖。

想要使用mermaid，需要选择一个支持mermaid的markdown编辑器。 印象笔记、Typora以及VS Code都支持mermaid。 印象笔记和VS Code都支持左侧编辑右侧实时显示结果，而Typora号称最强的MD编辑器，支持实时显示结果，个人强推。

因为是脚本语言，所以使用mermaid需要学习一些关键字。 不过别担心，这些关键字的非常简单易懂。

根据二八法则，你只需学习一些常用关键字，就能解决多数绘图需要了。

详细关键字说明与教程可以参照官方教程及示例。 接下来以文章开头的甘特图为例，介绍甘特图中常用的一些关键字

```mermaid gantt title 这是个甘特图的栗子🌰

dateFormat MM-DD

section 软件协同开发课程 项目启动 :done,des1,03-09,7d 项目计划 :done,des2,after des1,6d 需求分析 :done,des3,after des2,9d 软件设计 :done,des4,after des3,12d 软件编码 :crit,active,des5,04-07,20d 软件测试 :des6,04-14,15d 项目交付 :des7,after des6,4d ```

title：图名，可选关键字，例如title 这是个甘特图的栗子🌰，如没有则不显示 dateFormat ：自定义时间日期格式，可省略，默认输入日期格式为YYYY-MM-DD，常用的有月日 MM-DD 日时(24小时制)DD-HH section：部分名，例如section 软件协同开发课程

接下来是任务参数，基本格式如下：

任务名:参数一, 参数二, 参数三, 参数四，参数五

参数一：可选，crit，表示是否强调，如果有会示为红色 参数二：可选，done、active 或不填，分别表示已完成，正在进行中和未开始 参数三：可选，任务别名，例如des3，主要用于跟在其他任务后面 参数四：任务开始时间，可以为具体的时间，如04-14，或者跟在其他任务后面，例如after des3 参数五：任务结束时间，可以是具体的时间，如04-07，或任务进行的周期，如3d

例如示例中的任务字段： 项目计划 :done,des2,after des1,6d 软件设计 :done,des4,after des3,12d

边做边学是快速了解一件东西的最好方式 根据下面你可以快速学会用markdown画出你想要的甘特图

以下是官方教程中给出的甘特图示例：

MD代码（代码语言选择mermaid）：

除此以外，mermaid还支持画其他以下一些常用图表

(CSDN的Markdown编辑器并不完全支持mermaid语法，只能截图）

MD代码：

MD代码如下：

如有帮助，欢迎点赞/转载~ （听说给文章点赞的人代码bug特别少） 联系邮箱：[email protected] 有问题欢迎通过邮箱交流。