fix: set root when globalThis is defined

Merge remote-tracking branch 'origin' into fix/5378
fix: patch lodash to not use Function calls
2025-12-28 07:06:23 +01:00 · 2024-03-23 13:00:51 -07:00 · 2024-03-23 12:17:21 -07:00 · 2024-03-23 12:06:29 -07:00
209 changed files with 13801 additions and 17929 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -1 +0,0 @@
-.gitignore
--- a/.eslintignore
+++ b/.eslintignore
@@ -0,0 +1,11 @@
+dist/**
+.github/**
+docs/Setup.md
+cypress.config.js
+cypress/plugins/index.js
+coverage
+*.json
+node_modules
+
+# autogenereated by langium-cli
+generated/
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -53,7 +53,6 @@ module.exports = {
    '@typescript-eslint/no-floating-promises': 'error',
    '@typescript-eslint/no-misused-promises': 'error',
    '@typescript-eslint/no-unused-vars': 'warn',
-    '@typescript-eslint/consistent-type-definitions': 'error',
    '@typescript-eslint/ban-ts-comment': [
      'error',
      {
--- a/.github/lychee.toml
+++ b/.github/lychee.toml
@@ -41,10 +41,7 @@ exclude = [
 "https://bundlephobia.com",

 # Chrome webstore migration issue. Temporary
-"https://chromewebstore.google.com",
-
-# Drupal 403
-"https://www.drupal.org"
+"https://chromewebstore.google.com"
 ]

 # Exclude all private IPs from checking.
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -37,13 +37,13 @@ jobs:
        run: pnpm run build

      - name: Upload Mermaid Build as Artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v3
        with:
          name: mermaid-build
          path: packages/mermaid/dist

      - name: Upload Mermaid Mindmap Build as Artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v3
        with:
          name: mermaid-mindmap-build
          path: packages/mermaid-mindmap/dist
--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -33,7 +33,7 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@v2
        with:
          config-file: ./.github/codeql/codeql-config.yml
          languages: ${{ matrix.language }}
@@ -45,7 +45,7 @@ jobs:
      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
      # If this step fails, then you should remove it and run the build manually (see below)
      - name: Autobuild
-        uses: github/codeql-action/autobuild@v3
+        uses: github/codeql-action/autobuild@v2

      # ℹ️ Command-line programs to run using the OS shell.
      # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -59,4 +59,4 @@ jobs:
      #   make release

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@v2
--- a/.github/workflows/dependency-review.yml
+++ b/.github/workflows/dependency-review.yml
@@ -17,4 +17,4 @@ jobs:
      - name: 'Checkout Repository'
        uses: actions/checkout@v4
      - name: 'Dependency Review'
-        uses: actions/dependency-review-action@v4
+        uses: actions/dependency-review-action@v3
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -1,3 +1,9 @@
+# We use github cache to save snapshots between runs.
+# For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
+# If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
+# These are then downloaded before running the E2E, providing the reference snapshots.
+# If there are any errors, the diff image is uploaded to artifacts, and the user is notified.
+
 name: E2E

 on:
@@ -66,6 +72,16 @@ jobs:
          mkdir -p cypress/snapshots/stats/base
          mv stats cypress/snapshots/stats/base

+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        id: cypress-snapshot-gen
+        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
+        with:
+          install: false
+          start: pnpm run dev
+          wait-on: 'http://localhost:9000'
+          browser: chrome
+
  e2e:
    runs-on: ubuntu-latest
    container:
@@ -90,7 +106,7 @@ jobs:
      # These cached snapshots are downloaded, providing the reference snapshots.
      - name: Cache snapshots
        id: cache-snapshot
-        uses: actions/cache/restore@v4
+        uses: actions/cache/restore@v3
        with:
          path: ./cypress/snapshots
          key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
@@ -130,13 +146,9 @@ jobs:
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
          VITEST_COVERAGE: true
          CYPRESS_COMMIT: ${{ github.sha }}
-          ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
-          ARGOS_PARALLEL: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
-          ARGOS_PARALLEL_TOTAL: 4
-          ARGOS_PARALLEL_INDEX: ${{ matrix.containers }}

      - name: Upload Coverage to Codecov
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@v3
        # Run step only pushes to develop and pull_requests
        if: ${{ steps.cypress.conclusion == 'success' && (github.event_name == 'pull_request' || github.ref == 'refs/heads/develop')}}
        with:
@@ -146,3 +158,55 @@ jobs:
          fail_ci_if_error: false
          verbose: true
          token: 6845cc80-77ee-4e17-85a1-026cd95e0766
+
+      # We upload the artifacts into numbered archives to prevent overwriting
+      - name: Upload Artifacts
+        uses: actions/upload-artifact@v4
+        if: ${{ always() }}
+        with:
+          name: snapshots-${{ matrix.containers }}
+          retention-days: 1
+          path: ./cypress/snapshots
+
+  combineArtifacts:
+    needs: e2e
+    runs-on: ubuntu-latest
+    if: ${{ always() }}
+    steps:
+      # Download all snapshot artifacts and merge them into a single folder
+      - name: Download All Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: snapshots
+          pattern: snapshots-*
+          merge-multiple: true
+
+      # For successful push events, we save the snapshots cache
+      - name: Save snapshots cache
+        id: cache-upload
+        if: ${{ github.event_name == 'push' && needs.e2e.result != 'failure' }}
+        uses: actions/cache/save@v3
+        with:
+          path: ./snapshots
+          key: ${{ runner.os }}-snapshots-${{ github.event.after }}
+
+      - name: Flatten images to a folder
+        if: ${{ needs.e2e.result == 'failure'  }}
+        run: |
+          mkdir errors
+          cd snapshots
+          find . -mindepth 2 -type d -name "*__diff_output__*" -exec sh -c 'mv "$0"/*.png ../errors/' {} \;
+
+      - name: Upload Error snapshots
+        if: ${{ needs.e2e.result == 'failure' }}
+        uses: actions/upload-artifact@v4
+        id: upload-artifacts
+        with:
+          name: error-snapshots
+          retention-days: 10
+          path: errors/
+
+      - name: Notify Users
+        if: ${{ needs.e2e.result == 'failure' }}
+        run: |
+          echo "::error title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"
--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@@ -29,7 +29,7 @@ jobs:
      - uses: actions/checkout@v4

      - name: Restore lychee cache
-        uses: actions/cache@v4
+        uses: actions/cache@v3
        with:
          path: .lycheecache
          key: cache-lychee-${{ github.sha }}
--- a/.github/workflows/pr-labeler.yml
+++ b/.github/workflows/pr-labeler.yml
@@ -22,7 +22,7 @@ jobs:
      pull-requests: write # write permission is required to label PRs
    steps:
      - name: Label PR
-        uses: release-drafter/release-drafter@v6
+        uses: release-drafter/release-drafter@v5
        with:
          config-name: pr-labeler.yml
          disable-autolabeler: false
--- a/.github/workflows/publish-docs.yml
+++ b/.github/workflows/publish-docs.yml
@@ -37,13 +37,13 @@ jobs:
        run: pnpm install --frozen-lockfile

      - name: Setup Pages
-        uses: actions/configure-pages@v4
+        uses: actions/configure-pages@v3

      - name: Run Build
        run: pnpm --filter mermaid run docs:build:vitepress

      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
+        uses: actions/upload-pages-artifact@v1
        with:
          path: packages/mermaid/src/vitepress/.vitepress/dist

@@ -56,4 +56,4 @@ jobs:
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v2
--- a/.github/workflows/release-draft.yml
+++ b/.github/workflows/release-draft.yml
@@ -16,7 +16,7 @@ jobs:
      pull-requests: read # required to read PR titles/labels
    steps:
      - name: Draft Release
-        uses: release-drafter/release-drafter@v6
+        uses: release-drafter/release-drafter@v5
        with:
          disable-autolabeler: true
        env:
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -39,7 +39,7 @@ jobs:
          pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts --coverage

      - name: Upload Coverage to Codecov
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@v3
        # Run step only pushes to develop and pull_requests
        if: ${{ github.event_name == 'pull_request' || github.ref == 'refs/heads/develop' }}
        with:
--- a/.github/workflows/update-browserlist.yml
+++ b/.github/workflows/update-browserlist.yml
@@ -19,7 +19,7 @@ jobs:
          message: 'chore: update browsers list'
          push: false
      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v6
+        uses: peter-evans/create-pull-request@v5
        with:
          branch: update-browserslist
          title: Update Browserslist
--- a/.gitignore
+++ b/.gitignore
@@ -48,7 +48,6 @@ demos/dev/**
 !/demos/dev/example.html
 !/demos/dev/reload.js
 tsx-0/**
-vite.config.ts.timestamp-*

 # autogenereated by langium-cli
-generated/
+generated/
--- a/.node-version
+++ b/.node-version
@@ -1 +1 @@
-20.12.2
+v20.11.1
--- a/2
+++ b/2
@@ -1,2 +1,2 @@
-FROM node:20.12.2-alpine3.19 AS base
+FROM node:20.11.1-alpine3.19 AS base
 RUN wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.shrc" SHELL="$(which sh)" sh -
--- a/FUNDING.json
+++ b/FUNDING.json
@@ -1,7 +0,0 @@
-{
-  "drips": {
-    "ethereum": {
-      "ownedBy": "0x0831DDFe60d009d9448CC976157b539089aB821E"
-    }
-  }
-}
--- a/README.md
+++ b/README.md
@@ -35,7 +35,6 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
 [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
 [![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
 [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
-[![Covered by Argos Visual Testing](https://argos-ci.com/badge.svg)](https://argos-ci.com)

 <img src="./img/header.png" alt="" />

--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -2,8 +2,6 @@ import { defineConfig } from 'cypress';
 import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
 import coverage from '@cypress/code-coverage/task';
 import eyesPlugin from '@applitools/eyes-cypress';
-import { registerArgosTask } from '@argos-ci/cypress/task';
-
 export default eyesPlugin(
  defineConfig({
    projectId: 'n2sma2',
@@ -19,17 +17,10 @@ export default eyesPlugin(
          }
          return launchOptions;
        });
+        addMatchImageSnapshotPlugin(on, config);
        // copy any needed variables from process.env to config.env
        config.env.useAppli = process.env.USE_APPLI ? true : false;
-        config.env.useArgos = !!process.env.CI;

-        if (config.env.useArgos) {
-          registerArgosTask(on, config, {
-            token: 'fc3a35cf5200db928d65b2047861582d9444032b',
-          });
-        } else {
-          addMatchImageSnapshotPlugin(on, config);
-        }
        // do not forget to return the changed config object!
        return config;
      },
--- a/cypress/helpers/util.ts
+++ b/cypress/helpers/util.ts
@@ -95,22 +95,8 @@ export const openURLAndVerifyRendering = (
  options: CypressMermaidConfig,
  validation?: any
 ): void => {
-  const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
-
-  cy.visit(url);
-  cy.window().should('have.property', 'rendered', true);
-  cy.get('svg').should('be.visible');
-
-  if (validation) {
-    cy.get('svg').should(validation);
-  }
-
-  verifyScreenshot(name);
-};
-
-export const verifyScreenshot = (name: string): void => {
  const useAppli: boolean = Cypress.env('useAppli');
-  const useArgos: boolean = Cypress.env('useArgos');
+  const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');

  if (useAppli) {
    cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`);
@@ -120,12 +106,21 @@ export const verifyScreenshot = (name: string): void => {
      batchName: Cypress.spec.name,
      batchId: batchId + Cypress.spec.name,
    });
+  }
+
+  cy.visit(url);
+  cy.window().should('have.property', 'rendered', true);
+  cy.get('svg').should('be.visible');
+
+  if (validation) {
+    cy.get('svg').should(validation);
+  }
+
+  if (useAppli) {
    cy.log(`Check eyes ${Cypress.spec.name}`);
    cy.eyesCheckWindow('Click!');
    cy.log(`Closing eyes ${Cypress.spec.name}`);
    cy.eyesClose();
-  } else if (useArgos) {
-    cy.argosScreenshot(name);
  } else {
    cy.matchImageSnapshot(name);
  }
--- a/cypress/integration/other/configuration.spec.js
+++ b/cypress/integration/other/configuration.spec.js
@@ -1,4 +1,4 @@
-import { renderGraph, verifyScreenshot } from '../../helpers/util.ts';
+import { renderGraph } from '../../helpers/util.ts';
 describe('Configuration', () => {
  describe('arrowMarkerAbsolute', () => {
    it('should handle default value false of arrowMarkerAbsolute', () => {
@@ -119,7 +119,8 @@ describe('Configuration', () => {
      const url = 'http://localhost:9000/regression/issue-1874.html';
      cy.visit(url);
      cy.window().should('have.property', 'rendered', true);
-      verifyScreenshot(
+      cy.get('svg').should('be.visible');
+      cy.matchImageSnapshot(
        'configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives'
      );
    });
@@ -144,7 +145,7 @@ describe('Configuration', () => {
          // none of the diagrams should be error diagrams
          expect($svg).to.not.contain('Syntax error');
        });
-      verifyScreenshot(
+      cy.matchImageSnapshot(
        'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set'
      );
    });
@@ -161,7 +162,7 @@ describe('Configuration', () => {
          // some of the diagrams should be error diagrams
          expect($svg).to.contain('Syntax error');
        });
-      verifyScreenshot(
+      cy.matchImageSnapshot(
        'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set'
      );
    });
--- a/cypress/integration/other/xss.spec.js
+++ b/cypress/integration/other/xss.spec.js
@@ -10,6 +10,7 @@ describe('XSS', () => {
    cy.wait(1000).then(() => {
      cy.get('.mermaid').should('exist');
    });
+    cy.get('svg');
  });

  it('should not allow tags in the css', () => {
@@ -136,9 +137,4 @@ describe('XSS', () => {
    cy.wait(1000);
    cy.get('#the-malware').should('not.exist');
  });
-  it('should sanitize backticks block diagram labels properly', () => {
-    cy.visit('http://localhost:9000/xss25.html');
-    cy.wait(1000);
-    cy.get('#the-malware').should('not.exist');
-  });
 });
--- a/cypress/integration/rendering/c4.spec.js
+++ b/cypress/integration/rendering/c4.spec.js
@@ -30,6 +30,7 @@ describe('C4 diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });
  it('should render a simple C4Container diagram', () => {
    imgSnapshotTest(
@@ -49,6 +50,7 @@ describe('C4 diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });
  it('should render a simple C4Component diagram', () => {
    imgSnapshotTest(
@@ -67,6 +69,7 @@ describe('C4 diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });
  it('should render a simple C4Dynamic diagram', () => {
    imgSnapshotTest(
@@ -90,6 +93,7 @@ describe('C4 diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });
  it('should render a simple C4Deployment diagram', () => {
    imgSnapshotTest(
@@ -113,5 +117,6 @@ describe('C4 diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });
 });
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@@ -32,6 +32,7 @@ describe('Class diagram', () => {
      `,
      { logLevel: 1 }
    );
+    cy.get('svg');
  });

  it('2: should render a simple class diagrams with cardinality', () => {
@@ -60,6 +61,7 @@ describe('Class diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });

  it('3: should render a simple class diagram with different visibilities', () => {
@@ -77,6 +79,7 @@ describe('Class diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });

  it('4: should render a simple class diagram with comments', () => {
@@ -106,6 +109,7 @@ describe('Class diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });

  it('5: should render a simple class diagram with abstract method', () => {
@@ -117,6 +121,7 @@ describe('Class diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });

  it('6: should render a simple class diagram with static method', () => {
@@ -128,6 +133,7 @@ describe('Class diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });

  it('7: should render a simple class diagram with Generic class', () => {
@@ -147,6 +153,7 @@ describe('Class diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });

  it('8: should render a simple class diagram with Generic class and relations', () => {
@@ -167,6 +174,7 @@ describe('Class diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });

  it('9: should render a simple class diagram with clickable link', () => {
@@ -188,6 +196,7 @@ describe('Class diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });

  it('10: should render a simple class diagram with clickable callback', () => {
@@ -209,6 +218,7 @@ describe('Class diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });

  it('11: should render a simple class diagram with return type on method', () => {
@@ -223,6 +233,7 @@ describe('Class diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });

  it('12: should render a simple class diagram with generic types', () => {
@@ -238,6 +249,7 @@ describe('Class diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });

  it('13: should render a simple class diagram with css classes applied', () => {
@@ -255,6 +267,7 @@ describe('Class diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });

  it('14: should render a simple class diagram with css classes applied directly', () => {
@@ -270,6 +283,7 @@ describe('Class diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });

  it('15: should render a simple class diagram with css classes applied to multiple classes', () => {
@@ -284,6 +298,7 @@ describe('Class diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });

  it('16: should render multiple class diagrams', () => {
@@ -336,6 +351,7 @@ describe('Class diagram', () => {
      ],
      {}
    );
+    cy.get('svg');
  });

  // it('17: should render a class diagram when useMaxWidth is true (default)', () => {
@@ -405,6 +421,7 @@ describe('Class diagram', () => {
      `,
      { logLevel: 1 }
    );
+    cy.get('svg');
  });

  it('should render class diagram with newlines in title', () => {
@@ -422,6 +439,7 @@ describe('Class diagram', () => {
          +quack()
        }
      `);
+    cy.get('svg');
  });

  it('should render class diagram with many newlines in title', () => {
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -218,6 +218,7 @@ describe('Entity Relationship Diagram', () => {
        `,
      { loglevel: 1 }
    );
+    cy.get('svg');
  });

  it('should render entities with keys', () => {
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -1458,79 +1458,5 @@ gitGraph TB:
        { gitGraph: { parallelCommits: true } }
      );
    });
-    it('73: should render a simple gitgraph with three branches and tagged merge commit using switch instead of checkout', () => {
-      imgSnapshotTest(
-        `gitGraph
-         commit id: "1"
-         commit id: "2"
-         branch nice_feature
-         switch nice_feature
-         commit id: "3"
-         switch main
-         commit id: "4"
-         switch nice_feature
-         branch very_nice_feature
-         switch very_nice_feature
-         commit id: "5"
-         switch main
-         commit id: "6"
-         switch nice_feature
-         commit id: "7"
-         switch main
-         merge nice_feature id: "12345" tag: "my merge commit"
-         switch very_nice_feature
-         commit id: "8"
-         switch main
-         commit id: "9"
-        `,
-        {}
-      );
-    });
-    it('74: should render commits for more than 8 branches using switch instead of checkout', () => {
-      imgSnapshotTest(
-        `
-        gitGraph
-        switch main
-        %% Make sure to manually set the ID of all commits, for consistent visual tests
-        commit id: "1-abcdefg"
-        switch main
-        branch branch1
-        commit id: "2-abcdefg"
-        switch main
-        merge branch1
-        branch branch2
-        commit id: "3-abcdefg"
-        switch main
-        merge branch2
-        branch branch3
-        commit id: "4-abcdefg"
-        switch main
-        merge branch3
-        branch branch4
-        commit id: "5-abcdefg"
-        switch main
-        merge branch4
-        branch branch5
-        commit id: "6-abcdefg"
-        switch main
-        merge branch5
-        branch branch6
-        commit id: "7-abcdefg"
-        switch main
-        merge branch6
-        branch branch7
-        commit id: "8-abcdefg"
-        switch main
-        merge branch7
-        branch branch8
-        commit id: "9-abcdefg"
-        switch main
-        merge branch8
-        branch branch9
-        commit id: "10-abcdefg"
-        `,
-        {}
-      );
-    });
  });
 });
--- a/cypress/integration/rendering/quadrantChart.spec.js
+++ b/cypress/integration/rendering/quadrantChart.spec.js
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';

 describe('Quadrant Chart', () => {
  it('should render if only chart type is provided', () => {
@@ -8,6 +8,7 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
+    cy.get('svg');
  });
  it('should render a complete quadrant chart', () => {
    imgSnapshotTest(
@@ -29,6 +30,7 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
+    cy.get('svg');
  });
  it('should render without points', () => {
    imgSnapshotTest(
@@ -44,6 +46,7 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
+    cy.get('svg');
  });
  it('should able to render y-axix on right side', () => {
    imgSnapshotTest(
@@ -60,6 +63,7 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
+    cy.get('svg');
  });
  it('should able to render x-axix on bottom', () => {
    imgSnapshotTest(
@@ -76,6 +80,7 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
+    cy.get('svg');
  });
  it('should able to render x-axix on bottom and y-axis on right', () => {
    imgSnapshotTest(
@@ -92,6 +97,7 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
+    cy.get('svg');
  });
  it('should render without title', () => {
    imgSnapshotTest(
@@ -106,6 +112,7 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
+    cy.get('svg');
  });
  it('should use all the config', () => {
    imgSnapshotTest(
@@ -128,6 +135,7 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
+    cy.get('svg');
  });
  it('should use all the theme variable', () => {
    imgSnapshotTest(
@@ -150,6 +158,7 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
+    cy.get('svg');
  });
  it('should render x-axis labels in the center, if x-axis has two labels', () => {
    imgSnapshotTest(
@@ -171,6 +180,7 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
+    cy.get('svg');
  });
  it('should render y-axis labels in the center, if y-axis has two labels', () => {
    imgSnapshotTest(
@@ -192,6 +202,7 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
+    cy.get('svg');
  });
  it('should render both axes labels on the left and bottom, if both axes have only one label', () => {
    imgSnapshotTest(
@@ -213,52 +224,6 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
-  });
-
-  it('it should render data points with styles', () => {
-    imgSnapshotTest(
-      `
-  quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Reach -->
-    y-axis Engagement -->
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6] radius: 20
-    Campaign B: [0.45, 0.23]     color: #ff0000  
-    Campaign C: [0.57, 0.69]  stroke-color: #ff00ff  
-    Campaign D: [0.78, 0.34]        stroke-width: 3px    
-    Campaign E: [0.40, 0.34] radius: 20,   color: #ff0000  , stroke-color  : #ff00ff,     stroke-width    :   3px   
-    Campaign F: [0.35, 0.78] stroke-width: 3px , color: #ff0000, radius: 20, stroke-color:     #ff00ff
-    Campaign G: [0.22, 0.22] stroke-width: 3px  , color: #309708  ,  radius  : 20  ,  stroke-color:    #5060ff
-    Campaign H: [0.22, 0.44]
-      `,
-      {}
-    );
-  });
-
-  it('it should render data points with styles + classes', () => {
-    imgSnapshotTest(
-      `
-  quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Reach -->
-    y-axis Engagement -->
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A:::class1: [0.3, 0.6] radius: 20
-    Campaign B: [0.45, 0.23] color: #ff0000
-    Campaign C: [0.57, 0.69] stroke-color: #ff00ff
-    Campaign D:::class2: [0.78, 0.34] stroke-width: 3px
-    Campaign E:::class2: [0.40, 0.34] radius: 20, color: #ff0000, stroke-color: #ff00ff, stroke-width: 3px
-    Campaign F:::class1: [0.35, 0.78]
-    classDef class1 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
-    classDef class2 color: #f00fff, radius : 10
-    `
-    );
+    cy.get('svg');
  });
 });
--- a/cypress/integration/rendering/requirement.spec.js
+++ b/cypress/integration/rendering/requirement.spec.js
@@ -44,5 +44,6 @@ describe('Requirement diagram', () => {
      `,
      {}
    );
+    cy.get('svg');
  });
 });
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -1,4 +1,4 @@
-// <reference types="Cypress" />
+/// <reference types="Cypress" />

 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';

@@ -68,19 +68,6 @@ context('Sequence diagram', () => {
      { sequence: { actorFontFamily: 'courier' } }
    );
  });
-  it('should render bidirectional arrows', () => {
-    imgSnapshotTest(
-      `
-      sequenceDiagram
-      Alice<<->>John: Hello John, how are you?
-      Alice<<-->>John: Hi Alice, I can hear you!
-      John<<->>Alice: This also works the other way
-      John<<-->>Alice: Yes
-      Alice->John: Test
-      John->>Alice: Still works
-      `
-    );
-  });
  it('should handle different line breaks', () => {
    imgSnapshotTest(
      `
@@ -477,18 +464,6 @@ context('Sequence diagram', () => {
        {}
      );
    });
-    it('should render notes over actors and participant', () => {
-      imgSnapshotTest(
-        `
-        sequenceDiagram
-        actor Alice
-        participant Charlie
-        note over Alice: some note
-        note over Charlie: other note
-      `,
-        {}
-      );
-    });
    it('should render long messages from an actor to the left to one to the right', () => {
      imgSnapshotTest(
        `
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -8,6 +8,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 1, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('v2 should render a simple state diagrams', () => {
    imgSnapshotTest(
@@ -19,6 +20,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('v2 should render a long descriptions instead of id when available', () => {
    imgSnapshotTest(
@@ -30,6 +32,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('v2 should render a long descriptions with additional descriptions', () => {
    imgSnapshotTest(
@@ -41,6 +44,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('v2 should render a single state with short descriptions', () => {
    imgSnapshotTest(
@@ -51,6 +55,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('v2 should render a transition descriptions with new lines', () => {
    imgSnapshotTest(
@@ -64,6 +69,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('v2 should render a state with a note', () => {
    imgSnapshotTest(
@@ -77,6 +83,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('v2 should render a state with on the left side when so specified', () => {
    imgSnapshotTest(
@@ -90,6 +97,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('v2 should render a state with a note together with another state', () => {
    imgSnapshotTest(
@@ -105,6 +113,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('v2 should render a note with multiple lines in it', () => {
    imgSnapshotTest(
@@ -147,6 +156,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('v2 should render a simple state diagrams 2', () => {
    imgSnapshotTest(
@@ -159,6 +169,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('v2 should render a simple state diagrams with labels', () => {
    imgSnapshotTest(
@@ -174,6 +185,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('v2 should render state descriptions', () => {
    imgSnapshotTest(
@@ -186,6 +198,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('v2 should render composite states', () => {
    imgSnapshotTest(
@@ -204,6 +217,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('v2 should render multiple composite states', () => {
    imgSnapshotTest(
@@ -273,6 +287,7 @@ describe('State diagram', () => {
    `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('v2 should render concurrency states', () => {
    imgSnapshotTest(
@@ -296,6 +311,7 @@ describe('State diagram', () => {
    `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('v2 should render a state with states in it', () => {
    imgSnapshotTest(
--- a/cypress/integration/rendering/stateDiagram.spec.js
+++ b/cypress/integration/rendering/stateDiagram.spec.js
@@ -10,6 +10,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('should render a long descriptions instead of id when available', () => {
    imgSnapshotTest(
@@ -21,6 +22,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('should render a long descriptions with additional descriptions', () => {
    imgSnapshotTest(
@@ -32,6 +34,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('should render a single state with short descriptions', () => {
    imgSnapshotTest(
@@ -42,6 +45,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('should render a transition descriptions with new lines', () => {
    imgSnapshotTest(
@@ -55,6 +59,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('should render a state with a note', () => {
    imgSnapshotTest(
@@ -68,6 +73,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('should render a state with on the left side when so specified', () => {
    imgSnapshotTest(
@@ -81,6 +87,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('should render a state with a note together with another state', () => {
    imgSnapshotTest(
@@ -96,6 +103,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('should render a note with multiple lines in it', () => {
    imgSnapshotTest(
@@ -138,6 +146,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('should render a simple state diagrams 2', () => {
    imgSnapshotTest(
@@ -150,6 +159,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('should render a simple state diagrams with labels', () => {
    imgSnapshotTest(
@@ -165,6 +175,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('should render state descriptions', () => {
    imgSnapshotTest(
@@ -177,6 +188,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('should render composite states', () => {
    imgSnapshotTest(
@@ -195,6 +207,7 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('should render multiple composit states', () => {
    imgSnapshotTest(
@@ -264,6 +277,7 @@ describe('State diagram', () => {
    `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('should render concurrency states', () => {
    imgSnapshotTest(
@@ -287,6 +301,7 @@ describe('State diagram', () => {
    `,
      { logLevel: 0, fontFamily: 'courier' }
    );
+    cy.get('svg');
  });
  it('should render a state with states in it', () => {
    imgSnapshotTest(
--- a/cypress/integration/rendering/theme.spec.js
+++ b/cypress/integration/rendering/theme.spec.js
@@ -10,6 +10,7 @@ describe('themeCSS balancing, it', () => {
          `,
      {}
    );
+    cy.get('svg');
  });
  it('should not allow unbalanced CSS definitions 2', () => {
    imgSnapshotTest(
@@ -20,6 +21,7 @@ describe('themeCSS balancing, it', () => {
          `,
      {}
    );
+    cy.get('svg');
  });
 });

@@ -43,6 +45,7 @@ describe('Pie Chart', () => {
          `,
          { theme }
        );
+        cy.get('svg');
      });
      it('should render a flowchart diagram', () => {
        imgSnapshotTest(
@@ -67,6 +70,7 @@ describe('Pie Chart', () => {
          `,
          { theme }
        );
+        cy.get('svg');
      });
      it('should render a new flowchart diagram', () => {
        imgSnapshotTest(
@@ -92,6 +96,7 @@ describe('Pie Chart', () => {
          `,
          { theme }
        );
+        cy.get('svg');
      });
      it('should render a sequence diagram', () => {
        imgSnapshotTest(
@@ -120,6 +125,7 @@ describe('Pie Chart', () => {
          `,
          { theme }
        );
+        cy.get('svg');
      });

      it('should render a class diagram', () => {
@@ -169,6 +175,7 @@ describe('Pie Chart', () => {
          `,
          { theme }
        );
+        cy.get('svg');
      });
      it('should render a state diagram', () => {
        imgSnapshotTest(
@@ -203,6 +210,7 @@ stateDiagram
          `,
          { theme }
        );
+        cy.get('svg');
      });
      it('should render a state diagram (v2)', () => {
        imgSnapshotTest(
@@ -237,6 +245,7 @@ stateDiagram-v2
          `,
          { theme }
        );
+        cy.get('svg');
      });
      it('should render a er diagram', () => {
        imgSnapshotTest(
@@ -257,6 +266,7 @@ erDiagram
          `,
          { theme }
        );
+        cy.get('svg');
      });
      it('should render a user journey diagram', () => {
        imgSnapshotTest(
@@ -277,6 +287,7 @@ erDiagram
                        `,
          { theme }
        );
+        cy.get('svg');
      });
      it('should render a gantt diagram', () => {
        cy.clock(new Date('2014-01-06').getTime());
@@ -315,6 +326,7 @@ erDiagram
       `,
          { theme }
        );
+        cy.get('svg');
      });
    });
  });
--- a/cypress/integration/rendering/xyChart.spec.js
+++ b/cypress/integration/rendering/xyChart.spec.js
@@ -1,19 +1,19 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';

 describe('XY Chart', () => {
-  describe('single dataset', () => {
-    it('should render the simplest possible chart', () => {
-      imgSnapshotTest(
-        `
+  it('should render the simplest possible chart', () => {
+    imgSnapshotTest(
+      `
      xychart-beta
        line [10, 30, 20]
      `,
-        {}
-      );
-    });
-    it('Should render a complete chart', () => {
-      imgSnapshotTest(
-        `
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Should render a complete chart', () => {
+    imgSnapshotTest(
+      `
      xychart-beta
        title "Sales Revenue"
        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
@@ -21,68 +21,88 @@ describe('XY Chart', () => {
        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
      `,
-        {}
-      );
-    });
-    it('Should render a chart without title', () => {
-      imgSnapshotTest(
-        `
+      {}
+    );
+  });
+  it('Should render a chart without title', () => {
+    imgSnapshotTest(
+      `
      xychart-beta
        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
        y-axis "Revenue (in $)" 4000 --> 11000
        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
      `,
-        {}
-      );
-    });
-    it('y-axis title not required', () => {
-      imgSnapshotTest(
-        `
+      {}
+    );
+    cy.get('svg');
+  });
+  it('y-axis title not required', () => {
+    imgSnapshotTest(
+      `
      xychart-beta
        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
        y-axis 4000 --> 11000
        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
      `,
-        {}
-      );
-    });
-    it('Should render a chart without y-axis with different range', () => {
-      imgSnapshotTest(
-        `
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Should render a chart without y-axis with different range', () => {
+    imgSnapshotTest(
+      `
      xychart-beta
        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
        bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
        line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
      `,
-        {}
-      );
-    });
-    it('x axis title not required', () => {
-      imgSnapshotTest(
-        `
+      {}
+    );
+    cy.get('svg');
+  });
+  it('x axis title not required', () => {
+    imgSnapshotTest(
+      `
      xychart-beta
        x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
        bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
        line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
      `,
-        {}
-      );
-    });
-    it('Decimals and negative numbers are supported', () => {
-      imgSnapshotTest(
-        `
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Multiple plots can be rendered', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        line [23, 46, 77, 34]
+        line [45, 32, 33, 12]
+        bar [87, 54, 99, 85]
+        line [78, 88, 22, 4]
+        line [22, 29, 75, 33]
+        bar [52, 96, 35, 10]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Decimals and negative numbers are supported', () => {
+    imgSnapshotTest(
+      `
      xychart-beta
        y-axis -2.4 --> 3.5
        line [+1.3, .6, 2.4, -.34]
      `,
-        {}
-      );
-    });
-    it('Render spark line with "plotReservedSpacePercent"', () => {
-      imgSnapshotTest(
-        `
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render spark line with "plotReservedSpacePercent"', () => {
+    imgSnapshotTest(
+      `
      ---
      config:
        theme: dark
@@ -94,12 +114,13 @@ describe('XY Chart', () => {
      xychart-beta
        line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
      `,
-        {}
-      );
-    });
-    it('Render spark bar without displaying other property', () => {
-      imgSnapshotTest(
-        `
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render spark bar without displaying other property', () => {
+    imgSnapshotTest(
+      `
      ---
      config:
        theme: dark
@@ -120,12 +141,13 @@ describe('XY Chart', () => {
      xychart-beta
        bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
      `,
-        {}
-      );
-    });
-    it('Should use all the config from directive', () => {
-      imgSnapshotTest(
-        `
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Should use all the config from directive', () => {
+    imgSnapshotTest(
+      `
      %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5},  "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60  }}}%%
      xychart-beta
        title "Sales Revenue"
@@ -134,12 +156,13 @@ describe('XY Chart', () => {
        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
      `,
-        {}
-      );
-    });
-    it('Should use all the config from yaml', () => {
-      imgSnapshotTest(
-        `
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Should use all the config from yaml', () => {
+    imgSnapshotTest(
+      `
      ---
      config:
        theme: forest
@@ -174,12 +197,13 @@ describe('XY Chart', () => {
        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
      `,
-        {}
-      );
-    });
-    it('Render with show axis title false', () => {
-      imgSnapshotTest(
-        `
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render with show axis title false', () => {
+    imgSnapshotTest(
+      `
      ---
      config:
        xyChart:
@@ -195,12 +219,13 @@ describe('XY Chart', () => {
        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
      `,
-        {}
-      );
-    });
-    it('Render with show axis label false', () => {
-      imgSnapshotTest(
-        `
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render with show axis label false', () => {
+    imgSnapshotTest(
+      `
      ---
      config:
        xyChart:
@@ -216,12 +241,13 @@ describe('XY Chart', () => {
        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
      `,
-        {}
-      );
-    });
-    it('Render with show axis tick false', () => {
-      imgSnapshotTest(
-        `
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render with show axis tick false', () => {
+    imgSnapshotTest(
+      `
      ---
      config:
        xyChart:
@@ -237,12 +263,13 @@ describe('XY Chart', () => {
        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
      `,
-        {}
-      );
-    });
-    it('Render with show axis line false', () => {
-      imgSnapshotTest(
-        `
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render with show axis line false', () => {
+    imgSnapshotTest(
+      `
      ---
      config:
        xyChart:
@@ -258,12 +285,13 @@ describe('XY Chart', () => {
        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
      `,
-        {}
-      );
-    });
-    it('Render all the theme color', () => {
-      imgSnapshotTest(
-        `
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render all the theme color', () => {
+    imgSnapshotTest(
+      `
      ---
      config:
        themeVariables:
@@ -287,110 +315,8 @@ describe('XY Chart', () => {
        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
      `,
-        {}
-      );
-    });
-  });
-
-  describe('multiple datasets', () => {
-    describe('vertical', () => {
-      it('should render bar diagram for 3 datasets', () => {
-        imgSnapshotTest(
-          `
-      xychart-beta
-      title "Basic xychart with multiple datasets"
-      x-axis "Relevant categories" [category1, "category 2", category3, category4]
-      y-axis Animals 0 --> 160
-      bar "dogs" [0, 20, 40, 30]
-      bar "cats" [20, 40, 0, 30]
-      bar "birds" [30, 60, 50, 30]
-      `,
-          {}
-        );
-        cy.get('svg');
-      });
-
-      it('should render line diagram for 3 datasets', () => {
-        imgSnapshotTest(
-          `
-      xychart-beta
-      title "Basic xychart with multiple datasets"
-      x-axis "Relevant categories" [category1, "category 2", category3, category4]
-      y-axis Animals 0 --> 160
-      line "dogs" [0, 20, 40, 30]
-      line "cats" [20, 40, 0, 30]
-      line "birds" [30, 60, 50, 30]
-      `,
-          {}
-        );
-        cy.get('svg');
-      });
-
-      it('should render a mix of multiple bar and line plots', () => {
-        imgSnapshotTest(
-          `
-      xychart-beta
-        line [23, 46, 77, 34]
-        line [45, 32, 33, 12]
-        bar [87, 54, 99, 85]
-        line [78, 88, 22, 4]
-        line [22, 29, 75, 33]
-        bar [52, 96, 35, 10]
-      `,
-          {}
-        );
-        cy.get('svg');
-      });
-    });
-
-    describe('horizontal', () => {
-      it('should render bar diagram for 3 datasets', () => {
-        imgSnapshotTest(
-          `
-      xychart-beta horizontal
-      title "Basic xychart with multiple datasets"
-      x-axis "Relevant categories" [category1, "category 2", category3, category4]
-      y-axis Animals 0 --> 160
-      bar "dogs" [0, 20, 40, 30]
-      bar "cats" [20, 40, 0, 30]
-      bar "birds" [30, 60, 50, 30]
-      `,
-          {}
-        );
-        cy.get('svg');
-      });
-
-      it('should render line diagram for 3 datasets', () => {
-        imgSnapshotTest(
-          `
-      xychart-beta horizontal
-      title "Basic xychart with multiple datasets"
-      x-axis "Relevant categories" [category1, "category 2", category3, category4]
-      y-axis Animals 0 --> 160
-      line "dogs" [0, 20, 40, 30]
-      line "cats" [20, 40, 0, 30]
-      line "birds" [30, 60, 50, 30]
-      `,
-          {}
-        );
-        cy.get('svg');
-      });
-
-      it('should render a mix of multiple bar and line plots', () => {
-        imgSnapshotTest(
-          `
-      xychart-beta horizontal
-        line [23, 46, 77, 34]
-        line [45, 32, 33, 12]
-        bar [87, 54, 99, 85]
-        line [78, 88, 22, 4]
-        line [22, 29, 75, 33]
-        bar [52, 96, 35, 10]
-      `,
-          {}
-        );
-        cy.get('svg');
-      });
-    });
+      {}
+    );
+    cy.get('svg');
  });
 });
--- a/cypress/platform/ashish2.html
+++ b/cypress/platform/ashish2.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
--- a/cypress/platform/class.html
+++ b/cypress/platform/class.html
@@ -3,7 +3,7 @@
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/current2.html
+++ b/cypress/platform/current2.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/ghsa3.html
+++ b/cypress/platform/ghsa3.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/git-graph.html
+++ b/cypress/platform/git-graph.html
@@ -3,7 +3,7 @@
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/gitgraph.html
+++ b/cypress/platform/gitgraph.html
@@ -3,7 +3,7 @@
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/gitgraph2.html
+++ b/cypress/platform/gitgraph2.html
@@ -3,7 +3,7 @@
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
--- a/cypress/platform/per.html
+++ b/cypress/platform/per.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/showcase_base.html
+++ b/cypress/platform/showcase_base.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/showcase_base_dark.html
+++ b/cypress/platform/showcase_base_dark.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/showcase_dark.html
+++ b/cypress/platform/showcase_dark.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/showcase_default.html
+++ b/cypress/platform/showcase_default.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/showcase_forest.html
+++ b/cypress/platform/showcase_forest.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/showcase_neutral.html
+++ b/cypress/platform/showcase_neutral.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss10.html
+++ b/cypress/platform/xss10.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss11.html
+++ b/cypress/platform/xss11.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss12.html
+++ b/cypress/platform/xss12.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss13.html
+++ b/cypress/platform/xss13.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss14.html
+++ b/cypress/platform/xss14.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss15.html
+++ b/cypress/platform/xss15.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss16.html
+++ b/cypress/platform/xss16.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss17.html
+++ b/cypress/platform/xss17.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss18.html
+++ b/cypress/platform/xss18.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss19.html
+++ b/cypress/platform/xss19.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss20.html
+++ b/cypress/platform/xss20.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss21.html
+++ b/cypress/platform/xss21.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss23-css.html
+++ b/cypress/platform/xss23-css.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss24.html
+++ b/cypress/platform/xss24.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss25.html
+++ b/cypress/platform/xss25.html
@@ -1,108 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background:#333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-      h1 {
-        color: grey;
-      }
-      .mermaid2 {
-        display: none;
-      }
-      .mermaid svg {
-        /* font-size: 18px !important; */
-      }
-      .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;
-      }
-    </style>
-    <script>
-      function xssAttack() {
-        const div = document.createElement('div');
-        div.id = 'the-malware';
-        div.className = 'malware';
-        div.innerHTML = 'XSS Succeeded';
-        document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeeded');
-      }
-    </script>
-  </head>
-  <body>
-    <div>Security check</div>
-    <div class="flex">
-      <div id="diagram" class="mermaid"></div>
-      <div id="res" class=""></div>
-    </div>
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      mermaid.parseError = function (err, hash) {
-        // console.error('Mermaid error: ', err);
-      };
-      mermaid.initialize({
-        theme: 'forest',
-        arrowMarkerAbsolute: true,
-        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
-        logLevel: 0,
-        state: {
-          defaultRenderer: 'dagre-wrapper',
-        },
-        flowchart: {
-          // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10,
-          curve: 'cardinal',
-          htmlLabels: true,
-        },
-        htmlLabels: false,
-        // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
-        // fontFamily: '"times", sans-serif',
-        // fontFamily: 'courier',
-        fontSize: 18,
-        curve: 'basis',
-        securityLevel: 'strict',
-        startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
-        // themeVariables: {relationLabelColor: 'red'}
-      });
-      function callback() {
-        alert('It worked');
-      }
-
-      let diagram = 'block-beta\n';
-      diagram += '`A-- "X<img src=x on';
-      diagram += 'error=xssAttack()>" -->B';
-
-      console.log(diagram);
-      // document.querySelector('#diagram').innerHTML = diagram;
-      const { svg } = await mermaid.render('diagram', diagram);
-      document.querySelector('#res').innerHTML = svg;
-    </script>
-  </body>
-</html>
--- a/cypress/platform/xss4.html
+++ b/cypress/platform/xss4.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss5.html
+++ b/cypress/platform/xss5.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss6.html
+++ b/cypress/platform/xss6.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss7.html
+++ b/cypress/platform/xss7.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss8.html
+++ b/cypress/platform/xss8.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/platform/xss9.html
+++ b/cypress/platform/xss9.html
@@ -4,7 +4,7 @@
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
--- a/cypress/support/e2e.js
+++ b/cypress/support/e2e.js
@@ -15,7 +15,6 @@

 import '@cypress/code-coverage/support';
 import '@applitools/eyes-cypress/commands';
