2014-11-13 19:53:31 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
2014-11-27 09:00:25 +01:00
|
|
|
<meta charset="UTF-8">
|
2014-11-13 19:53:31 +01:00
|
|
|
|
2014-11-21 08:03:43 +01:00
|
|
|
<script src="../dist/mermaid.full.js"></script>
|
2014-11-25 22:58:57 +01:00
|
|
|
<script>
|
2014-11-21 08:03:43 +01:00
|
|
|
var mermaid_config = {
|
2014-11-22 10:02:38 +01:00
|
|
|
startOnLoad:true
|
2014-11-21 08:03:43 +01:00
|
|
|
}
|
2014-11-25 22:58:57 +01:00
|
|
|
</script>
|
2014-11-24 22:03:32 +01:00
|
|
|
<script>
|
|
|
|
function apa(){
|
|
|
|
console.log('CLICKED');
|
|
|
|
}
|
|
|
|
</script>
|
2014-11-13 19:53:31 +01:00
|
|
|
</head>
|
|
|
|
<body>
|
2014-11-27 19:34:35 +01:00
|
|
|
<div class="mermaid2">
|
2014-11-24 22:03:32 +01:00
|
|
|
sequence TB
|
|
|
|
apa:Apanhoppar
|
|
|
|
bapa:Server
|
|
|
|
chimp:Chimpansenhoppar
|
2014-11-22 10:02:38 +01:00
|
|
|
</div>
|
2014-11-27 19:34:35 +01:00
|
|
|
<div class="mermaid2">
|
2014-11-25 22:58:57 +01:00
|
|
|
graph TB;A(Astrid <br> b)-->B[Irene];
|
2014-11-16 10:35:18 +01:00
|
|
|
A-->C[Christer];
|
|
|
|
B-->D[Micke];
|
|
|
|
B-->E[Maria];
|
|
|
|
E-->F[Hjalte];
|
|
|
|
E-->G[Embla];
|
|
|
|
E-->J[Vidar];
|
|
|
|
E-->H[Bjarke];
|
|
|
|
E-->I[Ingvild];
|
2014-11-24 22:03:32 +01:00
|
|
|
click A apa;
|
2014-11-13 19:53:31 +01:00
|
|
|
</div>
|
2014-11-28 18:08:36 +01:00
|
|
|
<div class="mermaid2">
|
2014-11-15 21:28:26 +01:00
|
|
|
graph TD;
|
2014-11-27 19:34:35 +01:00
|
|
|
id1>This is the text in the box];
|
2014-11-13 19:53:31 +01:00
|
|
|
</div>
|
2014-11-27 09:00:25 +01:00
|
|
|
<h1>Shapes</h1>
|
2014-11-28 18:08:36 +01:00
|
|
|
<div class="mermaid">
|
2014-11-27 09:00:25 +01:00
|
|
|
graph TD;
|
2014-11-27 18:21:15 +01:00
|
|
|
sq[Square shape]-->ci((Circle shape));
|
2014-11-27 09:00:25 +01:00
|
|
|
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];
|
2014-11-27 18:21:15 +01:00
|
|
|
di{Diamond is <br/> broken}-->ro(Rounded<br>square<br>shape);
|
|
|
|
di-->ro2(Rounded square shape);
|
2014-11-28 18:08:36 +01:00
|
|
|
e((Inner circle))-->f;
|
2014-11-27 09:00:25 +01:00
|
|
|
style e red;
|
|
|
|
</div>
|
2014-11-22 10:02:38 +01:00
|
|
|
|
2014-11-13 19:53:31 +01:00
|
|
|
</body>
|
|
|
|
</html>
|