怎么使用markdownplus画工作进度图/How to use markdownplus to create work schedule

Summary:
Markdown-plus is a markdown editor, but it also can help us to create work schedule . Today i will show you how to use markdownplus to create work schedule.
Markdown-plus从名字看是markdown的升级版，不仅仅可以让我们用md语法写文章，同时支持让我们创建图表，今天我介绍如何使用markdown-plus 创建工作进度图。

What Will I Learn?/教程知识点

Markdown语法格式输入，以及如何支持扩展语言
声明进度图，定义进度图标题和时间格式
创建具体工作明细以及每个进度状态
创建多个工作明细以及每个进度状态

Requirements/要求

简单英文基础
简单markdown语法基础
下载markdown-plus编辑器

Difficulty/难度

简单

Tutorial Contents/教程内容

下面先看一个简单例子：
360截图20180114091714810.jpg
其实现的代码为：

gantt
dateFormat  YYYY-MM-DD
title 工作进度图 @dalao
section A section
Completed task            :done,    des1, 2018-01-06,2018-01-08
Active task               :active,  des2, 2018-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, 2018-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

知识点1：Markdown语法格式输入，以及如何支持扩展语言

markdown 里面代码是使用英文状态下的4个顿号括起来的，如下：

····
代码  //此时，这部分内容是不被执行的，在markdown会直接显示出来。
····

效果是代码高亮，区别于别的内容。

想要实现进度图，markdown语法是不支持的，而markdown-plus支持语法扩展，所以我们可以在markdown-plus输入别的语法来实现我们需要的功能。

····mermaid
代码区域
····

这里我们使用扩展语法 mermaid来制作进度图图，此时，代码区域的内容会被执行。

知识点2：声明进度图，定义进度图标题和时间格式

mermaid语法不仅仅只是用来绘制进度图，所以在制作进度图之前，我们需要声明一下，下面的语法将被用来解析成进度图。

gantt

在代码第一行输入 gantt ,即代表本图表类型是甘特图也就是进度图。

dateFormat  YYYY-MM-DD
title 工作进度图 @dalao

dateFormat 定义时间格式，年月日格式
title 图表标题，不需要使用引号

知识点3：创建具体工作明细以及每个进度状态

section A section
Completed task            :done,    des1, 2018-01-06,2018-01-08
Active task               :active,  des2, 2018-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

section 定义进度的名称，比如，utopian功能开发，例子中A section 就是名称可以任意替换。

Completed task            :done,    des1, 2018-01-06,2018-01-08

事件名：状态1,状态2，定义变量名称，开始时间，结束时间
状态包括：done（完成） active（进行中）crit（颜色）
不同工作进度使用crit显示的样式是不一样的：
默认状态：
360截图20180114094800771.jpg
done状态：
360截图20180114094807262.jpg
active状态：
360截图20180114094813047.jpg

Active task               :active,  des2, 2018-01-09, 3d

也可以不定义具体结束日期，定义开始日期，以及需要的时间即可

Future task               :         des3, after des2, 5d

如果上一个进度已经定义，下一个进度可以使用after 直接接着后面。只需要声明需要时间。
下面就是单个事件进度的样例：
360截图20180114094556130.jpg

知识点4：创建多个工作明细以及每个进度状态

如果几件事同时进行，我们就需要创建多个进度。单个进度使用Section，多个进度就是重复多个section.

section A section
Completed task            :done,    des1, 2018-01-06,2018-01-08
Active task               :active,  des2, 2018-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, 2018-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

可以看出这2个事件进度是并列输入的。和单个创建没什么变化。显示如下：
360截图20180114095224921.jpg

如果当前时间在进度条之内，那么会显示一条红竖线，提示当前时间。
360截图20180114095343824.jpg

本教程到此结束，谢谢阅读！

markdown-plus系列教程

怎么使用markdownplus画流程图/How to use markdownplus to create a flow chart

Posted on Utopian.io - Rewarding Open Source Contributors