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