| 6dd74de | | | 1 | <html> |
| 6dd74de | | | 2 | |
| 6dd74de | | | 3 | <head> |
| 6dd74de | | | 4 | <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" /> |
| 6dd74de | | | 5 | <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> |
| 6dd74de | | | 6 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css" /> |
| 6dd74de | | | 7 | <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet" /> |
| 6dd74de | | | 8 | <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet" /> |
| 6dd74de | | | 9 | <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| 6dd74de | | | 10 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| 6dd74de | | | 11 | <link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap" rel="stylesheet" /> |
| 6dd74de | | | 12 | <link |
| 6dd74de | | | 13 | href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap" |
| 6dd74de | | | 14 | rel="stylesheet" /> |
| 6dd74de | | | 15 | <link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap" |
| 6dd74de | | | 16 | rel="stylesheet" /> |
| 6dd74de | | | 17 | |
| 6dd74de | | | 18 | <style> |
| 6dd74de | | | 19 | body { |
| 6dd74de | | | 20 | font-family: 'Arial'; |
| 6dd74de | | | 21 | } |
| 6dd74de | | | 22 | |
| 6dd74de | | | 23 | table { |
| 6dd74de | | | 24 | width: 100%; |
| 6dd74de | | | 25 | border-collapse: collapse; |
| 6dd74de | | | 26 | table-layout: fixed; |
| 6dd74de | | | 27 | } |
| 6dd74de | | | 28 | |
| 6dd74de | | | 29 | th, |
| 6dd74de | | | 30 | td { |
| 6dd74de | | | 31 | border: 1px solid black; |
| 6dd74de | | | 32 | padding: 10px; |
| 6dd74de | | | 33 | text-align: center; |
| 6dd74de | | | 34 | vertical-align: middle; |
| 6dd74de | | | 35 | } |
| 6dd74de | | | 36 | |
| 6dd74de | | | 37 | .separator { |
| 6dd74de | | | 38 | height: 20px; |
| 6dd74de | | | 39 | background-color: #f0f0f0; |
| 6dd74de | | | 40 | } |
| 6dd74de | | | 41 | |
| 6dd74de | | | 42 | .vertical-header { |
| 6dd74de | | | 43 | text-align: center; |
| 6dd74de | | | 44 | } |
| 6dd74de | | | 45 | |
| 6dd74de | | | 46 | .collapsible { |
| 6dd74de | | | 47 | background-color: #f9f9f9; |
| 6dd74de | | | 48 | color: #444; |
| 6dd74de | | | 49 | cursor: pointer; |
| 6dd74de | | | 50 | padding: 18px; |
| 6dd74de | | | 51 | width: 100%; |
| 6dd74de | | | 52 | border: none; |
| 6dd74de | | | 53 | text-align: left; |
| 6dd74de | | | 54 | outline: none; |
| 6dd74de | | | 55 | font-size: 15px; |
| 6dd74de | | | 56 | } |
| 6dd74de | | | 57 | |
| 6dd74de | | | 58 | .active, |
| 6dd74de | | | 59 | .collapsible:hover { |
| 6dd74de | | | 60 | background-color: #ccc; |
| 6dd74de | | | 61 | } |
| 6dd74de | | | 62 | |
| 6dd74de | | | 63 | .collapsible:after { |
| 6dd74de | | | 64 | content: '\002B'; |
| 6dd74de | | | 65 | color: #777; |
| 6dd74de | | | 66 | font-weight: bold; |
| 6dd74de | | | 67 | float: right; |
| 6dd74de | | | 68 | margin-left: 2px; |
| 6dd74de | | | 69 | } |
| 6dd74de | | | 70 | |
| 6dd74de | | | 71 | .active:after { |
| 6dd74de | | | 72 | content: "\2212"; |
| 6dd74de | | | 73 | } |
| 6dd74de | | | 74 | |
| 6dd74de | | | 75 | .content { |
| 6dd74de | | | 76 | padding: 0 5px; |
| 6dd74de | | | 77 | max-height: 0; |
| 6dd74de | | | 78 | overflow: hidden; |
| 6dd74de | | | 79 | transition: max-height 0.2s ease-out; |
| 6dd74de | | | 80 | background-color: #f1f1f1; |
| 6dd74de | | | 81 | } |
| 6dd74de | | | 82 | |
| 6dd74de | | | 83 | .content .pre-scrollable { |
| 6dd74de | | | 84 | max-height: 200px; |
| 6dd74de | | | 85 | overflow-y: scroll; |
| 6dd74de | | | 86 | } |
| 6dd74de | | | 87 | </style> |
| 6dd74de | | | 88 | </head> |
| 6dd74de | | | 89 | |
| 6dd74de | | | 90 | <body> |
| 6dd74de | | | 91 | <table> |
| 6dd74de | | | 92 | <tr> |
| 6dd74de | | | 93 | <th></th> <!-- Placeholder for the top left corner --> |
| 6dd74de | | | 94 | <th>Dagre</th> |
| 6dd74de | | | 95 | <th>Dagre with rough</th> |
| 6dd74de | | | 96 | <th>ELK</th> |
| 6dd74de | | | 97 | <th>ELK with rough</th> |
| 6dd74de | | | 98 | </tr> |
| 6dd74de | | | 99 | <tr> |
| 6dd74de | | | 100 | <th class="vertical-header"> |
| 6dd74de | | | 101 | <button class="collapsible">Simple State (only id)</button> |
| 6dd74de | | | 102 | <div class="content"> |
| 6dd74de | | | 103 | <div class="pre-scrollable"> |
| 6dd74de | | | 104 | <pre> |
| 6dd74de | | | 105 | stateId |
| 6dd74de | | | 106 | </pre> |
| 6dd74de | | | 107 | </div> |
| 6dd74de | | | 108 | </div> |
| 6dd74de | | | 109 | </th> |
| 6dd74de | | | 110 | <td> |
| 6dd74de | | | 111 | <pre id="diagram1" class="mermaid"> |
| 6dd74de | | | 112 | stateDiagram-v2 |
| 6dd74de | | | 113 | stateId |
| 6dd74de | | | 114 | </pre> |
| 6dd74de | | | 115 | </td> |
| 6dd74de | | | 116 | <td> |
| 6dd74de | | | 117 | <pre id="diagram2" class="mermaid"> |
| 6dd74de | | | 118 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 119 | stateDiagram-v2 |
| 6dd74de | | | 120 | stateId |
| 6dd74de | | | 121 | |
| 6dd74de | | | 122 | </pre> |
| 6dd74de | | | 123 | </td> |
| 6dd74de | | | 124 | <td> |
| 6dd74de | | | 125 | <pre id="diagram3" class="mermaid"> |
| 6dd74de | | | 126 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 127 | stateDiagram-v2 |
| 6dd74de | | | 128 | stateId |
| 6dd74de | | | 129 | |
| 6dd74de | | | 130 | </pre> |
| 6dd74de | | | 131 | </td> |
| 6dd74de | | | 132 | <td> |
| 6dd74de | | | 133 | <pre id="diagram4" class="mermaid"> |
| 6dd74de | | | 134 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 135 | stateDiagram-v2 |
| 6dd74de | | | 136 | stateId |
| 6dd74de | | | 137 | |
| 6dd74de | | | 138 | </pre> |
| 6dd74de | | | 139 | </td> |
| 6dd74de | | | 140 | </tr> |
| 6dd74de | | | 141 | <!-- Separator row --> |
| 6dd74de | | | 142 | <tr class="separator"> |
| 6dd74de | | | 143 | <td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 144 | </tr> |
| 6dd74de | | | 145 | <tr> |
| 6dd74de | | | 146 | <th class="vertical-header"> |
| 6dd74de | | | 147 | <button class="collapsible">State with description with `as` keyword</button> |
| 6dd74de | | | 148 | <div class="content"> |
| 6dd74de | | | 149 | <div class="pre-scrollable"> |
| 6dd74de | | | 150 | <pre> |
| 6dd74de | | | 151 | |
| 6dd74de | | | 152 | state "description text" as s2 |
| 6dd74de | | | 153 | </pre> |
| 6dd74de | | | 154 | </div> |
| 6dd74de | | | 155 | </div> |
| 6dd74de | | | 156 | </th> |
| 6dd74de | | | 157 | <td> |
| 6dd74de | | | 158 | <pre id="diagram1" class="mermaid"> |
| 6dd74de | | | 159 | stateDiagram-v2 |
| 6dd74de | | | 160 | state "This is a state description" as s2 |
| 6dd74de | | | 161 | </pre> |
| 6dd74de | | | 162 | </td> |
| 6dd74de | | | 163 | <td> |
| 6dd74de | | | 164 | <pre id="diagram2" class="mermaid"> |
| 6dd74de | | | 165 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 166 | stateDiagram-v2 |
| 6dd74de | | | 167 | state "This is a state description" as s3 |
| 6dd74de | | | 168 | </pre> |
| 6dd74de | | | 169 | </td> |
| 6dd74de | | | 170 | <td> |
| 6dd74de | | | 171 | <pre id="diagram3" class="mermaid"> |
| 6dd74de | | | 172 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 173 | stateDiagram-v2 |
| 6dd74de | | | 174 | state "This is a state description" as s4 |
| 6dd74de | | | 175 | </pre> |
| 6dd74de | | | 176 | </td> |
| 6dd74de | | | 177 | <td> |
| 6dd74de | | | 178 | <pre id="diagram4" class="mermaid"> |
| 6dd74de | | | 179 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 180 | stateDiagram-v2 |
| 6dd74de | | | 181 | state "This is a state description" as s5 |
| 6dd74de | | | 182 | </pre> |
| 6dd74de | | | 183 | </td> |
| 6dd74de | | | 184 | </tr> |
| 6dd74de | | | 185 | <!-- Separator row --> |
| 6dd74de | | | 186 | <tr class="separator"> |
| 6dd74de | | | 187 | <td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 188 | </tr> |
| 6dd74de | | | 189 | <tr> |
| 6dd74de | | | 190 | <th class="vertical-header"> |
| 6dd74de | | | 191 | <button class="collapsible">State with description with `:` syntax</button> |
| 6dd74de | | | 192 | <div class="content"> |
| 6dd74de | | | 193 | <div class="pre-scrollable"> |
| 6dd74de | | | 194 | <pre> |
| 6dd74de | | | 195 | |
| 6dd74de | | | 196 | s2 : description text |
| 6dd74de | | | 197 | </pre> |
| 6dd74de | | | 198 | </div> |
| 6dd74de | | | 199 | </div> |
| 6dd74de | | | 200 | </th> |
| 6dd74de | | | 201 | <td> |
| 6dd74de | | | 202 | <pre id="diagram1" class="mermaid"> |
| 6dd74de | | | 203 | stateDiagram-v2 |
| 6dd74de | | | 204 | s21 : This is a state description |
| 6dd74de | | | 205 | </pre> |
| 6dd74de | | | 206 | </td> |
| 6dd74de | | | 207 | <td> |
| 6dd74de | | | 208 | <pre id="diagram2" class="mermaid"> |
| 6dd74de | | | 209 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 210 | stateDiagram-v2 |
| 6dd74de | | | 211 | s22 : This is a state description |
| 6dd74de | | | 212 | |
| 6dd74de | | | 213 | </pre> |
| 6dd74de | | | 214 | </td> |
| 6dd74de | | | 215 | <td> |
| 6dd74de | | | 216 | <pre id="diagram3" class="mermaid"> |
| 6dd74de | | | 217 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 218 | stateDiagram-v2 |
| 6dd74de | | | 219 | s23 : This is a state description |
| 6dd74de | | | 220 | |
| 6dd74de | | | 221 | </pre> |
| 6dd74de | | | 222 | </td> |
| 6dd74de | | | 223 | <td> |
| 6dd74de | | | 224 | <pre id="diagram4" class="mermaid"> |
| 6dd74de | | | 225 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 226 | stateDiagram-v2 |
| 6dd74de | | | 227 | s24 : This is a state description |
| 6dd74de | | | 228 | |
| 6dd74de | | | 229 | </pre> |
| 6dd74de | | | 230 | </td> |
| 6dd74de | | | 231 | </tr> |
| 6dd74de | | | 232 | <!-- Separator row --> |
| 6dd74de | | | 233 | <tr class="separator"> |
| 6dd74de | | | 234 | <td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 235 | </tr> |
| 6dd74de | | | 236 | <tr> |
| 6dd74de | | | 237 | <th class="vertical-header"> |
| 6dd74de | | | 238 | <button class="collapsible"> |
| 6dd74de | | | 239 | State with transition |
| 6dd74de | | | 240 | </button> |
| 6dd74de | | | 241 | <div class="content"> |
| 6dd74de | | | 242 | <div class="pre-scrollable"> |
| 6dd74de | | | 243 | <pre> |
| 6dd74de | | | 244 | |
| 6dd74de | | | 245 | s1 --> s2 |
| 6dd74de | | | 246 | |
| 6dd74de | | | 247 | </pre> |
| 6dd74de | | | 248 | </div> |
| 6dd74de | | | 249 | </div> |
| 6dd74de | | | 250 | </th> |
| 6dd74de | | | 251 | <td> |
| 6dd74de | | | 252 | <pre id="diagram1" class="mermaid"> |
| 6dd74de | | | 253 | |
| 6dd74de | | | 254 | stateDiagram-v2 |
| 6dd74de | | | 255 | s31 --> s32 |
| 6dd74de | | | 256 | |
| 6dd74de | | | 257 | </pre> |
| 6dd74de | | | 258 | </td> |
| 6dd74de | | | 259 | <td> |
| 6dd74de | | | 260 | <pre id="diagram2" class="mermaid"> |
| 6dd74de | | | 261 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 262 | |
| 6dd74de | | | 263 | stateDiagram-v2 |
| 6dd74de | | | 264 | s41 --> s42 |
| 6dd74de | | | 265 | |
| 6dd74de | | | 266 | |
| 6dd74de | | | 267 | </pre> |
| 6dd74de | | | 268 | </td> |
| 6dd74de | | | 269 | <td> |
| 6dd74de | | | 270 | <pre id="diagram3" class="mermaid"> |
| 6dd74de | | | 271 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 272 | stateDiagram-v2 |
| 6dd74de | | | 273 | s51 --> s52 |
| 6dd74de | | | 274 | |
| 6dd74de | | | 275 | |
| 6dd74de | | | 276 | </pre> |
| 6dd74de | | | 277 | </td> |
| 6dd74de | | | 278 | <td> |
| 6dd74de | | | 279 | <pre id="diagram4" class="mermaid"> |
| 6dd74de | | | 280 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 281 | stateDiagram-v2 |
| 6dd74de | | | 282 | s61 --> s62 |
| 6dd74de | | | 283 | |
| 6dd74de | | | 284 | |
| 6dd74de | | | 285 | </pre> |
| 6dd74de | | | 286 | </td> |
| 6dd74de | | | 287 | </tr> |
| 6dd74de | | | 288 | <!-- Separator row --> |
| 6dd74de | | | 289 | <tr class="separator"> |
| 6dd74de | | | 290 | <td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 291 | </tr> |
| 6dd74de | | | 292 | |
| 6dd74de | | | 293 | </tr> |
| 6dd74de | | | 294 | <tr> |
| 6dd74de | | | 295 | <th class="vertical-header"> |
| 6dd74de | | | 296 | <button class="collapsible"> |
| 6dd74de | | | 297 | State transition with label |
| 6dd74de | | | 298 | </button> |
| 6dd74de | | | 299 | <div class="content"> |
| 6dd74de | | | 300 | <div class="pre-scrollable"> |
| 6dd74de | | | 301 | <pre> |
| 6dd74de | | | 302 | |
| 6dd74de | | | 303 | s1 --> s2: A transition |
| 6dd74de | | | 304 | |
| 6dd74de | | | 305 | </pre> |
| 6dd74de | | | 306 | </div> |
| 6dd74de | | | 307 | </div> |
| 6dd74de | | | 308 | </th> |
| 6dd74de | | | 309 | <td> |
| 6dd74de | | | 310 | <pre id="diagram1" class="mermaid"> |
| 6dd74de | | | 311 | |
| 6dd74de | | | 312 | stateDiagram-v2 |
| 6dd74de | | | 313 | a1 --> a2: A transition |
| 6dd74de | | | 314 | |
| 6dd74de | | | 315 | </pre> |
| 6dd74de | | | 316 | </td> |
| 6dd74de | | | 317 | <td> |
| 6dd74de | | | 318 | <pre id="diagram2" class="mermaid"> |
| 6dd74de | | | 319 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 320 | |
| 6dd74de | | | 321 | stateDiagram-v2 |
| 6dd74de | | | 322 | a3 --> a4: A transition |
| 6dd74de | | | 323 | |
| 6dd74de | | | 324 | |
| 6dd74de | | | 325 | </pre> |
| 6dd74de | | | 326 | </td> |
| 6dd74de | | | 327 | <td> |
| 6dd74de | | | 328 | <pre id="diagram3" class="mermaid"> |
| 6dd74de | | | 329 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 330 | stateDiagram-v2 |
| 6dd74de | | | 331 | a5 --> a6: A transition |
| 6dd74de | | | 332 | |
| 6dd74de | | | 333 | |
| 6dd74de | | | 334 | </pre> |
| 6dd74de | | | 335 | </td> |
| 6dd74de | | | 336 | <td> |
| 6dd74de | | | 337 | <pre id="diagram4" class="mermaid"> |
| 6dd74de | | | 338 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 339 | stateDiagram-v2 |
| 6dd74de | | | 340 | a7 --> a8: A transition |
| 6dd74de | | | 341 | |
| 6dd74de | | | 342 | |
| 6dd74de | | | 343 | </pre> |
| 6dd74de | | | 344 | </td> |
| 6dd74de | | | 345 | </tr> |
| 6dd74de | | | 346 | <!-- Separator row --> |
| 6dd74de | | | 347 | <tr class="separator"> |
| 6dd74de | | | 348 | <td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 349 | </tr> |
| 6dd74de | | | 350 | |
| 6dd74de | | | 351 | </tr> |
| 6dd74de | | | 352 | <tr> |
| 6dd74de | | | 353 | <th class="vertical-header"> |
| 6dd74de | | | 354 | <button class="collapsible"> |
| 6dd74de | | | 355 | Start & End |
| 6dd74de | | | 356 | </button> |
| 6dd74de | | | 357 | <div class="content"> |
| 6dd74de | | | 358 | <div class="pre-scrollable"> |
| 6dd74de | | | 359 | <pre> |
| 6dd74de | | | 360 | |
| 6dd74de | | | 361 | [*] --> test |
| 6dd74de | | | 362 | test --> [*] |
| 6dd74de | | | 363 | |
| 6dd74de | | | 364 | </pre> |
| 6dd74de | | | 365 | </div> |
| 6dd74de | | | 366 | </div> |
| 6dd74de | | | 367 | </th> |
| 6dd74de | | | 368 | <td> |
| 6dd74de | | | 369 | <pre id="diagram1" class="mermaid"> |
| 6dd74de | | | 370 | |
| 6dd74de | | | 371 | stateDiagram-v2 |
| 6dd74de | | | 372 | [*] --> test |
| 6dd74de | | | 373 | test --> [*] |
| 6dd74de | | | 374 | |
| 6dd74de | | | 375 | </pre> |
| 6dd74de | | | 376 | </td> |
| 6dd74de | | | 377 | <td> |
| 6dd74de | | | 378 | <pre id="diagram2" class="mermaid"> |
| 6dd74de | | | 379 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 380 | |
| 6dd74de | | | 381 | stateDiagram-v2 |
| 6dd74de | | | 382 | [*] --> test |
| 6dd74de | | | 383 | test --> [*] |
| 6dd74de | | | 384 | |
| 6dd74de | | | 385 | |
| 6dd74de | | | 386 | </pre> |
| 6dd74de | | | 387 | </td> |
| 6dd74de | | | 388 | <td> |
| 6dd74de | | | 389 | <pre id="diagram3" class="mermaid"> |
| 6dd74de | | | 390 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 391 | stateDiagram-v2 |
| 6dd74de | | | 392 | [*] --> test |
| 6dd74de | | | 393 | test --> [*] |
| 6dd74de | | | 394 | |
| 6dd74de | | | 395 | |
| 6dd74de | | | 396 | </pre> |
| 6dd74de | | | 397 | </td> |
| 6dd74de | | | 398 | <td> |
| 6dd74de | | | 399 | <pre id="diagram4" class="mermaid"> |
| 6dd74de | | | 400 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 401 | stateDiagram-v2 |
| 6dd74de | | | 402 | [*] --> test |
| 6dd74de | | | 403 | test --> [*] |
| 6dd74de | | | 404 | |
| 6dd74de | | | 405 | |
| 6dd74de | | | 406 | </pre> |
| 6dd74de | | | 407 | </td> |
| 6dd74de | | | 408 | </tr> |
| 6dd74de | | | 409 | <!-- Separator row --> |
| 6dd74de | | | 410 | <tr class="separator"> |
| 6dd74de | | | 411 | <td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 412 | </tr> |
| 6dd74de | | | 413 | |
| 6dd74de | | | 414 | </tr> |
| 6dd74de | | | 415 | <tr> |
| 6dd74de | | | 416 | <th class="vertical-header"> |
| 6dd74de | | | 417 | <button class="collapsible"> |
| 6dd74de | | | 418 | Composite state |
| 6dd74de | | | 419 | </button> |
| 6dd74de | | | 420 | <div class="content"> |
| 6dd74de | | | 421 | <div class="pre-scrollable"> |
| 6dd74de | | | 422 | <pre> |
| 6dd74de | | | 423 | |
| 6dd74de | | | 424 | [*] --> First |
| 6dd74de | | | 425 | state First { |
| 6dd74de | | | 426 | [*] --> second |
| 6dd74de | | | 427 | second --> [*] |
| 6dd74de | | | 428 | } |
| 6dd74de | | | 429 | |
| 6dd74de | | | 430 | </pre> |
| 6dd74de | | | 431 | </div> |
| 6dd74de | | | 432 | </div> |
| 6dd74de | | | 433 | </th> |
| 6dd74de | | | 434 | <td> |
| 6dd74de | | | 435 | <pre id="diagram1" class="mermaid"> |
| 6dd74de | | | 436 | |
| 6dd74de | | | 437 | stateDiagram-v2 |
| 6dd74de | | | 438 | [*] --> First |
| 6dd74de | | | 439 | state First { |
| 6dd74de | | | 440 | [*] --> second |
| 6dd74de | | | 441 | second --> [*] |
| 6dd74de | | | 442 | } |
| 6dd74de | | | 443 | |
| 6dd74de | | | 444 | </pre> |
| 6dd74de | | | 445 | </td> |
| 6dd74de | | | 446 | <td> |
| 6dd74de | | | 447 | <pre id="diagram2" class="mermaid"> |
| 6dd74de | | | 448 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 449 | |
| 6dd74de | | | 450 | stateDiagram-v2 |
| 6dd74de | | | 451 | [*] --> First |
| 6dd74de | | | 452 | state First { |
| 6dd74de | | | 453 | [*] --> second |
| 6dd74de | | | 454 | second --> [*] |
| 6dd74de | | | 455 | } |
| 6dd74de | | | 456 | |
| 6dd74de | | | 457 | |
| 6dd74de | | | 458 | </pre> |
| 6dd74de | | | 459 | </td> |
| 6dd74de | | | 460 | <td> |
| 6dd74de | | | 461 | <pre id="diagram3" class="mermaid"> |
| 6dd74de | | | 462 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 463 | stateDiagram-v2 |
| 6dd74de | | | 464 | [*] --> First |
| 6dd74de | | | 465 | state First { |
| 6dd74de | | | 466 | [*] --> second |
| 6dd74de | | | 467 | second --> [*] |
| 6dd74de | | | 468 | } |
| 6dd74de | | | 469 | |
| 6dd74de | | | 470 | |
| 6dd74de | | | 471 | </pre> |
| 6dd74de | | | 472 | </td> |
| 6dd74de | | | 473 | <td> |
| 6dd74de | | | 474 | <pre id="diagram4" class="mermaid"> |
| 6dd74de | | | 475 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 476 | stateDiagram-v2 |
| 6dd74de | | | 477 | [*] --> First |
| 6dd74de | | | 478 | state First { |
| 6dd74de | | | 479 | [*] --> second |
| 6dd74de | | | 480 | second --> [*] |
| 6dd74de | | | 481 | } |
| 6dd74de | | | 482 | |
| 6dd74de | | | 483 | |
| 6dd74de | | | 484 | </pre> |
| 6dd74de | | | 485 | </td> |
| 6dd74de | | | 486 | </tr> |
| 6dd74de | | | 487 | <!-- Separator row --> |
| 6dd74de | | | 488 | <tr class="separator"> |
| 6dd74de | | | 489 | <td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 490 | </tr> |
| 6dd74de | | | 491 | |
| 6dd74de | | | 492 | |
| 6dd74de | | | 493 | </tr> |
| 6dd74de | | | 494 | <tr> |
| 6dd74de | | | 495 | <th class="vertical-header"> |
| 6dd74de | | | 496 | <button class="collapsible"> |
| 6dd74de | | | 497 | Nested Composite state |
| 6dd74de | | | 498 | </button> |
| 6dd74de | | | 499 | <div class="content"> |
| 6dd74de | | | 500 | <div class="pre-scrollable"> |
| 6dd74de | | | 501 | <pre> |
| 6dd74de | | | 502 | |
| 6dd74de | | | 503 | |
| 6dd74de | | | 504 | [*] --> Level1 |
| 6dd74de | | | 505 | |
| 6dd74de | | | 506 | state Level1 { |
| 6dd74de | | | 507 | [*] --> Level2 |
| 6dd74de | | | 508 | |
| 6dd74de | | | 509 | state Level2 { |
| 6dd74de | | | 510 | [*] --> level2 |
| 6dd74de | | | 511 | level2 --> Level3 |
| 6dd74de | | | 512 | |
| 6dd74de | | | 513 | state Level3 { |
| 6dd74de | | | 514 | [*] --> level3 |
| 6dd74de | | | 515 | level3 --> [*] |
| 6dd74de | | | 516 | } |
| 6dd74de | | | 517 | } |
| 6dd74de | | | 518 | } |
| 6dd74de | | | 519 | |
| 6dd74de | | | 520 | |
| 6dd74de | | | 521 | </pre> |
| 6dd74de | | | 522 | </div> |
| 6dd74de | | | 523 | </div> |
| 6dd74de | | | 524 | </th> |
| 6dd74de | | | 525 | <td> |
| 6dd74de | | | 526 | <pre id="diagram1" class="mermaid"> |
| 6dd74de | | | 527 | |
| 6dd74de | | | 528 | stateDiagram-v2 |
| 6dd74de | | | 529 | [*] --> Level1 |
| 6dd74de | | | 530 | |
| 6dd74de | | | 531 | state Level1 { |
| 6dd74de | | | 532 | [*] --> Level2 |
| 6dd74de | | | 533 | |
| 6dd74de | | | 534 | state Level2 { |
| 6dd74de | | | 535 | [*] --> level2 |
| 6dd74de | | | 536 | level2 --> Level3 |
| 6dd74de | | | 537 | |
| 6dd74de | | | 538 | state Level3 { |
| 6dd74de | | | 539 | [*] --> level3 |
| 6dd74de | | | 540 | level3 --> [*] |
| 6dd74de | | | 541 | } |
| 6dd74de | | | 542 | } |
| 6dd74de | | | 543 | } |
| 6dd74de | | | 544 | |
| 6dd74de | | | 545 | |
| 6dd74de | | | 546 | </pre> |
| 6dd74de | | | 547 | </td> |
| 6dd74de | | | 548 | <td> |
| 6dd74de | | | 549 | <pre id="diagram2" class="mermaid"> |
| 6dd74de | | | 550 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 551 | |
| 6dd74de | | | 552 | stateDiagram-v2 |
| 6dd74de | | | 553 | [*] --> Level1 |
| 6dd74de | | | 554 | |
| 6dd74de | | | 555 | state Level1 { |
| 6dd74de | | | 556 | [*] --> Level2 |
| 6dd74de | | | 557 | |
| 6dd74de | | | 558 | state Level2 { |
| 6dd74de | | | 559 | [*] --> level2 |
| 6dd74de | | | 560 | level2 --> Level3 |
| 6dd74de | | | 561 | |
| 6dd74de | | | 562 | state Level3 { |
| 6dd74de | | | 563 | [*] --> level3 |
| 6dd74de | | | 564 | level3 --> [*] |
| 6dd74de | | | 565 | } |
| 6dd74de | | | 566 | } |
| 6dd74de | | | 567 | } |
| 6dd74de | | | 568 | |
| 6dd74de | | | 569 | |
| 6dd74de | | | 570 | |
| 6dd74de | | | 571 | </pre> |
| 6dd74de | | | 572 | </td> |
| 6dd74de | | | 573 | <td> |
| 6dd74de | | | 574 | <pre id="diagram3" class="mermaid"> |
| 6dd74de | | | 575 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 576 | stateDiagram-v2 |
| 6dd74de | | | 577 | [*] --> Level1 |
| 6dd74de | | | 578 | |
| 6dd74de | | | 579 | state Level1 { |
| 6dd74de | | | 580 | [*] --> Level2 |
| 6dd74de | | | 581 | |
| 6dd74de | | | 582 | state Level2 { |
| 6dd74de | | | 583 | [*] --> level2 |
| 6dd74de | | | 584 | level2 --> Level3 |
| 6dd74de | | | 585 | |
| 6dd74de | | | 586 | state Level3 { |
| 6dd74de | | | 587 | [*] --> level3 |
| 6dd74de | | | 588 | level3 --> [*] |
| 6dd74de | | | 589 | } |
| 6dd74de | | | 590 | } |
| 6dd74de | | | 591 | } |
| 6dd74de | | | 592 | |
| 6dd74de | | | 593 | |
| 6dd74de | | | 594 | </pre> |
| 6dd74de | | | 595 | </td> |
| 6dd74de | | | 596 | <td> |
| 6dd74de | | | 597 | <pre id="diagram4" class="mermaid"> |
| 6dd74de | | | 598 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 599 | stateDiagram-v2 |
| 6dd74de | | | 600 | [*] --> Level1 |
| 6dd74de | | | 601 | |
| 6dd74de | | | 602 | state Level1 { |
| 6dd74de | | | 603 | [*] --> Level2 |
| 6dd74de | | | 604 | |
| 6dd74de | | | 605 | state Level2 { |
| 6dd74de | | | 606 | [*] --> level2 |
| 6dd74de | | | 607 | level2 --> Level3 |
| 6dd74de | | | 608 | |
| 6dd74de | | | 609 | state Level3 { |
| 6dd74de | | | 610 | [*] --> level3 |
| 6dd74de | | | 611 | level3 --> [*] |
| 6dd74de | | | 612 | } |
| 6dd74de | | | 613 | } |
| 6dd74de | | | 614 | } |
| 6dd74de | | | 615 | |
| 6dd74de | | | 616 | </pre> |
| 6dd74de | | | 617 | </td> |
| 6dd74de | | | 618 | </tr> |
| 6dd74de | | | 619 | <!-- Separator row --> |
| 6dd74de | | | 620 | <tr class="separator"> |
| 6dd74de | | | 621 | <td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 622 | </tr> |
| 6dd74de | | | 623 | |
| 6dd74de | | | 624 | <tr> |
| 6dd74de | | | 625 | <th class="vertical-header"> |
| 6dd74de | | | 626 | <button class="collapsible"> |
| 6dd74de | | | 627 | Composite state with transition |
| 6dd74de | | | 628 | </button> |
| 6dd74de | | | 629 | <div class="content"> |
| 6dd74de | | | 630 | <div class="pre-scrollable"> |
| 6dd74de | | | 631 | <pre> |
| 6dd74de | | | 632 | [*] --> B1 |
| 6dd74de | | | 633 | B1 --> B2 |
| 6dd74de | | | 634 | B1 --> B3 |
| 6dd74de | | | 635 | |
| 6dd74de | | | 636 | state B1 { |
| 6dd74de | | | 637 | [*] --> B11 |
| 6dd74de | | | 638 | B11 --> [*] |
| 6dd74de | | | 639 | } |
| 6dd74de | | | 640 | state B2 { |
| 6dd74de | | | 641 | [*] --> B22 |
| 6dd74de | | | 642 | B22 --> [*] |
| 6dd74de | | | 643 | } |
| 6dd74de | | | 644 | state B3 { |
| 6dd74de | | | 645 | [*] --> B33 |
| 6dd74de | | | 646 | B33 --> [*] |
| 6dd74de | | | 647 | } |
| 6dd74de | | | 648 | |
| 6dd74de | | | 649 | |
| 6dd74de | | | 650 | |
| 6dd74de | | | 651 | </pre> |
| 6dd74de | | | 652 | </div> |
| 6dd74de | | | 653 | </div> |
| 6dd74de | | | 654 | </th> |
| 6dd74de | | | 655 | <td> |
| 6dd74de | | | 656 | <pre id="diagram1" class="mermaid"> |
| 6dd74de | | | 657 | |
| 6dd74de | | | 658 | stateDiagram-v2 |
| 6dd74de | | | 659 | [*] --> B1 |
| 6dd74de | | | 660 | B1 --> B2 |
| 6dd74de | | | 661 | B1 --> B3 |
| 6dd74de | | | 662 | |
| 6dd74de | | | 663 | state B1 { |
| 6dd74de | | | 664 | [*] --> B11 |
| 6dd74de | | | 665 | B11 --> [*] |
| 6dd74de | | | 666 | } |
| 6dd74de | | | 667 | state B2 { |
| 6dd74de | | | 668 | [*] --> B22 |
| 6dd74de | | | 669 | B22 --> [*] |
| 6dd74de | | | 670 | } |
| 6dd74de | | | 671 | state B3 { |
| 6dd74de | | | 672 | [*] --> B33 |
| 6dd74de | | | 673 | B33 --> [*] |
| 6dd74de | | | 674 | } |
| 6dd74de | | | 675 | </pre> |
| 6dd74de | | | 676 | </td> |
| 6dd74de | | | 677 | <td> |
| 6dd74de | | | 678 | <pre id="diagram2" class="mermaid"> |
| 6dd74de | | | 679 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 680 | |
| 6dd74de | | | 681 | stateDiagram-v2 |
| 6dd74de | | | 682 | [*] --> B1 |
| 6dd74de | | | 683 | B1 --> B2 |
| 6dd74de | | | 684 | B1 --> B3 |
| 6dd74de | | | 685 | |
| 6dd74de | | | 686 | state B1 { |
| 6dd74de | | | 687 | [*] --> B11 |
| 6dd74de | | | 688 | B11 --> [*] |
| 6dd74de | | | 689 | } |
| 6dd74de | | | 690 | state B2 { |
| 6dd74de | | | 691 | [*] --> B22 |
| 6dd74de | | | 692 | B22 --> [*] |
| 6dd74de | | | 693 | } |
| 6dd74de | | | 694 | state B3 { |
| 6dd74de | | | 695 | [*] --> B33 |
| 6dd74de | | | 696 | B33 --> [*] |
| 6dd74de | | | 697 | } |
| 6dd74de | | | 698 | </pre> |
| 6dd74de | | | 699 | </td> |
| 6dd74de | | | 700 | <td> |
| 6dd74de | | | 701 | <pre id="diagram3" class="mermaid"> |
| 6dd74de | | | 702 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 703 | stateDiagram-v2 |
| 6dd74de | | | 704 | [*] --> B1 |
| 6dd74de | | | 705 | B1 --> B2 |
| 6dd74de | | | 706 | B1 --> B3 |
| 6dd74de | | | 707 | |
| 6dd74de | | | 708 | state B1 { |
| 6dd74de | | | 709 | [*] --> B11 |
| 6dd74de | | | 710 | B11 --> [*] |
| 6dd74de | | | 711 | } |
| 6dd74de | | | 712 | state B2 { |
| 6dd74de | | | 713 | [*] --> B22 |
| 6dd74de | | | 714 | B22 --> [*] |
| 6dd74de | | | 715 | } |
| 6dd74de | | | 716 | state B3 { |
| 6dd74de | | | 717 | [*] --> B33 |
| 6dd74de | | | 718 | B33 --> [*] |
| 6dd74de | | | 719 | } |
| 6dd74de | | | 720 | |
| 6dd74de | | | 721 | </pre> |
| 6dd74de | | | 722 | </td> |
| 6dd74de | | | 723 | <td> |
| 6dd74de | | | 724 | <pre id="diagram4" class="mermaid"> |
| 6dd74de | | | 725 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 726 | stateDiagram-v2 |
| 6dd74de | | | 727 | [*] --> B1 |
| 6dd74de | | | 728 | B1 --> B2 |
| 6dd74de | | | 729 | B1 --> B3 |
| 6dd74de | | | 730 | |
| 6dd74de | | | 731 | state B1 { |
| 6dd74de | | | 732 | [*] --> B11 |
| 6dd74de | | | 733 | B11 --> [*] |
| 6dd74de | | | 734 | } |
| 6dd74de | | | 735 | state B2 { |
| 6dd74de | | | 736 | [*] --> B22 |
| 6dd74de | | | 737 | B22 --> [*] |
| 6dd74de | | | 738 | } |
| 6dd74de | | | 739 | state B3 { |
| 6dd74de | | | 740 | [*] --> B33 |
| 6dd74de | | | 741 | B33 --> [*] |
| 6dd74de | | | 742 | } |
| 6dd74de | | | 743 | </pre> |
| 6dd74de | | | 744 | </td> |
| 6dd74de | | | 745 | </tr> |
| 6dd74de | | | 746 | <!-- Separator row --> |
| 6dd74de | | | 747 | <tr class="separator"> |
| 6dd74de | | | 748 | <td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 749 | </tr> |
| 6dd74de | | | 750 | |
| 6dd74de | | | 751 | |
| 6dd74de | | | 752 | <tr> |
| 6dd74de | | | 753 | <th class="vertical-header"> |
| 6dd74de | | | 754 | <button class="collapsible"> |
| 6dd74de | | | 755 | |
| 6dd74de | | | 756 | Choice |
| 6dd74de | | | 757 | </button> |
| 6dd74de | | | 758 | <div class="content"> |
| 6dd74de | | | 759 | <div class="pre-scrollable"> |
| 6dd74de | | | 760 | <pre> |
| 6dd74de | | | 761 | state if_state <<choice>> |
| 6dd74de | | | 762 | [*] --> IsPositive |
| 6dd74de | | | 763 | IsPositive --> if_state |
| 6dd74de | | | 764 | if_state --> False: if n < 0 |
| 6dd74de | | | 765 | if_state --> True : if n >= 0 |
| 6dd74de | | | 766 | |
| 6dd74de | | | 767 | |
| 6dd74de | | | 768 | |
| 6dd74de | | | 769 | |
| 6dd74de | | | 770 | </pre> |
| 6dd74de | | | 771 | </div> |
| 6dd74de | | | 772 | </div> |
| 6dd74de | | | 773 | </th> |
| 6dd74de | | | 774 | <td> |
| 6dd74de | | | 775 | <pre id="diagram1" class="mermaid"> |
| 6dd74de | | | 776 | |
| 6dd74de | | | 777 | stateDiagram-v2 |
| 6dd74de | | | 778 | state if_state <<choice>> |
| 6dd74de | | | 779 | [*] --> IsPositive |
| 6dd74de | | | 780 | IsPositive --> if_state |
| 6dd74de | | | 781 | if_state --> False: if n < 0 |
| 6dd74de | | | 782 | if_state --> True : if n >= 0 |
| 6dd74de | | | 783 | </pre> |
| 6dd74de | | | 784 | </td> |
| 6dd74de | | | 785 | <td> |
| 6dd74de | | | 786 | <pre id="diagram2" class="mermaid"> |
| 6dd74de | | | 787 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 788 | |
| 6dd74de | | | 789 | stateDiagram-v2 |
| 6dd74de | | | 790 | state if_state <<choice>> |
| 6dd74de | | | 791 | [*] --> IsPositive |
| 6dd74de | | | 792 | IsPositive --> if_state |
| 6dd74de | | | 793 | if_state --> False: if n < 0 |
| 6dd74de | | | 794 | if_state --> True : if n >= 0 |
| 6dd74de | | | 795 | </pre> |
| 6dd74de | | | 796 | </td> |
| 6dd74de | | | 797 | <td> |
| 6dd74de | | | 798 | <pre id="diagram3" class="mermaid"> |
| 6dd74de | | | 799 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 800 | stateDiagram-v2 |
| 6dd74de | | | 801 | state if_state <<choice>> |
| 6dd74de | | | 802 | [*] --> IsPositive |
| 6dd74de | | | 803 | IsPositive --> if_state |
| 6dd74de | | | 804 | if_state --> False: if n < 0 |
| 6dd74de | | | 805 | if_state --> True : if n >= 0 |
| 6dd74de | | | 806 | </pre> |
| 6dd74de | | | 807 | </td> |
| 6dd74de | | | 808 | <td> |
| 6dd74de | | | 809 | <pre id="diagram4" class="mermaid"> |
| 6dd74de | | | 810 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 811 | stateDiagram-v2 |
| 6dd74de | | | 812 | state if_state <<choice>> |
| 6dd74de | | | 813 | [*] --> IsPositive |
| 6dd74de | | | 814 | IsPositive --> if_state |
| 6dd74de | | | 815 | if_state --> False: if n < 0 |
| 6dd74de | | | 816 | if_state --> True : if n >= 0 |
| 6dd74de | | | 817 | </pre> |
| 6dd74de | | | 818 | </td> |
| 6dd74de | | | 819 | </tr> |
| 6dd74de | | | 820 | <!-- Separator row --> |
| 6dd74de | | | 821 | <tr class="separator"> |
| 6dd74de | | | 822 | <td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 823 | </tr> |
| 6dd74de | | | 824 | |
| 6dd74de | | | 825 | <tr> |
| 6dd74de | | | 826 | <th class="vertical-header"> |
| 6dd74de | | | 827 | <button class="collapsible"> |
| 6dd74de | | | 828 | Fork & Join |
| 6dd74de | | | 829 | </button> |
| 6dd74de | | | 830 | <div class="content"> |
| 6dd74de | | | 831 | <div class="pre-scrollable"> |
| 6dd74de | | | 832 | <pre> |
| 6dd74de | | | 833 | state fork_state <<fork>> |
| 6dd74de | | | 834 | [*] --> fork_state |
| 6dd74de | | | 835 | fork_state --> State2 |
| 6dd74de | | | 836 | fork_state --> State3 |
| 6dd74de | | | 837 | |
| 6dd74de | | | 838 | state join_state <<join>> |
| 6dd74de | | | 839 | State2 --> join_state |
| 6dd74de | | | 840 | State3 --> join_state |
| 6dd74de | | | 841 | join_state --> State4 |
| 6dd74de | | | 842 | State4 --> [*] |
| 6dd74de | | | 843 | |
| 6dd74de | | | 844 | |
| 6dd74de | | | 845 | |
| 6dd74de | | | 846 | </pre> |
| 6dd74de | | | 847 | </div> |
| 6dd74de | | | 848 | </div> |
| 6dd74de | | | 849 | </th> |
| 6dd74de | | | 850 | <td> |
| 6dd74de | | | 851 | <pre id="diagram1" class="mermaid"> |
| 6dd74de | | | 852 | stateDiagram-v2 |
| 6dd74de | | | 853 | state fork_state <<fork>> |
| 6dd74de | | | 854 | [*] --> fork_state |
| 6dd74de | | | 855 | fork_state --> State2 |
| 6dd74de | | | 856 | fork_state --> State3 |
| 6dd74de | | | 857 | |
| 6dd74de | | | 858 | state join_state <<join>> |
| 6dd74de | | | 859 | State2 --> join_state |
| 6dd74de | | | 860 | State3 --> join_state |
| 6dd74de | | | 861 | join_state --> State4 |
| 6dd74de | | | 862 | State4 --> [*] |
| 6dd74de | | | 863 | |
| 6dd74de | | | 864 | </pre> |
| 6dd74de | | | 865 | </td> |
| 6dd74de | | | 866 | <td> |
| 6dd74de | | | 867 | <pre id="diagram2" class="mermaid"> |
| 6dd74de | | | 868 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 869 | stateDiagram-v2 |
| 6dd74de | | | 870 | state fork_state <<fork>> |
| 6dd74de | | | 871 | [*] --> fork_state |
| 6dd74de | | | 872 | fork_state --> State2 |
| 6dd74de | | | 873 | fork_state --> State3 |
| 6dd74de | | | 874 | |
| 6dd74de | | | 875 | state join_state <<join>> |
| 6dd74de | | | 876 | State2 --> join_state |
| 6dd74de | | | 877 | State3 --> join_state |
| 6dd74de | | | 878 | join_state --> State4 |
| 6dd74de | | | 879 | State4 --> [*] |
| 6dd74de | | | 880 | |
| 6dd74de | | | 881 | </pre> |
| 6dd74de | | | 882 | </td> |
| 6dd74de | | | 883 | <td> |
| 6dd74de | | | 884 | <pre id="diagram3" class="mermaid"> |
| 6dd74de | | | 885 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 886 | stateDiagram-v2 |
| 6dd74de | | | 887 | state fork_state <<fork>> |
| 6dd74de | | | 888 | [*] --> fork_state |
| 6dd74de | | | 889 | fork_state --> State2 |
| 6dd74de | | | 890 | fork_state --> State3 |
| 6dd74de | | | 891 | |
| 6dd74de | | | 892 | state join_state <<join>> |
| 6dd74de | | | 893 | State2 --> join_state |
| 6dd74de | | | 894 | State3 --> join_state |
| 6dd74de | | | 895 | join_state --> State4 |
| 6dd74de | | | 896 | State4 --> [*] |
| 6dd74de | | | 897 | |
| 6dd74de | | | 898 | </pre> |
| 6dd74de | | | 899 | </td> |
| 6dd74de | | | 900 | <td> |
| 6dd74de | | | 901 | <pre id="diagram4" class="mermaid"> |
| 6dd74de | | | 902 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 903 | stateDiagram-v2 |
| 6dd74de | | | 904 | state fork_state <<fork>> |
| 6dd74de | | | 905 | [*] --> fork_state |
| 6dd74de | | | 906 | fork_state --> State2 |
| 6dd74de | | | 907 | fork_state --> State3 |
| 6dd74de | | | 908 | |
| 6dd74de | | | 909 | state join_state <<join>> |
| 6dd74de | | | 910 | State2 --> join_state |
| 6dd74de | | | 911 | State3 --> join_state |
| 6dd74de | | | 912 | join_state --> State4 |
| 6dd74de | | | 913 | State4 --> [*] |
| 6dd74de | | | 914 | |
| 6dd74de | | | 915 | </pre> |
| 6dd74de | | | 916 | </td> |
| 6dd74de | | | 917 | </tr> |
| 6dd74de | | | 918 | <!-- Separator row --> |
| 6dd74de | | | 919 | <tr class="separator"> |
| 6dd74de | | | 920 | <td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 921 | </tr> |
| 6dd74de | | | 922 | |
| 6dd74de | | | 923 | <tr> |
| 6dd74de | | | 924 | <th class="vertical-header"> |
| 6dd74de | | | 925 | <button class="collapsible"> |
| 6dd74de | | | 926 | Notes |
| 6dd74de | | | 927 | </button> |
| 6dd74de | | | 928 | <div class="content"> |
| 6dd74de | | | 929 | <div class="pre-scrollable"> |
| 6dd74de | | | 930 | <pre> |
| 6dd74de | | | 931 | |
| 6dd74de | | | 932 | TN1: The state with a note |
| 6dd74de | | | 933 | note right of TN1 |
| 6dd74de | | | 934 | note text |
| 6dd74de | | | 935 | end note |
| 6dd74de | | | 936 | TN1 --> TN2 |
| 6dd74de | | | 937 | note left of TN2 : note text |
| 6dd74de | | | 938 | |
| 6dd74de | | | 939 | </pre> |
| 6dd74de | | | 940 | </div> |
| 6dd74de | | | 941 | </div> |
| 6dd74de | | | 942 | </th> |
| 6dd74de | | | 943 | <td> |
| 6dd74de | | | 944 | <pre id="diagram1" class="mermaid"> |
| 6dd74de | | | 945 | stateDiagram-v2 |
| 6dd74de | | | 946 | TN1: The state with a note |
| 6dd74de | | | 947 | note right of TN1 |
| 6dd74de | | | 948 | Important information! You can write |
| 6dd74de | | | 949 | notes. |
| 6dd74de | | | 950 | end note |
| 6dd74de | | | 951 | TN1 --> TN2 |
| 6dd74de | | | 952 | note left of TN2 : This is the note to the left. |
| 6dd74de | | | 953 | |
| 6dd74de | | | 954 | </pre> |
| 6dd74de | | | 955 | </td> |
| 6dd74de | | | 956 | <td> |
| 6dd74de | | | 957 | <pre id="diagram2" class="mermaid"> |
| 6dd74de | | | 958 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 959 | stateDiagram-v2 |
| 6dd74de | | | 960 | TN3: The state with a note |
| 6dd74de | | | 961 | note right of TN3 |
| 6dd74de | | | 962 | Important information! You can write |
| 6dd74de | | | 963 | notes. |
| 6dd74de | | | 964 | end note |
| 6dd74de | | | 965 | TN3 --> TN4 |
| 6dd74de | | | 966 | note left of TN4 : This is the note to the left. |
| 6dd74de | | | 967 | </pre> |
| 6dd74de | | | 968 | </td> |
| 6dd74de | | | 969 | <td> |
| 6dd74de | | | 970 | <pre id="diagram3" class="mermaid"> |
| 6dd74de | | | 971 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 972 | stateDiagram-v2 |
| 6dd74de | | | 973 | TN5: The state with a note |
| 6dd74de | | | 974 | note right of TN5 |
| 6dd74de | | | 975 | Important information! You can write |
| 6dd74de | | | 976 | notes. |
| 6dd74de | | | 977 | end note |
| 6dd74de | | | 978 | TN5 --> TN6 |
| 6dd74de | | | 979 | note left of TN6 : This is the note to the left. |
| 6dd74de | | | 980 | |
| 6dd74de | | | 981 | </pre> |
| 6dd74de | | | 982 | </td> |
| 6dd74de | | | 983 | <td> |
| 6dd74de | | | 984 | <pre id="diagram4" class="mermaid"> |
| 6dd74de | | | 985 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 986 | stateDiagram-v2 |
| 6dd74de | | | 987 | TN7: The state with a note |
| 6dd74de | | | 988 | note right of TN7 |
| 6dd74de | | | 989 | Important information! You can write |
| 6dd74de | | | 990 | notes. |
| 6dd74de | | | 991 | end note |
| 6dd74de | | | 992 | TN7 --> TN8 |
| 6dd74de | | | 993 | note left of TN8 : This is the note to the left. |
| 6dd74de | | | 994 | </pre> |
| 6dd74de | | | 995 | </td> |
| 6dd74de | | | 996 | </tr> |
| 6dd74de | | | 997 | <!-- Separator row --> |
| 6dd74de | | | 998 | <tr class="separator"> |
| 6dd74de | | | 999 | <td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 1000 | </tr> |
| 6dd74de | | | 1001 | |
| 6dd74de | | | 1002 | |
| 6dd74de | | | 1003 | <tr> |
| 6dd74de | | | 1004 | <th class="vertical-header"> |
| 6dd74de | | | 1005 | <button class="collapsible"> |
| 6dd74de | | | 1006 | Concurrent states |
| 6dd74de | | | 1007 | </button> |
| 6dd74de | | | 1008 | <div class="content"> |
| 6dd74de | | | 1009 | <div class="pre-scrollable"> |
| 6dd74de | | | 1010 | <pre> |
| 6dd74de | | | 1011 | [*] --> Active |
| 6dd74de | | | 1012 | |
| 6dd74de | | | 1013 | state Active { |
| 6dd74de | | | 1014 | [*] --> NumLockOff |
| 6dd74de | | | 1015 | NumLockOff --> NumLockOn : EvNumLockPressed |
| 6dd74de | | | 1016 | NumLockOn --> NumLockOff : EvNumLockPressed |
| 6dd74de | | | 1017 | -- |
| 6dd74de | | | 1018 | [*] --> CapsLockOff |
| 6dd74de | | | 1019 | CapsLockOff --> CapsLockOn : EvCapsLockPressed |
| 6dd74de | | | 1020 | CapsLockOn --> CapsLockOff : EvCapsLockPressed |
| 6dd74de | | | 1021 | -- |
| 6dd74de | | | 1022 | [*] --> ScrollLockOff |
| 6dd74de | | | 1023 | ScrollLockOff --> ScrollLockOn : EvScrollLockPressed |
| 6dd74de | | | 1024 | ScrollLockOn --> ScrollLockOff : EvScrollLockPressed |
| 6dd74de | | | 1025 | } |
| 6dd74de | | | 1026 | |
| 6dd74de | | | 1027 | |
| 6dd74de | | | 1028 | </pre> |
| 6dd74de | | | 1029 | </div> |
| 6dd74de | | | 1030 | </div> |
| 6dd74de | | | 1031 | </th> |
| 6dd74de | | | 1032 | <td> |
| 6dd74de | | | 1033 | <pre id="diagram1" class="mermaid"> |
| 6dd74de | | | 1034 | stateDiagram-v2 |
| 6dd74de | | | 1035 | [*] --> Active |
| 6dd74de | | | 1036 | |
| 6dd74de | | | 1037 | state Active { |
| 6dd74de | | | 1038 | [*] --> NumLockOff |
| 6dd74de | | | 1039 | NumLockOff --> NumLockOn : EvNumLockPressed |
| 6dd74de | | | 1040 | NumLockOn --> NumLockOff : EvNumLockPressed |
| 6dd74de | | | 1041 | -- |
| 6dd74de | | | 1042 | [*] --> CapsLockOff |
| 6dd74de | | | 1043 | CapsLockOff --> CapsLockOn : EvCapsLockPressed |
| 6dd74de | | | 1044 | CapsLockOn --> CapsLockOff : EvCapsLockPressed |
| 6dd74de | | | 1045 | -- |
| 6dd74de | | | 1046 | [*] --> ScrollLockOff |
| 6dd74de | | | 1047 | ScrollLockOff --> ScrollLockOn : EvScrollLockPressed |
| 6dd74de | | | 1048 | ScrollLockOn --> ScrollLockOff : EvScrollLockPressed |
| 6dd74de | | | 1049 | } |
| 6dd74de | | | 1050 | |
| 6dd74de | | | 1051 | </pre> |
| 6dd74de | | | 1052 | </td> |
| 6dd74de | | | 1053 | <td> |
| 6dd74de | | | 1054 | <pre id="diagram2" class="mermaid"> |
| 6dd74de | | | 1055 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 1056 | stateDiagram-v2 |
| 6dd74de | | | 1057 | [*] --> Active |
| 6dd74de | | | 1058 | |
| 6dd74de | | | 1059 | state Active { |
| 6dd74de | | | 1060 | [*] --> NumLockOff |
| 6dd74de | | | 1061 | NumLockOff --> NumLockOn : EvNumLockPressed |
| 6dd74de | | | 1062 | NumLockOn --> NumLockOff : EvNumLockPressed |
| 6dd74de | | | 1063 | -- |
| 6dd74de | | | 1064 | [*] --> CapsLockOff |
| 6dd74de | | | 1065 | CapsLockOff --> CapsLockOn : EvCapsLockPressed |
| 6dd74de | | | 1066 | CapsLockOn --> CapsLockOff : EvCapsLockPressed |
| 6dd74de | | | 1067 | -- |
| 6dd74de | | | 1068 | [*] --> ScrollLockOff |
| 6dd74de | | | 1069 | ScrollLockOff --> ScrollLockOn : EvScrollLockPressed |
| 6dd74de | | | 1070 | ScrollLockOn --> ScrollLockOff : EvScrollLockPressed |
| 6dd74de | | | 1071 | } |
| 6dd74de | | | 1072 | </pre> |
| 6dd74de | | | 1073 | </td> |
| 6dd74de | | | 1074 | <td> |
| 6dd74de | | | 1075 | <pre id="diagram3" class="mermaid"> |
| 6dd74de | | | 1076 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 1077 | stateDiagram-v2 |
| 6dd74de | | | 1078 | [*] --> Active |
| 6dd74de | | | 1079 | |
| 6dd74de | | | 1080 | state Active { |
| 6dd74de | | | 1081 | [*] --> NumLockOff |
| 6dd74de | | | 1082 | NumLockOff --> NumLockOn : EvNumLockPressed |
| 6dd74de | | | 1083 | NumLockOn --> NumLockOff : EvNumLockPressed |
| 6dd74de | | | 1084 | -- |
| 6dd74de | | | 1085 | [*] --> CapsLockOff |
| 6dd74de | | | 1086 | CapsLockOff --> CapsLockOn : EvCapsLockPressed |
| 6dd74de | | | 1087 | CapsLockOn --> CapsLockOff : EvCapsLockPressed |
| 6dd74de | | | 1088 | -- |
| 6dd74de | | | 1089 | [*] --> ScrollLockOff |
| 6dd74de | | | 1090 | ScrollLockOff --> ScrollLockOn : EvScrollLockPressed |
| 6dd74de | | | 1091 | ScrollLockOn --> ScrollLockOff : EvScrollLockPressed |
| 6dd74de | | | 1092 | } |
| 6dd74de | | | 1093 | |
| 6dd74de | | | 1094 | </pre> |
| 6dd74de | | | 1095 | </td> |
| 6dd74de | | | 1096 | <td> |
| 6dd74de | | | 1097 | <pre id="diagram4" class="mermaid"> |
| 6dd74de | | | 1098 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 1099 | stateDiagram-v2 |
| 6dd74de | | | 1100 | [*] --> Active |
| 6dd74de | | | 1101 | |
| 6dd74de | | | 1102 | state Active { |
| 6dd74de | | | 1103 | [*] --> NumLockOff |
| 6dd74de | | | 1104 | NumLockOff --> NumLockOn : EvNumLockPressed |
| 6dd74de | | | 1105 | NumLockOn --> NumLockOff : EvNumLockPressed |
| 6dd74de | | | 1106 | -- |
| 6dd74de | | | 1107 | [*] --> CapsLockOff |
| 6dd74de | | | 1108 | CapsLockOff --> CapsLockOn : EvCapsLockPressed |
| 6dd74de | | | 1109 | CapsLockOn --> CapsLockOff : EvCapsLockPressed |
| 6dd74de | | | 1110 | -- |
| 6dd74de | | | 1111 | [*] --> ScrollLockOff |
| 6dd74de | | | 1112 | ScrollLockOff --> ScrollLockOn : EvScrollLockPressed |
| 6dd74de | | | 1113 | ScrollLockOn --> ScrollLockOff : EvScrollLockPressed |
| 6dd74de | | | 1114 | } |
| 6dd74de | | | 1115 | </pre> |
| 6dd74de | | | 1116 | </td> |
| 6dd74de | | | 1117 | </tr> |
| 6dd74de | | | 1118 | |
| 6dd74de | | | 1119 | |
| 6dd74de | | | 1120 | <!-- Separator row --> |
| 6dd74de | | | 1121 | <tr class="separator"> |
| 6dd74de | | | 1122 | <td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 1123 | </tr> |
| 6dd74de | | | 1124 | |
| 6dd74de | | | 1125 | <tr> |
| 6dd74de | | | 1126 | <th class="vertical-header"> |
| 6dd74de | | | 1127 | <button class="collapsible"> |
| 6dd74de | | | 1128 | Directions |
| 6dd74de | | | 1129 | </button> |
| 6dd74de | | | 1130 | <div class="content"> |
| 6dd74de | | | 1131 | <div class="pre-scrollable"> |
| 6dd74de | | | 1132 | <pre> |
| 6dd74de | | | 1133 | direction LR |
| 6dd74de | | | 1134 | [*] --> D1 |
| 6dd74de | | | 1135 | D1 --> D2 |
| 6dd74de | | | 1136 | D2 --> D3 |
| 6dd74de | | | 1137 | state D3 { |
| 6dd74de | | | 1138 | direction TB |
| 6dd74de | | | 1139 | D11 --> D22 |
| 6dd74de | | | 1140 | } |
| 6dd74de | | | 1141 | D2 --> D4 |
| 6dd74de | | | 1142 | </pre> |
| 6dd74de | | | 1143 | </div> |
| 6dd74de | | | 1144 | </div> |
| 6dd74de | | | 1145 | </th> |
| 6dd74de | | | 1146 | <td> |
| 6dd74de | | | 1147 | <pre id="diagram1" class="mermaid"> |
| 6dd74de | | | 1148 | stateDiagram-v2 |
| 6dd74de | | | 1149 | direction LR |
| 6dd74de | | | 1150 | [*] --> D1 |
| 6dd74de | | | 1151 | D1 --> D2 |
| 6dd74de | | | 1152 | D2 --> D3 |
| 6dd74de | | | 1153 | state D3 { |
| 6dd74de | | | 1154 | direction TB |
| 6dd74de | | | 1155 | D11 --> D22 |
| 6dd74de | | | 1156 | } |
| 6dd74de | | | 1157 | D2 --> D4 |
| 6dd74de | | | 1158 | </pre> |
| 6dd74de | | | 1159 | </td> |
| 6dd74de | | | 1160 | <td> |
| 6dd74de | | | 1161 | <pre id="diagram2" class="mermaid"> |
| 6dd74de | | | 1162 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 1163 | stateDiagram-v2 |
| 6dd74de | | | 1164 | direction LR |
| 6dd74de | | | 1165 | [*] --> D1 |
| 6dd74de | | | 1166 | D1 --> D2 |
| 6dd74de | | | 1167 | D2 --> D3 |
| 6dd74de | | | 1168 | state D3 { |
| 6dd74de | | | 1169 | direction TB |
| 6dd74de | | | 1170 | D11 --> D22 |
| 6dd74de | | | 1171 | } |
| 6dd74de | | | 1172 | D2 --> D4 |
| 6dd74de | | | 1173 | </pre> |
| 6dd74de | | | 1174 | </td> |
| 6dd74de | | | 1175 | <td> |
| 6dd74de | | | 1176 | <pre id="diagram3" class="mermaid"> |
| 6dd74de | | | 1177 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 1178 | stateDiagram-v2 |
| 6dd74de | | | 1179 | direction LR |
| 6dd74de | | | 1180 | [*] --> D1 |
| 6dd74de | | | 1181 | D1 --> D2 |
| 6dd74de | | | 1182 | D2 --> D3 |
| 6dd74de | | | 1183 | state D3 { |
| 6dd74de | | | 1184 | direction TB |
| 6dd74de | | | 1185 | D11 --> D22 |
| 6dd74de | | | 1186 | } |
| 6dd74de | | | 1187 | D2 --> D4 |
| 6dd74de | | | 1188 | </pre> |
| 6dd74de | | | 1189 | </td> |
| 6dd74de | | | 1190 | <td> |
| 6dd74de | | | 1191 | <pre id="diagram4" class="mermaid"> |
| 6dd74de | | | 1192 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 1193 | stateDiagram-v2 |
| 6dd74de | | | 1194 | direction LR |
| 6dd74de | | | 1195 | [*] --> D1 |
| 6dd74de | | | 1196 | D1 --> D2 |
| 6dd74de | | | 1197 | D2 --> D3 |
| 6dd74de | | | 1198 | state D3 { |
| 6dd74de | | | 1199 | direction TB |
| 6dd74de | | | 1200 | D11 --> D22 |
| 6dd74de | | | 1201 | } |
| 6dd74de | | | 1202 | D2 --> D4 |
| 6dd74de | | | 1203 | </pre> |
| 6dd74de | | | 1204 | </td> |
| 6dd74de | | | 1205 | </tr> |
| 6dd74de | | | 1206 | |
| 6dd74de | | | 1207 | |
| 6dd74de | | | 1208 | <!-- Separator row --> |
| 6dd74de | | | 1209 | <tr class="separator"> |
| 6dd74de | | | 1210 | <td colspan="5"></td> <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 1211 | </tr> |
| 6dd74de | | | 1212 | <!-- New row --> |
| 6dd74de | | | 1213 | <tr> |
| 6dd74de | | | 1214 | <th class="vertical-header">Additional Content</th> |
| 6dd74de | | | 1215 | <td>New content 1</td> |
| 6dd74de | | | 1216 | <td>New content 2</td> |
| 6dd74de | | | 1217 | <td>New content 3</td> |
| 6dd74de | | | 1218 | <td>New content 4</td> |
| 6dd74de | | | 1219 | </tr> |
| 6dd74de | | | 1220 | </table> |
| 6dd74de | | | 1221 | |
| 6dd74de | | | 1222 | |
| 6dd74de | | | 1223 | <script type="module"> |
| 6dd74de | | | 1224 | import mermaid from './mermaid.esm.mjs'; |
| 6dd74de | | | 1225 | import layouts from './mermaid-layout-elk.esm.mjs'; |
| 6dd74de | | | 1226 | mermaid.registerLayoutLoaders(layouts); |
| 6dd74de | | | 1227 | mermaid.parseError = function (err, hash) { |
| 6dd74de | | | 1228 | |
| 6dd74de | | | 1229 | }; |
| 6dd74de | | | 1230 | |
| 6dd74de | | | 1231 | mermaid.initialize({ |
| 6dd74de | | | 1232 | handDrawn: false, |
| 6dd74de | | | 1233 | mergeEdges: true, |
| 6dd74de | | | 1234 | layout: 'dagre', |
| 6dd74de | | | 1235 | flowchart: { titleTopMargin: 10 }, |
| 6dd74de | | | 1236 | // fontFamily: 'Caveat', |
| 6dd74de | | | 1237 | fontFamily: 'Kalam', |
| 6dd74de | | | 1238 | sequence: { |
| 6dd74de | | | 1239 | actorFontFamily: 'courier', |
| 6dd74de | | | 1240 | noteFontFamily: 'courier', |
| 6dd74de | | | 1241 | messageFontFamily: 'courier', |
| 6dd74de | | | 1242 | }, |
| 6dd74de | | | 1243 | fontSize: 16, |
| 6dd74de | | | 1244 | logLevel: 0, |
| 6dd74de | | | 1245 | }); |
| 6dd74de | | | 1246 | function callback() { |
| 6dd74de | | | 1247 | alert('It worked'); |
| 6dd74de | | | 1248 | } |
| 6dd74de | | | 1249 | mermaid.parseError = function (err, hash) { |
| 6dd74de | | | 1250 | console.error('In parse error:'); |
| 6dd74de | | | 1251 | console.error(err); |
| 6dd74de | | | 1252 | }; |
| 6dd74de | | | 1253 | |
| 6dd74de | | | 1254 | |
| 6dd74de | | | 1255 | let coll = document.getElementsByClassName("collapsible"); |
| 6dd74de | | | 1256 | for (const element of coll) { |
| 6dd74de | | | 1257 | element.addEventListener("click", function () { |
| 6dd74de | | | 1258 | this.classList.toggle("active"); |
| 6dd74de | | | 1259 | let content = this.nextElementSibling; |
| 6dd74de | | | 1260 | if (content.style.maxHeight) { |
| 6dd74de | | | 1261 | content.style.maxHeight = null; |
| 6dd74de | | | 1262 | } else { |
| 6dd74de | | | 1263 | content.style.maxHeight = content.scrollHeight + "px"; |
| 6dd74de | | | 1264 | } |
| 6dd74de | | | 1265 | }); |
| 6dd74de | | | 1266 | } |
| 6dd74de | | | 1267 | |
| 6dd74de | | | 1268 | </script> |
| 6dd74de | | | 1269 | </body> |
| 6dd74de | | | 1270 | |
| 6dd74de | | | 1271 | </html> |