| 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 | <style> |
| 6dd74de | | | 18 | body { |
| 6dd74de | | | 19 | /* background: rgb(221, 208, 208); */ |
| 6dd74de | | | 20 | /* background:#333; */ |
| 6dd74de | | | 21 | font-family: 'Arial'; |
| 6dd74de | | | 22 | /* font-size: 18px !important; */ |
| 6dd74de | | | 23 | } |
| 6dd74de | | | 24 | h1 { |
| 6dd74de | | | 25 | color: grey; |
| 6dd74de | | | 26 | } |
| 6dd74de | | | 27 | .mermaid2 { |
| 6dd74de | | | 28 | display: none; |
| 6dd74de | | | 29 | } |
| 6dd74de | | | 30 | .mermaid svg { |
| 6dd74de | | | 31 | /* font-size: 18px !important; */ |
| 6dd74de | | | 32 | background-color: #efefef; |
| 6dd74de | | | 33 | background-image: |
| 6dd74de | | | 34 | radial-gradient(#fff 51%, transparent 91%), radial-gradient(#fff 51%, transparent 91%); |
| 6dd74de | | | 35 | background-size: 20px 20px; |
| 6dd74de | | | 36 | background-position: |
| 6dd74de | | | 37 | 0 0, |
| 6dd74de | | | 38 | 10px 10px; |
| 6dd74de | | | 39 | background-repeat: repeat; |
| 6dd74de | | | 40 | } |
| 6dd74de | | | 41 | .malware { |
| 6dd74de | | | 42 | position: fixed; |
| 6dd74de | | | 43 | bottom: 0; |
| 6dd74de | | | 44 | left: 0; |
| 6dd74de | | | 45 | right: 0; |
| 6dd74de | | | 46 | height: 150px; |
| 6dd74de | | | 47 | background: red; |
| 6dd74de | | | 48 | color: black; |
| 6dd74de | | | 49 | display: flex; |
| 6dd74de | | | 50 | display: flex; |
| 6dd74de | | | 51 | justify-content: center; |
| 6dd74de | | | 52 | align-items: center; |
| 6dd74de | | | 53 | font-family: monospace; |
| 6dd74de | | | 54 | font-size: 72px; |
| 6dd74de | | | 55 | } |
| 6dd74de | | | 56 | /* tspan { |
| 6dd74de | | | 57 | font-size: 6px !important; |
| 6dd74de | | | 58 | } */ |
| 6dd74de | | | 59 | </style> |
| 6dd74de | | | 60 | </head> |
| 6dd74de | | | 61 | <body> |
| 6dd74de | | | 62 | <pre id="diagram" class="mermaid"> |
| 6dd74de | | | 63 | stateDiagram-v2 |
| 6dd74de | | | 64 | [*] --> Still |
| 6dd74de | | | 65 | Still --> [*] |
| 6dd74de | | | 66 | Still --> Moving |
| 6dd74de | | | 67 | Moving --> Still |
| 6dd74de | | | 68 | Moving --> Crash |
| 6dd74de | | | 69 | Crash --> [*] </pre |
| 6dd74de | | | 70 | > |
| 6dd74de | | | 71 | <pre id="diagram" class="mermaid2"> |
| 6dd74de | | | 72 | flowchart RL |
| 6dd74de | | | 73 | subgraph "`one`" |
| 6dd74de | | | 74 | a1 -- l1 --> a2 |
| 6dd74de | | | 75 | a1 -- l2 --> a2 |
| 6dd74de | | | 76 | end |
| 6dd74de | | | 77 | </pre> |
| 6dd74de | | | 78 | <pre id="diagram" class="mermaid"> |
| 6dd74de | | | 79 | flowchart RL |
| 6dd74de | | | 80 | subgraph "`one`" |
| 6dd74de | | | 81 | a1 -- l1 --> a2 |
| 6dd74de | | | 82 | a1 -- l2 --> a2 |
| 6dd74de | | | 83 | end |
| 6dd74de | | | 84 | </pre> |
| 6dd74de | | | 85 | <pre id="diagram" class="mermaid2"> |
| 6dd74de | | | 86 | flowchart |
| 6dd74de | | | 87 | id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]</pre |
| 6dd74de | | | 88 | > |
| 6dd74de | | | 89 | <pre id="diagram" class="mermaid2"> |
| 6dd74de | | | 90 | flowchart LR |
| 6dd74de | | | 91 | A[A text that needs to be wrapped wraps to another line] |
| 6dd74de | | | 92 | B[A text that needs to be<br/>wrapped wraps to another line] |
| 6dd74de | | | 93 | C["`A text that needs to be wrapped to another line`"]</pre> |
| 6dd74de | | | 94 | <pre id="diagram" class="mermaid2"> |
| 6dd74de | | | 95 | flowchart LR |
| 6dd74de | | | 96 | C["`A text |
| 6dd74de | | | 97 | that needs |
| 6dd74de | | | 98 | to be wrapped |
| 6dd74de | | | 99 | in another |
| 6dd74de | | | 100 | way`"] |
| 6dd74de | | | 101 | </pre |
| 6dd74de | | | 102 | > |
| 6dd74de | | | 103 | <pre id="diagram" class="mermaid"> |
| 6dd74de | | | 104 | classDiagram-v2 |
| 6dd74de | | | 105 | note "I love this diagram!\nDo you love it?" |
| 6dd74de | | | 106 | </pre> |
| 6dd74de | | | 107 | <pre id="diagram" class="mermaid"> |
| 6dd74de | | | 108 | stateDiagram-v2 |
| 6dd74de | | | 109 | State1: The state with a note with minus - and plus + in it |
| 6dd74de | | | 110 | note left of State1 |
| 6dd74de | | | 111 | Important information! You can write |
| 6dd74de | | | 112 | notes with . and in them. |
| 6dd74de | | | 113 | end note </pre |
| 6dd74de | | | 114 | > |
| 6dd74de | | | 115 | <pre id="diagram" class="mermaid2"> |
| 6dd74de | | | 116 | mindmap |
| 6dd74de | | | 117 | root |
| 6dd74de | | | 118 | Child3(A node with an icon and with a long text that wraps to keep the node size in check) |
| 6dd74de | | | 119 | </pre |
| 6dd74de | | | 120 | > |
| 6dd74de | | | 121 | <pre id="diagram" class="mermaid2"> |
| 6dd74de | | | 122 | %%{init: {"theme": "forest"} }%% |
| 6dd74de | | | 123 | mindmap |
| 6dd74de | | | 124 | id1[**Start2**<br/>end] |
| 6dd74de | | | 125 | id2[**Start2**<br />end] |
| 6dd74de | | | 126 | %% Another comment |
| 6dd74de | | | 127 | id3[**Start2**<br>end] %% Comment |
| 6dd74de | | | 128 | id4[**Start2**<br >end<br >the very end] |
| 6dd74de | | | 129 | </pre> |
| 6dd74de | | | 130 | <pre id="diagram" class="mermaid2"> |
| 6dd74de | | | 131 | mindmap |
| 6dd74de | | | 132 | id1["`**Start2** |
| 6dd74de | | | 133 | second line 😎 with long text that is wrapping to the next line`"] |
| 6dd74de | | | 134 | id2["`Child **with bold** text`"] |
| 6dd74de | | | 135 | id3["`Children of which some |
| 6dd74de | | | 136 | is using *italic type of* text`"] |
| 6dd74de | | | 137 | id4[Child] |
| 6dd74de | | | 138 | id5["`Child |
| 6dd74de | | | 139 | Row |
| 6dd74de | | | 140 | and another |
| 6dd74de | | | 141 | `"] |
| 6dd74de | | | 142 | </pre> |
| 6dd74de | | | 143 | <pre id="diagram" class="mermaid2"> |
| 6dd74de | | | 144 | mindmap |
| 6dd74de | | | 145 | id1("`**Root**`"] |
| 6dd74de | | | 146 | id2["`A formatted text... with **bold** and *italics*`"] |
| 6dd74de | | | 147 | id3[Regular labels works as usual] |
| 6dd74de | | | 148 | id4["`Emojis and unicode works too: 🤓 |
| 6dd74de | | | 149 | शान्तिः سلام 和平 `"] |
| 6dd74de | | | 150 | |
| 6dd74de | | | 151 | </pre> |
| 6dd74de | | | 152 | <pre id="diagram" class="mermaid"> |
| 6dd74de | | | 153 | %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%% |
| 6dd74de | | | 154 | flowchart TB |
| 6dd74de | | | 155 | %% I could not figure out how to use double quotes in labels in Mermaid |
| 6dd74de | | | 156 | subgraph ibm[IBM Espresso CPU] |
| 6dd74de | | | 157 | core0[IBM PowerPC Broadway Core 0] |
| 6dd74de | | | 158 | core1[IBM PowerPC Broadway Core 1] |
| 6dd74de | | | 159 | core2[IBM PowerPC Broadway Core 2] |
| 6dd74de | | | 160 | |
| 6dd74de | | | 161 | rom[16 KB ROM] |
| 6dd74de | | | 162 | |
| 6dd74de | | | 163 | core0 --- core2 |
| 6dd74de | | | 164 | |
| 6dd74de | | | 165 | rom --> core2 |
| 6dd74de | | | 166 | end |
| 6dd74de | | | 167 | |
| 6dd74de | | | 168 | subgraph amd["`**AMD** Latte GPU`"] |
| 6dd74de | | | 169 | mem[Memory & I/O Bridge] |
| 6dd74de | | | 170 | dram[DRAM Controller] |
| 6dd74de | | | 171 | edram[32 MB EDRAM MEM1] |
| 6dd74de | | | 172 | rom[512 B SEEPROM] |
| 6dd74de | | | 173 | |
| 6dd74de | | | 174 | sata[SATA IF] |
| 6dd74de | | | 175 | exi[EXI] |
| 6dd74de | | | 176 | |
| 6dd74de | | | 177 | subgraph gx[GX] |
| 6dd74de | | | 178 | sram[3 MB 1T-SRAM] |
| 6dd74de | | | 179 | end |
| 6dd74de | | | 180 | |
| 6dd74de | | | 181 | radeon[AMD Radeon R7xx GX2] |
| 6dd74de | | | 182 | |
| 6dd74de | | | 183 | mem --- gx |
| 6dd74de | | | 184 | mem --- radeon |
| 6dd74de | | | 185 | |
| 6dd74de | | | 186 | rom --- mem |
| 6dd74de | | | 187 | |
| 6dd74de | | | 188 | mem --- sata |
| 6dd74de | | | 189 | mem --- exi |
| 6dd74de | | | 190 | |
| 6dd74de | | | 191 | dram --- sata |
| 6dd74de | | | 192 | dram --- exi |
| 6dd74de | | | 193 | end |
| 6dd74de | | | 194 | |
| 6dd74de | | | 195 | ddr3[2 GB DDR3 RAM MEM2] |
| 6dd74de | | | 196 | |
| 6dd74de | | | 197 | mem --- ddr3 |
| 6dd74de | | | 198 | dram --- ddr3 |
| 6dd74de | | | 199 | edram --- ddr3 |
| 6dd74de | | | 200 | |
| 6dd74de | | | 201 | core1 --- mem |
| 6dd74de | | | 202 | |
| 6dd74de | | | 203 | exi --- rtc |
| 6dd74de | | | 204 | rtc{{rtc}} |
| 6dd74de | | | 205 | </pre |
| 6dd74de | | | 206 | > |
| 6dd74de | | | 207 | <pre id="diagram" class="mermaid2"> |
| 6dd74de | | | 208 | %%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%% |
| 6dd74de | | | 209 | flowchart TB |
| 6dd74de | | | 210 | %% I could not figure out how to use double quotes in labels in Mermaid |
| 6dd74de | | | 211 | subgraph ibm[IBM Espresso CPU] |
| 6dd74de | | | 212 | core0[IBM PowerPC Broadway Core 0] |
| 6dd74de | | | 213 | core1[IBM PowerPC Broadway Core 1] |
| 6dd74de | | | 214 | core2[IBM PowerPC Broadway Core 2] |
| 6dd74de | | | 215 | |
| 6dd74de | | | 216 | rom[16 KB ROM] |
| 6dd74de | | | 217 | |
| 6dd74de | | | 218 | core0 --- core2 |
| 6dd74de | | | 219 | |
| 6dd74de | | | 220 | rom --> core2 |
| 6dd74de | | | 221 | end |
| 6dd74de | | | 222 | |
| 6dd74de | | | 223 | subgraph amd["`**AMD** Latte GPU`"] |
| 6dd74de | | | 224 | mem[Memory & I/O Bridge] |
| 6dd74de | | | 225 | dram[DRAM Controller] |
| 6dd74de | | | 226 | edram[32 MB EDRAM MEM1] |
| 6dd74de | | | 227 | rom[512 B SEEPROM] |
| 6dd74de | | | 228 | |
| 6dd74de | | | 229 | sata[SATA IF] |
| 6dd74de | | | 230 | exi[EXI] |
| 6dd74de | | | 231 | |
| 6dd74de | | | 232 | subgraph gx[GX] |
| 6dd74de | | | 233 | sram[3 MB 1T-SRAM] |
| 6dd74de | | | 234 | end |
| 6dd74de | | | 235 | |
| 6dd74de | | | 236 | radeon[AMD Radeon R7xx GX2] |
| 6dd74de | | | 237 | |
| 6dd74de | | | 238 | mem --- gx |
| 6dd74de | | | 239 | mem --- radeon |
| 6dd74de | | | 240 | |
| 6dd74de | | | 241 | rom --- mem |
| 6dd74de | | | 242 | |
| 6dd74de | | | 243 | mem --- sata |
| 6dd74de | | | 244 | mem --- exi |
| 6dd74de | | | 245 | |
| 6dd74de | | | 246 | dram --- sata |
| 6dd74de | | | 247 | dram --- exi |
| 6dd74de | | | 248 | end |
| 6dd74de | | | 249 | |
| 6dd74de | | | 250 | ddr3[2 GB DDR3 RAM MEM2] |
| 6dd74de | | | 251 | |
| 6dd74de | | | 252 | mem --- ddr3 |
| 6dd74de | | | 253 | dram --- ddr3 |
| 6dd74de | | | 254 | edram --- ddr3 |
| 6dd74de | | | 255 | |
| 6dd74de | | | 256 | core1 --- mem |
| 6dd74de | | | 257 | |
| 6dd74de | | | 258 | exi --- rtc |
| 6dd74de | | | 259 | rtc{{rtc}} |
| 6dd74de | | | 260 | </pre |
| 6dd74de | | | 261 | > |
| 6dd74de | | | 262 | |
| 6dd74de | | | 263 | <br /> |
| 6dd74de | | | 264 | <pre id="diagram" class="mermaid2"> |
| 6dd74de | | | 265 | flowchart TB |
| 6dd74de | | | 266 | %% I could not figure out how to use double quotes in labels in Mermaid |
| 6dd74de | | | 267 | subgraph ibm[IBM Espresso CPU] |
| 6dd74de | | | 268 | core0[IBM PowerPC Broadway Core 0] |
| 6dd74de | | | 269 | core1[IBM PowerPC Broadway Core 1] |
| 6dd74de | | | 270 | core2[IBM PowerPC Broadway Core 2] |
| 6dd74de | | | 271 | |
| 6dd74de | | | 272 | rom[16 KB ROM] |
| 6dd74de | | | 273 | |
| 6dd74de | | | 274 | core0 --- core2 |
| 6dd74de | | | 275 | |
| 6dd74de | | | 276 | rom --> core2 |
| 6dd74de | | | 277 | end |
| 6dd74de | | | 278 | |
| 6dd74de | | | 279 | subgraph amd[AMD Latte GPU] |
| 6dd74de | | | 280 | mem[Memory & I/O Bridge] |
| 6dd74de | | | 281 | dram[DRAM Controller] |
| 6dd74de | | | 282 | edram[32 MB EDRAM MEM1] |
| 6dd74de | | | 283 | rom[512 B SEEPROM] |
| 6dd74de | | | 284 | |
| 6dd74de | | | 285 | sata[SATA IF] |
| 6dd74de | | | 286 | exi[EXI] |
| 6dd74de | | | 287 | |
| 6dd74de | | | 288 | subgraph gx[GX] |
| 6dd74de | | | 289 | sram[3 MB 1T-SRAM] |
| 6dd74de | | | 290 | end |
| 6dd74de | | | 291 | |
| 6dd74de | | | 292 | radeon[AMD Radeon R7xx GX2] |
| 6dd74de | | | 293 | |
| 6dd74de | | | 294 | mem --- gx |
| 6dd74de | | | 295 | mem --- radeon |
| 6dd74de | | | 296 | |
| 6dd74de | | | 297 | rom --- mem |
| 6dd74de | | | 298 | |
| 6dd74de | | | 299 | mem --- sata |
| 6dd74de | | | 300 | mem --- exi |
| 6dd74de | | | 301 | |
| 6dd74de | | | 302 | dram --- sata |
| 6dd74de | | | 303 | dram --- exi |
| 6dd74de | | | 304 | end |
| 6dd74de | | | 305 | |
| 6dd74de | | | 306 | ddr3[2 GB DDR3 RAM MEM2] |
| 6dd74de | | | 307 | |
| 6dd74de | | | 308 | mem --- ddr3 |
| 6dd74de | | | 309 | dram --- ddr3 |
| 6dd74de | | | 310 | edram --- ddr3 |
| 6dd74de | | | 311 | |
| 6dd74de | | | 312 | core1 --- mem |
| 6dd74de | | | 313 | |
| 6dd74de | | | 314 | exi --- rtc |
| 6dd74de | | | 315 | rtc{{rtc}} |
| 6dd74de | | | 316 | </pre |
| 6dd74de | | | 317 | > |
| 6dd74de | | | 318 | <br /> |
| 6dd74de | | | 319 | |
| 6dd74de | | | 320 | <pre id="diagram" class="mermaid2"> |
| 6dd74de | | | 321 | flowchart LR |
| 6dd74de | | | 322 | B1 --be be--x B2 |
| 6dd74de | | | 323 | B1 --bo bo--o B3 |
| 6dd74de | | | 324 | subgraph Ugge |
| 6dd74de | | | 325 | B2 |
| 6dd74de | | | 326 | B3 |
| 6dd74de | | | 327 | subgraph inner |
| 6dd74de | | | 328 | B4 |
| 6dd74de | | | 329 | B5 |
| 6dd74de | | | 330 | end |
| 6dd74de | | | 331 | subgraph inner2 |
| 6dd74de | | | 332 | subgraph deeper |
| 6dd74de | | | 333 | C4 |
| 6dd74de | | | 334 | C5 |
| 6dd74de | | | 335 | end |
| 6dd74de | | | 336 | C6 |
| 6dd74de | | | 337 | end |
| 6dd74de | | | 338 | |
| 6dd74de | | | 339 | B4 --> C4 |
| 6dd74de | | | 340 | |
| 6dd74de | | | 341 | B3 -- X --> B4 |
| 6dd74de | | | 342 | B2 --> inner |
| 6dd74de | | | 343 | |
| 6dd74de | | | 344 | C4 --> C5 |
| 6dd74de | | | 345 | end |
| 6dd74de | | | 346 | |
| 6dd74de | | | 347 | subgraph outer |
| 6dd74de | | | 348 | B6 |
| 6dd74de | | | 349 | end |
| 6dd74de | | | 350 | B6 --> B5 |
| 6dd74de | | | 351 | </pre |
| 6dd74de | | | 352 | > |
| 6dd74de | | | 353 | <pre id="diagram" class="mermaid2"> |
| 6dd74de | | | 354 | sequenceDiagram |
| 6dd74de | | | 355 | Customer->>+Stripe: Makes a payment request |
| 6dd74de | | | 356 | Stripe->>+Bank: Forwards the payment request to the bank |
| 6dd74de | | | 357 | Bank->>+Customer: Asks for authorization |
| 6dd74de | | | 358 | Customer->>+Bank: Provides authorization |
| 6dd74de | | | 359 | Bank->>+Stripe: Sends a response with payment details |
| 6dd74de | | | 360 | Stripe->>+Merchant: Sends a notification of payment receipt |
| 6dd74de | | | 361 | Merchant->>+Stripe: Confirms the payment |
| 6dd74de | | | 362 | Stripe->>+Customer: Sends a confirmation of payment |
| 6dd74de | | | 363 | Customer->>+Merchant: Receives goods or services |
| 6dd74de | | | 364 | </pre |
| 6dd74de | | | 365 | > |
| 6dd74de | | | 366 | <pre id="diagram" class="mermaid2"> |
| 6dd74de | | | 367 | mindmap |
| 6dd74de | | | 368 | root((mindmap)) |
| 6dd74de | | | 369 | Origins |
| 6dd74de | | | 370 | Long history |
| 6dd74de | | | 371 | ::icon(fa fa-book) |
| 6dd74de | | | 372 | Popularisation |
| 6dd74de | | | 373 | British popular psychology author Tony Buzan |
| 6dd74de | | | 374 | Research |
| 6dd74de | | | 375 | On effectiveness<br/>and features |
| 6dd74de | | | 376 | On Automatic creation |
| 6dd74de | | | 377 | Uses |
| 6dd74de | | | 378 | Creative techniques |
| 6dd74de | | | 379 | Strategic planning |
| 6dd74de | | | 380 | Argument mapping |
| 6dd74de | | | 381 | Tools |
| 6dd74de | | | 382 | Pen and paper |
| 6dd74de | | | 383 | Mermaid |
| 6dd74de | | | 384 | </pre> |
| 6dd74de | | | 385 | <br /> |
| 6dd74de | | | 386 | <pre id="diagram" class="mermaid2"> |
| 6dd74de | | | 387 | example-diagram |
| 6dd74de | | | 388 | </pre> |
| 6dd74de | | | 389 | |
| 6dd74de | | | 390 | <!-- <div id="cy"></div> --> |
| 6dd74de | | | 391 | <!-- <script src="/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> --> |
| 6dd74de | | | 392 | <!-- <script src="./mermaid-example-diagram-detector.js"></script> --> |
| 6dd74de | | | 393 | <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> --> |
| 6dd74de | | | 394 | <!-- <script src="./mermaid.js"></script> --> |
| 6dd74de | | | 395 | |
| 6dd74de | | | 396 | <scrpt> |
| 6dd74de | | | 397 | // import mindmap from '../../packages/mermaid-mindmap/src/detector'; // import example from |
| 6dd74de | | | 398 | '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs'; import mermaid |
| 6dd74de | | | 399 | from './mermaid.esm.mjs'; // await mermaid.registerExternalDiagrams([example]); |
| 6dd74de | | | 400 | mermaid.parseError = function (err, hash) { // console.error('Mermaid error: ', err); }; |
| 6dd74de | | | 401 | mermaid.initialize({ // theme: 'forest', startOnLoad: true, logLevel: 0, flowchart: { // |
| 6dd74de | | | 402 | defaultRenderer: 'elk', useMaxWidth: false, // htmlLabels: false, htmlLabels: true, }, // |
| 6dd74de | | | 403 | htmlLabels: false, gantt: { useMaxWidth: false, }, useMaxWidth: false, }); function callback() |
| 6dd74de | | | 404 | { alert('It worked'); } mermaid.parseError = function (err, hash) { console.error('In parse |
| 6dd74de | | | 405 | error:'); console.error(err); }; // mermaid.test1('first_slow', 1200).then((r) => |
| 6dd74de | | | 406 | console.info(r)); // mermaid.test1('second_fast', 200).then((r) => console.info(r)); // |
| 6dd74de | | | 407 | mermaid.test1('third_fast', 200).then((r) => console.info(r)); // mermaid.test1('forth_slow', |
| 6dd74de | | | 408 | 1200).then((r) => console.info(r)); |
| 6dd74de | | | 409 | </scrpt> |
| 6dd74de | | | 410 | <script |
| 6dd74de | | | 411 | type="text/javascript" |
| 6dd74de | | | 412 | src="https://cdn.jsdelivr.net/npm/mermaid@10.2.0/dist/mermaid.min.js" |
| 6dd74de | | | 413 | ></script> |
| 6dd74de | | | 414 | <script type="module"> |
| 6dd74de | | | 415 | import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.2.0/dist/mermaid.min.js'; |
| 6dd74de | | | 416 | (function () { |
| 6dd74de | | | 417 | mermaid.initialize({ startOnLoad: false }); |
| 6dd74de | | | 418 | const elements = document.getElementsByClassName('mermaid'); |
| 6dd74de | | | 419 | console.log(elements); |
| 6dd74de | | | 420 | let id = 0; |
| 6dd74de | | | 421 | [...elements].forEach((elem) => { |
| 6dd74de | | | 422 | const insertSvg = function (svgCode) { |
| 6dd74de | | | 423 | elem.innerHTML = svgCode; |
| 6dd74de | | | 424 | }; |
| 6dd74de | | | 425 | |
| 6dd74de | | | 426 | console.log(atob(elem.innerText)); |
| 6dd74de | | | 427 | |
| 6dd74de | | | 428 | mermaid.render(`graphDiv-${id++}`, atob(elem.innerText), insertSvg); |
| 6dd74de | | | 429 | }); |
| 6dd74de | | | 430 | })(); |
| 6dd74de | | | 431 | </script> |
| 6dd74de | | | 432 | </body> |
| 6dd74de | | | 433 | </html> |