mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-28 07:03:17 +08:00
104 lines
1.9 KiB
HTML
104 lines
1.9 KiB
HTML
<!DOCTYPE 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>
|
|
|