mermaid
Version:
Markdownish syntax for generating flowcharts
108 lines (98 loc) • 2.8 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<script src="/dist/mermaid.full.js"></script>
<link rel="stylesheet" href="seq.css"/>
<script>
var mermaid_config = {
startOnLoad:true
}
</script>
<script>
function apa(){
console.log('CLICKED');
}
</script>
</head>
<body>
<div class="mermaid2" style="display:none">
sequenceDiagram
participant Alice
Note left of Alice: Bob thinks about <br/> things <br/> to think about
</div>
<div class="mermaid2" style="display:none">
sequenceDiagram
participant Alice
Note right of Alice: Bob thinks about <br/> things <br/> to think about
</div>
<div class="mermaid2">
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
loop Outer loop
Note left of Alice: Bob thinks about
end
</div>
<div class="mermaid2">
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
loop Cheers
Bob->Alice: Fine!
end
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="mermaid">
sequenceDiagram
participant Alice
participant Bob
Alice->John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts<br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="mermaid">
sequenceDiagram
participant Alice
participant Bob
participant John the Long
Alice->Bob: Hello Bob, how are you?
loop Outer loop
Note left of Alice: Bob thinks about <br/> things <br/> to think about
Bob->Bob: I am good thanks!
loop Inner loop
Bob-->John the Long: How about you John?
Note right of John the Long: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit.
end
end
Bob-->Alice: Checking with John...
Alice->John the Long: Yes... John, how are you?
John the Long-->Alice: Better then you!
</div>
<br/>
<div class="mermaid2">
sequenceDiagram
Alice->Bob: Hello Bob, how are you?
Note left of Bob: Bob thinks about <br/> things <br/> to think about
Bob-->John the Long: How about you John?
Bob-->Alice: I am good thanks!
Note right of John the Long: Bob thinks
Bob-->Alice: Checking with John...
Alice->John the Long: Yes... John, how are you?
John the Long-->Alice: Better then you!
</div>
</body>
</html>