0. 甘特图长啥样

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

那么什么是甘特图？

1.甘特图介绍

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

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

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

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

2.mermaid介绍

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

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

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

2.1 选择markdown编辑器

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

2.2 运用mermaid画甘特图

因为是脚本语言，所以使用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）：

gantt

       dateFormat                YYYY-MM-DD
       title                     Adding GANTT diagram functionality to mermaid
       excludes                  :excludes the named dates/days from being included in a charted task.. 
       (Accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".) 
       section A section
       Completed task            :done,    des1, 2020-01-06,2020-01-08
       Active task               :active,  des2, 2020-01-09, 3d
       Future task               :         des3, after des2, 5d
       Future task2              :         des4, after des3, 5d

       section Critical tasks
       Completed task in the critical line :crit, done, 2020-01-06,24h
       Implement parser and jison          :crit, done, after des1, 2d
       Create tests for parser             :crit, active, 3d
       Future task in critical line        :crit, 5d
       Create tests for renderer           :2d
       Add to mermaid                      :1d

       section Documentation
       Describe gantt syntax               :active, a1, after des1, 3d
       Add gantt diagram to demo page      :after a1  , 20h
       Add another diagram to demo page    :doc1, after a1  , 48h

       section Last section
       Describe gantt syntax               :after doc1, 3d
       Add gantt diagram to demo page      :20h
       Add another diagram to demo page    :48h

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

饼状统计图

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

MD代码：

    title 看文章经常点赞的程序员的脱单情况
    "已和女神结婚" : 200
    "已脱单，对象非常漂亮" : 132
    "已女神被表白，考虑是否接受" : 40
    "女神即将表白" :  1

类图

顺序图

MD代码如下：

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts<br/>prevail...
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

---

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