Merge branch 'develop' into feature/4401_creating_langium_parser_gitGraph

2025-11-29 00:54:08 +01:00 · 2024-08-23 17:40:08 +05:30
parent 52f5d95c81 24490f7789
commit 6c89763ef9
23 changed files with 226 additions and 118 deletions
--- a/.cspell/code-terms.txt
+++ b/.cspell/code-terms.txt
@@ -120,6 +120,8 @@ SUBROUTINEEND
 SUBROUTINESTART
 Subschemas
 substr
+SVGG
+SVGSVG
 TAGEND
 TAGSTART
 techn
--- a/.cspell/libraries.txt
+++ b/.cspell/libraries.txt
@@ -58,6 +58,7 @@ rehype
 roughjs
 rscratch
 shiki
+Slidev
 sparkline
 sphinxcontrib
 ssim
--- a/cypress/integration/rendering/flowchart-handDrawn.spec.js
+++ b/cypress/integration/rendering/flowchart-handDrawn.spec.js
@@ -12,7 +12,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -30,7 +30,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: true },
        fontFamily: 'courier',
      }
@@ -47,7 +47,7 @@ describe('Flowchart HandDrawn', () => {
      C -->|Two| E[iPhone]
      C -->|Three| F[Car]
      `,
-      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -62,7 +62,7 @@ describe('Flowchart HandDrawn', () => {
      C -->|Two| E[\\iPhone\\]
      C -->|Three| F[Car]
      `,
-      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -78,7 +78,7 @@ describe('Flowchart HandDrawn', () => {
      classDef processHead fill:#888888,color:white,font-weight:bold,stroke-width:3px,stroke:#001f3f
      class 1A,1B,D,E processHead
      `,
-      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -107,7 +107,7 @@ describe('Flowchart HandDrawn', () => {
      35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
      36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
      `,
-      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -178,7 +178,7 @@ describe('Flowchart HandDrawn', () => {
      9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
      9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
      `,
-      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -187,7 +187,7 @@ describe('Flowchart HandDrawn', () => {
      `
    graph TB;subgraph "number as labels";1;end;
      `,
-      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -199,7 +199,7 @@ describe('Flowchart HandDrawn', () => {
        a1-->a2
      end
      `,
-      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -211,7 +211,7 @@ describe('Flowchart HandDrawn', () => {
        a1-->a2
      end
      `,
-      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -246,7 +246,7 @@ describe('Flowchart HandDrawn', () => {
      style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
      style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
      `,
-      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -348,7 +348,7 @@ describe('Flowchart HandDrawn', () => {
      sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
      sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
      `,
-      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, fontFamily: 'courier' }
    );
  });

@@ -364,7 +364,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        listUrl: false,
        listId: 'color styling',
        fontFamily: 'courier',
@@ -390,7 +390,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        listUrl: false,
        listId: 'color styling',
        fontFamily: 'courier',
@@ -411,7 +411,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -435,7 +435,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -457,7 +457,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -471,7 +471,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -485,7 +485,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -500,7 +500,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -527,7 +527,7 @@ describe('Flowchart HandDrawn', () => {
      class A someclass;`,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -544,7 +544,7 @@ describe('Flowchart HandDrawn', () => {
      C -->|Two| E[iPhone]
      C -->|Three| F[fa:fa-car Car]
      `,
-      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { nodeSpacing: 50 }, fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, flowchart: { nodeSpacing: 50 }, fontFamily: 'courier' }
    );
  });

@@ -560,7 +560,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        flowchart: { rankSpacing: '100' },
        fontFamily: 'courier',
      }
@@ -578,7 +578,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -603,7 +603,7 @@ describe('Flowchart HandDrawn', () => {
      click E "notes://do-your-thing/id" "other protocol test"
      click F "javascript:alert('test')" "script test"
      `,
-      { look: 'handDrawn', handDrawnSeed: 0, securityLevel: 'loose', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 1, securityLevel: 'loose', fontFamily: 'courier' }
    );
  });

@@ -623,7 +623,7 @@ describe('Flowchart HandDrawn', () => {
      click B "index.html#link-clicked" "link test"
      click D testClick "click test"
      `,
-      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { htmlLabels: true } }
+      { look: 'handDrawn', handDrawnSeed: 1, flowchart: { htmlLabels: true } }
    );
  });

@@ -645,7 +645,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -664,7 +664,7 @@ describe('Flowchart HandDrawn', () => {
      class A myClass1
      class D myClass2
      `,
-      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { htmlLabels: true } }
+      { look: 'handDrawn', handDrawnSeed: 1, flowchart: { htmlLabels: true } }
    );
  });

@@ -682,7 +682,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -711,7 +711,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -728,7 +728,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -752,7 +752,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: false },
        fontFamily: 'courier',
      }
@@ -769,7 +769,7 @@ describe('Flowchart HandDrawn', () => {
      C -->|Two| E[iPhone]
      C -->|Three| F[fa:fa-car Car]
      `,
-      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { diagramPadding: 0 } }
+      { look: 'handDrawn', handDrawnSeed: 1, flowchart: { diagramPadding: 0 } }
    );
  });

@@ -778,7 +778,7 @@ describe('Flowchart HandDrawn', () => {
      `graph TD
      A[Christmas]
      `,
-      { look: 'handDrawn', handDrawnSeed: 0 }
+      { look: 'handDrawn', handDrawnSeed: 1 }
    );
  });

@@ -796,7 +796,7 @@ describe('Flowchart HandDrawn', () => {
      C -----> E4
      C ======> E5
      `,
-      { look: 'handDrawn', handDrawnSeed: 0 }
+      { look: 'handDrawn', handDrawnSeed: 1 }
    );
  });
  it('FDH36: should render escaped without html labels', () => {
@@ -804,7 +804,7 @@ describe('Flowchart HandDrawn', () => {
      `graph TD
        a["<strong>Haiya</strong>"]-->b
      `,
-      { look: 'handDrawn', handDrawnSeed: 0, htmlLabels: false, flowchart: { htmlLabels: false } }
+      { look: 'handDrawn', handDrawnSeed: 1, htmlLabels: false, flowchart: { htmlLabels: false } }
    );
  });
  it('FDH37: should render non-escaped with html labels', () => {
@@ -814,7 +814,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -830,7 +830,7 @@ describe('Flowchart HandDrawn', () => {
      C -->|Two| E[iPhone]
      C -->|Three| F[fa:fa-car Car]
      `,
-      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { useMaxWidth: true } }
+      { look: 'handDrawn', handDrawnSeed: 1, flowchart: { useMaxWidth: true } }
    );
    cy.get('svg').should((svg) => {
      expect(svg).to.have.attr('width', '100%');
@@ -853,7 +853,7 @@ describe('Flowchart HandDrawn', () => {
      C -->|Two| E[iPhone]
      C -->|Three| F[fa:fa-car Car]
      `,
-      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { useMaxWidth: false } }
+      { look: 'handDrawn', handDrawnSeed: 1, flowchart: { useMaxWidth: false } }
    );
    cy.get('svg').should((svg) => {
      // const height = parseFloat(svg.attr('height'));
@@ -874,7 +874,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -904,7 +904,7 @@ describe('Flowchart HandDrawn', () => {
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -919,7 +919,7 @@ graph TD
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -937,7 +937,7 @@ graph TD
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -977,7 +977,7 @@ graph TD
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -999,7 +999,7 @@ graph TD
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -1016,7 +1016,7 @@ graph TD
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -1027,12 +1027,12 @@ graph TD
    imgSnapshotTest(
      `
      graph TD
-        classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff 
+        classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff
        hello --> default
      `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        htmlLabels: true,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
@@ -1051,7 +1051,7 @@ graph TD
    `,
      {
        look: 'handDrawn',
-        handDrawnSeed: 0,
+        handDrawnSeed: 1,
        flowchart: { htmlLabels: true },
        securityLevel: 'loose',
      }
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -84,17 +84,20 @@
    <div class="flex">
      <pre id="diagram" class="mermaid">
 ---
-config:
-  look: handDrawn
-  layout: elk
-  elk:
+  title: hello2
+  config:
+    look: handDrawn
+    layout: elk
+    elk:
        nodePlacementStrategy: BRANDES_KOEPF
 ---
-flowchart TB
-    %% A --> C
-    B -- sdf sdf --> C{"Evaluate"}
-    C --> n4["salkdfjh akljd lkasdjf lkashj lksjadf klasdh"]
-    C --> F
+flowchart LR
+  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]
+


 </pre
--- 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:25](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L25)
+[packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)

 ---

@@ -26,7 +26,7 @@

 #### Defined in

-[packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
+[packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)

 ---

@@ -36,4 +36,4 @@

 #### Defined in

-[packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)
+[packages/mermaid/src/rendering-util/render.ts:22](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L22)
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -59,6 +59,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [MonsterWriter](https://www.monsterwriter.com/) ✅
 - [Joplin](https://joplinapp.org) ✅
 - [LiveBook](https://livebook.dev) ✅
+- [Slidev](https://sli.dev) ✅
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
 - [Mermerd](https://github.com/KarnerTh/mermerd)
@@ -134,7 +135,7 @@ Communication tools and platforms
 ### Wikis

 - [DokuWiki](https://dokuwiki.org)
-  - [ComboStrap](https://combostrap.com/mermaid)
+  - [ComboStrap](https://combostrap.com/utility/create-diagram-with-mermaid-vh3ab9yj)
  - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
 - [Foswiki](https://foswiki.org)
  - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
--- a/docs/ecosystem/mermaid-chart.md
+++ b/docs/ecosystem/mermaid-chart.md
@@ -12,7 +12,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun

 <br />

-<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+<a href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=552855&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>

 ## About

--- a/docs/news/blog.md
+++ b/docs/news/blog.md
@@ -6,6 +6,30 @@

 # Blog

+## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://www.mermaidchart.com/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
+
+22 July 2024 · 5 mins
+
+The Mermaid AI chat interface
+
+## [How to Make a Sequence Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
+
+8 July 2024 · 6 mins
+
+Sequence diagrams are important for communicating complex systems in a clear and concise manner.
+
+## [How to Use the New “Comments” Feature in Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
+
+2 July 2024 · 3 mins
+
+How to Use the New Comments Feature in Mermaid Chart
+
+## [How to Use the official Mermaid Chart for Confluence app](https://www.mermaidchart.com/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
+
+21 May 2024 · 4 mins
+
+It doesn’t matter if you’re a data enthusiast, software engineer, or visual storyteller; our Confluence app can allow you to embed Mermaid Chart diagrams — and dynamically edit them — within your Confluence pages.
+
 ## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)

 7 May 2024 · 5 mins
--- a/packages/mermaid-layout-elk/package.json
+++ b/packages/mermaid-layout-elk/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@mermaid-js/layout-elk",
-  "version": "0.0.1",
+  "version": "0.1.0",
  "description": "ELK layout engine for mermaid",
  "module": "dist/mermaid-layout-elk.core.mjs",
  "types": "dist/packages/mermaid-layout-elk/src/index.d.ts",
@@ -34,13 +34,14 @@
    "d3": "^7.9.0",
    "elkjs": "^0.9.3"
  },
-  "peerDependencies": {
+  "devDependencies": {
+    "@types/d3": "^7.4.3",
    "mermaid": "workspace:^"
  },
+  "peerDependencies": {
+    "mermaid": "^11.0.0"
+  },
  "files": [
    "dist"
-  ],
-  "devDependencies": {
-    "@types/d3": "^7.4.3"
-  }
+  ]
 }
--- a/packages/mermaid-layout-elk/src/render.ts
+++ b/packages/mermaid-layout-elk/src/render.ts
@@ -6,7 +6,6 @@ import { type TreeData, findCommonAncestor } from './find-common-ancestor.js';
 export const render = async (
  data4Layout: LayoutData,
  svg: SVG,
-  element: any,
  {
    common,
    getConfig,
@@ -377,6 +376,7 @@ export const render = async (

        // calculate start and end points of the edge, note that the source and target
        // can be modified for shapes that have ports
+        // @ts-ignore TODO: fix this
        const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
        log.debug('abc78 source and target', source, target);
        // Add the edge to the graph
@@ -739,7 +739,7 @@ export const render = async (

  // @ts-ignore - ELK is not typed
  const elk = new ELK();
-
+  const element = svg.select('g');
  // Add the arrowheads to the svg
  insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);

--- a/packages/mermaid-zenuml/package.json
+++ b/packages/mermaid-zenuml/package.json
@@ -40,7 +40,7 @@
    "mermaid": "workspace:^"
  },
  "peerDependencies": {
-    "mermaid": "workspace:>=10.0.0"
+    "mermaid": "^10 || ^11"
  },
  "files": [
    "dist"
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
@@ -2,7 +2,7 @@ import { select } from 'd3';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
-import { getDiagramElements } from '../../rendering-util/insertElementsForSize.js';
+import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
 import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
 import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
 import type { LayoutData } from '../../rendering-util/types.js';
@@ -35,8 +35,8 @@ export const draw = async function (text: string, id: string, _version: string,
  log.debug('Before getData: ');
  const data4Layout = diag.db.getData() as LayoutData;
  log.debug('Data: ', data4Layout);
-  // Create the root SVG - the element is the div containing the SVG element
-  const { element, svg } = getDiagramElements(id, securityLevel);
+  // Create the root SVG
+  const svg = getDiagramElement(id, securityLevel);
  const direction = getDirection();

  data4Layout.type = diag.type;
@@ -53,7 +53,7 @@ export const draw = async function (text: string, id: string, _version: string,

  data4Layout.diagramId = id;
  log.debug('REF1:', data4Layout);
-  await render(data4Layout, svg, element);
+  await render(data4Layout, svg);
  const padding = data4Layout.config.flowchart?.padding ?? 8;
  utils.insertTitle(
    svg,
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
@@ -1,7 +1,7 @@
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
-import { getDiagramElements } from '../../rendering-util/insertElementsForSize.js';
+import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
 import { render } from '../../rendering-util/render.js';
 import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
 import type { LayoutData } from '../../rendering-util/types.js';
@@ -55,7 +55,7 @@ export const draw = async function (text: string, id: string, _version: string,
  const data4Layout = diag.db.getData() as LayoutData;

  // Create the root SVG - the element is the div containing the SVG element
-  const { element, svg } = getDiagramElements(id, securityLevel);
+  const svg = getDiagramElement(id, securityLevel);

  data4Layout.type = diag.type;
  data4Layout.layoutAlgorithm = layout;
@@ -67,10 +67,10 @@ export const draw = async function (text: string, id: string, _version: string,
  data4Layout.markers = ['barb'];
  data4Layout.diagramId = id;
  // console.log('REF1:', data4Layout);
-  await render(data4Layout, svg, element);
+  await render(data4Layout, svg);
  const padding = 8;
  utils.insertTitle(
-    element,
+    svg,
    'statediagramTitleText',
    conf?.titleTopMargin ?? 25,
    diag.db.getDiagramTitle()
--- a/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/ProductHuntBadge.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="-mt-6 mb-8">
+    <a
+      href="https://www.producthunt.com/posts/mermaid-ai-2?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;ai&#0045;2"
+      target="_blank"
+      ><img
+        src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=465568&theme=light"
+        alt="Mermaid&#0032;AI - Maximize&#0032;your&#0032;diagramming&#0032;efficiency&#0032;with&#0032;Mermaid&#0032;AI | Product Hunt"
+        style="width: 250px; height: 54px"
+        width="250"
+        height="54"
+    /></a>
+  </div>
+</template>
--- a/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
+++ b/packages/mermaid/src/docs/.vitepress/components/TopBar.vue
@@ -1,26 +1,65 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+interface Taglines {
+  label: string;
+  url: string;
+}
+
+const taglines: Taglines[] = [
+  {
+    label: 'Use the Visual Editor in Mermaid Chart to design and build diagrams',
+    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=visual_editor',
+  },
+  {
+    label: 'Diagram live with teammates in Mermaid Chart',
+    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=teams',
+  },
+  {
+    label: 'Skip the rough draft with Mermaid AI in Mermaid Chart',
+    url: 'https://www.mermaidchart.com/play?utm_source=mermaid_live_editor&utm_medium=banner_ad&utm_campaign=mermaid_ai',
+  },
+];
+
+let index = ref(Math.floor(Math.random() * taglines.length));
+onMounted(() => {
+  setInterval(() => {
+    index.value = (index.value + 1) % taglines.length;
+  }, 60_000);
+});
+</script>
+
 <template>
-  <div
-    class="w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white"
-  >
-    <p class="flex-grow text-center tracking-wide text-text">
-      <a
-        href="https://www.mermaidchart.com/landing"
-        target="_blank"
-        class="unstyled flex-grow tracking-wide plausible-event-name=bannerClick"
-      >
-        <span class="text-primary-50 font-semibold">{{
-          [
-            'Try diagramming with ChatGPT at Mermaid Chart',
-            'Try Mermaid’s Visual Editor at Mermaid Chart',
-            'Enjoy live collaboration with teammates at Mermaid Chart',
-          ][Math.floor(Math.random() * 3)]
-        }}</span>
-        <button
-          class="ml-4 rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide text-white"
+  <div class="mb-4 w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex p-1">
+    <p class="w-full tracking-wide fade-text">
+      <transition name="fade" mode="out-in">
+        <a
+          :key="index"
+          :href="taglines[index].url"
+          target="_blank"
+          class="unstyled flex justify-center items-center gap-4 text-white tracking-wide plausible-event-name=bannerClick"
        >
-          Try it now
-        </button>
-      </a>
+          <span class="font-semibold">{{ taglines[index].label }}</span>
+          <button class="rounded bg-[#111113] p-1 px-2 text-sm font-semibold tracking-wide">
+            Try it now
+          </button>
+        </a>
+      </transition>
    </p>
  </div>
 </template>
+
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 1s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+</style>
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@@ -11,11 +11,11 @@ import HomePage from '../components/HomePage.vue';
 import TopBar from '../components/TopBar.vue';
 import { getRedirect } from './redirect.js';
 // @ts-ignore Type not available
-import { h } from 'vue';
-import Theme from 'vitepress/theme';
-import '../style/main.css';
 import 'uno.css';
 import type { EnhanceAppContext } from 'vitepress';
+import Theme from 'vitepress/theme';
+import { h } from 'vue';
+import '../style/main.css';

 export default {
  ...DefaultTheme,
@@ -24,6 +24,7 @@ export default {
      // Keeping this as comment as it took a lot of time to figure out how to add a component to the top bar.
      'home-hero-before': () => h(TopBar),
      'home-features-after': () => h(HomePage),
+      'doc-before': () => h(TopBar),
    });
  },
  enhanceApp({ app, router }: EnhanceAppContext) {
--- a/packages/mermaid/src/docs/ecosystem/integrations-community.md
+++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md
@@ -54,6 +54,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [MonsterWriter](https://www.monsterwriter.com/) ✅
 - [Joplin](https://joplinapp.org) ✅
 - [LiveBook](https://livebook.dev) ✅
+- [Slidev](https://sli.dev) ✅
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
 - [Mermerd](https://github.com/KarnerTh/mermerd)
@@ -129,7 +130,7 @@ Communication tools and platforms
 ### Wikis

 - [DokuWiki](https://dokuwiki.org)
-  - [ComboStrap](https://combostrap.com/mermaid)
+  - [ComboStrap](https://combostrap.com/utility/create-diagram-with-mermaid-vh3ab9yj)
  - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
 - [Foswiki](https://foswiki.org)
  - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
--- a/packages/mermaid/src/docs/ecosystem/mermaid-chart.md
+++ b/packages/mermaid/src/docs/ecosystem/mermaid-chart.md
@@ -6,7 +6,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun

 <br />

-<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+<a href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=552855&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>

 ## About

--- a/packages/mermaid/src/docs/news/blog.md
+++ b/packages/mermaid/src/docs/news/blog.md
@@ -1,5 +1,29 @@
 # Blog

+## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://www.mermaidchart.com/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
+
+22 July 2024 · 5 mins
+
+The Mermaid AI chat interface
+
+## [How to Make a Sequence Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
+
+8 July 2024 · 6 mins
+
+Sequence diagrams are important for communicating complex systems in a clear and concise manner.
+
+## [How to Use the New “Comments” Feature in Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
+
+2 July 2024 · 3 mins
+
+How to Use the New Comments Feature in Mermaid Chart
+
+## [How to Use the official Mermaid Chart for Confluence app](https://www.mermaidchart.com/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
+
+21 May 2024 · 4 mins
+
+It doesn’t matter if you’re a data enthusiast, software engineer, or visual storyteller; our Confluence app can allow you to embed Mermaid Chart diagrams — and dynamically edit them — within your Confluence pages.
+
 ## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)

 7 May 2024 · 5 mins
--- a/packages/mermaid/src/rendering-util/insertElementsForSize.js
+++ b/packages/mermaid/src/rendering-util/insertElementsForSize.js
@@ -1,7 +1,7 @@
 import { select } from 'd3';
 import { insertNode } from '../dagre-wrapper/nodes.js';

-export const getDiagramElements = (id, securityLevel) => {
+export const getDiagramElement = (id, securityLevel) => {
  let sandboxElement;
  if (securityLevel === 'sandbox') {
    sandboxElement = select('#i' + id);
@@ -15,9 +15,7 @@ export const getDiagramElements = (id, securityLevel) => {

  // Run the renderer. This is what draws the final graph.

-  // @ts-ignore todo: fix this
-  const element = root.select('#' + id + ' g');
-  return { svg, element };
+  return svg;
 };

 export function insertElementsForSize(el, data) {
--- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
+++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js
@@ -268,7 +268,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
  return { elem, diff };
 };

-export const render = async (data4Layout, svg, element) => {
+export const render = async (data4Layout, svg) => {
  const graph = new graphlib.Graph({
    multigraph: true,
    compound: true,
@@ -289,7 +289,7 @@ export const render = async (data4Layout, svg, element) => {
    .setDefaultEdgeLabel(function () {
      return {};
    });
-
+  const element = svg.select('g');
  insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
  clearNodes();
  clearEdges();
--- a/packages/mermaid/src/rendering-util/render.ts
+++ b/packages/mermaid/src/rendering-util/render.ts
@@ -12,7 +12,6 @@ export interface LayoutAlgorithm {
  render(
    layoutData: LayoutData,
    svg: SVG,
-    element: any,
    helpers: InternalHelpers,
    options?: RenderOptions
  ): Promise<void>;
@@ -45,14 +44,14 @@ const registerDefaultLayoutLoaders = () => {

 registerDefaultLayoutLoaders();

-export const render = async (data4Layout: LayoutData, svg: SVG, element: any) => {
+export const render = async (data4Layout: LayoutData, svg: SVG) => {
  if (!(data4Layout.layoutAlgorithm in layoutAlgorithms)) {
    throw new Error(`Unknown layout algorithm: ${data4Layout.layoutAlgorithm}`);
  }

  const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
  const layoutRenderer = await layoutDefinition.loader();
-  return layoutRenderer.render(data4Layout, svg, element, internalHelpers, {
+  return layoutRenderer.render(data4Layout, svg, internalHelpers, {
    algorithm: layoutDefinition.algorithm,
  });
 };
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -409,13 +409,13 @@ importers:
      elkjs:
        specifier: ^0.9.3
        version: 0.9.3
-      mermaid:
-        specifier: workspace:^
-        version: link:../mermaid
    devDependencies:
      '@types/d3':
        specifier: ^7.4.3
        version: 7.4.3
+      mermaid:
+        specifier: workspace:^
+        version: link:../mermaid

  packages/mermaid-zenuml:
    dependencies: