mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-21 06:53:17 +08:00
150 lines
4.1 KiB
HTML
150 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<script src="../dist/mermaid.full.js"></script>
|
|
<scrpt src="https://cdn.rawgit.com/knsv/mermaid/0.3.0/dist/mermaid.full.min.js"></scrpt>
|
|
<script>
|
|
var mermaid_config = {
|
|
startOnLoad:true
|
|
}
|
|
</script>
|
|
<script>
|
|
function apa(){
|
|
console.log('CLICKED');
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>Shapes</h1>
|
|
Shape examples:
|
|
<pre>
|
|
graph TD;
|
|
sq[Square shape]-->ci((Circle shape));
|
|
od>Odd shape]---|Two line <br>edge comment|ro;
|
|
od2>Really long text in an Odd shape]-->od3>Really long text with linebreak <br>in an Odd shape];
|
|
di{Diamond is <br> broken}-->ro(Rounded <br>square <br>shape);
|
|
|
|
%% Comments after double percent signs
|
|
di-->ro2(Rounded square shape);
|
|
e((Inner circle))-->f(,.?!+-*ز);
|
|
A[Object]-->B(Thing);
|
|
style e red;
|
|
</pre>
|
|
<div class="mermaid">
|
|
graph TD;
|
|
A-->B;
|
|
A-->C;
|
|
A-->D;
|
|
B-->D;
|
|
A-->|Link text|B
|
|
</div>
|
|
<div class="mermaid">
|
|
graph TD;
|
|
sq[Square shape]-->ci((Circle shape));
|
|
od>Odd shape]---|Two line<br>edge comment|ro;
|
|
od2>Really long text in an Odd shape]-->od3>Really long text with linebreak<br>in an Odd shape];
|
|
di{Diamond is <br/> broken}-->ro(Rounded<br>square<br>shape);
|
|
di-->ro2(Rounded square shape);
|
|
%% Comments after double percent signs
|
|
e((Inner / circle))-->f(,.?!+-*ز);
|
|
cyr[Cyrillic]-->cyr2((Circle shape Начало));
|
|
A[Object foo,bar]-->B(Thing);
|
|
style e red;
|
|
</div>
|
|
<div class="mermaid2">
|
|
graph LR;
|
|
A(Central Message Router);
|
|
B(R TD);
|
|
C(XYZ);
|
|
D(S Writer);
|
|
A-->|R TD Router|B;
|
|
B-->C;
|
|
C-->|XYZ Router|D;
|
|
</div>
|
|
|
|
<h1>Sequence diagrams (experimental)</h1>
|
|
<pre>
|
|
sequenceDiagram
|
|
participant John the Long
|
|
Alice->Bob: Hello Bob, how are you?
|
|
Note left of Bob: Bob thinks
|
|
Bob-->Alice: I am good thanks!
|
|
Bob-->John the Long: How about you John?
|
|
Note left of John the Long: Bob thinks
|
|
Bob-->Alice: Checking with John...
|
|
|
|
loop Multiple status checks
|
|
loog Naging
|
|
Alice->John the Long: Yes... John, how are you?
|
|
end
|
|
John the Long-->Alice: Better then you!
|
|
end
|
|
</pre>
|
|
<div class="mermaid2">
|
|
sequenceDiagram
|
|
participant Alice
|
|
Note left of Alice: Bob thinks about <br/> things <br/> to think about
|
|
</div>
|
|
<div class="mermaid">
|
|
sequenceDiagram
|
|
participant Alice
|
|
participant Bob
|
|
participant John
|
|
Alice->>Bob: Hello Bob, how are you?
|
|
Note left of Alice: Bob thinks about <br/> things <br/> to think about
|
|
Bob-->>Alice: I am good thanks!
|
|
loop Multiple status checks
|
|
Bob--xJohn: How about you John?
|
|
Note right of John: Bob thinks
|
|
end
|
|
|
|
Bob--xAlice: Checking with John...
|
|
Alice->John the Long: Yes... John, how are you?
|
|
John the Long-->Alice: Better then you!!
|
|
|
|
</div>
|
|
|
|
<div class="mermaid">
|
|
graph LR;
|
|
A[Start]-->B{a = '1,2'}
|
|
B-->|True|C[test = 1]
|
|
B-->|False|Z[Store]
|
|
C-->D{condition};
|
|
D-->|True|E[test = 2];
|
|
D-->|False|F[test = 3];
|
|
E-->G{condition2 = ''};
|
|
F-->G;
|
|
G-->|True|H[test = 4];
|
|
G-->|False|I[test = 5];
|
|
H-->J{condition3};
|
|
I-->J;
|
|
J-->|True|K[test = 6];
|
|
J-->|False|L;
|
|
K-->L[Print];
|
|
L-->M[Any Action];
|
|
M-->N[Any Other Action];
|
|
N-->Z;
|
|
|
|
</div>
|
|
<h1>Dot syntax (experimental)</h1>
|
|
<pre>
|
|
digraph
|
|
{
|
|
a -> b -> c -- d -> e;
|
|
a -- e;
|
|
}
|
|
</pre>
|
|
<div class="mermaid2">
|
|
digraph
|
|
{
|
|
a -> b -> c -- d -> e;
|
|
a -- e;
|
|
}
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|