mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams and gantt charts.
104 lines (90 loc) • 1.9 kB
HTML
<html><head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../../dist/mermaid.css"/>
<script src="../../../dist/mermaid.js"></script>
<script>
var config = {
startOnLoad:true,
callback:function(id){
console.log(id,' rendered');
},
flowchart:{
useMaxWidth:false,
htmlLabels:true
},
sequenceDiagram: {
"textPlacement": "tspan"
},
gantt: {
"titleTopMargin":25,
"barHeight":20,
"barGap":4,
"topPadding":50,
"sidePadding":75,
"gridLineStartPadding":35,
"fontSize":11,
"numberSectionStyles":3,
"axisFormatter": [["%-m/%-d", function (d){return d.getDay() == 1;}]]
},
logLevel:5
};
mermaid.initialize(config);
</script>
</head><body>
<h3>flow chart</h3>
<div class="mermaid" id="flow_chart_1">
graph TD
A[label]
B[very very very long long long long-long-long text]
A--test-->B
</div>
<div class="mermaid" id="flow_chart_2">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</div>
<h3>sequence diagram</h3>
<div class="mermaid" id="sequence_diagram_1">
sequenceDiagram
participant A as actor
participant B as very very very long long long long-long-long text
A->>B: hi
B-->A:
B->>A: hello
</div>
<h3>gantt chart</h3>
<div class="mermaid" id="gantt_axis_formatter">
gantt
dateFormat YYYY-MM-DD
title gantt chart
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
</div>
<h3>git graph</h3>
<div class="mermaid" id="git_graph_1">
gitGraph BT:
options
{
"nodeSpacing": 150
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
reset newbranch^^
commit
commit
</div>
</body></html>