168 lines
5.1 KiB
HTML
168 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="../dist/mermaid.forest.css"/>
|
|
<script src="../dist/mermaid.full.js"></script>
|
|
<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">
|
|
|
|
<!-- 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>
|