mermaid/test/web.html

273 lines
7.1 KiB
HTML
Raw Normal View History

2014-11-13 19:53:31 +01:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
2014-11-13 19:53:31 +01:00
2015-10-19 22:08:17 +02:00
<script src="../dist/mermaid.min.js"></script>
<script>
var config = {
2015-09-26 13:00:30 +02:00
startOnLoad:true,
callback:function(id){
console.log(id,' rendered');
},
flowchart:{
useMaxWidth:false,
htmlLabels:true
}
};
mermaid.initialize(config);
</script>
<script>
2015-06-14 14:46:01 +02:00
function coolAction(){
2015-07-15 11:59:01 +02:00
console.log('Got callback in user defined function');
}
</script>
2015-01-07 21:02:58 +01:00
<style>
.cluster {
fill: #fcac93;
rx:4px;
stroke: grey;
}
</style>
2015-06-14 09:51:42 +02:00
<lnk rel="stylesheet" href="seq.css"/>
2015-06-21 17:26:19 +02:00
<lnk rel="stylesheet" href="https://raw.githubusercontent.com/knsv/mermaid/master/dist/mermaid.fores.css"/>
<link rel="stylesheet" href="../dist/mermaid.forest.css"/>
2014-11-13 19:53:31 +01:00
</head>
<body>
<h1>Issue 141!!!</h1>
2015-09-26 13:00:30 +02:00
<div style="width:200px">
<div class="mermaid" id="i141">
graph LR
%% Example diagram
2015-10-04 23:09:00 +02:00
A[Square Rect] -- Link text --> B((Circle));
A --> C(Round Rect)
2015-06-14 14:46:01 +02:00
click A coolAction
B --> D{Rhombus}
C --> D
2015-06-14 09:51:42 +02:00
A("test(vcc) a a ") --> B;
2015-09-26 13:00:30 +02:00
snda
2015-06-14 14:46:01 +02:00
2015-09-26 13:00:30 +02:00
</div>
</div>
<h1>Issue 140</h1>
<div class="mermaid" id="i140">
graph LR
A-->B
B-->C
C-->A
D-->C
</div>
2015-09-26 13:00:30 +02:00
</div>
<div class="mermaid" id="ettan">
graph LR;
A[Now with default style on links]--v-->B{a = '1,2'}
B-->|v|C[v]
B-- ... default style on links -->Z[My default thing this]
C-->D{condition};
linkStyle 0 stroke-width:2px,fill:none,stroke:blue;
linkStyle default stroke-width:2px,fill:none,stroke:red;
</div>
2015-02-08 20:07:15 +01:00
<h1>Issue 2</h1>
<div class="mermaid">
graph LR
2015-02-15 18:11:46 +01:00
A[Square Rect] -- Link text --> B((Circle))
A[Square Rect]--v-->D((Circle))
2015-02-08 20:07:15 +01:00
A --> C(Round Rect)
2015-02-15 18:11:46 +01:00
B == testing ==> D{Rhombus}
2015-02-15 19:34:18 +01:00
C-.->D
2015-02-08 20:07:15 +01:00
</div>
<h1>Issue </h1>
<div class="mermaid">
graph TD
question1{Gas tank less than 1/8?}
action1[Fill tank to 100%]
question1-- Yes -->action1
</div>
<h1>Shapes</h1>
<div class="mermaid">
graph TD;
A[Default style on nodes]-->B;
A-->C;
A-->D;
B-->D;
A-->|Link text|B
classDef default fill:#f96,stroke:#333,stroke-width:2px;
2015-01-07 21:02:58 +01:00
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
2015-01-14 00:06:14 +01:00
class B green;
</div>
2015-01-07 21:02:58 +01:00
<h1>Sub graphs</h1>
2015-01-11 15:02:35 +01:00
<div class="mermaid">graph LR
subgraph old sys 1
a1(new client)-->b1(sys1 server)
oc1(Old client)-->b2
end
subgraph old sys 2
a2(new client)-->b2(sys2 server)
oc2(Old client)-->b2
end
subgraph old sys 3
a3(new client)-->b3(sys3 server)
end
subgraph New sys
a1
a2
a3
end
</div>
2015-03-22 18:36:17 +01:00
<div class="mermaid">graph TB
subgraph one
a1-->a2
end
</div>
<div class="mermaid">graph TB
2015-01-10 19:23:57 +01:00
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
c1-->a2
</div>
<div class="mermaid" >graph TB
2015-01-07 21:02:58 +01:00
subgraph
sq[Square shape] -.-> ci((Circle shape))
od>Odd shape]-. Two line<br>edge comment .-> ro
di{Diamond with <br/> line break} ==> ro(Rounded<br>square<br>shape)
2015-01-07 21:02:58 +01:00
di-->ro2(Rounded square shape)
end
%% Notice that no text in shape are added here instead that is appended further down
2015-01-10 19:23:57 +01:00
subgraph Go go
2015-01-07 21:02:58 +01:00
e --> od3>Really long text with linebreak<br>in an Odd shape]
e((Inner / circle<br>and some odd <br>special characters)) --> f(,.?!+-*ز)
cyr[Cyrillic]-->cyr2((Circle shape Начало))
end
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
classDef orange fill:#f96,stroke:#333,stroke-width:4px,font-size:50%,font-style:bold;
2015-01-07 21:02:58 +01:00
class sq,e green
class di orange
</div>
2015-10-04 23:09:00 +02:00
<div class="mermaid">
2015-01-07 21:02:58 +01:00
graph TB
2015-10-04 23:09:00 +02:00
subgraph f
2015-01-07 21:02:58 +01:00
sq[Square shape]-->ci((Circle shape))
od>Odd shape]---|Two line<br>edge comment|ro
end
subgraph
2015-10-04 23:09:00 +02:00
od2>Really long text in an Odd shape]-->od3>Really long text with linebreak<br>in an Odd shape]
di{Diamond is broken}-->ro(Rounded squar shape);
2015-01-07 21:02:58 +01:00
di-->ro2(Rounded square shape)
end
2015-10-04 23:09:00 +02:00
</div>
2015-10-04 23:09:00 +02:00
<div class="mermaid">
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>
2014-12-04 17:58:05 +01:00
<h1>Sequence diagrams (experimental)</h1>
<pre>
sequenceDiagram
participant John the Long
2014-12-04 17:58:05 +01:00
Alice->Bob: Hello Bob, how are you?
Note left of Bob: Bob thinks
2014-12-04 17:58:05 +01:00
Bob-->Alice: I am good thanks!
Bob-->John the Long: How about you John?
Note left of John the Long: Bob thinks
2014-12-04 17:58:05 +01:00
Bob-->Alice: Checking with John...
loop Multiple status checks
loog Naging
2014-12-04 17:58:05 +01:00
Alice->John the Long: Yes... John, how are you?
end
2014-12-04 17:58:05 +01:00
John the Long-->Alice: Better then you!
end
2014-12-04 17:58:05 +01:00
</pre>
<div class="mermaid2">
2014-12-04 17:58:05 +01:00
sequenceDiagram
participant Alice
Note left of Alice: Bob thinks about <br/> things <br/> to think about
</div>
2015-01-07 21:02:58 +01:00
<div class="mermaid2">
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...
2014-12-04 17:58:05 +01:00
Alice->John the Long: Yes... John, how are you?
John the Long-->Alice: Better then you!!
2014-12-04 17:58:05 +01:00
</div>
2015-01-20 19:53:38 +01:00
<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;
2015-01-20 19:53:38 +01:00
linkStyle 11 stroke-width:2px,fill:none,stroke:red;
</div>
2014-12-04 17:58:05 +01:00
<h1>Dot syntax (experimental)</h1>
<pre>
digraph
{
a -> b -> c -- d -> e;
a -- e;
}
</pre>
2015-06-21 17:26:19 +02:00
<div class="mermaid">
2014-12-04 17:58:05 +01:00
digraph
{
a -> b -> c -- d -> e;
a -- e;
}
</div>
2014-11-13 19:53:31 +01:00
</body>
2014-12-02 18:36:16 +01:00
</html>