26.8 KB1272 lines
Blame
1<html>
2
3<head>
4 <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
5 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
6 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css" />
7 <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet" />
8 <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet" />
9 <link rel="preconnect" href="https://fonts.googleapis.com" />
10 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11 <link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap" rel="stylesheet" />
12 <link
13 href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
14 rel="stylesheet" />
15 <link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
16 rel="stylesheet" />
17
18 <style>
19 body {
20 font-family: 'Arial';
21 }
22
23 table {
24 width: 100%;
25 border-collapse: collapse;
26 table-layout: fixed;
27 }
28
29 th,
30 td {
31 border: 1px solid black;
32 padding: 10px;
33 text-align: center;
34 vertical-align: middle;
35 }
36
37 .separator {
38 height: 20px;
39 background-color: #f0f0f0;
40 }
41
42 .vertical-header {
43 text-align: center;
44 }
45
46 .collapsible {
47 background-color: #f9f9f9;
48 color: #444;
49 cursor: pointer;
50 padding: 18px;
51 width: 100%;
52 border: none;
53 text-align: left;
54 outline: none;
55 font-size: 15px;
56 }
57
58 .active,
59 .collapsible:hover {
60 background-color: #ccc;
61 }
62
63 .collapsible:after {
64 content: '\002B';
65 color: #777;
66 font-weight: bold;
67 float: right;
68 margin-left: 2px;
69 }
70
71 .active:after {
72 content: "\2212";
73 }
74
75 .content {
76 padding: 0 5px;
77 max-height: 0;
78 overflow: hidden;
79 transition: max-height 0.2s ease-out;
80 background-color: #f1f1f1;
81 }
82
83 .content .pre-scrollable {
84 max-height: 200px;
85 overflow-y: scroll;
86 }
87 </style>
88</head>
89
90<body>
91 <table>
92 <tr>
93 <th></th> <!-- Placeholder for the top left corner -->
94 <th>Dagre</th>
95 <th>Dagre with rough</th>
96 <th>ELK</th>
97 <th>ELK with rough</th>
98 </tr>
99 <tr>
100 <th class="vertical-header">
101 <button class="collapsible">Simple State (only id)</button>
102 <div class="content">
103 <div class="pre-scrollable">
104 <pre>
105 stateId
106 </pre>
107 </div>
108 </div>
109 </th>
110 <td>
111 <pre id="diagram1" class="mermaid">
112stateDiagram-v2
113 stateId
114 </pre>
115 </td>
116 <td>
117 <pre id="diagram2" class="mermaid">
118%%{init: {"look": "handDrawn"} }%%
119stateDiagram-v2
120 stateId
121
122 </pre>
123 </td>
124 <td>
125 <pre id="diagram3" class="mermaid">
126%%{init: {"handDrawn": false, "layout": "elk"} }%%
127stateDiagram-v2
128 stateId
129
130 </pre>
131 </td>
132 <td>
133 <pre id="diagram4" class="mermaid">
134%%{init: {"look": "handDrawn", "layout": "elk"} }%%
135stateDiagram-v2
136 stateId
137
138 </pre>
139 </td>
140 </tr>
141 <!-- Separator row -->
142 <tr class="separator">
143 <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
144 </tr>
145 <tr>
146 <th class="vertical-header">
147 <button class="collapsible">State with description with `as` keyword</button>
148 <div class="content">
149 <div class="pre-scrollable">
150 <pre>
151
152 state "description text" as s2
153 </pre>
154 </div>
155 </div>
156 </th>
157 <td>
158 <pre id="diagram1" class="mermaid">
159stateDiagram-v2
160 state "This is a state description" as s2
161 </pre>
162 </td>
163 <td>
164 <pre id="diagram2" class="mermaid">
165%%{init: {"look": "handDrawn"} }%%
166stateDiagram-v2
167 state "This is a state description" as s3
168 </pre>
169 </td>
170 <td>
171 <pre id="diagram3" class="mermaid">
172%%{init: {"handDrawn": false, "layout": "elk"} }%%
173stateDiagram-v2
174 state "This is a state description" as s4
175 </pre>
176 </td>
177 <td>
178 <pre id="diagram4" class="mermaid">
179%%{init: {"look": "handDrawn", "layout": "elk"} }%%
180stateDiagram-v2
181 state "This is a state description" as s5
182 </pre>
183 </td>
184 </tr>
185 <!-- Separator row -->
186 <tr class="separator">
187 <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
188 </tr>
189 <tr>
190 <th class="vertical-header">
191 <button class="collapsible">State with description with `:` syntax</button>
192 <div class="content">
193 <div class="pre-scrollable">
194 <pre>
195
196 s2 : description text
197 </pre>
198 </div>
199 </div>
200 </th>
201 <td>
202 <pre id="diagram1" class="mermaid">
203stateDiagram-v2
204 s21 : This is a state description
205 </pre>
206 </td>
207 <td>
208 <pre id="diagram2" class="mermaid">
209%%{init: {"look": "handDrawn"} }%%
210stateDiagram-v2
211 s22 : This is a state description
212
213 </pre>
214 </td>
215 <td>
216 <pre id="diagram3" class="mermaid">
217%%{init: {"handDrawn": false, "layout": "elk"} }%%
218stateDiagram-v2
219 s23 : This is a state description
220
221 </pre>
222 </td>
223 <td>
224 <pre id="diagram4" class="mermaid">
225%%{init: {"look": "handDrawn", "layout": "elk"} }%%
226stateDiagram-v2
227 s24 : This is a state description
228
229 </pre>
230 </td>
231 </tr>
232 <!-- Separator row -->
233 <tr class="separator">
234 <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
235 </tr>
236 <tr>
237 <th class="vertical-header">
238 <button class="collapsible">
239 State with transition
240 </button>
241 <div class="content">
242 <div class="pre-scrollable">
243 <pre>
244
245 s1 --> s2
246
247 </pre>
248 </div>
249 </div>
250 </th>
251 <td>
252 <pre id="diagram1" class="mermaid">
253
254 stateDiagram-v2
255 s31 --> s32
256
257 </pre>
258 </td>
259 <td>
260 <pre id="diagram2" class="mermaid">
261%%{init: {"look": "handDrawn"} }%%
262
263 stateDiagram-v2
264 s41 --> s42
265
266
267 </pre>
268 </td>
269 <td>
270 <pre id="diagram3" class="mermaid">
271%%{init: {"handDrawn": false, "layout": "elk"} }%%
272stateDiagram-v2
273 s51 --> s52
274
275
276 </pre>
277 </td>
278 <td>
279 <pre id="diagram4" class="mermaid">
280%%{init: {"look": "handDrawn", "layout": "elk"} }%%
281stateDiagram-v2
282 s61 --> s62
283
284
285 </pre>
286 </td>
287 </tr>
288 <!-- Separator row -->
289 <tr class="separator">
290 <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
291 </tr>
292
293 </tr>
294 <tr>
295 <th class="vertical-header">
296 <button class="collapsible">
297 State transition with label
298 </button>
299 <div class="content">
300 <div class="pre-scrollable">
301 <pre>
302
303 s1 --> s2: A transition
304
305 </pre>
306 </div>
307 </div>
308 </th>
309 <td>
310 <pre id="diagram1" class="mermaid">
311
312 stateDiagram-v2
313 a1 --> a2: A transition
314
315 </pre>
316 </td>
317 <td>
318 <pre id="diagram2" class="mermaid">
319%%{init: {"look": "handDrawn"} }%%
320
321 stateDiagram-v2
322 a3 --> a4: A transition
323
324
325 </pre>
326 </td>
327 <td>
328 <pre id="diagram3" class="mermaid">
329%%{init: {"handDrawn": false, "layout": "elk"} }%%
330stateDiagram-v2
331 a5 --> a6: A transition
332
333
334 </pre>
335 </td>
336 <td>
337 <pre id="diagram4" class="mermaid">
338%%{init: {"look": "handDrawn", "layout": "elk"} }%%
339stateDiagram-v2
340 a7 --> a8: A transition
341
342
343 </pre>
344 </td>
345 </tr>
346 <!-- Separator row -->
347 <tr class="separator">
348 <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
349 </tr>
350
351 </tr>
352 <tr>
353 <th class="vertical-header">
354 <button class="collapsible">
355 Start & End
356 </button>
357 <div class="content">
358 <div class="pre-scrollable">
359 <pre>
360
361 [*] --> test
362 test --> [*]
363
364 </pre>
365 </div>
366 </div>
367 </th>
368 <td>
369 <pre id="diagram1" class="mermaid">
370
371 stateDiagram-v2
372 [*] --> test
373 test --> [*]
374
375 </pre>
376 </td>
377 <td>
378 <pre id="diagram2" class="mermaid">
379%%{init: {"look": "handDrawn"} }%%
380
381 stateDiagram-v2
382 [*] --> test
383 test --> [*]
384
385
386 </pre>
387 </td>
388 <td>
389 <pre id="diagram3" class="mermaid">
390%%{init: {"handDrawn": false, "layout": "elk"} }%%
391stateDiagram-v2
392 [*] --> test
393 test --> [*]
394
395
396 </pre>
397 </td>
398 <td>
399 <pre id="diagram4" class="mermaid">
400%%{init: {"look": "handDrawn", "layout": "elk"} }%%
401stateDiagram-v2
402 [*] --> test
403 test --> [*]
404
405
406 </pre>
407 </td>
408 </tr>
409 <!-- Separator row -->
410 <tr class="separator">
411 <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
412 </tr>
413
414 </tr>
415 <tr>
416 <th class="vertical-header">
417 <button class="collapsible">
418 Composite state
419 </button>
420 <div class="content">
421 <div class="pre-scrollable">
422 <pre>
423
424 [*] --> First
425 state First {
426 [*] --> second
427 second --> [*]
428 }
429
430 </pre>
431 </div>
432 </div>
433 </th>
434 <td>
435 <pre id="diagram1" class="mermaid">
436
437 stateDiagram-v2
438 [*] --> First
439 state First {
440 [*] --> second
441 second --> [*]
442 }
443
444 </pre>
445 </td>
446 <td>
447 <pre id="diagram2" class="mermaid">
448%%{init: {"look": "handDrawn"} }%%
449
450 stateDiagram-v2
451 [*] --> First
452 state First {
453 [*] --> second
454 second --> [*]
455 }
456
457
458 </pre>
459 </td>
460 <td>
461 <pre id="diagram3" class="mermaid">
462%%{init: {"handDrawn": false, "layout": "elk"} }%%
463stateDiagram-v2
464 [*] --> First
465 state First {
466 [*] --> second
467 second --> [*]
468 }
469
470
471 </pre>
472 </td>
473 <td>
474 <pre id="diagram4" class="mermaid">
475%%{init: {"look": "handDrawn", "layout": "elk"} }%%
476stateDiagram-v2
477 [*] --> First
478 state First {
479 [*] --> second
480 second --> [*]
481 }
482
483
484 </pre>
485 </td>
486 </tr>
487 <!-- Separator row -->
488 <tr class="separator">
489 <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
490 </tr>
491
492
493 </tr>
494 <tr>
495 <th class="vertical-header">
496 <button class="collapsible">
497 Nested Composite state
498 </button>
499 <div class="content">
500 <div class="pre-scrollable">
501 <pre>
502
503
504 [*] --> Level1
505
506 state Level1 {
507 [*] --> Level2
508
509 state Level2 {
510 [*] --> level2
511 level2 --> Level3
512
513 state Level3 {
514 [*] --> level3
515 level3 --> [*]
516 }
517 }
518 }
519
520
521 </pre>
522 </div>
523 </div>
524 </th>
525 <td>
526 <pre id="diagram1" class="mermaid">
527
528 stateDiagram-v2
529 [*] --> Level1
530
531 state Level1 {
532 [*] --> Level2
533
534 state Level2 {
535 [*] --> level2
536 level2 --> Level3
537
538 state Level3 {
539 [*] --> level3
540 level3 --> [*]
541 }
542 }
543 }
544
545
546 </pre>
547 </td>
548 <td>
549 <pre id="diagram2" class="mermaid">
550%%{init: {"look": "handDrawn"} }%%
551
552 stateDiagram-v2
553 [*] --> Level1
554
555 state Level1 {
556 [*] --> Level2
557
558 state Level2 {
559 [*] --> level2
560 level2 --> Level3
561
562 state Level3 {
563 [*] --> level3
564 level3 --> [*]
565 }
566 }
567 }
568
569
570
571 </pre>
572 </td>
573 <td>
574 <pre id="diagram3" class="mermaid">
575%%{init: {"handDrawn": false, "layout": "elk"} }%%
576 stateDiagram-v2
577 [*] --> Level1
578
579 state Level1 {
580 [*] --> Level2
581
582 state Level2 {
583 [*] --> level2
584 level2 --> Level3
585
586 state Level3 {
587 [*] --> level3
588 level3 --> [*]
589 }
590 }
591 }
592
593
594 </pre>
595 </td>
596 <td>
597 <pre id="diagram4" class="mermaid">
598%%{init: {"look": "handDrawn", "layout": "elk"} }%%
599 stateDiagram-v2
600 [*] --> Level1
601
602 state Level1 {
603 [*] --> Level2
604
605 state Level2 {
606 [*] --> level2
607 level2 --> Level3
608
609 state Level3 {
610 [*] --> level3
611 level3 --> [*]
612 }
613 }
614 }
615
616 </pre>
617 </td>
618 </tr>
619 <!-- Separator row -->
620 <tr class="separator">
621 <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
622 </tr>
623
624 <tr>
625 <th class="vertical-header">
626 <button class="collapsible">
627 Composite state with transition
628 </button>
629 <div class="content">
630 <div class="pre-scrollable">
631 <pre>
632 [*] --> B1
633 B1 --> B2
634 B1 --> B3
635
636 state B1 {
637 [*] --> B11
638 B11 --> [*]
639 }
640 state B2 {
641 [*] --> B22
642 B22 --> [*]
643 }
644 state B3 {
645 [*] --> B33
646 B33 --> [*]
647 }
648
649
650
651 </pre>
652 </div>
653 </div>
654 </th>
655 <td>
656 <pre id="diagram1" class="mermaid">
657
658 stateDiagram-v2
659 [*] --> B1
660 B1 --> B2
661 B1 --> B3
662
663 state B1 {
664 [*] --> B11
665 B11 --> [*]
666 }
667 state B2 {
668 [*] --> B22
669 B22 --> [*]
670 }
671 state B3 {
672 [*] --> B33
673 B33 --> [*]
674 }
675 </pre>
676 </td>
677 <td>
678 <pre id="diagram2" class="mermaid">
679%%{init: {"look": "handDrawn"} }%%
680
681 stateDiagram-v2
682 [*] --> B1
683 B1 --> B2
684 B1 --> B3
685
686 state B1 {
687 [*] --> B11
688 B11 --> [*]
689 }
690 state B2 {
691 [*] --> B22
692 B22 --> [*]
693 }
694 state B3 {
695 [*] --> B33
696 B33 --> [*]
697 }
698 </pre>
699 </td>
700 <td>
701 <pre id="diagram3" class="mermaid">
702%%{init: {"handDrawn": false, "layout": "elk"} }%%
703 stateDiagram-v2
704 [*] --> B1
705 B1 --> B2
706 B1 --> B3
707
708 state B1 {
709 [*] --> B11
710 B11 --> [*]
711 }
712 state B2 {
713 [*] --> B22
714 B22 --> [*]
715 }
716 state B3 {
717 [*] --> B33
718 B33 --> [*]
719 }
720
721 </pre>
722 </td>
723 <td>
724 <pre id="diagram4" class="mermaid">
725%%{init: {"look": "handDrawn", "layout": "elk"} }%%
726 stateDiagram-v2
727[*] --> B1
728 B1 --> B2
729 B1 --> B3
730
731 state B1 {
732 [*] --> B11
733 B11 --> [*]
734 }
735 state B2 {
736 [*] --> B22
737 B22 --> [*]
738 }
739 state B3 {
740 [*] --> B33
741 B33 --> [*]
742 }
743 </pre>
744 </td>
745 </tr>
746 <!-- Separator row -->
747 <tr class="separator">
748 <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
749 </tr>
750
751
752 <tr>
753 <th class="vertical-header">
754 <button class="collapsible">
755
756 Choice
757 </button>
758 <div class="content">
759 <div class="pre-scrollable">
760 <pre>
761 state if_state &lt;&lt;choice&gt;&gt;
762 [*] --> IsPositive
763 IsPositive --> if_state
764 if_state --> False: if n < 0
765 if_state --> True : if n >= 0
766
767
768
769
770 </pre>
771 </div>
772 </div>
773 </th>
774 <td>
775 <pre id="diagram1" class="mermaid">
776
777 stateDiagram-v2
778 state if_state <<choice>>
779 [*] --> IsPositive
780 IsPositive --> if_state
781 if_state --> False: if n < 0
782 if_state --> True : if n >= 0
783 </pre>
784 </td>
785 <td>
786 <pre id="diagram2" class="mermaid">
787%%{init: {"look": "handDrawn"} }%%
788
789 stateDiagram-v2
790 state if_state <<choice>>
791 [*] --> IsPositive
792 IsPositive --> if_state
793 if_state --> False: if n < 0
794 if_state --> True : if n >= 0
795 </pre>
796 </td>
797 <td>
798 <pre id="diagram3" class="mermaid">
799%%{init: {"handDrawn": false, "layout": "elk"} }%%
800 stateDiagram-v2
801 state if_state <<choice>>
802 [*] --> IsPositive
803 IsPositive --> if_state
804 if_state --> False: if n < 0
805 if_state --> True : if n >= 0
806 </pre>
807 </td>
808 <td>
809 <pre id="diagram4" class="mermaid">
810%%{init: {"look": "handDrawn", "layout": "elk"} }%%
811 stateDiagram-v2
812 state if_state <<choice>>
813 [*] --> IsPositive
814 IsPositive --> if_state
815 if_state --> False: if n < 0
816 if_state --> True : if n >= 0
817 </pre>
818 </td>
819 </tr>
820 <!-- Separator row -->
821 <tr class="separator">
822 <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
823 </tr>
824
825 <tr>
826 <th class="vertical-header">
827 <button class="collapsible">
828 Fork & Join
829 </button>
830 <div class="content">
831 <div class="pre-scrollable">
832 <pre>
833 state fork_state &lt;&lt;fork&gt;&gt;
834 [*] --> fork_state
835 fork_state --> State2
836 fork_state --> State3
837
838 state join_state &lt;&lt;join&gt;&gt;
839 State2 --> join_state
840 State3 --> join_state
841 join_state --> State4
842 State4 --> [*]
843
844
845
846 </pre>
847 </div>
848 </div>
849 </th>
850 <td>
851 <pre id="diagram1" class="mermaid">
852 stateDiagram-v2
853 state fork_state <<fork>>
854 [*] --> fork_state
855 fork_state --> State2
856 fork_state --> State3
857
858 state join_state <<join>>
859 State2 --> join_state
860 State3 --> join_state
861 join_state --> State4
862 State4 --> [*]
863
864 </pre>
865 </td>
866 <td>
867 <pre id="diagram2" class="mermaid">
868%%{init: {"look": "handDrawn"} }%%
869 stateDiagram-v2
870 state fork_state <<fork>>
871 [*] --> fork_state
872 fork_state --> State2
873 fork_state --> State3
874
875 state join_state <<join>>
876 State2 --> join_state
877 State3 --> join_state
878 join_state --> State4
879 State4 --> [*]
880
881 </pre>
882 </td>
883 <td>
884 <pre id="diagram3" class="mermaid">
885%%{init: {"handDrawn": false, "layout": "elk"} }%%
886 stateDiagram-v2
887 state fork_state <<fork>>
888 [*] --> fork_state
889 fork_state --> State2
890 fork_state --> State3
891
892 state join_state <<join>>
893 State2 --> join_state
894 State3 --> join_state
895 join_state --> State4
896 State4 --> [*]
897
898 </pre>
899 </td>
900 <td>
901 <pre id="diagram4" class="mermaid">
902%%{init: {"look": "handDrawn", "layout": "elk"} }%%
903 stateDiagram-v2
904 state fork_state <<fork>>
905 [*] --> fork_state
906 fork_state --> State2
907 fork_state --> State3
908
909 state join_state <<join>>
910 State2 --> join_state
911 State3 --> join_state
912 join_state --> State4
913 State4 --> [*]
914
915 </pre>
916 </td>
917 </tr>
918 <!-- Separator row -->
919 <tr class="separator">
920 <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
921 </tr>
922
923 <tr>
924 <th class="vertical-header">
925 <button class="collapsible">
926 Notes
927 </button>
928 <div class="content">
929 <div class="pre-scrollable">
930 <pre>
931
932 TN1: The state with a note
933 note right of TN1
934 note text
935 end note
936 TN1 --> TN2
937 note left of TN2 : note text
938
939 </pre>
940 </div>
941 </div>
942 </th>
943 <td>
944 <pre id="diagram1" class="mermaid">
945 stateDiagram-v2
946 TN1: The state with a note
947 note right of TN1
948 Important information! You can write
949 notes.
950 end note
951 TN1 --> TN2
952 note left of TN2 : This is the note to the left.
953
954 </pre>
955 </td>
956 <td>
957 <pre id="diagram2" class="mermaid">
958%%{init: {"look": "handDrawn"} }%%
959 stateDiagram-v2
960 TN3: The state with a note
961 note right of TN3
962 Important information! You can write
963 notes.
964 end note
965 TN3 --> TN4
966 note left of TN4 : This is the note to the left.
967 </pre>
968 </td>
969 <td>
970 <pre id="diagram3" class="mermaid">
971%%{init: {"handDrawn": false, "layout": "elk"} }%%
972 stateDiagram-v2
973 TN5: The state with a note
974 note right of TN5
975 Important information! You can write
976 notes.
977 end note
978 TN5 --> TN6
979 note left of TN6 : This is the note to the left.
980
981 </pre>
982 </td>
983 <td>
984 <pre id="diagram4" class="mermaid">
985%%{init: {"look": "handDrawn", "layout": "elk"} }%%
986 stateDiagram-v2
987 TN7: The state with a note
988 note right of TN7
989 Important information! You can write
990 notes.
991 end note
992 TN7 --> TN8
993 note left of TN8 : This is the note to the left.
994 </pre>
995 </td>
996 </tr>
997 <!-- Separator row -->
998 <tr class="separator">
999 <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
1000 </tr>
1001
1002
1003 <tr>
1004 <th class="vertical-header">
1005 <button class="collapsible">
1006 Concurrent states
1007 </button>
1008 <div class="content">
1009 <div class="pre-scrollable">
1010 <pre>
1011[*] --> Active
1012
1013state Active {
1014 [*] --> NumLockOff
1015 NumLockOff --> NumLockOn : EvNumLockPressed
1016 NumLockOn --> NumLockOff : EvNumLockPressed
1017 --
1018 [*] --> CapsLockOff
1019 CapsLockOff --> CapsLockOn : EvCapsLockPressed
1020 CapsLockOn --> CapsLockOff : EvCapsLockPressed
1021 --
1022 [*] --> ScrollLockOff
1023 ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
1024 ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
1025}
1026
1027
1028 </pre>
1029 </div>
1030 </div>
1031 </th>
1032 <td>
1033 <pre id="diagram1" class="mermaid">
1034 stateDiagram-v2
1035 [*] --> Active
1036
1037 state Active {
1038 [*] --> NumLockOff
1039 NumLockOff --> NumLockOn : EvNumLockPressed
1040 NumLockOn --> NumLockOff : EvNumLockPressed
1041 --
1042 [*] --> CapsLockOff
1043 CapsLockOff --> CapsLockOn : EvCapsLockPressed
1044 CapsLockOn --> CapsLockOff : EvCapsLockPressed
1045 --
1046 [*] --> ScrollLockOff
1047 ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
1048 ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
1049 }
1050
1051 </pre>
1052 </td>
1053 <td>
1054 <pre id="diagram2" class="mermaid">
1055%%{init: {"look": "handDrawn"} }%%
1056 stateDiagram-v2
1057 [*] --> Active
1058
1059 state Active {
1060 [*] --> NumLockOff
1061 NumLockOff --> NumLockOn : EvNumLockPressed
1062 NumLockOn --> NumLockOff : EvNumLockPressed
1063 --
1064 [*] --> CapsLockOff
1065 CapsLockOff --> CapsLockOn : EvCapsLockPressed
1066 CapsLockOn --> CapsLockOff : EvCapsLockPressed
1067 --
1068 [*] --> ScrollLockOff
1069 ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
1070 ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
1071 }
1072 </pre>
1073 </td>
1074 <td>
1075 <pre id="diagram3" class="mermaid">
1076%%{init: {"handDrawn": false, "layout": "elk"} }%%
1077 stateDiagram-v2
1078 [*] --> Active
1079
1080 state Active {
1081 [*] --> NumLockOff
1082 NumLockOff --> NumLockOn : EvNumLockPressed
1083 NumLockOn --> NumLockOff : EvNumLockPressed
1084 --
1085 [*] --> CapsLockOff
1086 CapsLockOff --> CapsLockOn : EvCapsLockPressed
1087 CapsLockOn --> CapsLockOff : EvCapsLockPressed
1088 --
1089 [*] --> ScrollLockOff
1090 ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
1091 ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
1092 }
1093
1094 </pre>
1095 </td>
1096 <td>
1097 <pre id="diagram4" class="mermaid">
1098%%{init: {"look": "handDrawn", "layout": "elk"} }%%
1099 stateDiagram-v2
1100 [*] --> Active
1101
1102 state Active {
1103 [*] --> NumLockOff
1104 NumLockOff --> NumLockOn : EvNumLockPressed
1105 NumLockOn --> NumLockOff : EvNumLockPressed
1106 --
1107 [*] --> CapsLockOff
1108 CapsLockOff --> CapsLockOn : EvCapsLockPressed
1109 CapsLockOn --> CapsLockOff : EvCapsLockPressed
1110 --
1111 [*] --> ScrollLockOff
1112 ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
1113 ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
1114 }
1115 </pre>
1116 </td>
1117 </tr>
1118
1119
1120 <!-- Separator row -->
1121 <tr class="separator">
1122 <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
1123 </tr>
1124
1125 <tr>
1126 <th class="vertical-header">
1127 <button class="collapsible">
1128 Directions
1129 </button>
1130 <div class="content">
1131 <div class="pre-scrollable">
1132 <pre>
1133direction LR
1134 [*] --> D1
1135 D1 --> D2
1136 D2 --> D3
1137 state D3 {
1138 direction TB
1139 D11 --> D22
1140 }
1141 D2 --> D4
1142 </pre>
1143 </div>
1144 </div>
1145 </th>
1146 <td>
1147 <pre id="diagram1" class="mermaid">
1148 stateDiagram-v2
1149 direction LR
1150 [*] --> D1
1151 D1 --> D2
1152 D2 --> D3
1153 state D3 {
1154 direction TB
1155 D11 --> D22
1156 }
1157 D2 --> D4
1158 </pre>
1159 </td>
1160 <td>
1161 <pre id="diagram2" class="mermaid">
1162%%{init: {"look": "handDrawn"} }%%
1163 stateDiagram-v2
1164 direction LR
1165 [*] --> D1
1166 D1 --> D2
1167 D2 --> D3
1168 state D3 {
1169 direction TB
1170 D11 --> D22
1171 }
1172 D2 --> D4
1173 </pre>
1174 </td>
1175 <td>
1176 <pre id="diagram3" class="mermaid">
1177%%{init: {"handDrawn": false, "layout": "elk"} }%%
1178 stateDiagram-v2
1179 direction LR
1180 [*] --> D1
1181 D1 --> D2
1182 D2 --> D3
1183 state D3 {
1184 direction TB
1185 D11 --> D22
1186 }
1187 D2 --> D4
1188 </pre>
1189 </td>
1190 <td>
1191 <pre id="diagram4" class="mermaid">
1192%%{init: {"look": "handDrawn", "layout": "elk"} }%%
1193 stateDiagram-v2
1194 direction LR
1195 [*] --> D1
1196 D1 --> D2
1197 D2 --> D3
1198 state D3 {
1199 direction TB
1200 D11 --> D22
1201 }
1202 D2 --> D4
1203 </pre>
1204 </td>
1205 </tr>
1206
1207
1208 <!-- Separator row -->
1209 <tr class="separator">
1210 <td colspan="5"></td> <!-- This cell spans all columns including the vertical header -->
1211 </tr>
1212 <!-- New row -->
1213 <tr>
1214 <th class="vertical-header">Additional Content</th>
1215 <td>New content 1</td>
1216 <td>New content 2</td>
1217 <td>New content 3</td>
1218 <td>New content 4</td>
1219 </tr>
1220 </table>
1221
1222
1223 <script type="module">
1224 import mermaid from './mermaid.esm.mjs';
1225 import layouts from './mermaid-layout-elk.esm.mjs';
1226 mermaid.registerLayoutLoaders(layouts);
1227 mermaid.parseError = function (err, hash) {
1228
1229 };
1230
1231 mermaid.initialize({
1232 handDrawn: false,
1233 mergeEdges: true,
1234 layout: 'dagre',
1235 flowchart: { titleTopMargin: 10 },
1236 // fontFamily: 'Caveat',
1237 fontFamily: 'Kalam',
1238 sequence: {
1239 actorFontFamily: 'courier',
1240 noteFontFamily: 'courier',
1241 messageFontFamily: 'courier',
1242 },
1243 fontSize: 16,
1244 logLevel: 0,
1245 });
1246 function callback() {
1247 alert('It worked');
1248 }
1249 mermaid.parseError = function (err, hash) {
1250 console.error('In parse error:');
1251 console.error(err);
1252 };
1253
1254
1255 let coll = document.getElementsByClassName("collapsible");
1256 for (const element of coll) {
1257 element.addEventListener("click", function () {
1258 this.classList.toggle("active");
1259 let content = this.nextElementSibling;
1260 if (content.style.maxHeight) {
1261 content.style.maxHeight = null;
1262 } else {
1263 content.style.maxHeight = content.scrollHeight + "px";
1264 }
1265 });
1266 }
1267
1268 </script>
1269</body>
1270
1271</html>
1272