Markdown绘制甘特图教程

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

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

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

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

1、选择工具(使用印象笔记或Typora编制甘特图)
2、mermaid常用关键写说明
3、将甘特图转换为PDF或html格式
4、打印甘特图
5、附甘特图实例代码

1、选择工具

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、简介 什么是Markdown?Markdown是一种轻量级的[标记语言],通常为程序员群体所用,目前它已经是全...
    konishi5202阅读 2,755评论 4 4
  • Markdown编辑器千千万,可是有颜值、功能强并且免费的,就没有几个了。之前一直在用Mou,分屏预览模式方便得很...
    中v中阅读 46,488评论 4 46
  • 加入007有一段时间了,今天向大家推荐一款软件Markdown来帮助大家提高写作的效率及解决排版问题,希望帮助到大...
    King9527阅读 1,798评论 0 5
  • 2016年1月31日,时值西藏冬季,我们几个人晚上开着车,从林芝着急赶回拉萨。路上遇到很多徒步的人,引人注意,...
    安北西海阅读 210评论 1 3
  • 1、带着父母去旅行 2017年,终于带着父母去青藏旅行,虽然并没有全程伴随,但很享受开着车载着他们,看看风景,拍拍...
    一心而已阅读 331评论 0 2