2015-01-05 13:26:15 +01:00
<!DOCTYPE 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
}
2015-01-25 16:39:34 +01:00
//mermaid.sequenceConfig = '{"diagramMarginX":50,"diagramMarginY":10,"actorMargin":50,"width":150,"height":45,"boxMargin":10,"boxTextMargin":5,"noteMargin":10,"messageMargin":35, "mirrorActors":false}';
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-01-06 19:33:00 +01:00
< h1 > No line breaks< / h1 >
< div class = "mermaid" >
2015-02-15 18:11:46 +01:00
sequenceDiagram;Alice->>Bob: Hello Bob, how are you?;Bob-->Bob: Hmmm?;Bob-->Alice: Ok will send l8r;
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 >
