Merge branch 'develop' into update-er-diagram

2025-09-23 17:29:54 +02:00 · 2025-01-27 09:55:30 -08:00
parent 5a2a8f9bd4 e2de55202f
commit 295af02744
122 changed files with 6055 additions and 2902 deletions
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -10,6 +10,10 @@
      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
      rel="stylesheet"
    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+      rel="stylesheet"
+    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
      rel="stylesheet"
@@ -74,22 +78,303 @@
        font-family: monospace;
        font-size: 72px;
      }
+
      pre {
        width: 100%;
      }
+
      /* tspan {
              font-size: 6px !important;
            } */
+      /* .flowchart-link {
+        stroke-dasharray: 4, 4 !important;
+        animation: flow 1s linear infinite;
+        animation: dashdraw 4.93282s linear infinite;
+        stroke-width: 2px !important;
+      } */
+
+      @keyframes dashdraw {
+        from {
+          stroke-dashoffset: 0;
+        }
+      }
+
+      /*stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation:    4.932820s linear infinite;*/
+      /* stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;*/
    </style>
  </head>

  <body>
+    <pre id="diagram4" class="mermaid">
+      flowchart LR
+        AB["apa@apa@"] --> B(("`apa@apa`"))
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      flowchart
+        D(("for D"))
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      flowchart LR
+        A e1@==> B
+        e1@{ animate: true}
+    </pre>
+    <pre id="diagram4" class="mermaid">
+flowchart LR
+  A e1@--> B
+  classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
+  class e1 animate
+    </pre>
+    <h2>infinite</h2>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+  classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
+  class e1 animate
+    </pre>
+    <h2>Mermaid - edge-animation-slow</h2>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+e1@{ animation: fast}
+    </pre>
+    <h2>Mermaid - edge-animation-fast</h2>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+  classDef animate stroke-dasharray: 1000,stroke-dashoffset: 1000,animation: dash 10s linear;
+  class e1 edge-animation-fast
+    </pre>
+
+    <pre id="diagram4" class="mermaid2">
+
+info    </pre
+    >
+    <pre id="diagram4" class="mermaid2">
+---
+config:
+  layout: elk
+---
+      flowchart LR
+      a
+      subgraph s0["APA"]
+      subgraph s8["APA"]
+      subgraph s1["APA"]
+        D{"X"}
+        E[Q]
+      end
+      subgraph s3["BAPA"]
+        F[Q]
+        I
+      end
+            D --> I
+            D --> I
+            D --> I
+
+      I{"X"}
+      end
+      end
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+---
+config:
+  layout: elk
+---
+      flowchart LR
+      a
+        D{"Use the editor"}
+
+      D -- Mermaid js --> I{"fa:fa-code Text"}
+      D-->I
+      D-->I
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+---
+config:
+  layout: elk
+---
+flowchart LR
+ subgraph s1["Untitled subgraph"]
+        n1["Evaluate"]
+        n2["Option 1"]
+        n3["Option 2"]
+        n4["fa:fa-car Option 3"]
+  end
+ subgraph s2["Untitled subgraph"]
+        n5["Evaluate"]
+        n6["Option 1"]
+        n7["Option 2"]
+        n8["fa:fa-car Option 3"]
+  end
+    A["Start"] -- Some text --> B("Continue")
+    B --> C{"Evaluate"}
+    C -- One --> D["Option 1"]
+    C -- Two --> E["Option 2"]
+    C -- Three --> F["fa:fa-car Option 3"]
+    n1 -- One --> n2
+    n1 -- Two --> n3
+    n1 -- Three --> n4
+    n5 -- One --> n6
+    n5 -- Two --> n7
+    n5 -- Three --> n8
+    n1@{ shape: diam}
+    n2@{ shape: rect}
+    n3@{ shape: rect}
+    n4@{ shape: rect}
+    n5@{ shape: diam}
+    n6@{ shape: rect}
+    n7@{ shape: rect}
+    n8@{ shape: rect}
+
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+---
+config:
+  layout: elk
+---
+flowchart LR
+ subgraph s1["Untitled subgraph"]
+        n1["Evaluate"]
+        n2["Option 1"]
+  end
+    n1 -- One --> n2
+
+
+
+
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+---
+config:
+  layout: elk
+---
+flowchart LR
+    A{A} --> B & C
+</pre
+    >
+    <pre id="diagram4" class="mermaid2">
+---
+config:
+  layout: elk
+---
+flowchart LR
+    A{A} --> B & C
+    subgraph "subbe"
+      A
+    end
+</pre
+    >
+    <pre id="diagram4" class="mermaid2">
+---
+config:
+  layout: elk
+---
+flowchart LR
+    n2@{ shape: rect}
+    n3@{ shape: rect}
+    n4@{ shape: rect}
+    A["Start"] -- Some text --> B("Continue")
+    B --> C{"Evaluate"}
+    C -- One --> D["Option 1"]
+    C -- Two --> E["Option 2"]
+    C -- Three --> F["fa:fa-car Option 3"]
+    %% C@{ shape: hexagon}
+
+
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+---
+config:
+  kanban:
+    ticketBaseUrl: 'https://github.com/your-repo/issues/#TICKET#'
+---
+kanban
+  Backlog
+    task1[📝 Define project requirements]@{ ticket: a101 }
+  To Do
+    task2[🔍 Research technologies]@{ ticket: a102 }
+  Review
+    task4[🔍 Code review for login feature]@{ ticket: a104 }
+  Done
+    task5[✅ Deploy initial version]@{ ticket: a105 }
+  In Progress
+    task3[💻 Develop login feature]@{ ticket: 103 }
+
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
+
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
+style A fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
+A:::AClass
+classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
+
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
+
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
+style A fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
+A:::AClass
+classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
+
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
+
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
+style A fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
+A:::AClass
+classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
+  A:::AClass
+  classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
+  style A fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
    <pre id="diagram4" class="mermaid2">
 kanban
  id2[In progress]
    docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
    </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
  kanban:
