8.6 KB475 lines
Blame
1> **Warning**
2>
3> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
4>
5> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/zenuml.md](../../packages/mermaid/src/docs/syntax/zenuml.md).
6
7# ZenUML
8
9> A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.
10
11Mermaid can render sequence diagrams with [ZenUML](https://zenuml.com). Note that ZenUML uses a different
12syntax than the original Sequence Diagram in mermaid.
13
14```mermaid-example
15zenuml
16 title Demo
17 Alice->John: Hello John, how are you?
18 John->Alice: Great!
19 Alice->John: See you later!
20```
21
22```mermaid
23zenuml
24 title Demo
25 Alice->John: Hello John, how are you?
26 John->Alice: Great!
27 Alice->John: See you later!
28```
29
30## Syntax
31
32### Participants
33
34The participants can be defined implicitly as in the first example on this page. The participants or actors are
35rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a
36different order than how they appear in the first message. It is possible to specify the actor's order of
37appearance by doing the following:
38
39```mermaid-example
40zenuml
41 title Declare participant (optional)
42 Bob
43 Alice
44 Alice->Bob: Hi Bob
45 Bob->Alice: Hi Alice
46```
47
48```mermaid
49zenuml
50 title Declare participant (optional)
51 Bob
52 Alice
53 Alice->Bob: Hi Bob
54 Bob->Alice: Hi Alice
55```
56
57### Annotators
58
59If you specifically want to use symbols instead of just rectangles with text you can do so by using the annotator syntax to declare participants as per below.
60
61```mermaid-example
62zenuml
63 title Annotators
64 @Actor Alice
65 @Database Bob
66 Alice->Bob: Hi Bob
67 Bob->Alice: Hi Alice
68```
69
70```mermaid
71zenuml
72 title Annotators
73 @Actor Alice
74 @Database Bob
75 Alice->Bob: Hi Bob
76 Bob->Alice: Hi Alice
77```
78
79Here are the available annotators:
80![img.png](img/zenuml-participant-annotators.png)
81
82### Aliases
83
84The participants can have a convenient identifier and a descriptive label.
85
86```mermaid-example
87zenuml
88 title Aliases
89 A as Alice
90 J as John
91 A->J: Hello John, how are you?
92 J->A: Great!
93```
94
95```mermaid
96zenuml
97 title Aliases
98 A as Alice
99 J as John
100 A->J: Hello John, how are you?
101 J->A: Great!
102```
103
104## Messages
105
106Messages can be one of:
107
1081. Sync message
1092. Async message
1103. Creation message
1114. Reply message
112
113### Sync message
114
115You can think of a sync (blocking) method in a programming language.
116
117```mermaid-example
118zenuml
119 title Sync message
120 A.SyncMessage
121 A.SyncMessage(with, parameters) {
122 B.nestedSyncMessage()
123 }
124```
125
126```mermaid
127zenuml
128 title Sync message
129 A.SyncMessage
130 A.SyncMessage(with, parameters) {
131 B.nestedSyncMessage()
132 }
133```
134
135### Async message
136
137You can think of an async (non-blocking) method in a programming language.
138Fire an event and forget about it.
139
140```mermaid-example
141zenuml
142 title Async message
143 Alice->Bob: How are you?
144```
145
146```mermaid
147zenuml
148 title Async message
149 Alice->Bob: How are you?
150```
151
152### Creation message
153
154We use `new` keyword to create an object.
155
156```mermaid-example
157zenuml
158 new A1
159 new A2(with, parameters)
160```
161
162```mermaid
163zenuml
164 new A1
165 new A2(with, parameters)
166```
167
168### Reply message
169
170There are three ways to express a reply message:
171
172```mermaid-example
173zenuml
174 // 1. assign a variable from a sync message.
175 a = A.SyncMessage()
176
177 // 1.1. optionally give the variable a type
178 SomeType a = A.SyncMessage()
179
180 // 2. use return keyword
181 A.SyncMessage() {
182 return result
183 }
184
185 // 3. use @return or @reply annotator on an async message
186 @return
187 A->B: result
188```
189
190```mermaid
191zenuml
192 // 1. assign a variable from a sync message.
193 a = A.SyncMessage()
194
195 // 1.1. optionally give the variable a type
196 SomeType a = A.SyncMessage()
197
198 // 2. use return keyword
199 A.SyncMessage() {
200 return result
201 }
202
203 // 3. use @return or @reply annotator on an async message
204 @return
205 A->B: result
206```
207
208The third way `@return` is rarely used, but it is useful when you want to return to one level up.
209
210```mermaid-example
211zenuml
212 title Reply message
213 Client->A.method() {
214 B.method() {
215 if(condition) {
216 return x1
217 // return early
218 @return
219 A->Client: x11
220 }
221 }
222 return x2
223 }
224```
225
226```mermaid
227zenuml
228 title Reply message
229 Client->A.method() {
230 B.method() {
231 if(condition) {
232 return x1
233 // return early
234 @return
235 A->Client: x11
236 }
237 }
238 return x2
239 }
240```
241
242## Nesting
243
244Sync messages and Creation messages are naturally nestable with `{}`.
245
246```mermaid-example
247zenuml
248 A.method() {
249 B.nested_sync_method()
250 B->C: nested async message
251 }
252```
253
254```mermaid
255zenuml
256 A.method() {
257 B.nested_sync_method()
258 B->C: nested async message
259 }
260```
261
262## Comments
263
264It is possible to add comments to a sequence diagram with `// comment` syntax.
265Comments will be rendered above the messages or fragments. Comments on other places
266are ignored. Markdown is supported.
267
268See the example below:
269
270```mermaid-example
271zenuml
272 // a comment on a participant will not be rendered
273 BookService
274 // a comment on a message.
275 // **Markdown** is supported.
276 BookService.getBook()
277```
278
279```mermaid
280zenuml
281 // a comment on a participant will not be rendered
282 BookService
283 // a comment on a message.
284 // **Markdown** is supported.
285 BookService.getBook()
286```
287
288## Loops
289
290It is possible to express loops in a ZenUML diagram. This is done by any of the
291following notations:
292
2931. while
2942. for
2953. forEach, foreach
2964. loop
297
298```zenuml
299while(condition) {
300 ...statements...
301}
302```
303
304See the example below:
305
306```mermaid-example
307zenuml
308 Alice->John: Hello John, how are you?
309 while(true) {
310 John->Alice: Great!
311 }
312```
313
314```mermaid
315zenuml
316 Alice->John: Hello John, how are you?
317 while(true) {
318 John->Alice: Great!
319 }
320```
321
322## Alt
323
324It is possible to express alternative paths in a sequence diagram. This is done by the notation
325
326```zenuml
327if(condition1) {
328 ...statements...
329} else if(condition2) {
330 ...statements...
331} else {
332 ...statements...
333}
334```
335
336See the example below:
337
338```mermaid-example
339zenuml
340 Alice->Bob: Hello Bob, how are you?
341 if(is_sick) {
342 Bob->Alice: Not so good :(
343 } else {
344 Bob->Alice: Feeling fresh like a daisy
345 }
346```
347
348```mermaid
349zenuml
350 Alice->Bob: Hello Bob, how are you?
351 if(is_sick) {
352 Bob->Alice: Not so good :(
353 } else {
354 Bob->Alice: Feeling fresh like a daisy
355 }
356```
357
358## Opt
359
360It is possible to render an `opt` fragment. This is done by the notation
361
362```zenuml
363opt {
364 ...statements...
365}
366```
367
368See the example below:
369
370```mermaid-example
371zenuml
372 Alice->Bob: Hello Bob, how are you?
373 Bob->Alice: Not so good :(
374 opt {
375 Bob->Alice: Thanks for asking
376 }
377```
378
379```mermaid
380zenuml
381 Alice->Bob: Hello Bob, how are you?
382 Bob->Alice: Not so good :(
383 opt {
384 Bob->Alice: Thanks for asking
385 }
386```
387
388## Parallel
389
390It is possible to show actions that are happening in parallel.
391
392This is done by the notation
393
394```zenuml
395par {
396 statement1
397 statement2
398 statement3
399}
400```
401
402See the example below:
403
404```mermaid-example
405zenuml
406 par {
407 Alice->Bob: Hello guys!
408 Alice->John: Hello guys!
409 }
410```
411
412```mermaid
413zenuml
414 par {
415 Alice->Bob: Hello guys!
416 Alice->John: Hello guys!
417 }
418```
419
420## Try/Catch/Finally (Break)
421
422It is possible to indicate a stop of the sequence within the flow (usually used to model exceptions).
423
424This is done by the notation
425
426```
427try {
428 ...statements...
429} catch {
430 ...statements...
431} finally {
432 ...statements...
433}
434```
435
436See the example below:
437
438```mermaid-example
439zenuml
440 try {
441 Consumer->API: Book something
442 API->BookingService: Start booking process
443 } catch {
444 API->Consumer: show failure
445 } finally {
446 API->BookingService: rollback status
447 }
448```
449
450```mermaid
451zenuml
452 try {
453 Consumer->API: Book something
454 API->BookingService: Start booking process
455 } catch {
456 API->Consumer: show failure
457 } finally {
458 API->BookingService: rollback status
459 }
460```
461
462## Integrating with your library/website.
463
464Zenuml uses the experimental lazy loading & async rendering features which could change in the future.
465
466You can use this method to add mermaid including the zenuml diagram to a web page:
467
468```html
469<script type="module">
470 import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
471 import zenuml from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml@0.1.0/dist/mermaid-zenuml.esm.min.mjs';
472 await mermaid.registerExternalDiagrams([zenuml]);
473</script>
474```
475