html 绘制甘特图,Markdown绘制甘特图教程
日常工作中多个项目并行推进时,很难描述清楚每个任务的进度,以及当前状态。之前也想过用甘特图来管理项目进度,但是绘制甘特图的成本太高,而且不容易掌握。很难在团队中推广普及。
最近在使用Markdown排版时,发现Markdown可以快速便捷的生成甘特图,且能满足日常工作需求。
下面用一个简单的实例,简单讲解Markdown mermaid甘特图的绘制与使用。
该教程主要包括以下几个部分:
1、选择工具(使用印象笔记或Typora编制甘特图)
2、mermaid常用关键写说明
3、将甘特图转换为PDF或html格式
4、打印甘特图
5、附甘特图实例代码
1、选择工具
市面上Markdown编辑器不少(比如:MarkdownPad、cmd markdown、有道笔记、简书、印象笔记、Typora等等),但是支持mermaid语法的很少。
这几个里边也就印象笔记、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
html 绘制甘特图,Markdown绘制甘特图教程相关推荐
- Markdown绘制甘特图教程
日常工作中多个项目并行推进时,很难描述清楚每个任务的进度,以及当前状态.之前也想过用甘特图来管理项目进度,但是绘制甘特图的成本太高,而且不容易掌握.很难在团队中推广普及. 最近在使用Markdown排 ...
- markdown 绘制流程图、时序图、甘特图
这些复杂图形的绘制都是使用代码块实现的,指定代码块的解析语言,按照响应的绘制语法即可实现. 流程图--指定 mermaid(样式流程图) 或 flow (标准流程图)解析语言 时序图--指定 sequ ...
- Tableau绘制漏斗图、甘特图、瀑布图、镶边面积图、阴影坡度图
Tableau绘制漏斗图.甘特图.瀑布图.镶边面积图.阴影坡度图 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一. 漏斗图 数据源 1.1 分色直条漏斗图 (1) ...
- markdown的甘特图耶
前言 之所以想写这篇markdown的甘特图功能,是因为在参看一个大佬的时间管理系统时,有甘特图这个东东,然后原来这就是甘特图啊,于是乎,想起typora的markdown支持这个,就找了下相关资料, ...
- Markdown绘制UML图
下面介绍一种可以在Markdown中使用的绘制UML工具 -- PlantUML,以及渲染引擎 Gravizo 1. PlantUML简介 可以登陆 PlantUML官网 看一下,里面有支持的UML类 ...
- Markdown文档生成流程图、时序图、类图、状态图、ER图、用户旅程图、甘特图、饼图等
简介 流程图.时序图.类图.状态图.ER图.用户旅程图.甘特图.饼图等这些图都可以以文本的形式插入到Markdown文档中,使用一种叫mermaid的语法. 是一种用文本描述图形的方法. 下面的代码, ...
- html 甘特图_Rplotly|交互式甘特图(Gantt chart)项目管理/学习计划
甘特图(Gantt chart),又常被称为横道图或者条状图,是现代企业项目管理领域运用最为广泛的一种图示.就是通过条形来显示项目的进度.时间安排等相关情况的. 项目管理外,也可以用来管理学习计划.绘 ...
- [译] 绘制路径:Android 中矢量图渲染
原文地址:Draw a Path: Rendering Android VectorDrawables 原文作者:Nick Butcher 译文出自:掘金翻译计划 本文永久链接:github.com/ ...
- python 一张图画多条线_Gnuplot.py在一张图上绘制多条线
我目前正试图使用gnuplot py从文本文件中绘制多行.我可以分别绘制两条线,但当我试图在同一个图上绘制它们时,它只绘制一条线.在 这是我的代码:#!/usr/bin/env python impo ...
最新文章
- mysql远程主机强迫关闭了一个现有连接_asp.net连接mysql出现了远程主机强迫关闭了一个现有的连接。!!!...
- flash破解工具/flash decompiler
- 【BZOJ1206】【HNOI2005】虚拟内存,我也就能写写这种模拟题了
- JavaScript学习总结(13)——JavaScript常用正则表达式
- 想为自己设置的软件加一个属于自己的图标吗?使用AWT_Swing_图标解决你的问题(源码解析)
- XMLHttpRequest的属性
- 域用用户怎么允许共享_怎么设置访问WIN10共享文件夹无需验证(输入用户名和密码)?...
- 阿里云Linux安装软件镜像源
- Exploring Simple Siamese Representation Learning
- 新手阿里云服务器操作指南(图文教程)
- 导航动态避让算法RVO的优化ORCA(Optimal Reciprocal Collision Avoidance)
- Coursera视频无法播放问题解决
- 拜耳再投4亿元提升在华处方药产能;阿斯利康进博会公布新冠疫苗最新进展 | 美通企业日报...
- 揭秘:张国荣葬礼,袁咏仪为何哭到失控?
- Q/GDW 376.2集中器本地通信模块接口协议测试方法
- 用HTML5和JavaScript做一个轮播图
- XCTF Guess-the-Number
- 什么叫做石英表_石英表和机械表区别是什么?
- Baxter官网资料(查)
- 嘉华股份上交所上市:市值25亿 一年采购8亿元非转基因大豆