mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams and gantt charts.
142 lines (132 loc) • 3.83 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../dist/mermaid.forest.css"/>
<scrpt src="../node_modules/d3/d3.js"></scrpt>
<script src="../dist/mermaid.js"></script>
<scrpt src="../dist/mermaid.full.js"></scrpt>
<style type="text/css">
html {
font-family: 'trebuchet ms', verdana, arial;
color: #333333;
}
</style>
<script>
//browserify --entry src/mermaid.js -u d3 -o ./dist/mermaid.brow.slim.js
var mermaid_config = {
startOnLoad:true
}
mermaid.ganttConfig = {
titleTopMargin:25,
barHeight:20,
barGap:4,
topPadding:50,
leftPadding:75,
gridLineStartPadding:35,
fontSize:11,
numberSectionStyles:3,
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();
}]
]
};
</script>
<script>
function apa(){
console.log('CLICKED');
}
</script>
<lnk rel="stylesheet" href="seq.css"/>
</head>
<body>
<div class="mermaid">
graph TB
subgraph LevelAB1s
subgraph LevelAB1C1
d1-->d2
end
subgraph X
x["nX"]-- "link" -->x2["nX2 您好"]
end
end
</div>
<div class="mermaid">graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end</div>
<div class="mermaid">
graph TB
subgraph A
subgraph AA
aa1 --> aa2
aa1 --> aa3
subgraph New top
nt1 --> nt2
nt1 --> nt3
end
end
subgraph AB
ab1 --> ab2
ab1 --> ab3
end
end
</div>
<div class="mermaid">
sequenceDiagram
A->> B: Query
B->> C: Forward query
Note right of C: Thinking...
C->> B: Response
B->> A: Forward response
</div>
<div class="mermaid">
graph TB
ab1 -- tjojho --> ab3
</div>
<div class="mermaid">
gantt
dateFormat yyyy-mm-dd
title Adding gantt diagram functionality to mermaid
section Design
Design jison grammar :des1, 2014-01-01, 2014-01-04
Create example text :des2, 2014-01-01, 3d
Bounce gantt example with users :des3, after des2, 5d
section Implementation
update build script :2014-01-02,1h
Implement parser and jison :after des1, 2d
Create tests for parser :3d
Create renderer :5d
Create tests for renderer :2d
Add to mermaid core :1d
section Documentation
Describe gantt syntax :a1, 2014-01-01, 3d
Add gantt diagram to demo page :after a1 , 2h
Add gantt to diagram to demo page :after a1 , 2h </div>
</body>
</html>