marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-25 02:09:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Use mix as test file instead

Browse Source
This commit is contained in:
Carlos Rodriguez
2016-03-12 12:36:37 -05:00
parent 28f9e6f17b
commit bba1050e5e
6 changed files with 225 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
test/gantt-dark-theme.html
View File

@@ -1,162 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../dist/mermaid.js"></script>
<style>
/* Simulate Darker Themed Page */
body {
background: #323D47;
font-family: sans-serif;
color: #ccc;
}
</style>
<link rel="stylesheet" href="../dist/mermaid.dark.css"/>
<script>
mermaid.initialize({
gantt: {
titleTopMargin:25,
barHeight:20,
barGap:4,
topPadding:50,
sidePadding: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>

176
test/mix-dark-theme.html Normal file
View File

@@ -0,0 +1,176 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../dist/mermaid.js"></script>
<link rel="stylesheet" href="../dist/mermaid.dark.css"/>
<script>
var mermaid_config = {
startOnLoad:true,
htmlLabels:true
}
mermaid.sequenceConfig = {
diagramMarginX:50,
diagramMarginY:10,
boxTextMargin:5,
noteMargin:10,
messageMargin:35,
mirrorActors:true,
width:150,
// Height of actor boxes
height:30
};
mermaid.ganttConfig = {
titleTopMargin:25,
barHeight:20,
barGap:4,
topPadding:50,
sidePadding:100,
gridLineStartPadding:35,
fontSize:11,
numberSectionStyles:4,
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();
}]
]
};
mermaid.startOnLoad=true;
</script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Simulate Darker Themed Page -->
<style>
body {
background: #323D47;
font-family: sans-serif;
color: #ccc;
}
</style>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="mermaid">graph LR
subgraph old sys 1
a1(new client)-->b1(sys1 server)
oc1(Old client)-->b2
end
subgraph old sys 2
a2(new client)-->b2(sys2 server)
oc2(Old client)-->b2
end
subgraph old sys 3
a3(new client)-->b3(sys3 server)
end
subgraph New sys
a1
a2
a3
end
</div>
<hr/>
<div class="mermaid">
graph LR;
A[Now with default style on links]--v-->B{a = '1,2'}
B-->|v|C[v]
B-- ... default style on links -->Z>My default thing this]
C-->D{condition};
linkStyle 0 stroke-width:2px,fill:none,stroke:blue;
linkStyle default stroke-width:2px,fill:none,stroke:red;
</div>
<hr/>
<div class="mermaid">
graph LR
A[Square Rect] -- Link text --> B((Circle))
A[Square Rect]--v-->D((Circle))
A --> C(Round Rect)
B == testing ==> D{Rhombus}
C-.->D
</div>
<hr/>
<div class="mermaid">
sequenceDiagram
participant Alice
participant Bob
participant John the Long
Alice->>Bob: Hello Bob, how are you?
loop Outer loop
Note left of Alice: Bob thinks about <br/> things <br/> to think about
Bob-xBob: I am good thanks!
loop Inner loop
Bob->>John the Long: How about you John?
Note right of John the Long: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit.
end
end
Bob-->>Alice: Checking with John...
Alice->>John the Long: Yes... John, how are you?
John the Long-->>Alice: Super!
</div>
<hr/>
<div class="mermaid">
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
</div>
<div class="mermaid">
info
</div>
</body>
</html>