-import '@argos-ci/cypress/support';
 // Import commands.js using ES2015 syntax:
 import './commands';

--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -2,7 +2,7 @@
  "compilerOptions": {
    "target": "es2020",
    "lib": ["es2020", "dom"],
-    "types": ["cypress", "node", "@argos-ci/cypress/dist/support.d.ts"],
+    "types": ["cypress", "node"],
    "allowImportingTsExtensions": true,
    "noEmit": true
  },
--- a/demos/xychart.html
+++ b/demos/xychart.html
@@ -52,7 +52,7 @@
    line [+1.3, .6, 2.4, -.34]
    </pre>

-    <h1>XY Charts bar with single dataset</h1>
+    <h1>XY Charts Bar with multiple category</h1>
    <pre class="mermaid">
    xychart-beta
    title "Basic xychart with many categories"
@@ -61,28 +61,7 @@
    bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
    </pre>

-    <h1>XY Charts bar with multiple datasets</h1>
-    <pre class="mermaid">
-      xychart-beta
-      title "Basic xychart with multiple datasets"
-      x-axis "Relevant categories" [category1, "category 2", category3, category4]
-      bar "dogs" [0, 60, 40, 30]
-      bar "cats" [20, 40, 50, 30]
-      bar "birds" [30, 60, 50, 30]
-    </pre>
-
-    <h1>XY Charts bar horizontal with multiple datasets</h1>
-    <pre class="mermaid">
-      xychart-beta horizontal
-      title "Basic xychart with multiple datasets"
-      x-axis "Relevant categories" [category1, "category 2", category3, category4]
-      y-axis Animals 0 --> 160
-      bar "dogs" [0, 60, 40, 30]
-      bar "cats" [20, 40, 50, 30]
-      bar "birds" [30, 60, 50, 30]
-    </pre>
-
-    <h1>XY Charts line single dataset</h1>
+    <h1>XY Charts line with multiple category</h1>
    <pre class="mermaid">
    xychart-beta
    title "Line chart with many category"
