mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams and gantt charts.
155 lines (145 loc) • 5.05 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<script src="../dist/mermaid.js"></script>
<link rel="stylesheet" href="../dist/mermaid.forest.css"/>
<script>
mermaid.initialize({
gantt: {
titleTopMargin:25,
barHeight:20,
barGap:4,
topPadding:50,
leftPadding:75,
gridLineStartPadding:5,
fontSize:11,
numberSectionStyles:3,
axisFormatter: [
// Within a day
["X%I:%M", function (d) {
return d.getHours();
}],
// Monday a week
["w. %U", function (d) {
return d.getDay() == 1;
}],
// Day within a week (not monday)
["%a %d", function (d) {
return d.getDay() && d.getDate() != 1;
}],
// within a month
["%b %d", function (d) {
return d.getDate() != 1;
}],
// Month
["%m-%y", function (d) {
return d.getMonth();
}]
]
}
});
</script>
</head>
<body>
<h1>scale tests</h1>
<h2>less then a day</h2>
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD H:mm
title Adding GANTT diagram functionality to mermaid
section Design
Design jison grammar :done, crit, des1, 2014-01-06 1:30,4h
Create example text :done, after des1,6h
</div>
<h2>less then a week</h2>
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid2
section Design
Design jison grammar :done, crit, des1, 2014-01-06,2d
Create example text :done, after des1,3d
</div>
<h2>less then a month</h2>
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section Design
Design jison grammar :done, crit, des1, 2015-01-05,2d
Create example text :done, after des1, 2w
</div>
<h2>less then a year</h2>
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section Design
Design1:done, crit, des1, 2014-01-22,4w
Design2:after des1, 3w
Design3:3w
Design4:3w
Design5:18d
Design6:2w
Implementation1:3w
Implementation2:3w
</div>
<h1>Other tests</h1>
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section Design
Design jison grammar :done, crit, des1, 2014-01-06, 2014-01-09
Create example text :done, des2, 2014-01-06, 3d
Bounce gantt example with users :active, crit, des3, after des2, 5d
section Implementation
update build script :2014-01-06,24h
Implement parser and jison :after des1, 2d
Create tests for parser :active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid core bore tore gore bore lore :1d
section Documentation
Describe gantt syntax :active,a1, 2014-01-10, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :after a1 , 48h
</div>
Text before. Bla b la bla. Look at the diagram below:
<div class="mermaid">
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 3d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
section Another2
anther task : 24d
section Another3
anther task : 24d
section Another4
anther task : 24d
section Another5
anther task : 24d
section Another6
anther task : 24d
section Another7
anther task : 24d
section Another8
anther task : 24d
section Another9
anther task : 24d
</div>
As you can see, bla bla bla.
<div class="mermaid">
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 3h
</div>
</body>
</html>