Merge from develop

mermaid-js · Aug 21, 2024 · 4298a57 · 4298a57
2 parents 6e8ea14 + f4097df
commit 4298a57
Show file tree

Hide file tree

Showing 25 changed files with 10,620 additions and 9,659 deletions.
diff --git a/cypress/platform/flowchart-refactor.html b/cypress/platform/flowchart-refactor.html
@@ -822,7 +822,7 @@
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      import { layouts } from './mermaid-layout-elk.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
       mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {};
 

diff --git a/cypress/platform/flowchart-sate.html b/cypress/platform/flowchart-sate.html
@@ -147,7 +147,7 @@
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      import { layouts } from './mermaid-layout-elk.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
       mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {};
 

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -57,88 +57,110 @@
           10px 10px;
         background-repeat: repeat; */
       }
+
+      .malware {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+
+      /* tspan {
+              font-size: 6px !important;
+            } */
     </style>
   </head>
 
   <body>
-    <pre id="diagram4" class="mermaid">
-  flowchart TB
-       %% ['triangle', 'slopedRect', 'tiltedCylinder', 'flippedTriangle', 'hourglass'];
-        node_0
-        noed_00 --> node_1@{ shape: triangle, label: "This is **bold** <br>and <strong>strong</strong>" }@
-        style node_1 fill:#f9f,stroke:#333,stroke-width:4px
-
-        node_2@{ shape: slopedRect }@
-        node_3@{ shape: tiltedCylinder }@
-        style node_0 fill:#f9f,stroke:#333,stroke-width:4px
-        style node_3 fill:#f9f,stroke:#333,stroke-width:4px
-        classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-        node_2:::customClazz
-        node_00:::customClazz
-
-
-  </pre>
-    <pre id="diagram4" class="mermaid2">
-    flowchart RL
-    n0 --> n00@{ shape: taggedRect, label: 'new shape' }@
-    style n00 fill:#f9f,stroke:#333,stroke-width:4px
-    n1 --> n11@{ shape: multiRect, label: 'new shape' }@
-    style n11 fill:#f9f,stroke:#333,stroke-width:4px"
-  </pre
-    >
-    <pre id="diagram4" class="mermaid2">
+    <div class="flex">
+      <pre id="diagram" class="mermaid">
+---
+config:
+  look: handDrawn
+  flowchart:
+    htmlLabels: false
+---
 flowchart
-
-      %% without shape or label
-      node_0
-      %% with shape but no label
-      node_3@{ shape: triangle }@
-
-      %% with shape and label
-      node_1@{ shape: triangle, label: "This is a label" }@
-
-      %% with shape and long label
-      node_2@{ shape: triangle, label: "This is a long long long long long long label" }@
-
-      %% with shape and label && htmlLabel true
-      node_4@{ shape: triangle, label: "This is a label", htmlLabel: true }@
-
-      %% with shape and label && htmlLabel false
-      node_5@{ shape: triangle, label: "This is a label", htmlLabel: false }@
-
-      %% with shape and label handDrawn look ON
-      node_6@{ shape: triangle, label: "This is a label", handDrawn: true }@
-
-
-
-  </pre
-    >
-    <pre id="diagram4" class="mermaid2">
+      A[I am a long text, where do I go??? handdrawn - false]
+</pre
+      >
+      <pre id="diagram" class="mermaid">
+---
+config:
+  look: handdrawn
+  flowchart:
+    htmlLabels: true
+---
+flowchart
+      A[I am a long text, where do I go??? handdrawn - true]
+</pre
+      >
+    </div>
+    <div class="flex">
+      <pre id="diagram" class="mermaid">
+---
+config:
+  flowchart:
+    htmlLabels: false
+---
 flowchart
+      A[I am a long text, where do I go??? classic - false]
+</pre
+      >
+      <pre id="diagram" class="mermaid">
+---
+config:
+  flowchart:
+    htmlLabels: true
+---
+flowchart
+      A[I am a long text, where do I go??? classic - true]
+</pre
+      >
+    </div>
+    <pre id="diagram2" class="mermaid2">
+flowchart LR
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+
+
+    </pre>
+
+    <pre id="diagram3" class="mermaid2">
+      flowchart LR
+    A:::foo & B:::bar --> C:::foobar
+    classDef foo stroke:#f00
+    classDef bar stroke:#0f0
+    classDef ash color:red
+    class C ash
+    style C stroke:#00f, fill:black
+
+    </pre>
 
-      A{"This is a label"}@{
-        shape: document,
-        icon: car,
-        labelAlt: "This is another label
-        **bit**",
-        path: [1,2,3]
-      }@
-      D@{ shape: roundedRect, icon: car
-      }@
+    <pre id="diagram4" class="mermaid2">
+      stateDiagram
+    A:::foo
+    B:::bar --> C:::foobar
+    classDef foo stroke:#f00
+    classDef bar stroke:#0f0
+    style C stroke:#00f, fill:black, color:white
 
-      A --> B & D
-      A@{
-        label: "This is the final label {}"
-        icon: car
-      }@ --> B
-      A(This is a label)
-  </pre
-    >
+    </pre>
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      import { layouts } from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
+      // import layouts from './mermaid-layout-elk.esm.mjs';
+      // mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {
         console.error('Mermaid error: ', err);
       };