@@ -91,7 +70,7 @@
    line "sample line" [52, 96, 35, 10, 87, 34, 67, 99]
    </pre>

-    <h1>XY Charts bar with large text</h1>
+    <h1>XY Charts category with large text</h1>
    <pre class="mermaid">
    xychart-beta
    title "Basic xychart with many categories with category overlap"
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,3 +1,4 @@
+version: '3.9'
 services:
  mermaid:
    build:
@@ -7,7 +8,7 @@ services:
    tty: true
    working_dir: /mermaid
    mem_limit: '8G'
-    entrypoint: ./docker-entrypoint.sh
+    entrypoint: docker-entrypoint.sh
    environment:
      - NODE_OPTIONS=--max_old_space_size=8192
    volumes:
@@ -15,12 +16,11 @@ services:
      - root_cache:/root/.cache
      - root_local:/root/.local
      - root_npm:/root/.npm
-      - /tmp:/tmp
    ports:
      - 9000:9000
      - 3333:3333
  cypress:
-    image: cypress/included:13.7.3
+    image: cypress/included:12.17.4
    stdin_open: true
    tty: true
    working_dir: /mermaid
--- a/docs/community/contributing.md
+++ b/docs/community/contributing.md
@@ -56,7 +56,7 @@ The following commands must be sufficient enough to start with:

 ```bash
 curl -fsSL https://get.pnpm.io/install.sh | sh -
-pnpm env use --global 20
+pnpm env use --global 18
 ```

 You may also need to reload `.shrc` or `.bashrc` afterwards.
--- a/docs/config/img/mathMLDifferences.png
+++ b/docs/config/img/mathMLDifferences.png
--- a/docs/config/math.md
+++ b/docs/config/math.md
@@ -84,13 +84,3 @@ Example with legacy mode enabled (the latest version of KaTeX's stylesheet can b
  </body>
 </html>
 ```
-
-## Handling Rendering Differences
-
-Due to differences between default fonts across operating systems and browser's MathML implementations, inconsistent results can be seen across platforms. If having consistent results are important, or the most optimal rendered results are desired, `forceLegacyMathML` can be enabled in the config.
-
-This option will always use KaTeX's stylesheet instead of only when MathML is not supported (as with `legacyMathML`). Note that only `forceLegacyMathML` needs to be set.
-
-If including KaTeX's stylesheet is not a concern, enabling this option is recommended to avoid scenarios where no MathML implementation within a browser provides the desired output (as seen below).
-
-![Image showing differences between Browsers](img/mathMLDifferences.png)
--- a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
+++ b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
@@ -19,4 +19,4 @@ The `parseError` function will not be called.

 #### Defined in

-[mermaidAPI.ts:65](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L65)
+[mermaidAPI.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L64)
--- a/docs/config/setup/interfaces/mermaidAPI.ParseResult.md
+++ b/docs/config/setup/interfaces/mermaidAPI.ParseResult.md
@@ -18,4 +18,4 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.

 #### Defined in

-[mermaidAPI.ts:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L72)
+[mermaidAPI.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L71)
--- a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
+++ b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.

 #### Defined in

-[mermaidAPI.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L95)
+[mermaidAPI.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L94)

 ---

@@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.

 #### Defined in

-[mermaidAPI.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L85)
+[mermaidAPI.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L84)

 ---

@@ -63,4 +63,4 @@ The svg code for the rendered graph.

 #### Defined in

-[mermaidAPI.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L81)
+[mermaidAPI.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L80)
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -26,7 +26,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)

 #### Defined in

-[mermaidAPI.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L75)
+[mermaidAPI.ts:74](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L74)

 ## Variables

@@ -98,7 +98,7 @@ mermaid.initialize(config);

 #### Defined in

-[mermaidAPI.ts:634](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L634)
+[mermaidAPI.ts:635](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L635)

 ## Functions

@@ -129,7 +129,7 @@ Return the last node appended

 #### Defined in

-[mermaidAPI.ts:276](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L276)
+[mermaidAPI.ts:277](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L277)

 ---

@@ -167,10 +167,10 @@ Create the user styles

 #### Parameters

-| Name        | Type                                                             | Description                                                                                                               |
-| :---------- | :--------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------ |
-| `config`    | `MermaidConfig`                                                  | configuration that has style and theme settings to use                                                                    |
-| `classDefs` | `undefined` \| `null` \| `Map`<`string`, `DiagramStyleClassDef`> | the classDefs in the diagram text. Might be null if none were defined. Usually is the result of a call to getClasses(...) |
+| Name        | Type                                                                | Description                                                                                                               |
+| :---------- | :------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------ |
+| `config`    | `MermaidConfig`                                                     | configuration that has style and theme settings to use                                                                    |
+| `classDefs` | `undefined` \| `null` \| `Record`<`string`, `DiagramStyleClassDef`> | the classDefs in the diagram text. Might be null if none were defined. Usually is the result of a call to getClasses(...) |

 #### Returns

@@ -180,7 +180,7 @@ the string with all the user styles

 #### Defined in

-[mermaidAPI.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L154)
+[mermaidAPI.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L153)

 ---

@@ -190,12 +190,12 @@ the string with all the user styles

 #### Parameters

-| Name        | Type                                                   |
-| :---------- | :----------------------------------------------------- |
-| `config`    | `MermaidConfig`                                        |
-| `graphType` | `string`                                               |
-| `classDefs` | `undefined` \| `Map`<`string`, `DiagramStyleClassDef`> |
-| `svgId`     | `string`                                               |
+| Name        | Type                                                      |
+| :---------- | :-------------------------------------------------------- |
+| `config`    | `MermaidConfig`                                           |
+| `graphType` | `string`                                                  |
+| `classDefs` | `undefined` \| `Record`<`string`, `DiagramStyleClassDef`> |
+| `svgId`     | `string`                                                  |

 #### Returns

@@ -230,7 +230,7 @@ with an enclosing block that has each of the cssClasses followed by !important;

 #### Defined in

-[mermaidAPI.ts:139](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L139)
+[mermaidAPI.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L138)

 ---

@@ -252,10 +252,11 @@ Put the svgCode into an iFrame. Return the iFrame code
 `string`

 - the code with the iFrame that now contains the svgCode
+  TODO replace btoa(). Replace with buf.toString('base64')?

 #### Defined in

-[mermaidAPI.ts:253](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L253)
+[mermaidAPI.ts:254](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L254)

 ---

@@ -280,4 +281,4 @@ Remove any existing elements from the given document

 #### Defined in

-[mermaidAPI.ts:326](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L326)
+[mermaidAPI.ts:327](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L327)
--- a/docs/ecosystem/integrations-community.md
+++ b/docs/ecosystem/integrations-community.md
@@ -240,8 +240,6 @@ Communication tools and platforms

 ### Other

- [Astro](https://astro.build/)
-  - [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/)
 - [Bisheng](https://www.npmjs.com/package/bisheng)
  - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
 - [Blazorade Mermaid: Render Mermaid diagrams in Blazor applications](https://github.com/Blazorade/Blazorade-Mermaid/wiki)
@@ -251,7 +249,6 @@ Communication tools and platforms
 - [Jekyll](https://jekyllrb.com/)
  - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
  - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
- [MarkChart: Preview Mermaid diagrams on macOS](https://markchart.app/)
 - [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
 - [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io) ✅
--- a/docs/ecosystem/mermaid-chart.md
+++ b/docs/ecosystem/mermaid-chart.md
@@ -6,10 +6,6 @@

 # Mermaid Chart

-The Future of Diagramming & Visual Collaboration
-
-Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
-
 <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>
@@ -22,26 +18,22 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun

 - **Editor** - A web based editor for creating and editing Mermaid diagrams.

- **Visual Editor** - The Visual Editor enables users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
+- **Presentation** - A presentation mode for viewing Mermaid diagrams in a slideshow format.

- **AI Chat** - Use our embedded AI Chat to generate diagrams from natural language descriptions.
+- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro plan).

 - **Plugins** - A plugin system for extending the functionality of Mermaid.

-  Official Mermaid Chart plugins:
+  Plugins are available for:

-  - [Mermaid Chart GPT](https://chat.openai.com/g/g-1IRFKwq4G-mermaid-chart)
-  - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)
+  - [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt)
  - [JetBrains IDE](https://plugins.jetbrains.com/plugin/23043-mermaid-chart)
  - [Microsoft PowerPoint and Word](https://appsource.microsoft.com/en-us/product/office/WA200006214?tab=Overview)
+  - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)

-  Visit our [Plugins](https://www.mermaidchart.com/plugins) page for more information.
+- **AI diagramming** - A feature for generating Mermaid diagrams from text using AI (Pro plan).

- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro and Enterprise plans).
-
- **Comments** - Enhance collaboration by adding comments to diagrams.
-
- **Presentations** - A presentation mode for viewing Mermaid diagrams in a slideshow format.
+- **More** - To learn more, visit our [Product](https://www.mermaidchart.com/product) page.

 ## Plans

@@ -51,9 +43,11 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun

 - **Enterprise** - A paid plan for enterprise use that includes all Pro features, and more.

-To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
+## Access

-Mermaid Chart is currently offering a 14-day free trial on our Pro and Enterprise tiers. Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
+Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
+
+Mermaid Chart is currently offering a 14-day free trial of our newly-launched Pro tier. To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.

 ## Mermaid JS contributions

--- a/docs/intro/getting-started.md
+++ b/docs/intro/getting-started.md
@@ -157,7 +157,7 @@ For a list of Mermaid Plugins and Integrations, visit the [Integrations page](..

 Mermaid Chart plugins are available for:

- [ChatGPT](https://docs.mermaidchart.com/plugins/mermaid-chart-gpt)
+- [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt)
 - [JetBrains IDE](https://docs.mermaidchart.com/plugins/jetbrains-ide)
 - [Microsoft PowerPoint](https://docs.mermaidchart.com/plugins/microsoft-powerpoint)
 - [Microsoft Word](https://docs.mermaidchart.com/plugins/microsoft-word)
--- a/docs/news/announcements.md
+++ b/docs/news/announcements.md
@@ -28,23 +28,13 @@ Thank you for being part of our story. Here's to creating, innovating, and colla

 Knut Sveidqvist 🧜‍♂️✨

-## Mermaid Chart's Visual Editor for Flowcharts and Sequence diagrams
+## Mermaid Chart's Visual Editor for Flowcharts

-The Mermaid Chart team is excited to introduce a new Visual Editor for Flowcharts and Sequence diagrams, enabling users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
+The Mermaid Chart team is excited to introduce a new Visual Editor for flowcharts, enabling users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.

-Learn more:
+Create flowchart nodes, connect them with edges, update shapes, change colors, and edit labels with just a few clicks that automatically reflect in your diagram’s code for easy customizability.

- Visual Editor For Flowcharts
-
-  - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)
-
-  - [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0)
-
- Visual Editor For Sequence diagrams
-
-  - [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)
-
-  - [Demo video](https://youtu.be/imc2u5_N6Dc)
+Read more about it in our latest [BLOG POST](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts) and watch a [DEMO VIDEO](https://www.youtube.com/watch?v=5aja0gijoO0) on our YouTube page.

 ## 📖 Blog posts

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

 # Blog

-## [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
-
-How to Choose the Right Documentation Software. Reliable and efficient documentation software is crucial in the fast-paced world of software development.
-
-## [AI in software diagramming: What trends will define the future?](https://www.mermaidchart.com/blog/posts/ai-in-software-diagramming/)
-
-24 April 2024 · 5 mins
-
-Artificial intelligence (AI) tools are changing the way developers work.
-
-## [Mermaid Chart Unveils Visual Editor for Sequence Diagrams](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams/)
-
-8 April 2024 · 5 mins
-
-Sequence diagrams are excellent tools for communication and documentation.
-
-## [Modeling system states: It starts with a Turing machine](https://www.mermaidchart.com/blog/posts/modeling-system-states/)
-
-27 March 2024 · 12 mins
-
-In computer science, there are a few fundamental papers that, without exaggeration, changed everything.
-
 ## [Mermaid Chart Raises $7.5M to Reinvent Visual Collaboration for Enterprises](https://www.mermaidchart.com/blog/posts/mermaid-chart-raises-7.5m-to-reinvent-visual-collaoration-for-enterprises/)

 20 March 2024 · 4 mins
--- a/docs/syntax/entityRelationshipDiagram.md
+++ b/docs/syntax/entityRelationshipDiagram.md
@@ -6,7 +6,7 @@

 # Entity Relationship Diagrams

-> An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types) [Wikipedia](https://en.wikipedia.org/wiki/Entity%E2%80%93relationship_model).
+> An entity–relationship model (or ER model) describes interrelated things of interest in a specific domain of knowledge. A basic ER model is composed of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types). Wikipedia.

 Note that practitioners of ER modelling almost always refer to _entity types_ simply as _entities_. For example the `CUSTOMER` entity _type_ would be referred to simply as the `CUSTOMER` entity. This is so common it would be inadvisable to do anything else, but technically an entity is an abstract _instance_ of an entity type, and this is what an ER diagram shows - abstract instances, and the relationships between them. This is why entities are always named using singular nouns.

@@ -111,7 +111,7 @@ Only the `first-entity` part of a statement is mandatory. This makes it possible

 The `relationship` part of each statement can be broken down into three sub-components:

- the cardinality of the first entity with respect to the second
+- the cardinality of the first entity with respect to the second,
 - whether the relationship confers identity on a 'child' entity
 - the cardinality of the second entity with respect to the first

@@ -232,7 +232,7 @@ erDiagram

 #### Attribute Keys and Comments

-Attributes may also have a `key` or comment defined. Keys can be `PK`, `FK` or `UK`, for Primary Key, Foreign Key or Unique Key. To specify multiple key constraints on a single attribute, separate them with a comma (e.g., `PK, FK`). A `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.
+Attributes may also have a `key` or comment defined. Keys can be `PK`, `FK` or `UK`, for Primary Key, Foreign Key or Unique Key. To specify multiple key constraints on a single attribute, separate them with a comma (e.g., `PK, FK`).. A `comment` is defined by double quotes at the end of an attribute. Comments themselves cannot have double-quote characters in them.

 ```mermaid-example
 erDiagram
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -881,7 +881,7 @@ Examples of tooltip usage below:

 ```html
 <script>
-  window.callback = function () {
+  const callback = function () {
    alert('A callback was triggered');
  };
 </script>
@@ -913,7 +913,7 @@ flowchart LR

 > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.

-?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/yk4h7qou/2/).
+?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/Ogglas/2o73vdez/7).

 Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):