@@ -118,6 +403,30 @@ kanban
    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      import layouts from './mermaid-layout-elk.esm.mjs';
+
+      const staticBellIconPack = {
+        prefix: 'fa6-regular',
+        icons: {
+          bell: {
+            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"/>',
+            width: 448,
+          },
+        },
+        width: 512,
+        height: 512,
+      };
+
+      mermaid.registerIconPacks([
+        {
+          name: 'logos',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
+        },
+        {
+          name: 'fa',
+          loader: () => staticBellIconPack,
+        },
+      ]);
      mermaid.registerLayoutLoaders(layouts);
      mermaid.parseError = function (err, hash) {
        console.error('Mermaid error: ', err);
@@ -125,7 +434,10 @@ kanban
      window.callback = function () {
        alert('A callback was triggered');
      };
-      mermaid.initialize({
+      function callback() {
+        alert('It worked');
+      }
+      await mermaid.initialize({
        // theme: 'base',
        // theme: 'default',
        // theme: 'forest',
@@ -135,11 +447,13 @@ kanban
        // layout: 'dagre',
        // layout: 'elk',
        // layout: 'fixed',
-        htmlLabels: false,
+        // htmlLabels: false,
        flowchart: { titleTopMargin: 10 },
+
        // fontFamily: 'Caveat',
        // fontFamily: 'Kalam',
        // fontFamily: 'courier',
+        fontFamily: 'arial',
        sequence: {
          actorFontFamily: 'courier',
          noteFontFamily: 'courier',
@@ -151,10 +465,9 @@ kanban
        fontSize: 12,
        logLevel: 0,
        securityLevel: 'loose',
+        callback,
      });
-      function callback() {
-        alert('It worked');
-      }
+
      mermaid.parseError = function (err, hash) {
        console.error('In parse error:');
        console.error(err);
--- a/cypress/platform/saurabh.html
+++ b/cypress/platform/saurabh.html
@@ -62,56 +62,23 @@

  <body style="display: flex; gap: 2rem; flex-direction: row">
    <pre id="diagram4" class="mermaid">
-      flowchart LR
-      A@{ icon: "fa:window-minimize", form: circle }
-      E@{ icon: "fa:window-minimize", form: circle }
-      B@{ icon: "fa:bell", form: circle }
-      B2@{ icon: "fa:bell", form: circle }
-      C@{ icon: "fa:address-book",  form: square  }
-      D@{ icon: "fa:star-half",  form: square  }
-      A --> E
-      B --> B2
-
+      flowchart
+          A --> A
+          subgraph B
+            B1 --> B1
+          end
+          subgraph C
+            subgraph C1
+              C2 --> C2
+              subgraph D
+                D1 --> D1
+              end
+              D --> D
+            end
+            C1 --> C1
+          end

    </pre>
-    <pre id="diagram4" class="mermaid2">
-      flowchart TB
-       A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
-       B2 --test--> C
-       D --> B2 --> E
-       style B2 fill:#f9f,stroke:#333,stroke-width:4px
-  </pre
-    >
-    <pre id="diagram43" class="mermaid2">
-      flowchart BT
-       A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }
-       B2 --test--> C
-       D --> B2 --> E
-  </pre
-    >
-    <pre id="diagram4" class="mermaid2">
-      flowchart BT
-       A --test2--> B2@{ icon: "fa:bell", label: "B2 awiugdawu uydgayuiwd wuydguy", pos: "b", h: 40, w: 30 }
-       B2 --test--> C
-  </pre
-    >
-    <pre id="diagram43" class="mermaid2">
-      flowchart BT
-       A --test2--> B2@{ icon: "fa:bell", label: "B2 dawuygd ayuwgd uy", pos: "t", h: 40, w: 30 }
-       B2 --test--> C
-  </pre
-    >
-    <pre id="diagram6" class="mermaid2">
-      flowchart TB
-       A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "t", w: 200, h: 100 } --> C
-  </pre
-    >
-    <pre id="diagram6" class="mermaid2">
-      flowchart TB
-       A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "b", w: 200, h: 100 } --> C
-       D --> B2 --> E
-  </pre
-    >
    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      import layouts from './mermaid-layout-elk.esm.mjs';