@@ -147,19 +169,16 @@
       };
       mermaid.initialize({
         // theme: 'base',
-        // handdrawnSeed: 12,
-        look: 'classic',
+        // handDrawnSeed: 12,
+        // look: 'handDrawn',
         // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        'elk.nodePlacement.strategy': 'SIMPLE',
-        // 'elk.nodePlacement.strategy': 'LAYERED',
-        // 'elk.mergeEdges': true,
         // layout: 'dagre',
-        layout: 'elk',
+        // layout: 'elk',
         // layout: 'fixed',
         // htmlLabels: false,
-        flowchart: { titleTopMargin: 10, padding: 8 },
+        flowchart: { titleTopMargin: 10 },
         // fontFamily: 'Caveat',
-        fontFamily: 'Kalam',
+        // fontFamily: 'Kalam',
         // fontFamily: 'courier',
         sequence: {
           actorFontFamily: 'courier',

diff --git a/cypress/platform/state-refactor.html b/cypress/platform/state-refactor.html
@@ -1222,7 +1222,7 @@
 
   <script type="module">
     import mermaid from './mermaid.esm.mjs';
-    import { layouts } from './mermaid-layout-elk.esm.mjs';
+    import layouts from './mermaid-layout-elk.esm.mjs';
     mermaid.registerLayoutLoaders(layouts);
     mermaid.parseError = function (err, hash) {
 
@@ -1268,4 +1268,4 @@
   </script>
 </body>
 
-</html>
+</html>
diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
@@ -1,7 +1,7 @@
-import mermaid from './mermaid.esm.mjs';
-import { layouts } from './mermaid-layout-elk.esm.mjs';
 import externalExample from './mermaid-example-diagram.esm.mjs';
+import layouts from './mermaid-layout-elk.esm.mjs';
 import zenUml from './mermaid-zenuml.esm.mjs';
+import mermaid from './mermaid.esm.mjs';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));

diff --git a/docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md b/docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md
@@ -16,7 +16,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/render.ts:9](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L9)
+[packages/mermaid/src/rendering-util/render.ts:11](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L11)
 
 ---
 
@@ -26,7 +26,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/render.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L8)
+[packages/mermaid/src/rendering-util/render.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L10)
 
 ---
 
@@ -36,4 +36,4 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/render.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L7)
+[packages/mermaid/src/rendering-util/render.ts:9](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L9)
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "version": "10.2.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@9.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a",
+  "packageManager": "pnpm@9.7.1+sha512.faf344af2d6ca65c4c5c8c2224ea77a81a5e8859cbc4e06b1511ddce2f0151512431dd19e6aff31f2c6a8f5f2aced9bd2273e1fed7dd4de1868984059d2c4247",
   "keywords": [
     "diagram",
     "markdown",

diff --git a/packages/mermaid-flowchart-elk/package.json b/packages/mermaid-flowchart-elk/package.json