19.0 KB833 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
15 rel="stylesheet"
16 />
17 <link
18 href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
19 rel="stylesheet"
20 />
21 <link rel="preconnect" href="https://fonts.googleapis.com" />
22 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
23 <link
24 href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
25 rel="stylesheet"
26 />
27 <link
28 href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
29 rel="stylesheet"
30 />
31 <link
32 href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
33 rel="stylesheet"
34 />
35
36 <style>
37 body {
38 /* background: rgb(221, 208, 208); */
39 /* background: #333; */
40 font-family: 'Arial';
41 /* color: white; */
42 /* font-size: 18px !important; */
43 }
44
45 h1 {
46 color: grey;
47 }
48
49 .mermaid2 {
50 display: none;
51 }
52
53 .mermaid svg {
54 /* font-size: 18px !important; */
55
56 /* background-color: #efefef;
57 background-image: radial-gradient(#fff 51%, transparent 91%),
58 radial-gradient(#fff 51%, transparent 91%);
59 background-size: 20px 20px;
60 background-position:
61 0 0,
62 10px 10px;
63 background-repeat: repeat; */
64 }
65
66 .malware {
67 position: fixed;
68 bottom: 0;
69 left: 0;
70 right: 0;
71 height: 150px;
72 background: red;
73 color: black;
74 display: flex;
75 display: flex;
76 justify-content: center;
77 align-items: center;
78 font-family: monospace;
79 font-size: 72px;
80 }
81
82 pre {
83 width: 100%;
84 }
85
86 /* tspan {
87 font-size: 6px !important;
88 } */
89 /* .flowchart-link {
90 stroke-dasharray: 4, 4 !important;
91 animation: flow 1s linear infinite;
92 animation: dashdraw 4.93282s linear infinite;
93 stroke-width: 2px !important;
94 } */
95
96 @keyframes dashdraw {
97 from {
98 stroke-dashoffset: 0;
99 }
100 }
101
102 /*stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: 4.932820s linear infinite;*/
103 /* stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;*/
104 </style>
105 </head>
106
107 <body>
108 <pre id="diagram4" class="mermaid">
109 ---
110 config:
111 layout: elk
112 ---
113 mindmap
114 root((mindmap))
115 Origins
116 Long history
117 ::icon(fa fa-book)
118 Popularisation
119 British popular psychology author Tony Buzan
120 Research
121 On effectiveness&lt;br/>and features
122 On Automatic creation
123 Uses
124 Creative techniques
125 Strategic planning
126 Argument mapping
127 Tools
128 id)I am a cloud(
129 id))I am a bang((
130 Tools
131 </pre>
132 <pre id="diagram4" class="mermaid">
133 ---
134 config:
135 layout: elk
136 ---
137 flowchart
138 aid0
139 </pre
140 >
141 <pre id="diagram4" class="mermaid">
142 ---
143 config:
144 layout: elk
145 ---
146 mindmap
147 aid0
148
149 </pre>
150 <pre id="diagram4" class="mermaid">
151 ---
152 config:
153 layout: ogdc
154 ---
155 flowchart-elk TB
156 c1-->a2
157 subgraph one
158 a1-->a2
159 end
160 subgraph two
161 b1-->b2
162 end
163 subgraph three
164 c1-->c2
165 end
166 one --> two
167 three --> two
168 two --> c2
169
170</pre
171 >
172 <pre id="diagram4" class="mermaid">
173 ---
174 config:
175 layout: elk
176 ---
177 flowchart TB
178
179 process_C
180 subgraph container_Alpha
181 subgraph process_B
182 pppB
183 end
184 subgraph process_A
185 pppA
186 end
187 process_B-->|via_AWSBatch|container_Beta
188 process_A-->|messages|container_Beta
189 end
190
191</pre
192 >
193 <pre id="diagram4" class="mermaid">
194 ---
195 config:
196 layout: elk
197 ---
198 flowchart TB
199 subgraph container_Beta
200 process_C
201 end
202 subgraph container_Alpha
203 subgraph process_B
204 pppB
205 end
206 subgraph process_A
207 pppA
208 end
209 process_B-->|via_AWSBatch|container_Beta
210 process_A-->|messages|container_Beta
211 end
212
213</pre
214 >
215 <pre id="diagram4" class="mermaid">
216 ---
217 config:
218 layout: elk
219 ---
220 flowchart TB
221 subgraph container_Beta
222 process_C
223 end
224
225 process_B-->|via_AWSBatch|container_Beta
226
227
228</pre
229 >
230 <pre id="diagram4" class="mermaid">
231 ---
232 config:
233 layout: elk
234 ---
235 classDiagram
236 note "I love this diagram!\nDo you love it?"
237 Class01 <|-- AveryLongClass : Cool
238 &lt;&lt;interface&gt;&gt; Class01
239 Class03 "1" *-- "*" Class04
240 Class05 "1" o-- "many" Class06
241 Class07 "1" .. "*" Class08
242 Class09 "1" --> "*" C2 : Where am i?
243 Class09 "*" --* "*" C3
244 Class09 "1" --|> "1" Class07
245 Class12 <|.. Class08
246 Class11 ..>Class12
247 Class07 : equals()
248 Class07 : Object[] elementData
249 Class01 : size()
250 Class01 : int chimp
251 Class01 : int gorilla
252 Class01 : -int privateChimp
253 Class01 : +int publicGorilla
254 Class01 : #int protectedMarmoset
255 Class08 <--> C2: Cool label
256 class Class10 {
257 &lt;&lt;service&gt;&gt;
258 int id
259 test()
260 }
261 note for Class10 "Cool class\nI said it's very cool class!"
262</pre
263 >
264 <pre id="diagram4" class="mermaid">
265 ---
266 config:
267 layout: elk
268 ---
269 requirementDiagram
270 requirement test_req {
271 id: 1
272 text: the test text.
273 risk: high
274 verifymethod: test
275 }
276
277 element test_entity {
278 type: simulation
279 }
280
281 test_entity - satisfies -> test_req
282</pre
283 >
284 <pre id="diagram4" class="mermaid">
285 ---
286 config:
287 layout: elk
288 ---
289 flowchart-elk TB
290 internet
291 nat
292 router
293 compute1
294
295 subgraph project
296 router
297 nat
298 subgraph subnet1
299 compute1
300 end
301 end
302
303 %% router --> subnet1
304 subnet1 --> nat
305 %% nat --> internet
306</pre
307 >
308 <pre id="diagram4" class="mermaid">
309 ---
310 config:
311 layout: elk
312 ---
313 flowchart-elk TB
314 internet
315 nat
316 router
317 lb1
318 lb2
319 compute1
320 compute2
321 subgraph project
322 router
323 nat
324 subgraph subnet1
325 compute1
326 lb1
327 end
328 subgraph subnet2
329 compute2
330 lb2
331 end
332 end
333 internet --> router
334 router --> subnet1 & subnet2
335 subnet1 & subnet2 --> nat --> internet
336</pre
337 >
338 <pre id="diagram4" class="mermaid">
339---
340config:
341 layout: elk
342 elk:
343 mergeEdges: false
344 forceNodeModelOrder: false
345 considerModelOrder: NONE
346
347---
348 flowchart TB
349 a --> a1 & a2 & a3 & a4
350 b --> b1 & b2
351 b2 --> b3
352 b1 --> b4</pre
353 >
354 <pre id="diagram4" class="mermaid">
355treemap
356"Section 1"
357 "Leaf 1.1": 12
358 "Section 1.2":::class1
359 "Leaf 1.2.1": 12
360"Section 2"
361 "Leaf 2.1": 20:::class1
362 "Leaf 2.2": 25
363 "Leaf 2.3": 12
364
365 </pre>
366 <pre id="diagram5" class="mermaid">
367 ---
368 config:
369 layout: elk
370 flowchart:
371 curve: rounded
372 ---
373 flowchart LR
374 I["fa:fa-code Text"] -- Mermaid js --> D["Use<br/>the<br/>editor!"]
375 I --> D & D
376 D@{ shape: question}
377 I@{ shape: question}
378
379 </pre>
380 <pre id="diagram4" class="mermaid">
381 ---
382 config:
383 layout: tidy-tree
384 ---
385 mindmap
386 root((mindmap))
387 Origins
388 Long history
389 ::icon(fa fa-book)
390 Popularisation
391 British popular psychology author Tony Buzan
392 Research
393 On effectiveness<br/>and features
394 On Automatic creation
395 Uses
396 Creative techniques
397 Strategic planning
398 Argument mapping
399 Tools
400 Pen and paper
401 Mermaid
402
403 </pre>
404 <pre id="diagram4" class="mermaid">
405 ---
406 config:
407 layout: elk
408 flowchart:
409 curve: linear
410 ---
411 flowchart LR
412 A[A] --> B[B]
413 A[A] --- B([C])
414 A@{ shape: diamond}
415 %%B@{ shape: diamond}
416
417 </pre>
418 <pre id="diagram4" class="mermaid">
419 ---
420 config:
421 layout: elk
422 flowchart:
423 curve: linear
424 ---
425 flowchart LR
426 A[A] -- Mermaid js --> B[B]
427 A[A] -- Mermaid js --- B[B]
428 A@{ shape: diamond}
429 B@{ shape: diamond}
430
431 </pre>
432 <pre id="diagram4" class="mermaid">
433 ---
434 config:
435 layout: elk
436 flowchart:
437 curve: rounded
438 ---
439 flowchart LR
440 D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
441 I --> D & D
442 D@{ shape: question}
443 I@{ shape: question}
444 </pre>
445 <pre id="diagram4" class="mermaid">
446 ---
447 config:
448 layout: elk
449 flowchart:
450 curve: rounded
451 elk:
452 nodePlacementStrategy: NETWORK_SIMPLEX
453 ---
454 flowchart LR
455 D["Use the editor"] -- Mermaid js --> I["fa:fa-code Text"]
456 D --> I & I
457 a["a"]
458 D@{ shape: trap-b}
459 I@{ shape: lean-l}
460 </pre>
461 <pre id="diagram4" class="mermaid">
462---
463config:
464 layout: elk
465
466---
467flowchart LR
468 %% subgraph s1["Untitled subgraph"]
469 C["Evaluate"]
470 %% end
471
472 B --> C
473 </pre>
474 <pre id="diagram4" class="mermaid">
475---
476config:
477 layout: elk
478 flowchart:
479 //curve: linear
480---
481flowchart LR
482%% A ==> B
483%% A2 --> B2
484A{A} --> B((Bo boo)) & B & B & B
485
486 </pre>
487 <pre id="diagram4" class="mermaid">
488 ---
489 config:
490 layout: elk
491 theme: default
492 look: classic
493 ---
494 flowchart LR
495 subgraph s1["APA"]
496 D{"Use the editor"}
497 end
498 subgraph S2["S2"]
499 s1
500 I>"fa:fa-code Text"]
501 E["E"]
502 end
503 D -- Mermaid js --> I
504 D --> I & E
505 E --> I
506 </pre>
507 <pre id="diagram4" class="mermaid">
508---
509config:
510 layout: elk
511---
512 flowchart LR
513 a
514 subgraph s0["APA"]
515 subgraph s8["APA"]
516 subgraph s1["APA"]
517 D{"X"}
518 E[Q]
519 end
520 subgraph s3["BAPA"]
521 F[Q]
522 I
523 end
524 D --> I
525 D --> I
526 D --> I
527
528 I{"X"}
529 end
530 end
531 </pre>
532 <pre id="diagram4" class="mermaid">
533---
534config:
535 layout: elk
536---
537 flowchart LR
538 a
539 D{"Use the editor"}
540
541 D -- Mermaid js --> I{"fa:fa-code Text"}
542 D-->I
543 D-->I
544 </pre>
545 <pre id="diagram4" class="mermaid">
546---
547config:
548 layout: elk
549---
550flowchart LR
551 subgraph s1["Untitled subgraph"]
552 n1["Evaluate"]
553 n2["Option 1"]
554 n3["Option 2"]
555 n4["fa:fa-car Option 3"]
556 end
557 subgraph s2["Untitled subgraph"]
558 n5["Evaluate"]
559 n6["Option 1"]
560 n7["Option 2"]
561 n8["fa:fa-car Option 3"]
562 end
563 A["Start"] -- Some text --> B("Continue")
564 B --> C{"Evaluate"}
565 C -- One --> D["Option 1"]
566 C -- Two --> E["Option 2"]
567 C -- Three --> F["fa:fa-car Option 3"]
568 n1 -- One --> n2
569 n1 -- Two --> n3
570 n1 -- Three --> n4
571 n5 -- One --> n6
572 n5 -- Two --> n7
573 n5 -- Three --> n8
574 n1@{ shape: diam}
575 n2@{ shape: rect}
576 n3@{ shape: rect}
577 n4@{ shape: rect}
578 n5@{ shape: diam}
579 n6@{ shape: rect}
580 n7@{ shape: rect}
581 n8@{ shape: rect}
582
583 </pre>
584 <pre id="diagram4" class="mermaid">
585---
586config:
587 layout: elk
588---
589flowchart LR
590 subgraph s1["Untitled subgraph"]
591 n1["Evaluate"]
592 n2["Option 1"]
593 end
594 n1 -- One --> n2
595
596
597
598
599 </pre>
600 <pre id="diagram4" class="mermaid">
601---
602config:
603 layout: elk
604---
605flowchart LR
606 A{A} --> B & C
607</pre
608 >
609 <pre id="diagram4" class="mermaid">
610---
611config:
612 layout: elk
613---
614flowchart LR
615 A{A} --> B & C
616 subgraph "subbe"
617 A
618 end
619</pre
620 >
621 <pre id="diagram4" class="mermaid">
622---
623config:
624 layout: elk
625---
626flowchart LR
627 n2@{ shape: rect}
628 n3@{ shape: rect}
629 n4@{ shape: rect}
630 A["Start"] -- Some text --> B("Continue")
631 B --> C{"Evaluate"}
632 C -- One --> D["Option 1"]
633 C -- Two --> E["Option 2"]
634 C -- Three --> F["fa:fa-car Option 3"]
635 %% C@{ shape: hexagon}
636
637
638 </pre>
639 <pre id="diagram4" class="mermaid">
640---
641config:
642 kanban:
643 ticketBaseUrl: 'https://github.com/your-repo/issues/#TICKET#'
644---
645kanban
646 Backlog
647 task1[📝 Define project requirements]@{ ticket: a101 }
648 To Do
649 task2[🔍 Research technologies]@{ ticket: a102 }
650 Review
651 task4[🔍 Code review for login feature]@{ ticket: a104 }
652 Done
653 task5[✅ Deploy initial version]@{ ticket: a105 }
654 In Progress
655 task3[💻 Develop login feature]@{ ticket: 103 }
656
657 </pre>
658 <pre id="diagram4" class="mermaid">
659flowchart LR
660nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
661
662 </pre>
663 <pre id="diagram4" class="mermaid">
664flowchart LR
665nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
666style A fill:#f9f,stroke:#333,stroke-width:4px
667 </pre>
668 <pre id="diagram4" class="mermaid">
669flowchart LR
670nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
671A:::AClass
672classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
673 </pre>
674 <pre id="diagram4" class="mermaid">
675flowchart LR
676 nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
677
678 </pre>
679 <pre id="diagram4" class="mermaid">
680flowchart LR
681nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
682
683 </pre>
684 <pre id="diagram4" class="mermaid">
685flowchart LR
686nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
687style A fill:#f9f,stroke:#333,stroke-width:4px
688 </pre>
689 <pre id="diagram4" class="mermaid">
690flowchart LR
691nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
692A:::AClass
693classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
694 </pre>
695 <pre id="diagram4" class="mermaid">
696flowchart LR
697 nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
698
699 </pre>
700 <pre id="diagram4" class="mermaid">
701flowchart LR
702nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
703
704 </pre>
705 <pre id="diagram4" class="mermaid">
706flowchart LR
707nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
708style A fill:#f9f,stroke:#333,stroke-width:4px
709 </pre>
710 <pre id="diagram4" class="mermaid">
711flowchart LR
712nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
713A:::AClass
714classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
715 </pre>
716 <pre id="diagram4" class="mermaid">
717flowchart LR
718 nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
719 A:::AClass
720 classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
721 </pre>
722 <pre id="diagram4" class="mermaid">
723flowchart LR
724 nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
725 style A fill:#f9f,stroke:#333,stroke-width:4px
726 </pre>
727 <pre id="diagram4" class="mermaid">
728kanban
729 id2[In progress]
730 docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
731 </pre>
732 <pre id="diagram4" class="mermaid">
733---
734config:
735 kanban:
736 ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
737 # sectionWidth: 300
738---
739kanban
740 Todo
741 [Create Documentation]
742 docs[Create Blog about the new diagram]
743 id7[In progress]
744 id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
745 id9[Ready for deploy]
746 id8[Design grammar]@{ assigned: 'knsv' }
747 id10[Ready for test]
748 id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
749 id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
750 id11[Done]
751 id5[define getData]
752 id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
753 id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
754
755 id12[Can't reproduce]
756 id3[Weird flickering in Firefox]
757 </pre>
758 <script type="module">
759 import mermaid from './mermaid.esm.mjs';
760 import layouts from './mermaid-layout-elk.esm.mjs';
761
762 const staticBellIconPack = {
763 prefix: 'fa6-regular',
764 icons: {
765 bell: {
766 body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
767 width: 448,
768 },
769 },
770 width: 512,
771 height: 512,
772 };
773
774 mermaid.registerIconPacks([
775 {
776 name: 'logos',
777 loader: () =>
778 fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
779 },
780 {
781 name: 'fa',
782 loader: () => staticBellIconPack,
783 },
784 ]);
785 mermaid.registerLayoutLoaders(layouts);
786 mermaid.parseError = function (err, hash) {
787 console.error('Mermaid error: ', err);
788 };
789 window.callback = function () {
790 alert('A callback was triggered');
791 };
792 function callback() {
793 alert('It worked');
794 }
795 await mermaid.initialize({
796 // theme: 'base',
797 // theme: 'default',
798 // theme: 'forest',
799 // handDrawnSeed: 12,
800 // look: 'handDrawn',
801 // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
802 // layout: 'dagre',
803 layout: 'elk',
804 // layout: 'fixed',
805 // htmlLabels: false,
806 flowchart: { titleTopMargin: 10 },
807
808 // fontFamily: 'Caveat',
809 // fontFamily: 'Kalam',
810 // fontFamily: 'courier',
811 fontFamily: 'arial',
812 sequence: {
813 actorFontFamily: 'courier',
814 noteFontFamily: 'courier',
815 messageFontFamily: 'courier',
816 },
817 kanban: {
818 htmlLabels: false,
819 },
820 fontSize: 12,
821 logLevel: 0,
822 securityLevel: 'loose',
823 callback,
824 });
825
826 mermaid.parseError = function (err, hash) {
827 console.error('In parse error:');
828 console.error(err);
829 };
830 </script>
831 </body>
832</html>
833