2015-01-05 13:26:15 +01:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
2015-05-30 17:20:24 +02:00
< script src = "../dist/mermaid.js" > < / script >
2015-01-05 13:26:15 +01:00
< link rel = "stylesheet" href = "seq.css" / >
< script >
2015-07-17 23:13:40 +02:00
mermaid.initialize({
2015-09-26 13:00:30 +02:00
sequenceDiagram:{
mirrorActors:true,
height:35,
topPadding:125
}
2015-07-17 23:13:40 +02:00
});
2015-05-30 17:20:24 +02:00
//mermaid.sequenceConfig = '{"diagramMarginX":50,"diagramMarginY":10,"actorMargin":50,"width":150,"height":45,"boxMargin":10,"boxTextMargin":5,"noteMargin":10,"messageMargin":35, "mirrorActors":true}';
2015-01-25 14:24:58 +01:00
//mermaid.sequenceConfig = JSON.parse('{"diagramMarginX":50,"diagramMarginY":10,"actorMargin":50,"width":150,"height":165,"boxMargin":10,"boxTextMargin":5,"noteMargin":10,"messageMargin":35}');
2015-01-05 13:26:15 +01:00
< / script >
< script >
function apa(){
console.log('CLICKED');
}
< / script >
< / head >
< body >
2015-06-20 20:58:58 +02:00
< h1 > Autowrap< / h1 >
2015-09-26 13:00:30 +02:00
< div class = "mermaid" >
sequenceDiagram
Merchant->>Customer: foo
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 >
2015-06-20 20:58:58 +02:00
< 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 >
2015-01-06 19:33:00 +01:00
< h1 > No line breaks< / h1 >
< div class = "mermaid" >
2015-02-15 19:34:18 +01:00
sequenceDiagram;Alice->>Bob: Hello Bob, how are you?;Bob-->Bob: Hmmm?;Bob-->Alice: Ok;
2015-01-06 19:33:00 +01:00
< / 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 >
2015-01-05 13:26:15 +01:00
< h1 > Message types< / h1 >
2015-01-06 19:33:00 +01:00
2015-01-05 13:26:15 +01:00
< 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 >
