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