mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams and gantt charts.
177 lines (159 loc) • 5.41 kB
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,
leftPadding: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;
}
</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:steelblue;
linkStyle default stroke-width:2px,fill:none,stroke:crimson;
</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>