@@ -957,7 +957,7 @@ Beginner's tip—a full example using interactive links in a html context:
  </pre>

  <script>
-    window.callback = function () {
+    const callback = function () {
      alert('A callback was triggered');
    };
    const config = {
@@ -1178,36 +1178,6 @@ Adding this snippet in the `<head>` would add support for Font Awesome v6.5.1
 />
 ```

-### Custom icons
-
-It is possible to use custom icons served from Font Awesome as long as the website imports the corresponding kit.
-
-Note that this is currently a paid feature from Font Awesome.
-
-For custom icons, you need to use the `fak` prefix.
-
-**Example**
-
-```
-flowchart TD
-    B[fa:fa-twitter] %% standard icon
-    B-->E(fak:fa-custom-icon-name) %% custom icon
-```
-
-And trying to render it
-
-```mermaid-example
-flowchart TD
-    B["fa:fa-twitter for peace"]
-    B-->C["fab:fa-truck-bold a custom icon"]
-```
-
-```mermaid
-flowchart TD
-    B["fa:fa-twitter for peace"]
-    B-->C["fab:fa-truck-bold a custom icon"]
-```
-
 ## Graph declarations with spaces between vertices and link and without semicolon

 - In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
--- a/docs/syntax/gitgraph.md
+++ b/docs/syntax/gitgraph.md
@@ -56,8 +56,6 @@ In Mermaid, we support the basic git operations like:
 With the help of these key git commands, you will be able to draw a gitgraph in Mermaid very easily and quickly.
 Entity names are often capitalized, although there is no accepted standard on this, and it is not required in Mermaid.

-**NOTE**: `checkout` and `switch` can be used interchangeably.
-
 ## Syntax

 Mermaid syntax for a gitgraph is very straight-forward and simple. It follows a declarative-approach, where each commit is drawn on the timeline in the diagram, in order of its occurrences/presence in code. Basically, it follows the insertion order for each command.
--- a/docs/syntax/quadrantChart.md
+++ b/docs/syntax/quadrantChart.md
@@ -168,86 +168,3 @@ quadrantChart
  quadrant-3 Delegate
  quadrant-4 Delete
 ```
-
-### Point styling
-
-Points can either be styled directly or with defined shared classes
-
-1. Direct styling
-
-```md
-Point A: [0.9, 0.0] radius: 12
-Point B: [0.8, 0.1] color: #ff3300, radius: 10
-Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0  
-Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
-```
-
-2. Classes styling
-
-```md
-Point A:::class1: [0.9, 0.0]
-Point B:::class2: [0.8, 0.1]
-Point C:::class3: [0.7, 0.2]
-Point D:::class3: [0.7, 0.2]
-classDef class1 color: #109060
-classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
-classDef class3 color: #f00fff, radius : 10
-```
-
-#### Available styles:
-
-| Parameter    | Description                                                            |
-| ------------ | ---------------------------------------------------------------------- |
-| color        | Fill color of the point                                                |
-| radius       | Radius of the point                                                    |
-| stroke-width | Border width of the point                                              |
-| stroke-color | Border color of the point (useless when stroke-width is not specified) |
-
-> **Note**
-> Order of preference:
->
-> 1. Direct styles
-> 2. Class styles
-> 3. Theme styles
-
-## Example on styling
-
-```mermaid-example
-quadrantChart
-  title Reach and engagement of campaigns
-  x-axis Low Reach --> High Reach
-  y-axis Low Engagement --> High Engagement
-  quadrant-1 We should expand
-  quadrant-2 Need to promote
-  quadrant-3 Re-evaluate
-  quadrant-4 May be improved
-  Campaign A: [0.9, 0.0] radius: 12
-  Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
-  Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
-  Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
-  Campaign E:::class2: [0.5, 0.4]
-  Campaign F:::class3: [0.4, 0.5] color: #0000ff
-  classDef class1 color: #109060
-  classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
-  classDef class3 color: #f00fff, radius : 10
-```
-
-```mermaid
-quadrantChart
-  title Reach and engagement of campaigns
-  x-axis Low Reach --> High Reach
-  y-axis Low Engagement --> High Engagement
-  quadrant-1 We should expand
-  quadrant-2 Need to promote
-  quadrant-3 Re-evaluate
-  quadrant-4 May be improved
-  Campaign A: [0.9, 0.0] radius: 12
-  Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
-  Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
-  Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
-  Campaign E:::class2: [0.5, 0.4]
-  Campaign F:::class3: [0.4, 0.5] color: #0000ff
-  classDef class1 color: #109060
-  classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
-  classDef class3 color: #f00fff, radius : 10
-```
--- a/docs/syntax/sequenceDiagram.md
+++ b/docs/syntax/sequenceDiagram.md
@@ -206,20 +206,18 @@ Messages can be of two displayed either solid or with a dotted line.
 [Actor][Arrow][Actor]:Message text
 ```

-There are ten types of arrows currently supported:
+There are six types of arrows currently supported:

-| Type     | Description                                                              |
-| -------- | ------------------------------------------------------------------------ |
-| `->`     | Solid line without arrow                                                 |
-| `-->`    | Dotted line without arrow                                                |
-| `->>`    | Solid line with arrowhead                                                |
-| `-->>`   | Dotted line with arrowhead                                               |
-| `<<->>`  | Solid line with bidirectional arrowheads (v\<MERMAID_RELEASE_VERSION>+)  |
-| `<<-->>` | Dotted line with bidirectional arrowheads (v\<MERMAID_RELEASE_VERSION>+) |
-| `-x`     | Solid line with a cross at the end                                       |
-| `--x`    | Dotted line with a cross at the end.                                     |
-| `-)`     | Solid line with an open arrow at the end (async)                         |
-| `--)`    | Dotted line with a open arrow at the end (async)                         |
+| Type   | Description                                      |
+| ------ | ------------------------------------------------ |
+| `->`   | Solid line without arrow                         |
+| `-->`  | Dotted line without arrow                        |
+| `->>`  | Solid line with arrowhead                        |
+| `-->>` | Dotted line with arrowhead                       |
+| `-x`   | Solid line with a cross at the end               |
+| `--x`  | Dotted line with a cross at the end.             |
+| `-)`   | Solid line with an open arrow at the end (async) |
+| `--)`  | Dotted line with a open arrow at the end (async) |

 ## Activations

@@ -306,35 +304,17 @@ sequenceDiagram
    Note over Alice,John: A typical interaction
 ```

