8.2 KB267 lines
Blame
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <title>Mermaid Quick Test Page</title>
7 <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
8 <style>
9 div.mermaid {
10 /* font-family: 'trebuchet ms', verdana, arial; */
11 font-family: 'Courier New', Courier, monospace !important;
12 }
13 </style>
14 </head>
15
16 <body>
17 <h1>Sequence diagram demos</h1>
18 <pre class="mermaid">
19 sequenceDiagram
20 accTitle: test the accTitle
21 accDescr: Test a description
22
23 participant Alice
24 participant Bob
25 participant John as John<br />Second Line
26 link Alice: Dashboard @ https://dashboard.contoso.com/alice
27 link Alice: Wiki @ https://wiki.contoso.com/alice
28 link John: Dashboard @ https://dashboard.contoso.com/john
29 link John: Wiki @ https://wiki.contoso.com/john
30 autonumber 10 10
31 rect rgb(200, 220, 100)
32 rect rgb(200, 255, 200)
33
34 Alice ->> Bob: Hello Bob, how are you?
35 Bob-->>John: How about you John?
36 end
37
38 Bob--x Alice: I am good thanks!
39 Bob-x John: I am good thanks!
40 Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.
41
42 Bob-->Alice: Checking with John...
43 Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
44 Bob-x John: Hey John - we're still waiting to know<br />how you're doing
45 Note over John:nowrap: John's trying hard not to break his train of thought.
46 Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
47 Note over John: After a few more moments, John<br />finally snaps out of it.
48 end
49
50 autonumber off
51 alt either this
52 Alice->>+John: Yes
53 John-->>-Alice: OK
54 else or this
55 autonumber
56 Alice->>John: No
57 else or this will happen
58 Alice->John: Maybe
59 end
60 autonumber 200
61 par this happens in parallel
62 Alice -->> Bob: Parallel message 1
63 and
64 Alice -->> John: Parallel message 2
65 end
66 </pre>
67 <hr />
68 <pre class="mermaid">
69 ---
70 title: With forced menus
71 config:
72 sequence:
73 forceMenus: true
74 ---
75 sequenceDiagram
76 participant Alice
77 participant John
78 link Alice: Dashboard @ https://dashboard.contoso.com/alice
79 link Alice: Wiki @ https://wiki.contoso.com/alice
80 link John: Dashboard @ https://dashboard.contoso.com/john
81 link John: Wiki @ https://wiki.contoso.com/john
82 Alice->>John: Hello John, how are you?
83 John-->>Alice: Great!
84 Alice-)John: See you later!
85 </pre
86 >
87 <hr />
88 <pre class="mermaid">
89 sequenceDiagram
90 accTitle: Sequence diagram title is here
91 accDescr: Hello friends
92
93 participant Alice
94 participant Bob
95 participant John as John<br />Second Line
96 rect rgb(200, 220, 100)
97 rect rgb(200, 255, 200)
98 Alice ->> Bob: Hello Bob, how are you?
99 Bob-->>John: How about you John?
100 end
101 Bob--x Alice: I am good thanks!
102 Bob-x John: I am good thanks!
103 Note right of John: John thinks a long<br />long time, so long<br />that the text does<br />not fit on a row.
104 Bob-->Alice: Checking with John...
105 Note over John:wrap: John looks like he's still thinking, so Bob prods him a bit.
106 Bob-x John: Hey John - we're still waiting to know<br />how you're doing
107 Note over John:nowrap: John's trying hard not to break his train of thought.
108 Bob-x John:wrap: John! Are you still debating about how you're doing? How long does it take??
109 Note over John: After a few more moments, John<br />finally snaps out of it.
110 end
111 alt either this
112 Alice->>John: Yes
113 else or this
114 Alice->>John: No
115 else or this will happen
116 Alice->John: Maybe
117 end
118 par this happens in parallel
119 Alice -->> Bob: Parallel message 1
120 and
121 Alice -->> John: Parallel message 2
122 end
123 </pre>
124 <hr />
125
126 <pre class="mermaid">
127 sequenceDiagram
128 participant 1 as multiline<br>using #lt;br#gt;
129 participant 2 as multiline<br />using #lt;br/#gt;
130 participant 3 as multiline<br />using #lt;br /#gt;
131 participant 4 as multiline<br />using #lt;br /#gt;
132 1->>2: multiline<br>using #lt;br#gt;
133 note right of 2: multiline<br>using #lt;br#gt;
134 2->>3: multiline<br />using #lt;br/#gt;
135 note right of 3: multiline<br />using #lt;br/#gt;
136 3->>4: multiline<br />using #lt;br /#gt;
137 note right of 4: multiline<br />using #lt;br /#gt;
138 4->>1: multiline<br />using #lt;br /#gt;
139 note right of 1: multiline<br />using #lt;br /#gt;
140 </pre>
141 <hr />
142
143 <pre class="mermaid">
144 sequenceDiagram
145 autonumber
146 Alice->>John: Hello John,<br>how are you?
147 autonumber 50 10
148 Alice->>John: John,<br />can you hear me?
149 John-->>Alice: Hi Alice,<br />I can hear you!
150 autonumber off
151 John-->>Alice: I feel great!
152 </pre>
153 <hr />
154
155 <pre class="mermaid">
156 sequenceDiagram
157 box lightgreen Alice & John
158 participant A
159 participant J
160 end
161 box Another Group very very long description not wrapped
162 participant B
163 end
164 A->>J: Hello John, how are you?
165 J->>A: Great!
166 A->>B: Hello Bob, how are you ?
167 </pre
168 >
169 <hr />
170
171 <pre class="mermaid">
172 sequenceDiagram
173 participant Alice
174 participant Bob
175 participant John
176 par_over Section title
177 Alice ->> Bob: Message 1<br>Second line
178 Bob ->> John: Message 2
179 end
180 par_over Two line<br>section title
181 Note over Alice: Alice note
182 Note over Bob: Bob note<br>Second line
183 Note over John: John note
184 end
185 par_over Mixed section
186 Alice ->> Bob: Message 1
187 Note left of Bob: Alice/Bob Note
188 end
189 </pre>
190 <pre class="mermaid">
191 sequenceDiagram
192 actor Alice
193 actor John
194 Alice-xJohn: Hello John, how are you?
195 John--xAlice: Great!
196 </pre>
197
198 <hr />
199
200 <pre class="mermaid">
201 sequenceDiagram
202 participant 1 as $$\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}$$
203 participant 2 as $$\beta$$
204 participant 3 as $$\delta$$
205 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}}$$
206 1->>2: $$\sqrt{2}$$
207 note right of 2: $$\frac{1+\frac{1+\frac{1+\frac{1}{2}}{2}}{2}}{2}+\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
208 2->>3: $$\frac{\lim_{x\rightarrow0}{\frac{1}{x}}}{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}$$
209 note right of 3: $$\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
210 3->>4: $$\lim_{x\rightarrow0}{\frac{1}{x}}$$;
211 note right of 4: multiline
212 4->>1: multiline<br />using #lt;br /#gt;
213 note right of 1: multiline<br />$$\frac{1}{2}$$<br />3rd line
214 </pre>
215 <hr />
216 <pre class="mermaid">
217 sequenceDiagram
218 autonumber
219 participant 1 as $$\alpha$$lex
220 participant 2 as $$\beta$$ob
221 participant 3 as $$\theta$$iffany
222 1->>2: Hello John, does&nbsp; $$\frac{1}{2}+1=2$$?
223 loop $$\frac{1}{2}+1=2$$
224 2->>2: $$\frac{1}{2}+1=\frac{3}{2}$$
225 end
226 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}$$
227 2-->>1: $$\frac{1}{2}+1\ne2\implies 1$$
228 2->>3: $$\frac{\text{d}}{\text{d}x}{3x^2+2x+1}$$
229 3-->>2: $$6x+2$$
230 </pre>
231
232 <hr />
233
234 <pre class="mermaid">
235 sequenceDiagram
236 actor Alice
237 actor John
238 Alice-xJohn: Hello John, how are you?
239 John--xAlice: Great!
240 </pre>
241
242 <hr />
243
244 <pre class="mermaid">
245 sequenceDiagram
246 participant Alice
247 participant Bob
248 Alice<<->>Bob: Hello!
249 Alice<<->>Bob: Wow, we said that at the same time!
250 Bob<<-->>Alice: Bidirectional Arrows are so cool
251 </pre>
252 <script type="module">
253 import mermaid from './mermaid.esm.mjs';
254 mermaid.initialize({
255 theme: 'base',
256 // themeCSS: '.node rect { fill: red; }',
257 logLevel: 3,
258 securityLevel: 'loose',
259 flowchart: { curve: 'basis' },
260 gantt: { axisFormat: '%m/%d/%Y' },
261 sequence: { actorMargin: 50 },
262 // sequenceDiagram: { actorMargin: 300 } // deprecated
263 });
264 </script>
265 </body>
266</html>
267