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