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/教程内容
下面先看一个简单例子：
其实现的代码为：
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显示的样式是不一样的：
默认状态：
done状态：
active状态：
Active task :active, des2, 2018-01-09, 3d
也可以不定义具体结束日期，定义开始日期，以及需要的时间即可
Future task : des3, after des2, 5d
如果上一个进度已经定义，下一个进度可以使用after 直接接着后面。只需要声明需要时间。
下面就是单个事件进度的样例：
知识点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个事件进度是并列输入的。和单个创建没什么变化。显示如下：
如果当前时间在进度条之内，那么会显示一条红竖线，提示当前时间。
本教程到此结束，谢谢阅读！
markdown-plus系列教程
怎么使用markdownplus画流程图/How to use markdownplus to create a flow chart
Posted on Utopian.io - Rewarding Open Source Contributors