-## Line breaks
-
-Line break can be added to Note and Message:
+It is also possible to add a line break (applies to text input in general):

 ```mermaid-example
 sequenceDiagram
-    Alice->John: Hello John,<br/>how are you?
+    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction<br/>But now in two lines
 ```

 ```mermaid
 sequenceDiagram
-    Alice->John: Hello John,<br/>how are you?
-    Note over Alice,John: A typical interaction<br/>But now in two lines
-```
-
-Line breaks in Actor names requires aliases:
-
-```mermaid-example
-sequenceDiagram
-    participant Alice as Alice<br/>Johnson
-    Alice->John: Hello John,<br/>how are you?
-    Note over Alice,John: A typical interaction<br/>But now in two lines
-```
-
-```mermaid
-sequenceDiagram
-    participant Alice as Alice<br/>Johnson
-    Alice->John: Hello John,<br/>how are you?
+    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction<br/>But now in two lines
 ```

--- a/docs/syntax/stateDiagram.md
+++ b/docs/syntax/stateDiagram.md
@@ -160,7 +160,7 @@ In a real world use of state diagrams you often end up with diagrams that are mu
 have several internal states. These are called composite states in this terminology.

 In order to define a composite state you need to use the state keyword followed by an id and the body of the composite
-state between {}. You can name a composite state on a separate line just like a simple state. See the example below:
+state between {}. See the example below:

 ```mermaid-example
 stateDiagram-v2
@@ -169,14 +169,6 @@ stateDiagram-v2
        [*] --> second
        second --> [*]
    }
-
-    [*] --> NamedComposite
-    NamedComposite: Another Composite
-    state NamedComposite {
-        [*] --> namedSimple
-        namedSimple --> [*]
-        namedSimple: Another simple
-    }
 ```

 ```mermaid
@@ -186,14 +178,6 @@ stateDiagram-v2
        [*] --> second
        second --> [*]
    }
-
-    [*] --> NamedComposite
-    NamedComposite: Another Composite
-    state NamedComposite {
-        [*] --> namedSimple
-        namedSimple --> [*]
-        namedSimple: Another simple
-    }
 ```

 You can do this in several layers:
