| 6dd74de | | | 1 | <html> |
| 6dd74de | | | 2 | <head> |
| 6dd74de | | | 3 | <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" /> |
| 6dd74de | | | 4 | <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> |
| 6dd74de | | | 5 | <link |
| 6dd74de | | | 6 | rel="stylesheet" |
| 6dd74de | | | 7 | href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css" |
| 6dd74de | | | 8 | /> |
| 6dd74de | | | 9 | <link |
| 6dd74de | | | 10 | href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" |
| 6dd74de | | | 11 | rel="stylesheet" |
| 6dd74de | | | 12 | /> |
| 6dd74de | | | 13 | <link |
| 6dd74de | | | 14 | href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" |
| 6dd74de | | | 15 | rel="stylesheet" |
| 6dd74de | | | 16 | /> |
| 6dd74de | | | 17 | <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| 6dd74de | | | 18 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| 6dd74de | | | 19 | <link |
| 6dd74de | | | 20 | href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap" |
| 6dd74de | | | 21 | rel="stylesheet" |
| 6dd74de | | | 22 | /> |
| 6dd74de | | | 23 | <link |
| 6dd74de | | | 24 | href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap" |
| 6dd74de | | | 25 | rel="stylesheet" |
| 6dd74de | | | 26 | /> |
| 6dd74de | | | 27 | <link |
| 6dd74de | | | 28 | href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap" |
| 6dd74de | | | 29 | rel="stylesheet" |
| 6dd74de | | | 30 | /> |
| 6dd74de | | | 31 | |
| 6dd74de | | | 32 | <style> |
| 6dd74de | | | 33 | body { |
| 6dd74de | | | 34 | font-family: 'Arial'; |
| 6dd74de | | | 35 | } |
| 6dd74de | | | 36 | |
| 6dd74de | | | 37 | table { |
| 6dd74de | | | 38 | width: 100%; |
| 6dd74de | | | 39 | border-collapse: collapse; |
| 6dd74de | | | 40 | table-layout: fixed; |
| 6dd74de | | | 41 | } |
| 6dd74de | | | 42 | |
| 6dd74de | | | 43 | th, |
| 6dd74de | | | 44 | td { |
| 6dd74de | | | 45 | border: 1px solid black; |
| 6dd74de | | | 46 | padding: 10px; |
| 6dd74de | | | 47 | text-align: center; |
| 6dd74de | | | 48 | vertical-align: middle; |
| 6dd74de | | | 49 | } |
| 6dd74de | | | 50 | |
| 6dd74de | | | 51 | .separator { |
| 6dd74de | | | 52 | height: 20px; |
| 6dd74de | | | 53 | background-color: #f0f0f0; |
| 6dd74de | | | 54 | } |
| 6dd74de | | | 55 | |
| 6dd74de | | | 56 | .vertical-header { |
| 6dd74de | | | 57 | text-align: center; |
| 6dd74de | | | 58 | } |
| 6dd74de | | | 59 | |
| 6dd74de | | | 60 | .collapsible { |
| 6dd74de | | | 61 | background-color: #f9f9f9; |
| 6dd74de | | | 62 | color: #444; |
| 6dd74de | | | 63 | cursor: pointer; |
| 6dd74de | | | 64 | padding: 18px; |
| 6dd74de | | | 65 | width: 100%; |
| 6dd74de | | | 66 | border: none; |
| 6dd74de | | | 67 | text-align: left; |
| 6dd74de | | | 68 | outline: none; |
| 6dd74de | | | 69 | font-size: 15px; |
| 6dd74de | | | 70 | } |
| 6dd74de | | | 71 | |
| 6dd74de | | | 72 | .active, |
| 6dd74de | | | 73 | .collapsible:hover { |
| 6dd74de | | | 74 | background-color: #ccc; |
| 6dd74de | | | 75 | } |
| 6dd74de | | | 76 | |
| 6dd74de | | | 77 | .collapsible:after { |
| 6dd74de | | | 78 | content: '\002B'; |
| 6dd74de | | | 79 | color: #777; |
| 6dd74de | | | 80 | font-weight: bold; |
| 6dd74de | | | 81 | float: right; |
| 6dd74de | | | 82 | margin-left: 2px; |
| 6dd74de | | | 83 | } |
| 6dd74de | | | 84 | |
| 6dd74de | | | 85 | .active:after { |
| 6dd74de | | | 86 | content: '\2212'; |
| 6dd74de | | | 87 | } |
| 6dd74de | | | 88 | |
| 6dd74de | | | 89 | .content { |
| 6dd74de | | | 90 | padding: 0 5px; |
| 6dd74de | | | 91 | max-height: 0; |
| 6dd74de | | | 92 | overflow: hidden; |
| 6dd74de | | | 93 | transition: max-height 0.2s ease-out; |
| 6dd74de | | | 94 | background-color: #f1f1f1; |
| 6dd74de | | | 95 | } |
| 6dd74de | | | 96 | |
| 6dd74de | | | 97 | .content .pre-scrollable { |
| 6dd74de | | | 98 | max-height: 200px; |
| 6dd74de | | | 99 | overflow-y: scroll; |
| 6dd74de | | | 100 | } |
| 6dd74de | | | 101 | </style> |
| 6dd74de | | | 102 | </head> |
| 6dd74de | | | 103 | |
| 6dd74de | | | 104 | <body> |
| 6dd74de | | | 105 | <table> |
| 6dd74de | | | 106 | <tr> |
| 6dd74de | | | 107 | <th></th> |
| 6dd74de | | | 108 | <!-- Placeholder for the top left corner --> |
| 6dd74de | | | 109 | <th>Dagre</th> |
| 6dd74de | | | 110 | <th>Dagre with rough</th> |
| 6dd74de | | | 111 | <th>ELK</th> |
| 6dd74de | | | 112 | <th>ELK with rough</th> |
| 6dd74de | | | 113 | </tr> |
| 6dd74de | | | 114 | <tr> |
| 6dd74de | | | 115 | <th class="vertical-header"> |
| 6dd74de | | | 116 | <button class="collapsible">Stadium shape</button> |
| 6dd74de | | | 117 | <div class="content"> |
| 6dd74de | | | 118 | <div class="pre-scrollable"> |
| 6dd74de | | | 119 | <pre> |
| 6dd74de | | | 120 | flowchart LR |
| 6dd74de | | | 121 | id1([This is the text in the box]) |
| 6dd74de | | | 122 | </pre |
| 6dd74de | | | 123 | > |
| 6dd74de | | | 124 | </div> |
| 6dd74de | | | 125 | </div> |
| 6dd74de | | | 126 | </th> |
| 6dd74de | | | 127 | <td> |
| 6dd74de | | | 128 | <pre id="diagram1" class="mermaid"> |
| 6dd74de | | | 129 | flowchart LR |
| 6dd74de | | | 130 | id1([This is the text in the box]) |
| 6dd74de | | | 131 | |
| 6dd74de | | | 132 | </pre |
| 6dd74de | | | 133 | > |
| 6dd74de | | | 134 | </td> |
| 6dd74de | | | 135 | <td> |
| 6dd74de | | | 136 | <pre id="diagram2" class="mermaid"> |
| 6dd74de | | | 137 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 138 | flowchart LR |
| 6dd74de | | | 139 | id1([This is the text in the box]) |
| 6dd74de | | | 140 | </pre |
| 6dd74de | | | 141 | > |
| 6dd74de | | | 142 | </td> |
| 6dd74de | | | 143 | <td> |
| 6dd74de | | | 144 | <pre id="diagram3" class="mermaid"> |
| 6dd74de | | | 145 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 146 | flowchart LR |
| 6dd74de | | | 147 | id1([This is the text in the box]) |
| 6dd74de | | | 148 | </pre |
| 6dd74de | | | 149 | > |
| 6dd74de | | | 150 | </td> |
| 6dd74de | | | 151 | <td> |
| 6dd74de | | | 152 | <pre id="diagram4" class="mermaid"> |
| 6dd74de | | | 153 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 154 | flowchart LR |
| 6dd74de | | | 155 | id1([This is the text in the box]) |
| 6dd74de | | | 156 | </pre |
| 6dd74de | | | 157 | > |
| 6dd74de | | | 158 | </td> |
| 6dd74de | | | 159 | </tr> |
| 6dd74de | | | 160 | <!-- Separator row --> |
| 6dd74de | | | 161 | <tr class="separator"> |
| 6dd74de | | | 162 | <td colspan="5"></td> |
| 6dd74de | | | 163 | <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 164 | </tr> |
| 6dd74de | | | 165 | |
| 6dd74de | | | 166 | <tr> |
| 6dd74de | | | 167 | <th class="vertical-header"> |
| 6dd74de | | | 168 | <button class="collapsible">Sub-Routine shape</button> |
| 6dd74de | | | 169 | <div class="content"> |
| 6dd74de | | | 170 | <div class="pre-scrollable"> |
| 6dd74de | | | 171 | <pre> |
| 6dd74de | | | 172 | flowchart LR |
| 6dd74de | | | 173 | id1[[This is the text in the box]] |
| 6dd74de | | | 174 | </pre |
| 6dd74de | | | 175 | > |
| 6dd74de | | | 176 | </div> |
| 6dd74de | | | 177 | </div> |
| 6dd74de | | | 178 | </th> |
| 6dd74de | | | 179 | <td> |
| 6dd74de | | | 180 | <pre id="diagram5" class="mermaid"> |
| 6dd74de | | | 181 | flowchart LR |
| 6dd74de | | | 182 | id1[[This is the text in the box]] |
| 6dd74de | | | 183 | </pre |
| 6dd74de | | | 184 | > |
| 6dd74de | | | 185 | </td> |
| 6dd74de | | | 186 | <td> |
| 6dd74de | | | 187 | <pre id="diagram6" class="mermaid"> |
| 6dd74de | | | 188 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 189 | flowchart LR |
| 6dd74de | | | 190 | id1[[This is the text in the box]] |
| 6dd74de | | | 191 | </pre |
| 6dd74de | | | 192 | > |
| 6dd74de | | | 193 | </td> |
| 6dd74de | | | 194 | <td> |
| 6dd74de | | | 195 | <pre id="diagram7" class="mermaid"> |
| 6dd74de | | | 196 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 197 | flowchart LR |
| 6dd74de | | | 198 | id1[[This is the text in the box]] |
| 6dd74de | | | 199 | </pre |
| 6dd74de | | | 200 | > |
| 6dd74de | | | 201 | </td> |
| 6dd74de | | | 202 | <td> |
| 6dd74de | | | 203 | <pre id="diagram8" class="mermaid"> |
| 6dd74de | | | 204 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 205 | flowchart LR |
| 6dd74de | | | 206 | id1[[This is the text in the box]] |
| 6dd74de | | | 207 | </pre |
| 6dd74de | | | 208 | > |
| 6dd74de | | | 209 | </td> |
| 6dd74de | | | 210 | </tr> |
| 6dd74de | | | 211 | <!-- Separator row --> |
| 6dd74de | | | 212 | <tr class="separator"> |
| 6dd74de | | | 213 | <td colspan="5"></td> |
| 6dd74de | | | 214 | <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 215 | </tr> |
| 6dd74de | | | 216 | |
| 6dd74de | | | 217 | <tr> |
| 6dd74de | | | 218 | <th class="vertical-header"> |
| 6dd74de | | | 219 | <button class="collapsible">Cylindrical shape</button> |
| 6dd74de | | | 220 | <div class="content"> |
| 6dd74de | | | 221 | <div class="pre-scrollable"> |
| 6dd74de | | | 222 | <pre> |
| 6dd74de | | | 223 | flowchart LR |
| 6dd74de | | | 224 | id1[(Database)] |
| 6dd74de | | | 225 | </pre |
| 6dd74de | | | 226 | > |
| 6dd74de | | | 227 | </div> |
| 6dd74de | | | 228 | </div> |
| 6dd74de | | | 229 | </th> |
| 6dd74de | | | 230 | <td> |
| 6dd74de | | | 231 | <pre id="diagram9" class="mermaid"> |
| 6dd74de | | | 232 | flowchart LR |
| 6dd74de | | | 233 | id1[(Database)] |
| 6dd74de | | | 234 | </pre |
| 6dd74de | | | 235 | > |
| 6dd74de | | | 236 | </td> |
| 6dd74de | | | 237 | <td> |
| 6dd74de | | | 238 | <pre id="diagram10" class="mermaid"> |
| 6dd74de | | | 239 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 240 | flowchart LR |
| 6dd74de | | | 241 | id1[(Database)] |
| 6dd74de | | | 242 | </pre |
| 6dd74de | | | 243 | > |
| 6dd74de | | | 244 | </td> |
| 6dd74de | | | 245 | <td> |
| 6dd74de | | | 246 | <pre id="diagram11" class="mermaid"> |
| 6dd74de | | | 247 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 248 | flowchart LR |
| 6dd74de | | | 249 | id1[(Database)] |
| 6dd74de | | | 250 | </pre |
| 6dd74de | | | 251 | > |
| 6dd74de | | | 252 | </td> |
| 6dd74de | | | 253 | <td> |
| 6dd74de | | | 254 | <pre id="diagram12" class="mermaid"> |
| 6dd74de | | | 255 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 256 | flowchart LR |
| 6dd74de | | | 257 | id1[(Database)] |
| 6dd74de | | | 258 | </pre |
| 6dd74de | | | 259 | > |
| 6dd74de | | | 260 | </td> |
| 6dd74de | | | 261 | </tr> |
| 6dd74de | | | 262 | <!-- Separator row --> |
| 6dd74de | | | 263 | <tr class="separator"> |
| 6dd74de | | | 264 | <td colspan="5"></td> |
| 6dd74de | | | 265 | <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 266 | </tr> |
| 6dd74de | | | 267 | |
| 6dd74de | | | 268 | <tr> |
| 6dd74de | | | 269 | <th class="vertical-header"> |
| 6dd74de | | | 270 | <button class="collapsible">Circle shape</button> |
| 6dd74de | | | 271 | <div class="content"> |
| 6dd74de | | | 272 | <div class="pre-scrollable"> |
| 6dd74de | | | 273 | <pre> |
| 6dd74de | | | 274 | flowchart LR |
| 6dd74de | | | 275 | id1((This is the text in the circle)) |
| 6dd74de | | | 276 | </pre |
| 6dd74de | | | 277 | > |
| 6dd74de | | | 278 | </div> |
| 6dd74de | | | 279 | </div> |
| 6dd74de | | | 280 | </th> |
| 6dd74de | | | 281 | <td> |
| 6dd74de | | | 282 | <pre id="diagram13" class="mermaid"> |
| 6dd74de | | | 283 | flowchart LR |
| 6dd74de | | | 284 | id1((This is the text in the circle)) |
| 6dd74de | | | 285 | </pre |
| 6dd74de | | | 286 | > |
| 6dd74de | | | 287 | </td> |
| 6dd74de | | | 288 | <td> |
| 6dd74de | | | 289 | <pre id="diagram14" class="mermaid"> |
| 6dd74de | | | 290 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 291 | flowchart LR |
| 6dd74de | | | 292 | id1((This is the text in the circle)) |
| 6dd74de | | | 293 | </pre |
| 6dd74de | | | 294 | > |
| 6dd74de | | | 295 | </td> |
| 6dd74de | | | 296 | <td> |
| 6dd74de | | | 297 | <pre id="diagram15" class="mermaid"> |
| 6dd74de | | | 298 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 299 | flowchart LR |
| 6dd74de | | | 300 | id1((This is the text in the circle)) |
| 6dd74de | | | 301 | </pre |
| 6dd74de | | | 302 | > |
| 6dd74de | | | 303 | </td> |
| 6dd74de | | | 304 | <td> |
| 6dd74de | | | 305 | <pre id="diagram16" class="mermaid"> |
| 6dd74de | | | 306 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 307 | flowchart LR |
| 6dd74de | | | 308 | id1((This is the text in the circle)) |
| 6dd74de | | | 309 | </pre |
| 6dd74de | | | 310 | > |
| 6dd74de | | | 311 | </td> |
| 6dd74de | | | 312 | </tr> |
| 6dd74de | | | 313 | <!-- Separator row --> |
| 6dd74de | | | 314 | <tr class="separator"> |
| 6dd74de | | | 315 | <td colspan="5"></td> |
| 6dd74de | | | 316 | <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 317 | </tr> |
| 6dd74de | | | 318 | |
| 6dd74de | | | 319 | <tr> |
| 6dd74de | | | 320 | <th class="vertical-header"> |
| 6dd74de | | | 321 | <button class="collapsible">Double Circle shape</button> |
| 6dd74de | | | 322 | <div class="content"> |
| 6dd74de | | | 323 | <div class="pre-scrollable"> |
| 6dd74de | | | 324 | <pre> |
| 6dd74de | | | 325 | flowchart TD |
| 6dd74de | | | 326 | id1(((This is the text in the circle))) |
| 6dd74de | | | 327 | </pre |
| 6dd74de | | | 328 | > |
| 6dd74de | | | 329 | </div> |
| 6dd74de | | | 330 | </div> |
| 6dd74de | | | 331 | </th> |
| 6dd74de | | | 332 | <td> |
| 6dd74de | | | 333 | <pre id="diagram17" class="mermaid"> |
| 6dd74de | | | 334 | flowchart TD |
| 6dd74de | | | 335 | id1(((This is the text in the circle))) |
| 6dd74de | | | 336 | </pre |
| 6dd74de | | | 337 | > |
| 6dd74de | | | 338 | </td> |
| 6dd74de | | | 339 | <td> |
| 6dd74de | | | 340 | <pre id="diagram18" class="mermaid"> |
| 6dd74de | | | 341 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 342 | flowchart TD |
| 6dd74de | | | 343 | id1(((This is the text in the circle))) |
| 6dd74de | | | 344 | </pre |
| 6dd74de | | | 345 | > |
| 6dd74de | | | 346 | </td> |
| 6dd74de | | | 347 | <td> |
| 6dd74de | | | 348 | <pre id="diagram19" class="mermaid"> |
| 6dd74de | | | 349 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 350 | flowchart TD |
| 6dd74de | | | 351 | id1(((This is the text in the circle))) |
| 6dd74de | | | 352 | </pre |
| 6dd74de | | | 353 | > |
| 6dd74de | | | 354 | </td> |
| 6dd74de | | | 355 | <td> |
| 6dd74de | | | 356 | <pre id="diagram20" class="mermaid"> |
| 6dd74de | | | 357 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 358 | flowchart TD |
| 6dd74de | | | 359 | id1(((This is the text in the circle))) |
| 6dd74de | | | 360 | </pre |
| 6dd74de | | | 361 | > |
| 6dd74de | | | 362 | </td> |
| 6dd74de | | | 363 | </tr> |
| 6dd74de | | | 364 | <!-- Separator row --> |
| 6dd74de | | | 365 | <tr class="separator"> |
| 6dd74de | | | 366 | <td colspan="5"></td> |
| 6dd74de | | | 367 | <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 368 | </tr> |
| 6dd74de | | | 369 | |
| 6dd74de | | | 370 | <tr> |
| 6dd74de | | | 371 | <th class="vertical-header"> |
| 6dd74de | | | 372 | <button class="collapsible">Asymmetric shape</button> |
| 6dd74de | | | 373 | <div class="content"> |
| 6dd74de | | | 374 | <div class="pre-scrollable"> |
| 6dd74de | | | 375 | <pre> |
| 6dd74de | | | 376 | flowchart LR |
| 6dd74de | | | 377 | id1>This is the text in the box] |
| 6dd74de | | | 378 | </pre |
| 6dd74de | | | 379 | > |
| 6dd74de | | | 380 | </div> |
| 6dd74de | | | 381 | </div> |
| 6dd74de | | | 382 | </th> |
| 6dd74de | | | 383 | <td> |
| 6dd74de | | | 384 | <pre id="diagram21" class="mermaid"> |
| 6dd74de | | | 385 | flowchart LR |
| 6dd74de | | | 386 | id1>This is the text in the box] |
| 6dd74de | | | 387 | </pre |
| 6dd74de | | | 388 | > |
| 6dd74de | | | 389 | </td> |
| 6dd74de | | | 390 | <td> |
| 6dd74de | | | 391 | <pre id="diagram22" class="mermaid"> |
| 6dd74de | | | 392 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 393 | flowchart LR |
| 6dd74de | | | 394 | id1>This is the text in the box] |
| 6dd74de | | | 395 | </pre |
| 6dd74de | | | 396 | > |
| 6dd74de | | | 397 | </td> |
| 6dd74de | | | 398 | <td> |
| 6dd74de | | | 399 | <pre id="diagram23" class="mermaid"> |
| 6dd74de | | | 400 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 401 | flowchart LR |
| 6dd74de | | | 402 | id1>This is the text in the box] |
| 6dd74de | | | 403 | </pre |
| 6dd74de | | | 404 | > |
| 6dd74de | | | 405 | </td> |
| 6dd74de | | | 406 | <td> |
| 6dd74de | | | 407 | <pre id="diagram24" class="mermaid"> |
| 6dd74de | | | 408 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 409 | flowchart LR |
| 6dd74de | | | 410 | id1>This is the text in the box] |
| 6dd74de | | | 411 | </pre |
| 6dd74de | | | 412 | > |
| 6dd74de | | | 413 | </td> |
| 6dd74de | | | 414 | </tr> |
| 6dd74de | | | 415 | <!-- Separator row --> |
| 6dd74de | | | 416 | <tr class="separator"> |
| 6dd74de | | | 417 | <td colspan="5"></td> |
| 6dd74de | | | 418 | <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 419 | </tr> |
| 6dd74de | | | 420 | |
| 6dd74de | | | 421 | <tr> |
| 6dd74de | | | 422 | <th class="vertical-header"> |
| 6dd74de | | | 423 | <button class="collapsible">Rhombus/Diamond/Question shape</button> |
| 6dd74de | | | 424 | <div class="content"> |
| 6dd74de | | | 425 | <div class="pre-scrollable"> |
| 6dd74de | | | 426 | <pre> |
| 6dd74de | | | 427 | flowchart LR |
| 6dd74de | | | 428 | id1{This is the text in the box} |
| 6dd74de | | | 429 | </pre |
| 6dd74de | | | 430 | > |
| 6dd74de | | | 431 | </div> |
| 6dd74de | | | 432 | </div> |
| 6dd74de | | | 433 | </th> |
| 6dd74de | | | 434 | <td> |
| 6dd74de | | | 435 | <pre id="diagram25" class="mermaid"> |
| 6dd74de | | | 436 | flowchart LR |
| 6dd74de | | | 437 | id1{This is the text in the box} |
| 6dd74de | | | 438 | </pre |
| 6dd74de | | | 439 | > |
| 6dd74de | | | 440 | </td> |
| 6dd74de | | | 441 | <td> |
| 6dd74de | | | 442 | <pre id="diagram26" class="mermaid"> |
| 6dd74de | | | 443 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 444 | flowchart LR |
| 6dd74de | | | 445 | id1{This is the text in the box} |
| 6dd74de | | | 446 | </pre |
| 6dd74de | | | 447 | > |
| 6dd74de | | | 448 | </td> |
| 6dd74de | | | 449 | <td> |
| 6dd74de | | | 450 | <pre id="diagram27" class="mermaid"> |
| 6dd74de | | | 451 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 452 | flowchart LR |
| 6dd74de | | | 453 | id1{This is the text in the box} |
| 6dd74de | | | 454 | </pre |
| 6dd74de | | | 455 | > |
| 6dd74de | | | 456 | </td> |
| 6dd74de | | | 457 | <td> |
| 6dd74de | | | 458 | <pre id="diagram28" class="mermaid"> |
| 6dd74de | | | 459 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 460 | flowchart LR |
| 6dd74de | | | 461 | id1{This is the text in the box} |
| 6dd74de | | | 462 | </pre |
| 6dd74de | | | 463 | > |
| 6dd74de | | | 464 | </td> |
| 6dd74de | | | 465 | </tr> |
| 6dd74de | | | 466 | <!-- Separator row --> |
| 6dd74de | | | 467 | <tr class="separator"> |
| 6dd74de | | | 468 | <td colspan="5"></td> |
| 6dd74de | | | 469 | <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 470 | </tr> |
| 6dd74de | | | 471 | |
| 6dd74de | | | 472 | <tr> |
| 6dd74de | | | 473 | <th class="vertical-header"> |
| 6dd74de | | | 474 | <button class="collapsible">Hexagon shape</button> |
| 6dd74de | | | 475 | <div class="content"> |
| 6dd74de | | | 476 | <div class="pre-scrollable"> |
| 6dd74de | | | 477 | <pre> |
| 6dd74de | | | 478 | flowchart LR |
| 6dd74de | | | 479 | id1{{This is the text in the box}} |
| 6dd74de | | | 480 | </pre |
| 6dd74de | | | 481 | > |
| 6dd74de | | | 482 | </div> |
| 6dd74de | | | 483 | </div> |
| 6dd74de | | | 484 | </th> |
| 6dd74de | | | 485 | <td> |
| 6dd74de | | | 486 | <pre id="diagram29" class="mermaid"> |
| 6dd74de | | | 487 | flowchart LR |
| 6dd74de | | | 488 | id1{{This is the text in the box}} |
| 6dd74de | | | 489 | </pre |
| 6dd74de | | | 490 | > |
| 6dd74de | | | 491 | </td> |
| 6dd74de | | | 492 | <td> |
| 6dd74de | | | 493 | <pre id="diagram31" class="mermaid"> |
| 6dd74de | | | 494 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 495 | flowchart LR |
| 6dd74de | | | 496 | id1{{This is the text in the box}} |
| 6dd74de | | | 497 | </pre |
| 6dd74de | | | 498 | > |
| 6dd74de | | | 499 | </td> |
| 6dd74de | | | 500 | <td> |
| 6dd74de | | | 501 | <pre id="diagram32" class="mermaid"> |
| 6dd74de | | | 502 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 503 | flowchart LR |
| 6dd74de | | | 504 | id1{{This is the text in the box}} |
| 6dd74de | | | 505 | </pre |
| 6dd74de | | | 506 | > |
| 6dd74de | | | 507 | </td> |
| 6dd74de | | | 508 | </tr> |
| 6dd74de | | | 509 | <!-- Separator row --> |
| 6dd74de | | | 510 | <tr class="separator"> |
| 6dd74de | | | 511 | <td colspan="5"></td> |
| 6dd74de | | | 512 | <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 513 | </tr> |
| 6dd74de | | | 514 | |
| 6dd74de | | | 515 | <tr> |
| 6dd74de | | | 516 | <th class="vertical-header"> |
| 6dd74de | | | 517 | <button class="collapsible">Parallelogram shape</button> |
| 6dd74de | | | 518 | <div class="content"> |
| 6dd74de | | | 519 | <div class="pre-scrollable"> |
| 6dd74de | | | 520 | <pre> |
| 6dd74de | | | 521 | flowchart TD |
| 6dd74de | | | 522 | id1[/This is the text in the box/] |
| 6dd74de | | | 523 | </pre |
| 6dd74de | | | 524 | > |
| 6dd74de | | | 525 | </div> |
| 6dd74de | | | 526 | </div> |
| 6dd74de | | | 527 | </th> |
| 6dd74de | | | 528 | <td> |
| 6dd74de | | | 529 | <pre id="diagram33" class="mermaid"> |
| 6dd74de | | | 530 | flowchart TD |
| 6dd74de | | | 531 | id1[/This is the text in the box/] |
| 6dd74de | | | 532 | </pre |
| 6dd74de | | | 533 | > |
| 6dd74de | | | 534 | </td> |
| 6dd74de | | | 535 | <td> |
| 6dd74de | | | 536 | <pre id="diagram34" class="mermaid"> |
| 6dd74de | | | 537 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 538 | flowchart TD |
| 6dd74de | | | 539 | id1[/This is the text in the box/] |
| 6dd74de | | | 540 | </pre |
| 6dd74de | | | 541 | > |
| 6dd74de | | | 542 | </td> |
| 6dd74de | | | 543 | <td> |
| 6dd74de | | | 544 | <pre id="diagram35" class="mermaid"> |
| 6dd74de | | | 545 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 546 | flowchart TD |
| 6dd74de | | | 547 | id1[/This is the text in the box/] |
| 6dd74de | | | 548 | </pre |
| 6dd74de | | | 549 | > |
| 6dd74de | | | 550 | </td> |
| 6dd74de | | | 551 | <td> |
| 6dd74de | | | 552 | <pre id="diagram36" class="mermaid"> |
| 6dd74de | | | 553 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 554 | flowchart TD |
| 6dd74de | | | 555 | id1[/This is the text in the box/] |
| 6dd74de | | | 556 | </pre |
| 6dd74de | | | 557 | > |
| 6dd74de | | | 558 | </td> |
| 6dd74de | | | 559 | </tr> |
| 6dd74de | | | 560 | <!-- Separator row --> |
| 6dd74de | | | 561 | <tr class="separator"> |
| 6dd74de | | | 562 | <td colspan="5"></td> |
| 6dd74de | | | 563 | <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 564 | </tr> |
| 6dd74de | | | 565 | |
| 6dd74de | | | 566 | <tr> |
| 6dd74de | | | 567 | <th class="vertical-header"> |
| 6dd74de | | | 568 | <button class="collapsible">Parallelogram Alt shape</button> |
| 6dd74de | | | 569 | <div class="content"> |
| 6dd74de | | | 570 | <div class="pre-scrollable"> |
| 6dd74de | | | 571 | <pre> |
| 6dd74de | | | 572 | flowchart TD |
| 6dd74de | | | 573 | id1[\This is the text in the box\] |
| 6dd74de | | | 574 | </pre |
| 6dd74de | | | 575 | > |
| 6dd74de | | | 576 | </div> |
| 6dd74de | | | 577 | </div> |
| 6dd74de | | | 578 | </th> |
| 6dd74de | | | 579 | <td> |
| 6dd74de | | | 580 | <pre id="diagram37" class="mermaid"> |
| 6dd74de | | | 581 | flowchart TD |
| 6dd74de | | | 582 | id1[\This is the text in the box\] |
| 6dd74de | | | 583 | </pre |
| 6dd74de | | | 584 | > |
| 6dd74de | | | 585 | </td> |
| 6dd74de | | | 586 | <td> |
| 6dd74de | | | 587 | <pre id="diagram38" class="mermaid"> |
| 6dd74de | | | 588 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 589 | flowchart TD |
| 6dd74de | | | 590 | id1[\This is the text in the box\] |
| 6dd74de | | | 591 | </pre |
| 6dd74de | | | 592 | > |
| 6dd74de | | | 593 | </td> |
| 6dd74de | | | 594 | <td> |
| 6dd74de | | | 595 | <pre id="diagram39" class="mermaid"> |
| 6dd74de | | | 596 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 597 | flowchart TD |
| 6dd74de | | | 598 | id1[\This is the text in the box\] |
| 6dd74de | | | 599 | </pre |
| 6dd74de | | | 600 | > |
| 6dd74de | | | 601 | </td> |
| 6dd74de | | | 602 | <td> |
| 6dd74de | | | 603 | <pre id="diagram40" class="mermaid"> |
| 6dd74de | | | 604 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 605 | flowchart TD |
| 6dd74de | | | 606 | id1[\This is the text in the box\] |
| 6dd74de | | | 607 | |
| 6dd74de | | | 608 | </pre |
| 6dd74de | | | 609 | > |
| 6dd74de | | | 610 | </td> |
| 6dd74de | | | 611 | </tr> |
| 6dd74de | | | 612 | <!-- Separator row --> |
| 6dd74de | | | 613 | <tr class="separator"> |
| 6dd74de | | | 614 | <td colspan="5"></td> |
| 6dd74de | | | 615 | <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 616 | </tr> |
| 6dd74de | | | 617 | |
| 6dd74de | | | 618 | <tr> |
| 6dd74de | | | 619 | <th class="vertical-header"> |
| 6dd74de | | | 620 | <button class="collapsible">Trapezoid shape</button> |
| 6dd74de | | | 621 | <div class="content"> |
| 6dd74de | | | 622 | <div class="pre-scrollable"> |
| 6dd74de | | | 623 | <pre> |
| 6dd74de | | | 624 | flowchart TD |
| 6dd74de | | | 625 | A[/Christmas\] |
| 6dd74de | | | 626 | </pre |
| 6dd74de | | | 627 | > |
| 6dd74de | | | 628 | </div> |
| 6dd74de | | | 629 | </div> |
| 6dd74de | | | 630 | </th> |
| 6dd74de | | | 631 | <td> |
| 6dd74de | | | 632 | <pre id="diagram41" class="mermaid"> |
| 6dd74de | | | 633 | flowchart TD |
| 6dd74de | | | 634 | A[/Christmas\] |
| 6dd74de | | | 635 | </pre |
| 6dd74de | | | 636 | > |
| 6dd74de | | | 637 | </td> |
| 6dd74de | | | 638 | <td> |
| 6dd74de | | | 639 | <pre id="diagram42" class="mermaid"> |
| 6dd74de | | | 640 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 641 | flowchart TD |
| 6dd74de | | | 642 | A[/Christmas\] |
| 6dd74de | | | 643 | </pre |
| 6dd74de | | | 644 | > |
| 6dd74de | | | 645 | </td> |
| 6dd74de | | | 646 | <td> |
| 6dd74de | | | 647 | <pre id="diagram43" class="mermaid"> |
| 6dd74de | | | 648 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 649 | flowchart TD |
| 6dd74de | | | 650 | A[/Christmas\] |
| 6dd74de | | | 651 | </pre |
| 6dd74de | | | 652 | > |
| 6dd74de | | | 653 | </td> |
| 6dd74de | | | 654 | <td> |
| 6dd74de | | | 655 | <pre id="diagram44" class="mermaid"> |
| 6dd74de | | | 656 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 657 | flowchart TD |
| 6dd74de | | | 658 | A[/Christmas\] |
| 6dd74de | | | 659 | </pre |
| 6dd74de | | | 660 | > |
| 6dd74de | | | 661 | </td> |
| 6dd74de | | | 662 | </tr> |
| 6dd74de | | | 663 | <!-- Separator row --> |
| 6dd74de | | | 664 | <tr class="separator"> |
| 6dd74de | | | 665 | <td colspan="5"></td> |
| 6dd74de | | | 666 | <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 667 | </tr> |
| 6dd74de | | | 668 | |
| 6dd74de | | | 669 | <tr> |
| 6dd74de | | | 670 | <th class="vertical-header"> |
| 6dd74de | | | 671 | <button class="collapsible">Trapezoid Alt shape</button> |
| 6dd74de | | | 672 | <div class="content"> |
| 6dd74de | | | 673 | <div class="pre-scrollable"> |
| 6dd74de | | | 674 | <pre> |
| 6dd74de | | | 675 | flowchart TD |
| 6dd74de | | | 676 | A[\Christmas/] |
| 6dd74de | | | 677 | </pre |
| 6dd74de | | | 678 | > |
| 6dd74de | | | 679 | </div> |
| 6dd74de | | | 680 | </div> |
| 6dd74de | | | 681 | </th> |
| 6dd74de | | | 682 | <td> |
| 6dd74de | | | 683 | <pre id="diagram45" class="mermaid"> |
| 6dd74de | | | 684 | flowchart TD |
| 6dd74de | | | 685 | A[\Christmas/] |
| 6dd74de | | | 686 | </pre |
| 6dd74de | | | 687 | > |
| 6dd74de | | | 688 | </td> |
| 6dd74de | | | 689 | <td> |
| 6dd74de | | | 690 | <pre id="diagram46" class="mermaid"> |
| 6dd74de | | | 691 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 692 | flowchart TD |
| 6dd74de | | | 693 | A[\Christmas/] |
| 6dd74de | | | 694 | </pre |
| 6dd74de | | | 695 | > |
| 6dd74de | | | 696 | </td> |
| 6dd74de | | | 697 | <td> |
| 6dd74de | | | 698 | <pre id="diagram47" class="mermaid"> |
| 6dd74de | | | 699 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 700 | flowchart TD |
| 6dd74de | | | 701 | A[\Christmas/] |
| 6dd74de | | | 702 | </pre |
| 6dd74de | | | 703 | > |
| 6dd74de | | | 704 | </td> |
| 6dd74de | | | 705 | <td> |
| 6dd74de | | | 706 | <pre id="diagram48" class="mermaid"> |
| 6dd74de | | | 707 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 708 | flowchart TD |
| 6dd74de | | | 709 | A[\Christmas/] |
| 6dd74de | | | 710 | </pre |
| 6dd74de | | | 711 | > |
| 6dd74de | | | 712 | </td> |
| 6dd74de | | | 713 | </tr> |
| 6dd74de | | | 714 | <!-- Separator row --> |
| 6dd74de | | | 715 | <tr class="separator"> |
| 6dd74de | | | 716 | <td colspan="5"></td> |
| 6dd74de | | | 717 | <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 718 | </tr> |
| 6dd74de | | | 719 | |
| 6dd74de | | | 720 | <tr> |
| 6dd74de | | | 721 | <th class="vertical-header"> |
| 6dd74de | | | 722 | <button class="collapsible">Rect with rounded corner</button> |
| 6dd74de | | | 723 | <div class="content"> |
| 6dd74de | | | 724 | <div class="pre-scrollable"> |
| 6dd74de | | | 725 | <pre> |
| 6dd74de | | | 726 | flowchart LR |
| 6dd74de | | | 727 | id1(This is the text in the box) |
| 6dd74de | | | 728 | </pre |
| 6dd74de | | | 729 | > |
| 6dd74de | | | 730 | </div> |
| 6dd74de | | | 731 | </div> |
| 6dd74de | | | 732 | </th> |
| 6dd74de | | | 733 | <td> |
| 6dd74de | | | 734 | <pre id="diagram49" class="mermaid"> |
| 6dd74de | | | 735 | flowchart LR |
| 6dd74de | | | 736 | id1(This is the text in the box) |
| 6dd74de | | | 737 | </pre |
| 6dd74de | | | 738 | > |
| 6dd74de | | | 739 | </td> |
| 6dd74de | | | 740 | <td> |
| 6dd74de | | | 741 | <pre id="diagram50" class="mermaid"> |
| 6dd74de | | | 742 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 743 | flowchart LR |
| 6dd74de | | | 744 | id1(This is the text in the box) |
| 6dd74de | | | 745 | </pre |
| 6dd74de | | | 746 | > |
| 6dd74de | | | 747 | </td> |
| 6dd74de | | | 748 | <td> |
| 6dd74de | | | 749 | <pre id="diagram51" class="mermaid"> |
| 6dd74de | | | 750 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 751 | flowchart LR |
| 6dd74de | | | 752 | id1(This is the text in the box) |
| 6dd74de | | | 753 | </pre |
| 6dd74de | | | 754 | > |
| 6dd74de | | | 755 | </td> |
| 6dd74de | | | 756 | <td> |
| 6dd74de | | | 757 | <pre id="diagram52" class="mermaid"> |
| 6dd74de | | | 758 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 759 | flowchart LR |
| 6dd74de | | | 760 | id1(This is the text in the box) |
| 6dd74de | | | 761 | </pre |
| 6dd74de | | | 762 | > |
| 6dd74de | | | 763 | </td> |
| 6dd74de | | | 764 | </tr> |
| 6dd74de | | | 765 | <!-- Separator row --> |
| 6dd74de | | | 766 | <tr class="separator"> |
| 6dd74de | | | 767 | <td colspan="5"></td> |
| 6dd74de | | | 768 | <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 769 | </tr> |
| 6dd74de | | | 770 | |
| 6dd74de | | | 771 | <tr> |
| 6dd74de | | | 772 | <th class="vertical-header"> |
| 6dd74de | | | 773 | <button class="collapsible">Rect with sharp corner</button> |
| 6dd74de | | | 774 | <div class="content"> |
| 6dd74de | | | 775 | <div class="pre-scrollable"> |
| 6dd74de | | | 776 | <pre> |
| 6dd74de | | | 777 | flowchart LR |
| 6dd74de | | | 778 | id1[This is the text in the box] |
| 6dd74de | | | 779 | </pre |
| 6dd74de | | | 780 | > |
| 6dd74de | | | 781 | </div> |
| 6dd74de | | | 782 | </div> |
| 6dd74de | | | 783 | </th> |
| 6dd74de | | | 784 | <td> |
| 6dd74de | | | 785 | <pre id="diagram53" class="mermaid"> |
| 6dd74de | | | 786 | flowchart LR |
| 6dd74de | | | 787 | id1[This is the text in the box] |
| 6dd74de | | | 788 | </pre |
| 6dd74de | | | 789 | > |
| 6dd74de | | | 790 | </td> |
| 6dd74de | | | 791 | <td> |
| 6dd74de | | | 792 | <pre id="diagram54" class="mermaid"> |
| 6dd74de | | | 793 | %%{init: {"look": "handDrawn"} }%% |
| 6dd74de | | | 794 | flowchart LR |
| 6dd74de | | | 795 | id1[This is the text in the box] |
| 6dd74de | | | 796 | </pre |
| 6dd74de | | | 797 | > |
| 6dd74de | | | 798 | </td> |
| 6dd74de | | | 799 | <td> |
| 6dd74de | | | 800 | <pre id="diagram55" class="mermaid"> |
| 6dd74de | | | 801 | %%{init: {"handDrawn": false, "layout": "elk"} }%% |
| 6dd74de | | | 802 | flowchart LR |
| 6dd74de | | | 803 | id1[This is the text in the box] |
| 6dd74de | | | 804 | </pre |
| 6dd74de | | | 805 | > |
| 6dd74de | | | 806 | </td> |
| 6dd74de | | | 807 | <td> |
| 6dd74de | | | 808 | <pre id="diagram56" class="mermaid"> |
| 6dd74de | | | 809 | %%{init: {"look": "handDrawn", "layout": "elk"} }%% |
| 6dd74de | | | 810 | flowchart LR |
| 6dd74de | | | 811 | id1[This is the text in the box] |
| 6dd74de | | | 812 | </pre |
| 6dd74de | | | 813 | > |
| 6dd74de | | | 814 | </td> |
| 6dd74de | | | 815 | </tr> |
| 6dd74de | | | 816 | <!-- Separator row --> |
| 6dd74de | | | 817 | <tr class="separator"> |
| 6dd74de | | | 818 | <td colspan="5"></td> |
| 6dd74de | | | 819 | <!-- This cell spans all columns including the vertical header --> |
| 6dd74de | | | 820 | </tr> |
| 6dd74de | | | 821 | </table> |
| 6dd74de | | | 822 | |
| 6dd74de | | | 823 | <script type="module"> |
| 6dd74de | | | 824 | import mermaid from './mermaid.esm.mjs'; |
| 6dd74de | | | 825 | import layouts from './mermaid-layout-elk.esm.mjs'; |
| 6dd74de | | | 826 | mermaid.registerLayoutLoaders(layouts); |
| 6dd74de | | | 827 | mermaid.parseError = function (err, hash) {}; |
| 6dd74de | | | 828 | |
| 6dd74de | | | 829 | mermaid.initialize({ |
| 6dd74de | | | 830 | handDrawn: false, |
| 6dd74de | | | 831 | mergeEdges: true, |
| 6dd74de | | | 832 | layout: 'dagre', |
| 6dd74de | | | 833 | flowchart: { titleTopMargin: 10 }, |
| 6dd74de | | | 834 | // fontFamily: 'Caveat', |
| 6dd74de | | | 835 | fontFamily: 'Kalam', |
| 6dd74de | | | 836 | sequence: { |
| 6dd74de | | | 837 | actorFontFamily: 'courier', |
| 6dd74de | | | 838 | noteFontFamily: 'courier', |
| 6dd74de | | | 839 | messageFontFamily: 'courier', |
| 6dd74de | | | 840 | }, |
| 6dd74de | | | 841 | fontSize: 16, |
| 6dd74de | | | 842 | logLevel: 0, |
| 6dd74de | | | 843 | }); |
| 6dd74de | | | 844 | function callback() { |
| 6dd74de | | | 845 | alert('It worked'); |
| 6dd74de | | | 846 | } |
| 6dd74de | | | 847 | mermaid.parseError = function (err, hash) { |
| 6dd74de | | | 848 | console.error('In parse error:'); |
| 6dd74de | | | 849 | console.error(err); |
| 6dd74de | | | 850 | }; |
| 6dd74de | | | 851 | |
| 6dd74de | | | 852 | let coll = document.getElementsByClassName('collapsible'); |
| 6dd74de | | | 853 | for (const element of coll) { |
| 6dd74de | | | 854 | element.addEventListener('click', function () { |
| 6dd74de | | | 855 | this.classList.toggle('active'); |
| 6dd74de | | | 856 | let content = this.nextElementSibling; |
| 6dd74de | | | 857 | if (content.style.maxHeight) { |
| 6dd74de | | | 858 | content.style.maxHeight = null; |
| 6dd74de | | | 859 | } else { |
| 6dd74de | | | 860 | content.style.maxHeight = content.scrollHeight + 'px'; |
| 6dd74de | | | 861 | } |
| 6dd74de | | | 862 | }); |
| 6dd74de | | | 863 | } |
| 6dd74de | | | 864 | </script> |
| 6dd74de | | | 865 | </body> |
| 6dd74de | | | 866 | </html> |