甘特图是一种条形图,最初由Karol Adamiecki于1896年开发,并由Henry Gantt于1910年独立开发,用于说明项目进度表。甘特图说明了项目的终端元素和摘要元素的开始和结束日期。
Mermaid可以渲染甘特图。
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-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, 2014-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
TBD
TBD
TBD
TBD
输入示例说明:
YYYY 2014 4 digit year
YY 14 2 digit year
Q 1..4 Quarter of year. Sets month to first month in quarter.
M MM 1..12 Month number
MMM MMMM January..Dec Month name in locale set by moment.locale()
D DD 1..31 Day of month
Do 1st..31st Day of month with ordinal
DDD DDDD 1..365 Day of year
X 1410715640.579 Unix timestamp
x 1410715640579 Unix ms timestamp
Input Example Description
H HH 0..23 24 hour time
h hh 1..12 12 hour time used with a A.
a A am pm Post or ante meridiem
m mm 0..59 Minutes
s ss 0..59 Seconds
S 0..9 Tenths of a second
SS 0..99 Hundreds of a second
SSS 0..999 Thousandths of a second
Z ZZ +12:00 Offset from UTC as +-HH:mm, +-HHmm, or Z
更多信息:http://momentjs.com/docs/#/parsing/string-format/
%a - abbreviated weekday name.
%A - full weekday name.
%b - abbreviated month name.
%B - full month name.
%c - date and time, as "%a %b %e %H:%M:%S %Y".
%d - zero-padded day of the month as a decimal number [01,31].
%e - space-padded day of the month as a decimal number [ 1,31]; equivalent to %_d.
%H - hour (24-hour clock) as a decimal number [00,23].
%I - hour (12-hour clock) as a decimal number [01,12].
%j - day of the year as a decimal number [001,366].
%m - month as a decimal number [01,12].
%M - minute as a decimal number [00,59].
%L - milliseconds as a decimal number [000, 999].
%p - either AM or PM.
%S - second as a decimal number [00,61].
%U - week number of the year (Sunday as the first day of the week) as a decimal number [00,53].
%w - weekday as a decimal number [0(Sunday),6].
%W - week number of the year (Monday as the first day of the week) as a decimal number [00,53].
%x - date, as "%m/%d/%Y".
%X - time, as "%H:%M:%S".
%y - year without century as a decimal number [00,99].
%Y - year with century as a decimal number.
%Z - time zone offset, such as "-0700".
%% - a literal "%" character.
更多信息:https://github.com/mbostock/d3/wiki/Time-Formatting
通过定义许多css类来完成甘特图的样式化。在渲染过程中,这些类是从中提取的
类 | 描述 |
---|---|
actor | 图表顶部的actor框的样式 |
text.actor | 图表顶部的actor框中的文本样式 |
actor-line | 演员的垂直线 |
messageLine0 | 固体消息行的样式 |
messageLine1 | 虚线消息行的样式 |
messageText | 消息箭头上的文本定义样式 |
labelBox | 将样式标签定义为循环中的左侧 |
labelText | 循环标签中文本的样式 |
loopText | 循环框中文本的样式 |
loopLine | 循环框中的行定义样式 |
note | 便条盒的样式 |
noteText | 注释框中文本的样式 |
.grid .tick {
stroke: lightgrey;
opacity: 0.3;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
#tag {
color: white;
background: #FA283D;
width: 150px;
position: absolute;
display: none;
padding:3px 6px;
margin-left: -80px;
font-size: 11px;
}
#tag:before {
border: solid transparent;
content: ' ';
height: 0;
left: 50%;
margin-left: -5px;
position: absolute;
width: 0;
border-width: 10px;
border-bottom-color: #FA283D;
top: -20px;
}
.taskText {
fill:white;
text-anchor:middle;
}
.taskTextOutsideRight {
fill:black;
text-anchor:start;
}
.taskTextOutsideLeft {
fill:black;
text-anchor:end;
}
是否可以调整渲染甘特图的边距。
这是通过定义ganttConfig配置对象的一部分来完成的。如何使用CLI在mermaidCLI页面中描述。
mermaid.ganttConfig可以设置为带有配置参数或相应对象的JSON字符串。
mermaid.ganttConfig = {
titleTopMargin:25,
barHeight:20,
barGap:4,
topPadding:75,
sidePadding:75
}
参数 | 描述 | 默认值 |
---|---|---|
mirrorActor | 打开/关闭图表下方及其上方的actor的渲染 | false |
bottomMarginAdj | 调整图表结束的距离。使用css的宽边框样式可以生成unwantewd剪切,这就是存在此配置参数的原因 | 1 |
https://mermaidjs.github.io/gantt.html