mermaid
Version:
Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams and gantt charts.
132 lines (114 loc) • 4.71 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<script src="./dist/mermaid.js"></script>
<link rel="stylesheet" href="seq.css"/>
<script>
mermaid.initialize({
sequenceDiagram:{
mirrorActors:false,
height:35,
topPadding:125,
useMaxWidth:false
},
logLevel:1
});
//mermaid.sequenceConfig = '{"diagramMarginX":50,"diagramMarginY":10,"actorMargin":50,"width":150,"height":45,"boxMargin":10,"boxTextMargin":5,"noteMargin":10,"messageMargin":35, "mirrorActors":true}';
//mermaid.sequenceConfig = JSON.parse('{"diagramMarginX":50,"diagramMarginY":10,"actorMargin":50,"width":150,"height":165,"boxMargin":10,"boxTextMargin":5,"noteMargin":10,"messageMargin":35}');
</script>
<script>
function apa(){
console.log('CLICKED');
}
</script>
</head>
<body>
<h1>Autowrap</h1>
<div class="mermaid">
sequenceDiagram
Merchant->>Customer: "foo#b"
Note left of Person:One row for the a
Note right of Person: Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row.
Person-->>Customer: bar
Note left of Person: Foo checks up on him
</div>
<div class="mermaid">
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--xAlice: I am good thanks!
Bob-xJohn: I am good thanks!
Note right of John: Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row. Bob thinks a long long time, so long that the text does not fit In a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
</div>
<h1>No line breaks</h1>
<div class="mermaid">
sequenceDiagram;Alice->>Bob: Hello Bob, how are you?;Bob-->Bob: Hmmm?;Bob-->Alice: Ok;
</div>
<div class="mermaid">
sequenceDiagram;loop Daily query;Alice->>Bob: Hello Bob, how are you?;alt is sick;Bob->>Alice: Not so good :(;else is well;Bob->>Alice: Feeling fresh like a daisy;end;opt Extra response;Bob->>Alice: Thanks for asking;end;end;
</div>
<h1>Message types</h1>
<div class="mermaid">
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--xAlice: I am good thanks!
Bob-xJohn: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
</div>
<h1>Loops, alt and opt</h1>
<div class="mermaid">
sequenceDiagram
loop Daily query
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
end
</div>
<h1>Message to self in loop</h1>
<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>
<h1>Bounding test & async message to self</h1>
<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-xBob: 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: Super!
</div>
<br/>
</body>
</html>