collab/mermaid/demos/sequence.htmlblame
View source
6dd74de1<!doctype html>
6dd74de2<html lang="en">
6dd74de3 <head>
6dd74de4 <meta charset="utf-8" />
6dd74de5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6dd74de6 <title>Mermaid Quick Test Page</title>
6dd74de7 <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
6dd74de8 <style>
6dd74de9 div.mermaid {
6dd74de10 /* font-family: 'trebuchet ms', verdana, arial; */
6dd74de11 font-family: 'Courier New', Courier, monospace !important;
6dd74de12 }
6dd74de13 </style>
6dd74de14 </head>
6dd74de15
6dd74de16 <body>
6dd74de17 <h1>Sequence diagram demos</h1>
6dd74de18 <pre class="mermaid">
6dd74de19 sequenceDiagram
6dd74de20 accTitle: test the accTitle
6dd74de21 accDescr: Test a description
6dd74de22
6dd74de23 participant Alice
6dd74de24 participant Bob
6dd74de25 participant John as John<br />Second Line
6dd74de26 link Alice: Dashboard @ https://dashboard.contoso.com/alice
6dd74de27 link Alice: Wiki @ https://wiki.contoso.com/alice
6dd74de28 link John: Dashboard @ https://dashboard.contoso.com/john
6dd74de29 link John: Wiki @ https://wiki.contoso.com/john
6dd74de30 autonumber 10 10
6dd74de31 rect rgb(200, 220, 100)
6dd74de32 rect rgb(200, 255, 200)
6dd74de33
6dd74de34 Alice ->> Bob: Hello Bob, how are you?
6dd74de35 Bob-->>John: How about you John?
6dd74de36 end
6dd74de37
6dd74de38 Bob--x Alice: I am good thanks!
6dd74de39 Bob-x John: I am good thanks!
6dd74de40 Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.
6dd74de41
6dd74de42 Bob-->Alice: Checking with John...
6dd74de43 Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
6dd74de44 Bob-x John: Hey John - we're still waiting to know<br />how you're doing
6dd74de45 Note over John:nowrap: John's trying hard not to break his train of thought.
6dd74de46 Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
6dd74de47 Note over John: After a few more moments, John<br />finally snaps out of it.
6dd74de48 end
6dd74de49
6dd74de50 autonumber off
6dd74de51 alt either this
6dd74de52 Alice->>+John: Yes
6dd74de53 John-->>-Alice: OK
6dd74de54 else or this
6dd74de55 autonumber
6dd74de56 Alice->>John: No
6dd74de57 else or this will happen
6dd74de58 Alice->John: Maybe
6dd74de59 end
6dd74de60 autonumber 200
6dd74de61 par this happens in parallel
6dd74de62 Alice -->> Bob: Parallel message 1
6dd74de63 and
6dd74de64 Alice -->> John: Parallel message 2
6dd74de65 end
6dd74de66 </pre>
6dd74de67 <hr />
6dd74de68 <pre class="mermaid">
6dd74de69 ---
6dd74de70 title: With forced menus
6dd74de71 config:
6dd74de72 sequence:
6dd74de73 forceMenus: true
6dd74de74 ---
6dd74de75 sequenceDiagram
6dd74de76 participant Alice
6dd74de77 participant John
6dd74de78 link Alice: Dashboard @ https://dashboard.contoso.com/alice
6dd74de79 link Alice: Wiki @ https://wiki.contoso.com/alice
6dd74de80 link John: Dashboard @ https://dashboard.contoso.com/john
6dd74de81 link John: Wiki @ https://wiki.contoso.com/john
6dd74de82 Alice->>John: Hello John, how are you?
6dd74de83 John-->>Alice: Great!
6dd74de84 Alice-)John: See you later!
6dd74de85 </pre
6dd74de86 >
6dd74de87 <hr />
6dd74de88 <pre class="mermaid">
6dd74de89 sequenceDiagram
6dd74de90 accTitle: Sequence diagram title is here
6dd74de91 accDescr: Hello friends
6dd74de92
6dd74de93 participant Alice
6dd74de94 participant Bob
6dd74de95 participant John as John<br />Second Line
6dd74de96 rect rgb(200, 220, 100)
6dd74de97 rect rgb(200, 255, 200)
6dd74de98 Alice ->> Bob: Hello Bob, how are you?
6dd74de99 Bob-->>John: How about you John?
6dd74de100 end
6dd74de101 Bob--x Alice: I am good thanks!
6dd74de102 Bob-x John: I am good thanks!
6dd74de103 Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.
6dd74de104 Bob-->Alice: Checking with John...
6dd74de105 Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
6dd74de106 Bob-x John: Hey John - we're still waiting to know<br />how you're doing
6dd74de107 Note over John:nowrap: John's trying hard not to break his train of thought.
6dd74de108 Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
6dd74de109 Note over John: After a few more moments, John<br />finally snaps out of it.
6dd74de110 end
6dd74de111 alt either this
6dd74de112 Alice->>John: Yes
6dd74de113 else or this
6dd74de114 Alice->>John: No
6dd74de115 else or this will happen
6dd74de116 Alice->John: Maybe
6dd74de117 end
6dd74de118 par this happens in parallel
6dd74de119 Alice -->> Bob: Parallel message 1
6dd74de120 and
6dd74de121 Alice -->> John: Parallel message 2
6dd74de122 end
6dd74de123 </pre>
6dd74de124 <hr />
6dd74de125
6dd74de126 <pre class="mermaid">
6dd74de127 sequenceDiagram
6dd74de128 participant 1 as multiline<br>using #lt;br#gt;
6dd74de129 participant 2 as multiline<br />using #lt;br/#gt;
6dd74de130 participant 3 as multiline<br />using #lt;br /#gt;
6dd74de131 participant 4 as multiline<br />using #lt;br /#gt;
6dd74de132 1->>2: multiline<br>using #lt;br#gt;
6dd74de133 note right of 2: multiline<br>using #lt;br#gt;
6dd74de134 2->>3: multiline<br />using #lt;br/#gt;
6dd74de135 note right of 3: multiline<br />using #lt;br/#gt;
6dd74de136 3->>4: multiline<br />using #lt;br /#gt;
6dd74de137 note right of 4: multiline<br />using #lt;br /#gt;
6dd74de138 4->>1: multiline<br />using #lt;br /#gt;
6dd74de139 note right of 1: multiline<br />using #lt;br /#gt;
6dd74de140 </pre>
6dd74de141 <hr />
6dd74de142
6dd74de143 <pre class="mermaid">
6dd74de144 sequenceDiagram
6dd74de145 autonumber
6dd74de146 Alice->>John: Hello John,<br>how are you?
6dd74de147 autonumber 50 10
6dd74de148 Alice->>John: John,<br />can you hear me?
6dd74de149 John-->>Alice: Hi Alice,<br />I can hear you!
6dd74de150 autonumber off
6dd74de151 John-->>Alice: I feel great!
6dd74de152 </pre>
6dd74de153 <hr />
6dd74de154
6dd74de155 <pre class="mermaid">
6dd74de156 sequenceDiagram
6dd74de157 box lightgreen Alice & John
6dd74de158 participant A
6dd74de159 participant J
6dd74de160 end
6dd74de161 box Another Group very very long description not wrapped
6dd74de162 participant B
6dd74de163 end
6dd74de164 A->>J: Hello John, how are you?
6dd74de165 J->>A: Great!
6dd74de166 A->>B: Hello Bob, how are you ?
6dd74de167 </pre
6dd74de168 >
6dd74de169 <hr />
6dd74de170
6dd74de171 <pre class="mermaid">
6dd74de172 sequenceDiagram
6dd74de173 participant Alice
6dd74de174 participant Bob
6dd74de175 participant John
6dd74de176 par_over Section title
6dd74de177 Alice ->> Bob: Message 1<br>Second line
6dd74de178 Bob ->> John: Message 2
6dd74de179 end
6dd74de180 par_over Two line<br>section title
6dd74de181 Note over Alice: Alice note
6dd74de182 Note over Bob: Bob note<br>Second line
6dd74de183 Note over John: John note
6dd74de184 end
6dd74de185 par_over Mixed section
6dd74de186 Alice ->> Bob: Message 1
6dd74de187 Note left of Bob: Alice/Bob Note
6dd74de188 end
6dd74de189 </pre>
6dd74de190 <pre class="mermaid">
6dd74de191 sequenceDiagram
6dd74de192 actor Alice
6dd74de193 actor John
6dd74de194 Alice-xJohn: Hello John, how are you?
6dd74de195 John--xAlice: Great!
6dd74de196 </pre>
6dd74de197
6dd74de198 <hr />
6dd74de199
6dd74de200 <pre class="mermaid">
6dd74de201 sequenceDiagram
6dd74de202 participant 1 as $$\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}$$
6dd74de203 participant 2 as $$\beta$$
6dd74de204 participant 3 as $$\delta$$
6dd74de205 participant 4 as $$\frac{\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}}{\frac{\text{d}}{\text{d}x}{x^2}}$$
6dd74de206 1->>2: $$\sqrt{2}$$
6dd74de207 note right of 2: $$\frac{1+\frac{1+\frac{1+\frac{1}{2}}{2}}{2}}{2}+\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
6dd74de208 2->>3: $$\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}$$
6dd74de209 note right of 3: $$\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
6dd74de210 3->>4: $$\lim_{x\rightarrow0}{\frac{1}{x}}$$;
6dd74de211 note right of 4: multiline
6dd74de212 4->>1: multiline<br />using #lt;br /#gt;
6dd74de213 note right of 1: multiline<br />$$\frac{1}{2}$$<br />3rd line
6dd74de214 </pre>
6dd74de215 <hr />
6dd74de216 <pre class="mermaid">
6dd74de217 sequenceDiagram
6dd74de218 autonumber
6dd74de219 participant 1 as $$\alpha$$lex
6dd74de220 participant 2 as $$\beta$$ob
6dd74de221 participant 3 as $$\theta$$iffany
6dd74de222 1->>2: Hello John, does&nbsp; $$\frac{1}{2}+1=2$$?
6dd74de223 loop $$\frac{1}{2}+1=2$$
6dd74de224 2->>2: $$\frac{1}{2}+1=\frac{3}{2}$$
6dd74de225 end
6dd74de226 Note right of 2: $$x = \begin{cases} 1 &\text{if } \frac{1}{2}+1=2 \\ 0 &\text{if } \frac{1}{2}+1\ne2 \end{cases}$$
6dd74de227 2-->>1: $$\frac{1}{2}+1\ne2\implies 1$$
6dd74de228 2->>3: $$\frac{\text{d}}{\text{d}x}{3x^2+2x+1}$$
6dd74de229 3-->>2: $$6x+2$$
6dd74de230 </pre>
6dd74de231
6dd74de232 <hr />
6dd74de233
6dd74de234 <pre class="mermaid">
6dd74de235 sequenceDiagram
6dd74de236 actor Alice
6dd74de237 actor John
6dd74de238 Alice-xJohn: Hello John, how are you?
6dd74de239 John--xAlice: Great!
6dd74de240 </pre>
6dd74de241
6dd74de242 <hr />
6dd74de243
6dd74de244 <pre class="mermaid">
6dd74de245 sequenceDiagram
6dd74de246 participant Alice
6dd74de247 participant Bob
6dd74de248 Alice<<->>Bob: Hello!
6dd74de249 Alice<<->>Bob: Wow, we said that at the same time!
6dd74de250 Bob<<-->>Alice: Bidirectional Arrows are so cool
6dd74de251 </pre>
6dd74de252 <script type="module">
6dd74de253 import mermaid from './mermaid.esm.mjs';
6dd74de254 mermaid.initialize({
6dd74de255 theme: 'base',
6dd74de256 // themeCSS: '.node rect { fill: red; }',
6dd74de257 logLevel: 3,
6dd74de258 securityLevel: 'loose',
6dd74de259 flowchart: { curve: 'basis' },
6dd74de260 gantt: { axisFormat: '%m/%d/%Y' },
6dd74de261 sequence: { actorMargin: 50 },
6dd74de262 // sequenceDiagram: { actorMargin: 300 } // deprecated
6dd74de263 });
6dd74de264 </script>
6dd74de265 </body>
6dd74de266</html>