--- a/docs/syntax/xyChart.md
+++ b/docs/syntax/xyChart.md
@@ -6,54 +6,12 @@

 # XY Chart

-> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to display one or more datasets containing categories of data.
+> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables.

 > It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time.

 ## Example

-### bar chart displaying single dataset
-
-```mermaid-example
-xychart-beta
-    title "Sales Revenue"
-    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
-    y-axis "Revenue (in $)" 4000 --> 11000
-    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-```
-
-```mermaid
-xychart-beta
-    title "Sales Revenue"
-    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
-    y-axis "Revenue (in $)" 4000 --> 11000
-    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-```
-
-### bar chart displaying 3 datasets
-
-```mermaid-example
-      xychart-beta
-      title "Basic xychart with multiple datasets"
-      x-axis "Relevant categories" [category1, "category 2", category3, category4]
-      y-axis Animals 0 --> 160
-      bar "dogs" [40, 20, 40, 30]
-      bar "cats" [20, 40, 50, 30]
-      bar "birds" [30, 60, 50, 30]
-```
-
-```mermaid
-      xychart-beta
-      title "Basic xychart with multiple datasets"
-      x-axis "Relevant categories" [category1, "category 2", category3, category4]
-      y-axis Animals 0 --> 160
-      bar "dogs" [40, 20, 40, 30]
-      bar "cats" [20, 40, 50, 30]
-      bar "birds" [30, 60, 50, 30]
-```
-
-### combined bar/line chart displaying 2 datasets
-
 ```mermaid-example
 xychart-beta
    title "Sales Revenue"
--- 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.1.2+sha512.127dc83b9ea10c32be65d22a8efb4a65fb952e8fefbdfded39bdc3c97efc32d31b48b00420df2c1187ace28c921c902f0cb5a134a4d032b8b5295cbfa2c681e2",
+  "packageManager": "pnpm@8.15.4",
  "keywords": [
    "diagram",
    "markdown",
@@ -19,14 +19,14 @@
    "build:esbuild": "pnpm run -r clean && tsx .esbuild/build.ts",
    "build:mermaid": "pnpm build:esbuild --mermaid",
    "build:viz": "pnpm build:esbuild --visualize",
-    "build:types": "pnpm --filter mermaid types:build-config && tsx .build/types.ts",
+    "build:types": "tsx .build/types.ts",
    "build:types:watch": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly --watch",
    "dev": "tsx .esbuild/server.ts",
    "dev:vite": "tsx .vite/server.ts",
    "dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev:vite",
    "release": "pnpm build",
-    "lint": "cross-env NODE_OPTIONS=--max_old_space_size=8192 eslint --cache --cache-strategy content . && pnpm lint:jison && prettier --cache --check .",
-    "lint:fix": "cross-env NODE_OPTIONS=--max_old_space_size=8192 eslint --cache --cache-strategy content --fix . && prettier --write . && tsx scripts/fixCSpell.ts",
+    "lint": "cross-env NODE_OPTIONS=--max_old_space_size=8192 eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .",
+    "lint:fix": "cross-env NODE_OPTIONS=--max_old_space_size=8192 eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && tsx scripts/fixCSpell.ts",
    "lint:jison": "tsx ./scripts/jison/lint.mts",
    "contributors": "tsx scripts/updateContributors.ts",
    "cypress": "cypress run",
@@ -62,7 +62,6 @@
  },
  "devDependencies": {
    "@applitools/eyes-cypress": "^3.42.3",
-    "@argos-ci/cypress": "^2.0.5",
    "@cspell/eslint-plugin": "^8.6.0",
    "@cypress/code-coverage": "^3.12.30",
    "@rollup/plugin-typescript": "^11.1.6",
@@ -108,7 +107,7 @@
    "jison": "^0.4.18",
    "js-yaml": "^4.1.0",
    "jsdom": "^24.0.0",
-    "langium-cli": "3.0.3",
+    "langium-cli": "3.0.1",
    "lint-staged": "^15.2.2",
    "markdown-table": "^3.0.3",
    "nyc": "^15.1.0",
@@ -127,5 +126,11 @@
  },
  "nyc": {
    "report-dir": "coverage/cypress"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "cytoscape@3.28.1": "patches/cytoscape@3.28.1.patch",
+      "lodash-es@4.17.21": "patches/lodash-es@4.17.21.patch"
+    }
  }
 }
--- a/packages/mermaid-example-diagram/package.json
+++ b/packages/mermaid-example-diagram/package.json
@@ -38,7 +38,7 @@
    ]
  },
  "dependencies": {
-    "@braintree/sanitize-url": "^7.0.0",
+    "@braintree/sanitize-url": "^6.0.4",
    "d3": "^7.9.0",
    "khroma": "^2.1.0"
  },
--- a/packages/mermaid-flowchart-elk/src/detector.spec.ts
+++ b/packages/mermaid-flowchart-elk/src/detector.spec.ts
@@ -39,26 +39,6 @@ describe('flowchart-elk detector', () => {
    ).toBe(true);
  });

-  // The error from the issue was reproduced with mindmap, so this is just an example
-  // what matters is the keyword somewhere inside graph definition
-  it('should check only the beginning of the line in search of keywords', () => {
-    expect(
-      detector('mindmap ["Descendant node in flowchart"]', {
-        flowchart: {
-          defaultRenderer: 'elk',
-        },
-      })
-    ).toBe(false);
-
-    expect(
-      detector('mindmap ["Descendant node in graph"]', {
-        flowchart: {
-          defaultRenderer: 'elk',
-        },
-      })
-    ).toBe(false);
-  });
-
  it('should detect flowchart-elk', () => {
    expect(detector('flowchart-elk')).toBe(true);
  });
--- a/packages/mermaid-flowchart-elk/src/detector.ts
+++ b/packages/mermaid-flowchart-elk/src/detector.ts
@@ -11,7 +11,7 @@ const detector: DiagramDetector = (txt, config): boolean => {
    // If diagram explicitly states flowchart-elk
    /^\s*flowchart-elk/.test(txt) ||
    // If a flowchart/graph diagram has their default renderer set to elk
-    (/^\s*(flowchart|graph)/.test(txt) && config?.flowchart?.defaultRenderer === 'elk')
+    (/^\s*flowchart|graph/.test(txt) && config?.flowchart?.defaultRenderer === 'elk')
  ) {
    return true;
  }
--- a/packages/mermaid-flowchart-elk/src/flowRenderer-elk.js
+++ b/packages/mermaid-flowchart-elk/src/flowRenderer-elk.js
@@ -41,12 +41,12 @@ let nodeDb = {};
 export const addVertices = async function (vert, svgId, root, doc, diagObj, parentLookupDb, graph) {
  const svg = root.select(`[id="${svgId}"]`);
  const nodes = svg.insert('g').attr('class', 'nodes');
-  const keys = [...vert.keys()];
+  const keys = Object.keys(vert);

  // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
  await Promise.all(
    keys.map(async function (id) {
-      const vertex = vert.get(id);
+      const vertex = vert[id];

      /**
       * Variable for storing the classes for the vertex
@@ -595,7 +595,7 @@ const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAb
 *
 * @param text
 * @param diagObj
- * @returns {Map<string, import('../../mermaid/src/diagram-api/types.js').DiagramStyleClassDef>} ClassDef styles
+ * @returns {Record<string, import('../../mermaid/src/diagram-api/types.js').DiagramStyleClassDef>} ClassDef styles
 */
 export const getClasses = function (text, diagObj) {
  log.info('Extracting classes');
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Yash Singh	9fd6a1396b	fix: set root when globalThis is defined	2024-03-23 13:00:51 -07:00
Yash Singh	3df86ea1e6	Merge remote-tracking branch 'origin' into fix/5378	2024-03-23 12:17:21 -07:00
Yash Singh	7bc201673d	fix: patch lodash to not use Function calls	2024-03-23 12:06:29 -07:00