mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
286 lines
7.9 KiB
HTML
286 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<script src="../dist/mermaid.full.js"></script>
|
|
<link rel="stylesheet" href="seq.css"/>
|
|
<script>
|
|
var mermaid_config = {
|
|
startOnLoad:true
|
|
}
|
|
mermaid.sequenceConfig = '{"diagramMarginX":50,"diagramMarginY":10,"actorMargin":50,"width":150,"height":45,"boxMargin":10,"boxTextMargin":5,"noteMargin":10,"messageMargin":35, "mirrorActors":false}';
|
|
mermaid.ganttConfig = {
|
|
titleTopMargin:25,
|
|
barHeight:20,
|
|
barGap:4,
|
|
topPadding:50,
|
|
sidePadding:75,
|
|
gridLineStartPadding:35,
|
|
fontSize:11,
|
|
numberSectionStyles:3,
|
|
axisFormatter: [
|
|
// Within a day
|
|
["%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>
|
|
<script>
|
|
function apa(){
|
|
console.log('CLICKED');
|
|
}
|
|
</script>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body {
|
|
background: #fff;
|
|
font-family: 'Open-Sans',sans-serif;
|
|
|
|
}
|
|
|
|
.grid .tick {
|
|
stroke: lightgrey;
|
|
opacity: 0.3;
|
|
shape-rendering: crispEdges;
|
|
}
|
|
.grid path {
|
|
stroke-width: 0;
|
|
}
|
|
|
|
.taskText {
|
|
text-anchor:middle;
|
|
font-size:11px;
|
|
}
|
|
.taskText0, .taskText3 {
|
|
fill:black;
|
|
}
|
|
.taskText1, .taskText2 {
|
|
fill:white;
|
|
}
|
|
.taskTextOutsideRight {
|
|
fill:black;
|
|
text-anchor:start;
|
|
font-size:11px;
|
|
}
|
|
.taskTextOutsideLeft {
|
|
fill:black;
|
|
text-anchor:end;
|
|
font-size:11px;
|
|
}
|
|
.taskTextOutside0,.taskTextOutside2, {
|
|
fill:black;
|
|
}
|
|
.taskTextOutside1, .taskTextOutside3 {
|
|
fill:darkblue;
|
|
}
|
|
.titleText {
|
|
text-anchor:middle;
|
|
font-size:18px;
|
|
fill:#633;
|
|
}
|
|
.section {
|
|
stroke:none;
|
|
opacity:0.2;
|
|
}
|
|
.section0 {
|
|
fill:#6666FF;
|
|
}
|
|
.section1 {
|
|
fill:white;
|
|
opacity:0.2;
|
|
}
|
|
.section2 {
|
|
fill:orange;
|
|
opacity:0.2;
|
|
}
|
|
|
|
.task {
|
|
/*stroke:none;*/
|
|
}
|
|
.task0 {
|
|
fill: #ffffdd;
|
|
}
|
|
.task1 {
|
|
fill: #8a90dd;
|
|
}
|
|
.task2 {
|
|
fill: #8a90dd;
|
|
}
|
|
|
|
.sectionTitle {
|
|
text-anchor:start;
|
|
font-size:11px;
|
|
text-height:14px;
|
|
}
|
|
.sectionTitle0 { fill:#454545;}
|
|
.sectionTitle1 { fill:#454545;}
|
|
.sectionTitle2 { fill:#454545;}
|
|
.sectionTitle3 { fill:#b23473;}
|
|
.done0, .done1, .done2, .done3 {
|
|
stroke:grey;
|
|
fill: lightgrey;
|
|
stroke-width:2;
|
|
}
|
|
.crit0, .crit1, .crit2, .crit3 {
|
|
stroke:#ff8888;
|
|
fill: red;
|
|
stroke-width:2;
|
|
}
|
|
.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
|
|
stroke:#ff8888;
|
|
fill: #ffffc0;
|
|
stroke-width:2;
|
|
}
|
|
.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
|
|
stroke:#ff8888;
|
|
fill: lightgrey;
|
|
stroke-width:2;
|
|
cursor: pointer;
|
|
shape-rendering: crispEdges;
|
|
}
|
|
.active0 {
|
|
stroke:black;
|
|
fill: #ffffdd;
|
|
stroke-width:2;
|
|
}
|
|
.active1 {
|
|
stroke:black;
|
|
fill: #8a90dd;
|
|
stroke-width:2;
|
|
}
|
|
.active2 {
|
|
stroke:black;
|
|
fill: #8a90dd;
|
|
stroke-width:2;
|
|
}
|
|
.today {
|
|
fill:none;
|
|
stroke:red;
|
|
stroke-width:2px;
|
|
}
|
|
</style>
|
|
</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
|
|
Design jison grammar :done, crit, des1, 2014-01-06,8w
|
|
Create example text :done, after des1, 16w
|
|
</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>
|