142 lines
3.7 KiB
HTML
142 lines
3.7 KiB
HTML
<!DOCTYPE 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,
|
|
sidePadding: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>
|