Merge branch 'develop' into sidv/eslintv9

* develop: (59 commits) docs: Update mermaid.init remove date docs: Remove incorrect = chore: Prettier format chore: Update config.type.ts chore Add vitest.workspace.js chore: Stricter TS version chore: Remove MermaidAPI from docs doc: Update deprecation message doc: Update deprecation message fix: prevent escaping label styles chore: update browsers list chore(deps): update all patch dependencies docs: Added demo diagram of bidirectional arrows for sequence diagrams fix(deps): update all patch dependencies chore: Update drupal regex chore: Update pnpm chore: Update docs to remove html tag like text rebuild chore: Use string templates chore: Update docs ...
2024-06-28 11:59:55 +05:30 · 2024-06-28 11:59:55 +05:30 · 871a13aff8
parent bdca0a583e ceb487f2d4
commit 871a13aff8
74 changed files with 3768 additions and 2441 deletions
--- a/.github/lychee.toml
+++ b/.github/lychee.toml
@ -41,7 +41,10 @@ exclude = [
 "https://bundlephobia.com",

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

 # Exclude all private IPs from checking.
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@ -1,9 +1,3 @@
-# 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:
@ -72,16 +66,6 @@ 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:
@ -146,6 +130,10 @@ 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
@ -158,55 +146,3 @@ 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@v4
-        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/README.md
+++ b/README.md
@ -35,6 +35,7 @@ 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,6 +2,8 @@ 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',
@ -17,10 +19,17 @@ 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,19 +95,8 @@ export const openURLAndVerifyRendering = (
  options: CypressMermaidConfig,
  validation?: any
 ): void => {
-  const useAppli: boolean = Cypress.env('useAppli');
  const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');

-  if (useAppli) {
-    cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`);
-    cy.eyesOpen({
-      appName: 'Mermaid',
-      testName: name,
-      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');
@ -116,11 +105,27 @@ export const openURLAndVerifyRendering = (
    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');
+
  if (useAppli) {
+    cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`);
+    cy.eyesOpen({
+      appName: 'Mermaid',
+      testName: name,
+      batchName: Cypress.spec.name,
+      batchId: batchId + Cypress.spec.name,
+    });
    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 } from '../../helpers/util.ts';
+import { renderGraph, verifyScreenshot } from '../../helpers/util.ts';
 describe('Configuration', () => {
  describe('arrowMarkerAbsolute', () => {
    it('should handle default value false of arrowMarkerAbsolute', () => {
@ -119,8 +119,7 @@ describe('Configuration', () => {
      const url = 'http://localhost:9000/regression/issue-1874.html';
      cy.visit(url);
      cy.window().should('have.property', 'rendered', true);
-      cy.get('svg').should('be.visible');
-      cy.matchImageSnapshot(
+      verifyScreenshot(
        'configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives'
      );
    });
@ -145,7 +144,7 @@ describe('Configuration', () => {
          // none of the diagrams should be error diagrams
          expect($svg).to.not.contain('Syntax error');
        });
-      cy.matchImageSnapshot(
+      verifyScreenshot(
        'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set'
      );
    });
@ -162,7 +161,7 @@ describe('Configuration', () => {
          // some of the diagrams should be error diagrams
          expect($svg).to.contain('Syntax error');
        });
-      cy.matchImageSnapshot(
+      verifyScreenshot(
        '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,7 +10,6 @@ describe('XSS', () => {
    cy.wait(1000).then(() => {
      cy.get('.mermaid').should('exist');
    });
-    cy.get('svg');
  });

  it('should not allow tags in the css', () => {
--- a/cypress/integration/rendering/c4.spec.js
+++ b/cypress/integration/rendering/c4.spec.js
@ -30,7 +30,6 @@ describe('C4 diagram', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('should render a simple C4Container diagram', () => {
    imgSnapshotTest(
@ -50,7 +49,6 @@ describe('C4 diagram', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('should render a simple C4Component diagram', () => {
    imgSnapshotTest(
@ -69,7 +67,6 @@ describe('C4 diagram', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('should render a simple C4Dynamic diagram', () => {
    imgSnapshotTest(
@ -93,7 +90,6 @@ describe('C4 diagram', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('should render a simple C4Deployment diagram', () => {
    imgSnapshotTest(
@ -117,6 +113,5 @@ describe('C4 diagram', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
 });
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@ -32,7 +32,6 @@ describe('Class diagram', () => {
      `,
      { logLevel: 1 }
    );
-    cy.get('svg');
  });

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  it('should render class diagram with newlines in title', () => {
@ -439,7 +422,6 @@ 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,7 +218,6 @@ describe('Entity Relationship Diagram', () => {
        `,
      { loglevel: 1 }
    );
-    cy.get('svg');
  });

  it('should render entities with keys', () => {
--- a/cypress/integration/rendering/quadrantChart.spec.js
+++ b/cypress/integration/rendering/quadrantChart.spec.js
@ -8,7 +8,6 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('should render a complete quadrant chart', () => {
    imgSnapshotTest(
@ -30,7 +29,6 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('should render without points', () => {
    imgSnapshotTest(
@ -46,7 +44,6 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('should able to render y-axix on right side', () => {
    imgSnapshotTest(
@ -63,7 +60,6 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('should able to render x-axix on bottom', () => {
    imgSnapshotTest(
@ -80,7 +76,6 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('should able to render x-axix on bottom and y-axis on right', () => {
    imgSnapshotTest(
@ -97,7 +92,6 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('should render without title', () => {
    imgSnapshotTest(
@ -112,7 +106,6 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('should use all the config', () => {
    imgSnapshotTest(
@ -135,7 +128,6 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('should use all the theme variable', () => {
    imgSnapshotTest(
@ -158,7 +150,6 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('should render x-axis labels in the center, if x-axis has two labels', () => {
    imgSnapshotTest(
@ -180,7 +171,6 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('should render y-axis labels in the center, if y-axis has two labels', () => {
    imgSnapshotTest(
@ -202,7 +192,6 @@ 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(
@ -224,7 +213,6 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });

  it('it should render data points with styles', () => {
@ -249,7 +237,6 @@ describe('Quadrant Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });

  it('it should render data points with styles + classes', () => {
--- a/cypress/integration/rendering/requirement.spec.js
+++ b/cypress/integration/rendering/requirement.spec.js
@ -44,6 +44,5 @@ 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,6 +68,19 @@ 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(
      `
@ -464,6 +477,18 @@ 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,7 +8,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 1, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('v2 should render a simple state diagrams', () => {
    imgSnapshotTest(
@ -20,7 +19,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('v2 should render a long descriptions instead of id when available', () => {
    imgSnapshotTest(
@ -32,7 +30,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('v2 should render a long descriptions with additional descriptions', () => {
    imgSnapshotTest(
@ -44,7 +41,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('v2 should render a single state with short descriptions', () => {
    imgSnapshotTest(
@ -55,7 +51,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('v2 should render a transition descriptions with new lines', () => {
    imgSnapshotTest(
@ -69,7 +64,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('v2 should render a state with a note', () => {
    imgSnapshotTest(
@ -83,7 +77,6 @@ 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(
@ -97,7 +90,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('v2 should render a state with a note together with another state', () => {
    imgSnapshotTest(
@ -113,7 +105,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('v2 should render a note with multiple lines in it', () => {
    imgSnapshotTest(
@ -156,7 +147,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('v2 should render a simple state diagrams 2', () => {
    imgSnapshotTest(
@ -169,7 +159,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('v2 should render a simple state diagrams with labels', () => {
    imgSnapshotTest(
@ -185,7 +174,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('v2 should render state descriptions', () => {
    imgSnapshotTest(
@ -198,7 +186,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('v2 should render composite states', () => {
    imgSnapshotTest(
@ -217,7 +204,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('v2 should render multiple composite states', () => {
    imgSnapshotTest(
@ -287,7 +273,6 @@ describe('State diagram', () => {
    `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('v2 should render concurrency states', () => {
    imgSnapshotTest(
@ -311,7 +296,6 @@ 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,7 +10,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('should render a long descriptions instead of id when available', () => {
    imgSnapshotTest(
@ -22,7 +21,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('should render a long descriptions with additional descriptions', () => {
    imgSnapshotTest(
@ -34,7 +32,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('should render a single state with short descriptions', () => {
    imgSnapshotTest(
@ -45,7 +42,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('should render a transition descriptions with new lines', () => {
    imgSnapshotTest(
@ -59,7 +55,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('should render a state with a note', () => {
    imgSnapshotTest(
@ -73,7 +68,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('should render a state with on the left side when so specified', () => {
    imgSnapshotTest(
@ -87,7 +81,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('should render a state with a note together with another state', () => {
    imgSnapshotTest(
@ -103,7 +96,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('should render a note with multiple lines in it', () => {
    imgSnapshotTest(
@ -146,7 +138,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('should render a simple state diagrams 2', () => {
    imgSnapshotTest(
@ -159,7 +150,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('should render a simple state diagrams with labels', () => {
    imgSnapshotTest(
@ -175,7 +165,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('should render state descriptions', () => {
    imgSnapshotTest(
@ -188,7 +177,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('should render composite states', () => {
    imgSnapshotTest(
@ -207,7 +195,6 @@ describe('State diagram', () => {
      `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('should render multiple composit states', () => {
    imgSnapshotTest(
@ -277,7 +264,6 @@ describe('State diagram', () => {
    `,
      { logLevel: 0, fontFamily: 'courier' }
    );
-    cy.get('svg');
  });
  it('should render concurrency states', () => {
    imgSnapshotTest(
@ -301,7 +287,6 @@ 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,7 +10,6 @@ describe('themeCSS balancing, it', () => {
          `,
      {}
    );
-    cy.get('svg');
  });
  it('should not allow unbalanced CSS definitions 2', () => {
    imgSnapshotTest(
@ -21,7 +20,6 @@ describe('themeCSS balancing, it', () => {
          `,
      {}
    );
-    cy.get('svg');
  });
 });

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

      it('should render a class diagram', () => {
@ -175,7 +169,6 @@ describe('Pie Chart', () => {
          `,
          { theme }
        );
-        cy.get('svg');
      });
      it('should render a state diagram', () => {
        imgSnapshotTest(
@ -210,7 +203,6 @@ stateDiagram
          `,
          { theme }
        );
-        cy.get('svg');
      });
      it('should render a state diagram (v2)', () => {
        imgSnapshotTest(
@ -245,7 +237,6 @@ stateDiagram-v2
          `,
          { theme }
        );
-        cy.get('svg');
      });
      it('should render a er diagram', () => {
        imgSnapshotTest(
@ -266,7 +257,6 @@ erDiagram
          `,
          { theme }
        );
-        cy.get('svg');
      });
      it('should render a user journey diagram', () => {
        imgSnapshotTest(
@ -287,7 +277,6 @@ erDiagram
                        `,
          { theme }
        );
-        cy.get('svg');
      });
      it('should render a gantt diagram', () => {
        cy.clock(new Date('2014-01-06').getTime());
@ -326,7 +315,6 @@ erDiagram
       `,
          { theme }
        );
-        cy.get('svg');
      });
    });
  });
--- a/cypress/integration/rendering/xyChart.spec.js
+++ b/cypress/integration/rendering/xyChart.spec.js
@ -9,7 +9,6 @@ describe('XY Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('Should render a complete chart', () => {
    imgSnapshotTest(
@ -35,7 +34,6 @@ describe('XY Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('y-axis title not required', () => {
    imgSnapshotTest(
@ -48,7 +46,6 @@ describe('XY Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('Should render a chart without y-axis with different range', () => {
    imgSnapshotTest(
@ -60,7 +57,6 @@ describe('XY Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('x axis title not required', () => {
    imgSnapshotTest(
@ -72,7 +68,6 @@ describe('XY Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('Multiple plots can be rendered', () => {
    imgSnapshotTest(
@ -87,7 +82,6 @@ describe('XY Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('Decimals and negative numbers are supported', () => {
    imgSnapshotTest(
@ -98,7 +92,6 @@ describe('XY Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('Render spark line with "plotReservedSpacePercent"', () => {
    imgSnapshotTest(
@ -116,7 +109,6 @@ describe('XY Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('Render spark bar without displaying other property', () => {
    imgSnapshotTest(
@ -143,7 +135,6 @@ describe('XY Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('Should use all the config from directive', () => {
    imgSnapshotTest(
@ -158,7 +149,6 @@ describe('XY Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('Should use all the config from yaml', () => {
    imgSnapshotTest(
@ -199,7 +189,6 @@ describe('XY Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('Render with show axis title false', () => {
    imgSnapshotTest(
@ -221,7 +210,6 @@ describe('XY Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('Render with show axis label false', () => {
    imgSnapshotTest(
@ -243,7 +231,6 @@ describe('XY Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('Render with show axis tick false', () => {
    imgSnapshotTest(
@ -265,7 +252,6 @@ describe('XY Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('Render with show axis line false', () => {
    imgSnapshotTest(
@ -287,7 +273,6 @@ describe('XY Chart', () => {
      `,
      {}
    );
-    cy.get('svg');
  });
  it('Render all the theme color', () => {
    imgSnapshotTest(
@ -317,6 +302,17 @@ describe('XY Chart', () => {
      `,
      {}
    );
+  });
+  it('should use the correct distances between data points', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        x-axis 0 --> 2
+        line [0, 1, 0, 1]
+        bar [1, 0, 1, 0]
+      `,
+      {}
+    );
    cy.get('svg');
  });
 });
--- a/cypress/support/e2e.js
+++ b/cypress/support/e2e.js
@ -15,6 +15,7 @@

 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"],
+    "types": ["cypress", "node", "@argos-ci/cypress/dist/support.d.ts"],
    "allowImportingTsExtensions": true,
    "noEmit": true
  },
--- a/demos/sequence.html
+++ b/demos/sequence.html
@ -238,6 +238,17 @@
      Alice-xJohn: Hello John, how are you?
      John--xAlice: Great!
    </pre>
+
+    <hr />
+
+    <pre class="mermaid">
+    sequenceDiagram
+      participant Alice
+      participant Bob
+      Alice<<->>Bob: Hello!
+      Alice<<->>Bob: Wow, we said that at the same time!
+      Bob<<-->>Alice: Bidirectional Arrows are so cool
+    </pre>
    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      mermaid.initialize({
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -1,4 +1,3 @@
-version: '3.9'
 services:
  mermaid:
    build:
@ -8,7 +7,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:
@ -16,6 +15,7 @@ services:
      - root_cache:/root/.cache
      - root_local:/root/.local
      - root_npm:/root/.npm
+      - /tmp:/tmp
    ports:
      - 9000:9000
      - 3333:3333
--- 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 18
+pnpm env use --global 20
 ```

 You may also need to reload `.shrc` or `.bashrc` afterwards.
--- a/docs/config/setup/README.md
+++ b/docs/config/setup/README.md
@ -10,4 +10,4 @@

 - [config](modules/config.md)
 - [defaultConfig](modules/defaultConfig.md)
- [mermaidAPI](modules/mermaidAPI.md)
+- [mermaid](modules/mermaid.md)
--- a/docs/config/setup/classes/mermaid.UnknownDiagramError.md
+++ b/docs/config/setup/classes/mermaid.UnknownDiagramError.md
@ -0,0 +1,171 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/classes/mermaid.UnknownDiagramError.md](../../../../packages/mermaid/src/docs/config/setup/classes/mermaid.UnknownDiagramError.md).
+
+# Class: UnknownDiagramError
+
+[mermaid](../modules/mermaid.md).UnknownDiagramError
+
+## Hierarchy
+
+- `Error`
+
+  ↳ **`UnknownDiagramError`**
+
+## Constructors
+
+### constructor
+
+• **new UnknownDiagramError**(`message`): [`UnknownDiagramError`](mermaid.UnknownDiagramError.md)
+
+#### Parameters
+
+| Name      | Type     |
+| :-------- | :------- |
+| `message` | `string` |
+
+#### Returns
+
+[`UnknownDiagramError`](mermaid.UnknownDiagramError.md)
+
+#### Overrides
+
+Error.constructor
+
+#### Defined in
+
+[packages/mermaid/src/errors.ts:2](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L2)
+
+## Properties
+
+### cause
+
+• `Optional` **cause**: `unknown`
+
+#### Inherited from
+
+Error.cause
+
+#### Defined in
+
+node_modules/.pnpm/typescript\@5.4.5/node_modules/typescript/lib/lib.es2022.error.d.ts:24
+
+---
+
+### message
+
+• **message**: `string`
+
+#### Inherited from
+
+Error.message
+
+#### Defined in
+
+node_modules/.pnpm/typescript\@5.4.5/node_modules/typescript/lib/lib.es5.d.ts:1077
+
+---
+
+### name
+
+• **name**: `string`
+
+#### Inherited from
+
+Error.name
+
+#### Defined in
+
+node_modules/.pnpm/typescript\@5.4.5/node_modules/typescript/lib/lib.es5.d.ts:1076
+
+---
+
+### stack
+
+• `Optional` **stack**: `string`
+
+#### Inherited from
+
+Error.stack
+
+#### Defined in
+
+node_modules/.pnpm/typescript\@5.4.5/node_modules/typescript/lib/lib.es5.d.ts:1078
+
+---
+
+### prepareStackTrace
+
+▪ `Static` `Optional` **prepareStackTrace**: (`err`: `Error`, `stackTraces`: `CallSite`\[]) => `any`
+
+Optional override for formatting stack traces
+
+**`See`**
+
+<https://v8.dev/docs/stack-trace-api#customizing-stack-traces>
+
+#### Type declaration
+
+▸ (`err`, `stackTraces`): `any`
+
+##### Parameters
+
+| Name          | Type          |
+| :------------ | :------------ |
+| `err`         | `Error`       |
+| `stackTraces` | `CallSite`\[] |
+
+##### Returns
+
+`any`
+
+#### Inherited from
+
+Error.prepareStackTrace
+
+#### Defined in
+
+node_modules/@types/node/globals.d.ts:28
+
+---
+
+### stackTraceLimit
+
+▪ `Static` **stackTraceLimit**: `number`
+
+#### Inherited from
+
+Error.stackTraceLimit
+
+#### Defined in
+
+node_modules/@types/node/globals.d.ts:30
+
+## Methods
+
+### captureStackTrace
+
+▸ **captureStackTrace**(`targetObject`, `constructorOpt?`): `void`
+
+Create .stack property on a target object
+
+#### Parameters
+
+| Name              | Type       |
+| :---------------- | :--------- |
+| `targetObject`    | `object`   |
+| `constructorOpt?` | `Function` |
+
+#### Returns
+
+`void`
+
+#### Inherited from
+
+Error.captureStackTrace
+
+#### Defined in
+
+node_modules/@types/node/globals.d.ts:21
--- a/docs/config/setup/interfaces/mermaid.DetailedError.md
+++ b/docs/config/setup/interfaces/mermaid.DetailedError.md
@ -0,0 +1,49 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.DetailedError.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.DetailedError.md).
+
+# Interface: DetailedError
+
+[mermaid](../modules/mermaid.md).DetailedError
+
+## Properties
+
+### error
+
+• `Optional` **error**: `any`
+
+#### Defined in
+
+[packages/mermaid/src/utils.ts:789](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L789)
+
+---
+
+### hash
+
+• **hash**: `any`
+
+#### Defined in
+
+[packages/mermaid/src/utils.ts:787](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L787)
+
+---
+
+### message
+
+• `Optional` **message**: `string`
+
+#### Defined in
+
+[packages/mermaid/src/utils.ts:790](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L790)
+
+---
+
+### str
+
+• **str**: `string`
+
+#### Defined in
+
+[packages/mermaid/src/utils.ts:785](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L785)
--- a/docs/config/setup/interfaces/mermaid.ExternalDiagramDefinition.md
+++ b/docs/config/setup/interfaces/mermaid.ExternalDiagramDefinition.md
@ -0,0 +1,39 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.ExternalDiagramDefinition.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.ExternalDiagramDefinition.md).
+
+# Interface: ExternalDiagramDefinition
+
+[mermaid](../modules/mermaid.md).ExternalDiagramDefinition
+
+## Properties
+
+### detector
+
+• **detector**: `DiagramDetector`
+
+#### Defined in
+
+[packages/mermaid/src/diagram-api/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L101)
+
+---
+
+### id
+
+• **id**: `string`
+
+#### Defined in
+
+[packages/mermaid/src/diagram-api/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L100)
+
+---
+
+### loader
+
+• **loader**: `DiagramLoader`
+
+#### Defined in
+
+[packages/mermaid/src/diagram-api/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L102)
--- a/docs/config/setup/interfaces/mermaid.Mermaid.md
+++ b/docs/config/setup/interfaces/mermaid.Mermaid.md
@ -0,0 +1,340 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.Mermaid.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.Mermaid.md).
+
+# Interface: Mermaid
+
+[mermaid](../modules/mermaid.md).Mermaid
+
+## Properties
+
+### contentLoaded
+
+• **contentLoaded**: () => `void`
+
+#### Type declaration
+
+▸ (): `void`
+
+\##contentLoaded Callback function that is called when page is loaded. This functions fetches
+configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
+page.
+
+##### Returns
+
+`void`
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
+
+---
+
+### detectType
+
+• **detectType**: (`text`: `string`, `config?`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string`
+
+#### Type declaration
+
+▸ (`text`, `config?`): `string`
+
+Detects the type of the graph text.
+
+Takes into consideration the possible existence of an `%%init` directive
+
+##### Parameters
+
+| Name      | Type                                        | Description                                                                                                                                                         |
+| :-------- | :------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `text`    | `string`                                    | The text defining the graph. For example: `mermaid %%{initialize: {"startOnLoad": true, logLevel: "fatal" }}%% graph LR a-->b b-->c c-->d d-->e e-->f f-->g g-->h ` |
+| `config?` | [`MermaidConfig`](mermaid.MermaidConfig.md) | The mermaid config.                                                                                                                                                 |
+
+##### Returns
+
+`string`
+
+A graph definition key
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
+
+---
+
+### init
+
+• **init**: (`config?`: [`MermaidConfig`](mermaid.MermaidConfig.md), `nodes?`: `string` | `HTMLElement` | `NodeListOf`<`HTMLElement`>, `callback?`: (`id`: `string`) => `unknown`) => `Promise`<`void`>
+
+**`Deprecated`**
+
+Use [initialize](mermaid.Mermaid.md#initialize) and [run](mermaid.Mermaid.md#run) instead.
+
+#### Type declaration
+
+▸ (`config?`, `nodes?`, `callback?`): `Promise`<`void`>
+
+##### Parameters
+
+| Name        | Type                                                     |
+| :---------- | :------------------------------------------------------- |
+| `config?`   | [`MermaidConfig`](mermaid.MermaidConfig.md)              |
+| `nodes?`    | `string` \| `HTMLElement` \| `NodeListOf`<`HTMLElement`> |
+| `callback?` | (`id`: `string`) => `unknown`                            |
+
+##### Returns
+
+`Promise`<`void`>
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:421](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L421)
+
+---
+
+### initialize
+
+• **initialize**: (`config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void`
+
+#### Type declaration
+
+▸ (`config`): `void`
+
+Used to set configurations for mermaid.
+This function should be called before the run function.
+
+##### Parameters
+
+| Name     | Type                                        | Description                       |
+| :------- | :------------------------------------------ | :-------------------------------- |
+| `config` | [`MermaidConfig`](mermaid.MermaidConfig.md) | Configuration object for mermaid. |
+
+##### Returns
+
+`void`
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:424](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L424)
+
+---
+
+### mermaidAPI
+
+• **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.defaultConfig; `getConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.setConfig; `updateSiteConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.updateSiteConfig }>
+
+**`Deprecated`**
+
+Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:415](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L415)
+
+---
+
+### parse
+
+• **parse**: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)>
+
+#### Type declaration
+
+▸ (`text`, `parseOptions`): `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>
+
+Parse the text and validate the syntax.
+
+##### Parameters
+
+| Name           | Type                                                                     | Description                     |
+| :------------- | :----------------------------------------------------------------------- | :------------------------------ |
+| `text`         | `string`                                                                 | The mermaid diagram definition. |
+| `parseOptions` | [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` } | Options for parsing.            |
+
+##### Returns
+
+`Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>
+
+An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
+
+**`See`**
+
+[ParseOptions](mermaid.ParseOptions.md)
+
+**`Throws`**
+
+Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
+
+▸ (`text`, `parseOptions?`): `Promise`<[`ParseResult`](mermaid.ParseResult.md)>
+
+##### Parameters
+
+| Name            | Type                                      |
+| :-------------- | :---------------------------------------- |
+| `text`          | `string`                                  |
+| `parseOptions?` | [`ParseOptions`](mermaid.ParseOptions.md) |
+
+##### Returns
+
+`Promise`<[`ParseResult`](mermaid.ParseResult.md)>
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:416](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L416)
+
+---
+
+### parseError
+
+• `Optional` **parseError**: [`ParseErrorFunction`](../modules/mermaid.md#parseerrorfunction)
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:410](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L410)
+
+---
+
+### registerExternalDiagrams
+
+• **registerExternalDiagrams**: (`diagrams`: [`ExternalDiagramDefinition`](mermaid.ExternalDiagramDefinition.md)\[], `opts`: { `lazyLoad?`: `boolean` = true }) => `Promise`<`void`>
+
+#### Type declaration
+
+▸ (`diagrams`, `opts?`): `Promise`<`void`>
+
+Used to register external diagram types.
+
+##### Parameters
+
+| Name             | Type                                                                   | Default value | Description                                                                 |
+| :--------------- | :--------------------------------------------------------------------- | :------------ | :-------------------------------------------------------------------------- |
+| `diagrams`       | [`ExternalDiagramDefinition`](mermaid.ExternalDiagramDefinition.md)\[] | `undefined`   | Array of [ExternalDiagramDefinition](mermaid.ExternalDiagramDefinition.md). |
+| `opts`           | `Object`                                                               | `{}`          | If opts.lazyLoad is false, the diagrams will be loaded immediately.         |
+| `opts.lazyLoad?` | `boolean`                                                              | `true`        | -                                                                           |
+
+##### Returns
+
+`Promise`<`void`>
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:423](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L423)
+
+---
+
+### render
+
+• **render**: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)>
+
+#### Type declaration
+
+▸ (`id`, `text`, `svgContainingElement?`): `Promise`<[`RenderResult`](mermaid.RenderResult.md)>
+
+##### Parameters
+
+| Name                    | Type      |
+| :---------------------- | :-------- |
+| `id`                    | `string`  |
+| `text`                  | `string`  |
+| `svgContainingElement?` | `Element` |
+
+##### Returns
+
+`Promise`<[`RenderResult`](mermaid.RenderResult.md)>
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:417](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L417)
+
+---
+
+### run
+
+• **run**: (`options`: [`RunOptions`](mermaid.RunOptions.md)) => `Promise`<`void`>
+
+#### Type declaration
+
+▸ (`options?`): `Promise`<`void`>
+
+## run
+
+Function that goes through the document to find the chart definitions in there and render them.
+
+The function tags the processed attributes with the attribute data-processed and ignores found
+elements with the attribute already set. This way the init function can be triggered several
+times.
+
+```mermaid-example
+graph LR;
+ a(Find elements)-->b{Processed}
+ b-->|Yes|c(Leave element)
+ b-->|No |d(Transform)
+```
+
+```mermaid
+graph LR;
+ a(Find elements)-->b{Processed}
+ b-->|Yes|c(Leave element)
+ b-->|No |d(Transform)
+```
+
+Renders the mermaid diagrams
+
+##### Parameters
+
+| Name      | Type                                  | Description              |
+| :-------- | :------------------------------------ | :----------------------- |
+| `options` | [`RunOptions`](mermaid.RunOptions.md) | Optional runtime configs |
+
+##### Returns
+
+`Promise`<`void`>
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:422](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L422)
+
+---
+
+### setParseErrorHandler
+
+• **setParseErrorHandler**: (`parseErrorHandler`: (`err`: `any`, `hash`: `any`) => `void`) => `void`
+
+#### Type declaration
+
+▸ (`parseErrorHandler`): `void`
+
+## setParseErrorHandler Alternative to directly setting parseError using:
+
+```js
+mermaid.parseError = function (err, hash) {
+  forExampleDisplayErrorInGui(err); // do something with the error
+};
+```
+
+This is provided for environments where the mermaid object can't directly have a new member added
+to it (eg. dart interop wrapper). (Initially there is no parseError member of mermaid).
+
+##### Parameters
+
+| Name                | Type                                    | Description                |
+| :------------------ | :-------------------------------------- | :------------------------- |
+| `parseErrorHandler` | (`err`: `any`, `hash`: `any`) => `void` | New parseError() callback. |
+
+##### Returns
+
+`void`
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
+
+---
+
+### startOnLoad
+
+• **startOnLoad**: `boolean`
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:409](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L409)
--- a/docs/config/setup/interfaces/mermaid.MermaidConfig.md
+++ b/docs/config/setup/interfaces/mermaid.MermaidConfig.md
@ -0,0 +1,467 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.MermaidConfig.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.MermaidConfig.md).
+
+# Interface: MermaidConfig
+
+[mermaid](../modules/mermaid.md).MermaidConfig
+
+## Properties
+
+### altFontFamily
+
+• `Optional` **altFontFamily**: `string`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L85)
+
+---
+
+### arrowMarkerAbsolute
+
+• `Optional` **arrowMarkerAbsolute**: `boolean`
+
+Controls whether or arrow markers in html code are absolute paths or anchors.
+This matters if you are using base tag settings.
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L104)
+
+---
+
+### block
+
+• `Optional` **block**: `BlockDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:162](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L162)
+
+---
+
+### c4
+
+• `Optional` **c4**: `C4DiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:159](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L159)
+
+---
+
+### class
+
+• `Optional` **class**: `ClassDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:150](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L150)
+
+---
+
+### darkMode
+
+• `Optional` **darkMode**: `boolean`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L76)
+
+---
+
+### deterministicIDSeed
+
+• `Optional` **deterministicIDSeed**: `string`
+
+This option is the optional seed for deterministic ids.
+If set to `undefined` but deterministicIds is `true`, a simple number iterator is used.
+You can set this attribute to base the seed on a static string.
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:144](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L144)
+
+---
+
+### deterministicIds
+
+• `Optional` **deterministicIds**: `boolean`
+
+This option controls if the generated ids of nodes in the SVG are
+generated randomly or based on a seed.
+If set to `false`, the IDs are generated based on the current date and
+thus are not deterministic. This is the default behavior.
+
+This matters if your files are checked into source control e.g. git and
+should not change unless content is changed.
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L137)
+
+---
+
+### dompurifyConfig
+
+• `Optional` **dompurifyConfig**: `Config`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)
+
+---
+
+### er
+
+• `Optional` **er**: `ErDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L152)
+
+---
+
+### flowchart
+
+• `Optional` **flowchart**: `FlowchartDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L145)
+
+---
+
+### fontFamily
+
+• `Optional` **fontFamily**: `string`
+
+Specifies the font to be used in the rendered diagrams.
+Can be any possible CSS `font-family`.
+See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L84)
+
+---
+
+### fontSize
+
+• `Optional` **fontSize**: `number`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:165](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L165)
+
+---
+
+### forceLegacyMathML
+
+• `Optional` **forceLegacyMathML**: `boolean`
+
+This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS
+fonts and browser's MathML implementation, this option is recommended if consistent rendering is important.
+If set to true, ignores legacyMathML.
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L126)
+
+---
+
+### gantt
+
+• `Optional` **gantt**: `GanttDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L147)
+
+---
+
+### gitGraph
+
+• `Optional` **gitGraph**: `GitGraphDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:158](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L158)
+
+---
+
+### htmlLabels
+
+• `Optional` **htmlLabels**: `boolean`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L77)
+
+---
+
+### journey
+
+• `Optional` **journey**: `JourneyDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L148)
+
+---
+
+### legacyMathML
+
+• `Optional` **legacyMathML**: `boolean`
+
+This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers
+without their own MathML implementation. If this option is disabled and MathML is not supported, the math
+equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will
+fall back to legacy rendering for KaTeX.
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:119](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L119)
+
+---
+
+### logLevel
+
+• `Optional` **logLevel**: `0` | `2` | `1` | `"trace"` | `"debug"` | `"info"` | `"warn"` | `"error"` | `"fatal"` | `3` | `4` | `5`
+
+This option decides the amount of logging to be used by mermaid.
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:90](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L90)
+
+---
+
+### markdownAutoWrap
+
+• `Optional` **markdownAutoWrap**: `boolean`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:166](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L166)
+
+---
+
+### maxEdges
+
+• `Optional` **maxEdges**: `number`
+
+Defines the maximum number of edges that can be drawn in a graph.
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L75)
+
+---
+
+### maxTextSize
+
+• `Optional` **maxTextSize**: `number`
+
+The maximum allowed size of the users text diagram
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L70)
+
+---
+
+### mindmap
+
+• `Optional` **mindmap**: `MindmapDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:157](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L157)
+
+---
+
+### packet
+
+• `Optional` **packet**: `PacketDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:161](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L161)
+
+---
+
+### pie
+
+• `Optional` **pie**: `PieDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L153)
+
+---
+
+### quadrantChart
+
+• `Optional` **quadrantChart**: `QuadrantChartConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L154)
+
+---
+
+### requirement
+
+• `Optional` **requirement**: `RequirementDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L156)
+
+---
+
+### sankey
+
+• `Optional` **sankey**: `SankeyDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:160](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L160)
+
+---
+
+### secure
+
+• `Optional` **secure**: `string`\[]
+
+This option controls which `currentConfig` keys are considered secure and
+can only be changed via call to `mermaid.initialize`.
+This prevents malicious graph directives from overriding a site's default security.
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:111](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L111)
+
+---
+
+### securityLevel
+
+• `Optional` **securityLevel**: `"strict"` | `"loose"` | `"antiscript"` | `"sandbox"`
+
+Level of trust for parsed diagram
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L94)
+
+---
+
+### sequence
+
+• `Optional` **sequence**: `SequenceDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L146)
+
+---
+
+### startOnLoad
+
+• `Optional` **startOnLoad**: `boolean`
+
+Dictates whether mermaid starts on Page load
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L98)
+
+---
+
+### state
+
+• `Optional` **state**: `StateDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L151)
+
+---
+
+### suppressErrorRendering
+
+• `Optional` **suppressErrorRendering**: `boolean`
+
+Suppresses inserting 'Syntax error' diagram in the DOM.
+This is useful when you want to control how to handle syntax errors in your application.
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L172)
+
+---
+
+### theme
+
+• `Optional` **theme**: `"default"` | `"forest"` | `"dark"` | `"neutral"` | `"null"`
+
+Theme, the CSS style sheet.
+You may also use `themeCSS` to override this value.
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L64)
+
+---
+
+### themeCSS
+
+• `Optional` **themeCSS**: `string`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:66](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L66)
+
+---
+
+### themeVariables
+
+• `Optional` **themeVariables**: `any`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:65](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L65)
+
+---
+
+### timeline
+
+• `Optional` **timeline**: `TimelineDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:149](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L149)
+
+---
+
+### wrap
+
+• `Optional` **wrap**: `boolean`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:164](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L164)
+
+---
+
+### xyChart
+
+• `Optional` **xyChart**: `XYChartConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L155)
--- a/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
+++ b/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md
@ -2,11 +2,11 @@
 >
 > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 >
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md).
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.ParseOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.ParseOptions.md).

 # Interface: ParseOptions

-[mermaidAPI](../modules/mermaidAPI.md).ParseOptions
+[mermaid](../modules/mermaid.md).ParseOptions

 ## Properties

@ -19,4 +19,4 @@ The `parseError` function will not be called.

 #### Defined in

-[mermaidAPI.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L64)
+[packages/mermaid/src/types.ts:43](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L43)
--- a/docs/config/setup/interfaces/mermaid.ParseResult.md
+++ b/docs/config/setup/interfaces/mermaid.ParseResult.md
@ -0,0 +1,21 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.ParseResult.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.ParseResult.md).
+
+# Interface: ParseResult
+
+[mermaid](../modules/mermaid.md).ParseResult
+
+## Properties
+
+### diagramType
+
+• **diagramType**: `string`
+
+The diagram type, e.g. 'flowchart', 'sequence', etc.
+
+#### Defined in
+
+[packages/mermaid/src/types.ts:50](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L50)
--- a/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
+++ b/docs/config/setup/interfaces/mermaidAPI.RenderResult.md
@ -2,11 +2,11 @@
 >
 > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 >
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.RenderResult.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.RenderResult.md).
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderResult.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderResult.md).

 # Interface: RenderResult

-[mermaidAPI](../modules/mermaidAPI.md).RenderResult
+[mermaid](../modules/mermaid.md).RenderResult

 ## Properties

@ -18,7 +18,7 @@ Bind function to be called after the svg has been inserted into the DOM.
 This is necessary for adding event listeners to the elements in the svg.

 ```js
-const { svg, bindFunctions } = mermaidAPI.render('id1', 'graph TD;A-->B');
+const { svg, bindFunctions } = await mermaid.render('id1', 'graph TD;A-->B');
 div.innerHTML = svg;
 bindFunctions?.(div); // To call bindFunctions only if it's present.
 ```
@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.

 #### Defined in

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

 ---

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

 #### Defined in

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

 ---

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

 #### Defined in

-[mermaidAPI.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L80)
+[packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59)
--- a/docs/config/setup/interfaces/mermaid.RunOptions.md
+++ b/docs/config/setup/interfaces/mermaid.RunOptions.md
@ -0,0 +1,71 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.RunOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.RunOptions.md).
+
+# Interface: RunOptions
+
+[mermaid](../modules/mermaid.md).RunOptions
+
+## Properties
+
+### nodes
+
+• `Optional` **nodes**: `ArrayLike`<`HTMLElement`>
+
+The nodes to render. If this is set, `querySelector` will be ignored.
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:39](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L39)
+
+---
+
+### postRenderCallback
+
+• `Optional` **postRenderCallback**: (`id`: `string`) => `unknown`
+
+A callback to call after each diagram is rendered.
+
+#### Type declaration
+
+▸ (`id`): `unknown`
+
+##### Parameters
+
+| Name | Type     |
+| :--- | :------- |
+| `id` | `string` |
+
+##### Returns
+
+`unknown`
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:43](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L43)
+
+---
+
+### querySelector
+
+• `Optional` **querySelector**: `string`
+
+The query selector to use when finding elements to render. Default: `".mermaid"`.
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:35](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L35)
+
+---
+
+### suppressErrors
+
+• `Optional` **suppressErrors**: `boolean`
+
+If `true`, errors will be logged to the console, but not thrown. Default: `false`
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:47](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L47)
--- a/docs/config/setup/interfaces/mermaidAPI.ParseResult.md
+++ b/docs/config/setup/interfaces/mermaidAPI.ParseResult.md
@ -1,21 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseResult.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseResult.md).
-
-# Interface: ParseResult
-
-[mermaidAPI](../modules/mermaidAPI.md).ParseResult
-
-## Properties
-
-### diagramType
-
-• **diagramType**: `string`
-
-The diagram type, e.g. 'flowchart', 'sequence', etc.
-
-#### Defined in
-
-[mermaidAPI.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L71)
--- a/docs/config/setup/modules/config.md
+++ b/docs/config/setup/modules/config.md
@ -10,11 +10,11 @@

 ### defaultConfig

-• `Const` **defaultConfig**: `MermaidConfig`
+• `Const` **defaultConfig**: [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)

 #### Defined in

-[config.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L8)
+[packages/mermaid/src/config.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L8)

 ## Functions

@ -26,9 +26,9 @@ Pushes in a directive to the configuration

 #### Parameters

-| Name        | Type            | Description              |
-| :---------- | :-------------- | :----------------------- |
-| `directive` | `MermaidConfig` | The directive to push in |
+| Name        | Type                                                      | Description              |
+| :---------- | :-------------------------------------------------------- | :----------------------- |
+| `directive` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) | The directive to push in |

 #### Returns

@ -36,13 +36,13 @@ Pushes in a directive to the configuration

 #### Defined in

-[config.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L188)
+[packages/mermaid/src/config.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L188)

 ---

 ### getConfig

-▸ **getConfig**(): `MermaidConfig`
+▸ **getConfig**(): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)

 ## getConfig

@ -54,19 +54,19 @@ Pushes in a directive to the configuration

 #### Returns

-`MermaidConfig`
+[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)

 The currentConfig

 #### Defined in

-[config.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L131)
+[packages/mermaid/src/config.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L131)

 ---

 ### getSiteConfig

-▸ **getSiteConfig**(): `MermaidConfig`
+▸ **getSiteConfig**(): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)

 ## getSiteConfig

@ -78,13 +78,13 @@ The currentConfig

 #### Returns

-`MermaidConfig`
+[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)

 The siteConfig

 #### Defined in

-[config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96)
+[packages/mermaid/src/config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96)

 ---

@ -108,9 +108,9 @@ The siteConfig

 #### Parameters

-| Name     | Type            | Default value | Description                                                                                                                                                   |
-| :------- | :-------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `config` | `MermaidConfig` | `siteConfig`  | base set of values, which currentConfig could be **reset** to. Defaults to the current siteConfig (e.g returned by [getSiteConfig](config.md#getsiteconfig)). |
+| Name     | Type                                                      | Default value | Description                                                                                                                                                   |
+| :------- | :-------------------------------------------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `config` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) | `siteConfig`  | base set of values, which currentConfig could be **reset** to. Defaults to the current siteConfig (e.g returned by [getSiteConfig](config.md#getsiteconfig)). |

 #### Returns

@ -118,7 +118,7 @@ The siteConfig

 #### Defined in

-[config.ts:218](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L218)
+[packages/mermaid/src/config.ts:218](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L218)

 ---

@ -147,7 +147,7 @@ options in-place

 #### Defined in

-[config.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L146)
+[packages/mermaid/src/config.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L146)

 ---

@ -157,9 +157,9 @@ options in-place

 #### Parameters

-| Name   | Type            |
-| :----- | :-------------- |
-| `conf` | `MermaidConfig` |
+| Name   | Type                                                      |
+| :----- | :-------------------------------------------------------- |
+| `conf` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) |

 #### Returns

@ -167,13 +167,13 @@ options in-place

 #### Defined in

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

 ---

 ### setConfig

-▸ **setConfig**(`conf`): `MermaidConfig`
+▸ **setConfig**(`conf`): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)

 ## setConfig

@ -187,25 +187,25 @@ corresponding siteConfig value.

 #### Parameters

-| Name   | Type            | Description                 |
-| :----- | :-------------- | :-------------------------- |
-| `conf` | `MermaidConfig` | The potential currentConfig |
+| Name   | Type                                                      | Description                 |
+| :----- | :-------------------------------------------------------- | :-------------------------- |
+| `conf` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) | The potential currentConfig |

 #### Returns

-`MermaidConfig`
+[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)

 The currentConfig merged with the sanitized conf

 #### Defined in

-[config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113)
+[packages/mermaid/src/config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113)

 ---

 ### setSiteConfig

-▸ **setSiteConfig**(`conf`): `MermaidConfig`
+▸ **setSiteConfig**(`conf`): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)

 ## setSiteConfig

@ -220,57 +220,57 @@ function _Default value: At default, will mirror Global Config_

 #### Parameters

-| Name   | Type            | Description                                 |
-| :----- | :-------------- | :------------------------------------------ |
-| `conf` | `MermaidConfig` | The base currentConfig to use as siteConfig |
+| Name   | Type                                                      | Description                                 |
+| :----- | :-------------------------------------------------------- | :------------------------------------------ |
+| `conf` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) | The base currentConfig to use as siteConfig |

 #### Returns

-`MermaidConfig`
+[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)

 The new siteConfig

 #### Defined in

-[config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61)
+[packages/mermaid/src/config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61)

 ---

 ### updateCurrentConfig

-▸ **updateCurrentConfig**(`siteCfg`, `_directives`): `MermaidConfig`
+▸ **updateCurrentConfig**(`siteCfg`, `_directives`): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)

 #### Parameters

-| Name          | Type               |
-| :------------ | :----------------- |
-| `siteCfg`     | `MermaidConfig`    |
-| `_directives` | `MermaidConfig`\[] |
+| Name          | Type                                                         |
+| :------------ | :----------------------------------------------------------- |
+| `siteCfg`     | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)    |
+| `_directives` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)\[] |

 #### Returns

-`MermaidConfig`
+[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)

 #### Defined in

-[config.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L15)
+[packages/mermaid/src/config.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L15)

 ---

 ### updateSiteConfig

-▸ **updateSiteConfig**(`conf`): `MermaidConfig`
+▸ **updateSiteConfig**(`conf`): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)

 #### Parameters

-| Name   | Type            |
-| :----- | :-------------- |
-| `conf` | `MermaidConfig` |
+| Name   | Type                                                      |
+| :----- | :-------------------------------------------------------- |
+| `conf` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) |

 #### Returns

-`MermaidConfig`
+[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)

 #### Defined in

-[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79)
+[packages/mermaid/src/config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79)
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@ -14,13 +14,13 @@

 #### Defined in

-[defaultConfig.ts:275](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L275)
+[packages/mermaid/src/defaultConfig.ts:275](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L275)

 ---

 ### default

-• `Const` **default**: `RequiredDeep`<`MermaidConfig`>
+• `Const` **default**: `RequiredDeep`<[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)>

 Default mermaid configuration options.

@ -30,4 +30,4 @@ Non-JSON JS default values are listed in this file, e.g. functions, or

 #### Defined in

-[defaultConfig.ts:18](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L18)
+[packages/mermaid/src/defaultConfig.ts:18](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L18)
--- a/docs/config/setup/modules/mermaid.md
+++ b/docs/config/setup/modules/mermaid.md
@ -0,0 +1,57 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/modules/mermaid.md](../../../../packages/mermaid/src/docs/config/setup/modules/mermaid.md).
+
+# Module: mermaid
+
+## Classes
+
+- [UnknownDiagramError](../classes/mermaid.UnknownDiagramError.md)
+
+## Interfaces
+
+- [DetailedError](../interfaces/mermaid.DetailedError.md)
+- [ExternalDiagramDefinition](../interfaces/mermaid.ExternalDiagramDefinition.md)
+- [Mermaid](../interfaces/mermaid.Mermaid.md)
+- [MermaidConfig](../interfaces/mermaid.MermaidConfig.md)
+- [ParseOptions](../interfaces/mermaid.ParseOptions.md)
+- [ParseResult](../interfaces/mermaid.ParseResult.md)
+- [RenderResult](../interfaces/mermaid.RenderResult.md)
+- [RunOptions](../interfaces/mermaid.RunOptions.md)
+
+## Type Aliases
+
+### ParseErrorFunction
+
+Ƭ **ParseErrorFunction**: (`err`: `string` | [`DetailedError`](../interfaces/mermaid.DetailedError.md) | `unknown`, `hash?`: `any`) => `void`
+
+#### Type declaration
+
+▸ (`err`, `hash?`): `void`
+
+##### Parameters
+
+| Name    | Type                                                                               |
+| :------ | :--------------------------------------------------------------------------------- |
+| `err`   | `string` \| [`DetailedError`](../interfaces/mermaid.DetailedError.md) \| `unknown` |
+| `hash?` | `any`                                                                              |
+
+##### Returns
+
+`void`
+
+#### Defined in
+
+[packages/mermaid/src/Diagram.ts:9](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/Diagram.ts#L9)
+
+## Variables
+
+### default
+
+• `Const` **default**: [`Mermaid`](../interfaces/mermaid.Mermaid.md)
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@ -1,284 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/modules/mermaidAPI.md](../../../../packages/mermaid/src/docs/config/setup/modules/mermaidAPI.md).
-
-# Module: mermaidAPI
-
-## Interfaces
-
- [ParseOptions](../interfaces/mermaidAPI.ParseOptions.md)
- [ParseResult](../interfaces/mermaidAPI.ParseResult.md)
- [RenderResult](../interfaces/mermaidAPI.RenderResult.md)
-
-## References
-
-### default
-
-Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
-
-## Type Aliases
-
-### D3Element
-
-Ƭ **D3Element**: `any`
-
-#### Defined in
-
-[mermaidAPI.ts:74](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L74)
-
-## Variables
-
-### mermaidAPI
-
-• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](../interfaces/mermaidAPI.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](../interfaces/mermaidAPI.ParseOptions.md)) => `Promise`<[`ParseResult`](../interfaces/mermaidAPI.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](../interfaces/mermaidAPI.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
-
-## mermaidAPI configuration defaults
-
-```ts
-const config = {
-  theme: 'default',
-  logLevel: 'fatal',
-  securityLevel: 'strict',
-  startOnLoad: true,
-  arrowMarkerAbsolute: false,
-  suppressErrorRendering: false,
-
-  er: {
-    diagramPadding: 20,
-    layoutDirection: 'TB',
-    minEntityWidth: 100,
-    minEntityHeight: 75,
-    entityPadding: 15,
-    stroke: 'gray',
-    fill: 'honeydew',
-    fontSize: 12,
-    useMaxWidth: true,
-  },
-  flowchart: {
-    diagramPadding: 8,
-    htmlLabels: true,
-    curve: 'basis',
-  },
-  sequence: {
-    diagramMarginX: 50,
-    diagramMarginY: 10,
-    actorMargin: 50,
-    width: 150,
-    height: 65,
-    boxMargin: 10,
-    boxTextMargin: 5,
-    noteMargin: 10,
-    messageMargin: 35,
-    messageAlign: 'center',
-    mirrorActors: true,
-    bottomMarginAdj: 1,
-    useMaxWidth: true,
-    rightAngles: false,
-    showSequenceNumbers: false,
-  },
-  gantt: {
-    titleTopMargin: 25,
-    barHeight: 20,
-    barGap: 4,
-    topPadding: 50,
-    leftPadding: 75,
-    gridLineStartPadding: 35,
-    fontSize: 11,
-    fontFamily: '"Open Sans", sans-serif',
-    numberSectionStyles: 4,
-    axisFormat: '%Y-%m-%d',
-    topAxis: false,
-    displayMode: '',
-  },
-};
-mermaid.initialize(config);
-```
-
-#### Defined in
-
-[mermaidAPI.ts:634](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L634)
-
-## Functions
-
-### appendDivSvgG
-
-▸ **appendDivSvgG**(`parentRoot`, `id`, `enclosingDivId`, `divStyle?`, `svgXlink?`): `any`
-
-Append an enclosing div, then svg, then g (group) to the d3 parentRoot. Set attributes.
-Only set the style attribute on the enclosing div if divStyle is given.
-Only set the xmlns:xlink attribute on svg if svgXlink is given.
-Return the last node appended
-
-#### Parameters
-
-| Name             | Type     | Description                                      |
-| :--------------- | :------- | :----------------------------------------------- |
-| `parentRoot`     | `any`    | the d3 node to append things to                  |
-| `id`             | `string` | the value to set the id attr to                  |
-| `enclosingDivId` | `string` | the id to set the enclosing div to               |
-| `divStyle?`      | `string` | if given, the style to set the enclosing div to  |
-| `svgXlink?`      | `string` | if given, the link to set the new svg element to |
-
-#### Returns
-
-`any`
-
- returns the parentRoot that had nodes appended
-
-#### Defined in
-
-[mermaidAPI.ts:276](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L276)
-
---
-
-### cleanUpSvgCode
-
-▸ **cleanUpSvgCode**(`svgCode?`, `inSandboxMode`, `useArrowMarkerUrls`): `string`
-
-Clean up svgCode. Do replacements needed
-
-#### Parameters
-
-| Name                 | Type      | Default value | Description                                                 |
-| :------------------- | :-------- | :------------ | :---------------------------------------------------------- |
-| `svgCode`            | `string`  | `''`          | the code to clean up                                        |
-| `inSandboxMode`      | `boolean` | `undefined`   | security level                                              |
-| `useArrowMarkerUrls` | `boolean` | `undefined`   | should arrow marker's use full urls? (vs. just the anchors) |
-
-#### Returns
-
-`string`
-
-the cleaned up svgCode
-
-#### Defined in
-
-[mermaidAPI.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L222)
-
---
-
-### createCssStyles
-
-▸ **createCssStyles**(`config`, `classDefs?`): `string`
-
-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(...) |
-
-#### Returns
-
-`string`
-
-the string with all the user styles
-
-#### Defined in
-
-[mermaidAPI.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L153)
-
---
-
-### createUserStyles
-
-▸ **createUserStyles**(`config`, `graphType`, `classDefs`, `svgId`): `string`
-
-#### Parameters
-
-| Name        | Type                                                   |
-| :---------- | :----------------------------------------------------- |
-| `config`    | `MermaidConfig`                                        |
-| `graphType` | `string`                                               |
-| `classDefs` | `undefined` \| `Map`<`string`, `DiagramStyleClassDef`> |
-| `svgId`     | `string`                                               |
-
-#### Returns
-
-`string`
-
-#### Defined in
-
-[mermaidAPI.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L199)
-
---
-
-### cssImportantStyles
-
-▸ **cssImportantStyles**(`cssClass`, `element`, `cssClasses?`): `string`
-
-Create a CSS style that starts with the given class name, then the element,
-with an enclosing block that has each of the cssClasses followed by !important;
-
-#### Parameters
-
-| Name         | Type        | Default value | Description                                    |
-| :----------- | :---------- | :------------ | :--------------------------------------------- |
-| `cssClass`   | `string`    | `undefined`   | CSS class name                                 |
-| `element`    | `string`    | `undefined`   | CSS element                                    |
-| `cssClasses` | `string`\[] | `[]`          | list of CSS styles to append after the element |
-
-#### Returns
-
-`string`
-
- the constructed string
-
-#### Defined in
-
-[mermaidAPI.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L138)
-
---
-
-### putIntoIFrame
-
-▸ **putIntoIFrame**(`svgCode?`, `svgElement?`): `string`
-
-Put the svgCode into an iFrame. Return the iFrame code
-
-#### Parameters
-
-| Name          | Type     | Default value | Description                                                                  |
-| :------------ | :------- | :------------ | :--------------------------------------------------------------------------- |
-| `svgCode`     | `string` | `''`          | the svg code to put inside the iFrame                                        |
-| `svgElement?` | `any`    | `undefined`   | the d3 node that has the current svgElement so we can get the height from it |
-
-#### Returns
-
-`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)
-
---
-
-### removeExistingElements
-
-▸ **removeExistingElements**(`doc`, `id`, `divId`, `iFrameId`): `void`
-
-Remove any existing elements from the given document
-
-#### Parameters
-
-| Name       | Type       | Description                           |
-| :--------- | :--------- | :------------------------------------ |
-| `doc`      | `Document` | the document to removed elements from |
-| `id`       | `string`   | id for any existing SVG element       |
-| `divId`    | `string`   | -                                     |
-| `iFrameId` | `string`   | -                                     |
-
-#### Returns
-
-`void`
-
-#### Defined in
-
-[mermaidAPI.ts:326](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L326)
--- a/docs/config/theming.md
+++ b/docs/config/theming.md
@ -24,12 +24,12 @@ Themes can now be customized at the site-wide level, or on individual Mermaid di

 ## Site-wide Theme

-To customize themes site-wide, call the `initialize` method on the `mermaidAPI`.
+To customize themes site-wide, call the `initialize` method on the `mermaid`.

 Example of `initialize` call setting `theme` to `base`:

 ```javascript
-mermaidAPI.initialize({
+mermaid.initialize({
  securityLevel: 'loose',
  theme: 'base',
 });
--- a/docs/config/usage.md
+++ b/docs/config/usage.md
@ -193,7 +193,7 @@ await mermaid.run({
 ### Calling `mermaid.init` - Deprecated

 > **Warning**
-> mermaid.init is deprecated in v10 and will be removed in v11. Please use mermaid.run instead.
+> mermaid.init is deprecated in v10 and will be removed in a future release. Please use mermaid.run instead.

 By default, `mermaid.init` will be called when the document is ready, finding all elements with
 `class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need
@ -217,9 +217,6 @@ Or with no config object, and a jQuery selection:
 mermaid.init(undefined, $('#someId .yetAnotherClass'));
 ```

-> **Warning**
-> This type of integration is deprecated. Instead the preferred way of handling more complex integration is to use the mermaidAPI instead.
-
 ## Usage with webpack

 mermaid fully supports webpack. Here is a [working demo](https://github.com/mermaidjs/mermaid-webpack-demo).
--- a/docs/syntax/sequenceDiagram.md
+++ b/docs/syntax/sequenceDiagram.md
@ -206,18 +206,20 @@ Messages can be of two displayed either solid or with a dotted line.
 [Actor][Arrow][Actor]:Message text
 ```

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

-| 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) |
+| 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)                         |

 ## Activations

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

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

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

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

--- 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@9.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a",
  "keywords": [
    "diagram",
    "markdown",
@ -63,6 +63,7 @@
  },
  "devDependencies": {
    "@applitools/eyes-cypress": "^3.42.3",
+    "@argos-ci/cypress": "^2.0.5",
    "@cspell/eslint-plugin": "^8.8.4",
    "@cypress/code-coverage": "^3.12.30",
    "@eslint/js": "^9.4.0",
@ -121,7 +122,7 @@
    "rollup-plugin-visualizer": "^5.12.0",
    "start-server-and-test": "^2.0.3",
    "tsx": "^4.7.1",
-    "typescript": "^5.4.5",
+    "typescript": "~5.4.5",
    "typescript-eslint": "^7.13.0",
    "vite": "^5.2.3",
    "vite-plugin-istanbul": "^6.0.0",
@ -129,10 +130,5 @@
  },
  "nyc": {
    "report-dir": "coverage/cypress"
-  },
-  "pnpm": {
-    "patchedDependencies": {
-      "cytoscape@3.28.1": "patches/cytoscape@3.28.1.patch"
-    }
  }
 }
--- a/packages/mermaid-flowchart-elk/src/detector.spec.ts
+++ b/packages/mermaid-flowchart-elk/src/detector.spec.ts
@ -39,6 +39,26 @@ 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/package.json
+++ b/packages/mermaid/package.json
@ -34,7 +34,7 @@
  "scripts": {
    "clean": "rimraf dist",
    "dev": "pnpm -w dev",
-    "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup",
+    "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaid.ts && prettier --write ./src/docs/config/setup",
    "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts",
    "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts --verify",
    "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && tsx scripts/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
@ -70,7 +70,7 @@
  "dependencies": {
    "@braintree/sanitize-url": "^7.0.1",
    "@mermaid-js/parser": "workspace:^",
-    "cytoscape": "^3.28.1",
+    "cytoscape": "^3.29.2",
    "cytoscape-cose-bilkent": "^4.1.0",
    "d3": "^7.9.0",
    "d3-sankey": "^0.12.3",
@ -88,7 +88,7 @@
  },
  "devDependencies": {
    "@adobe/jsonschema2md": "^8.0.0",
-    "@types/cytoscape": "^3.19.16",
+    "@types/cytoscape": "^3.21.4",
    "@types/d3": "^7.4.3",
    "@types/d3-sankey": "^0.12.4",
    "@types/d3-scale": "^4.0.8",
@ -124,7 +124,7 @@
    "type-fest": "^4.13.1",
    "typedoc": "^0.25.12",
    "typedoc-plugin-markdown": "^3.17.1",
-    "typescript": "^5.4.3",
+    "typescript": "~5.4.3",
    "unist-util-flatmap": "^1.0.0",
    "unist-util-visit": "^5.0.0",
    "vitepress": "^1.0.1",
--- a/packages/mermaid/src/accessibility.spec.ts
+++ b/packages/mermaid/src/accessibility.spec.ts
@ -1,6 +1,6 @@
 import { MockedD3 } from './tests/MockedD3.js';
 import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
-import type { D3Element } from './mermaidAPI.js';
+import type { D3Element } from './types.js';

 describe('accessibility', () => {
  const fauxSvgNode: MockedD3 = new MockedD3();
--- a/packages/mermaid/src/accessibility.ts
+++ b/packages/mermaid/src/accessibility.ts
@ -5,7 +5,7 @@
 * @see https://www.w3.org/TR/wai-aria-1.1/
 * @see https://www.w3.org/TR/svg-aam-1.0/
 */
-import type { D3Element } from './mermaidAPI.js';
+import type { D3Element } from './types.js';

 /**
 * SVG element role:
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@ -104,10 +104,7 @@ export interface MermaidConfig {
  arrowMarkerAbsolute?: boolean;
  /**
   * This option controls which `currentConfig` keys are considered secure and
-   * can only be changed via call to `mermaidAPI.initialize`.
-   * Calls to `mermaidAPI.reinitialize` cannot make changes to the secure keys
-   * in the current `currentConfig`.
-   *
+   * can only be changed via call to `mermaid.initialize`.
   * This prevents malicious graph directives from overriding a site's default security.
   *
   */
--- a/packages/mermaid/src/dagre-wrapper/createLabel.js
+++ b/packages/mermaid/src/dagre-wrapper/createLabel.js
@ -25,15 +25,10 @@ function addHtmlLabel(node) {

  const label = node.label;
  const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
-  div.html(
-    '<span class="' +
-      labelClass +
-      '" ' +
-      (node.labelStyle ? 'style="' + node.labelStyle + '"' : '') +
-      '>' +
-      label +
-      '</span>'
-  );
+  const span = div.append('span');
+  span.html(label);
+  applyStyle(span, node.labelStyle);
+  span.attr('class', labelClass);

  applyStyle(div, node.labelStyle);
  div.style('display', 'inline-block');
--- a/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison
+++ b/packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison
@ -256,7 +256,7 @@ boundaryStartStatement

 boundaryStart
    : ENTERPRISE_BOUNDARY attributes {$2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
-    | SYSTEM_BOUNDARY attributes {$2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
+    | SYSTEM_BOUNDARY attributes {$2.splice(2, 0, 'SYSTEM'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
    | BOUNDARY attributes {yy.addPersonOrSystemBoundary(...$2); $$=$2;}
    | CONTAINER_BOUNDARY attributes {$2.splice(2, 0, 'CONTAINER'); yy.addContainerBoundary(...$2); $$=$2;}
    | NODE attributes {yy.addDeploymentNode('node', ...$2); $$=$2;}
--- a/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapDb.ts
@ -1,5 +1,5 @@
 import { getConfig } from '../../diagram-api/diagramAPI.js';
-import type { D3Element } from '../../mermaidAPI.js';
+import type { D3Element } from '../../types.js';
 import { sanitizeText } from '../../diagrams/common/common.js';
 import { log } from '../../logger.js';
 import type { MindmapNode } from './mindmapTypes.js';
--- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
@ -6,7 +6,7 @@ import type { MermaidConfig } from '../../config.type.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import type { DrawDefinition } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
-import type { D3Element } from '../../mermaidAPI.js';
+import type { D3Element } from '../../types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 import { setupGraphViewbox } from '../../setupGraphViewbox.js';
 import type { FilledMindMapNode, MindmapDB, MindmapNode } from './mindmapTypes.js';
--- a/packages/mermaid/src/diagrams/mindmap/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/mindmap/svgDraw.ts
@ -1,7 +1,6 @@
-import type { D3Element } from '../../mermaidAPI.js';
 import { createText } from '../../rendering-util/createText.js';
 import type { FilledMindMapNode, MindmapDB } from './mindmapTypes.js';
-import type { Point } from '../../types.js';
+import type { Point, D3Element } from '../../types.js';
 import { parseFontSize } from '../../utils.js';
 import type { MermaidConfig } from '../../config.type.js';

--- a/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison
+++ b/packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison
@ -33,7 +33,7 @@
 "actor"                                                   		{ this.begin('ID'); return 'participant_actor'; }
 "create"                                                        return 'create';
 "destroy"                                                       { this.begin('ID'); return 'destroy'; }
-<ID>[^\->:\n,;]+?([\-]*[^\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$)     { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
+<ID>[^\<->\->:\n,;]+?([\-]*[^\<->\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$)     { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
 <ALIAS>"as"                                                     { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
 <ALIAS>(?:)                                                     { this.popState(); this.popState(); return 'NEWLINE'; }
 "loop"                                                          { this.begin('LINE'); return 'loop'; }
@ -73,9 +73,11 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 "off"															return 'off';
 ","                                                             return ',';
 ";"                                                             return 'NEWLINE';
-[^\+\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)))[\-]*[^\+\->:\n,;]+)*             { yytext = yytext.trim(); return 'ACTOR'; }
+[^\+\<->\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)))[\-]*[^\+\<->\->:\n,;]+)*             { yytext = yytext.trim(); return 'ACTOR'; }
 "->>"                                                           return 'SOLID_ARROW';
+"<<->>"                                                           return 'BIDIRECTIONAL_SOLID_ARROW';
 "-->>"                                                          return 'DOTTED_ARROW';
+"<<-->>"                                                          return 'BIDIRECTIONAL_DOTTED_ARROW';
 "->"                                                            return 'SOLID_OPEN_ARROW';
 "-->"                                                           return 'DOTTED_OPEN_ARROW';
 \-[x]                                                           return 'SOLID_CROSS';
@ -310,7 +312,9 @@ signaltype
 	: SOLID_OPEN_ARROW  { $$ = yy.LINETYPE.SOLID_OPEN; }
 	| DOTTED_OPEN_ARROW { $$ = yy.LINETYPE.DOTTED_OPEN; }
 	| SOLID_ARROW       { $$ = yy.LINETYPE.SOLID; }
+  | BIDIRECTIONAL_SOLID_ARROW       { $$ = yy.LINETYPE.BIDIRECTIONAL_SOLID; }
 	| DOTTED_ARROW      { $$ = yy.LINETYPE.DOTTED; }
+	| BIDIRECTIONAL_DOTTED_ARROW      { $$ = yy.LINETYPE.BIDIRECTIONAL_DOTTED; }
 	| SOLID_CROSS       { $$ = yy.LINETYPE.SOLID_CROSS; }
 	| DOTTED_CROSS      { $$ = yy.LINETYPE.DOTTED_CROSS; }
 	| SOLID_POINT { $$ = yy.LINETYPE.SOLID_POINT; }
--- a/packages/mermaid/src/diagrams/sequence/sequenceDb.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.ts
@ -328,6 +328,8 @@ export const LINETYPE = {
  BREAK_START: 30,
  BREAK_END: 31,
  PAR_OVER_START: 32,
+  BIDIRECTIONAL_SOLID: 33,
+  BIDIRECTIONAL_DOTTED: 34,
 };

 export const ARROWTYPE = {
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
@ -516,6 +516,36 @@ Alice->>Bob:Hello Bob, how are you?`;
    expect(messages.length).toBe(1);
    expect(messages[0].type).toBe(diagram.db.LINETYPE.DOTTED);
  });
+  it('should handle bidirectional arrow messages', async () => {
+    const str = `
+sequenceDiagram
+Alice<<->>Bob:Hello Bob, how are you?`;
+
+    await mermaidAPI.parse(str);
+    const actors = diagram.db.getActors();
+    expect(actors.get('Alice').description).toBe('Alice');
+    expect(actors.get('Bob').description).toBe('Bob');
+
+    const messages = diagram.db.getMessages();
+
+    expect(messages.length).toBe(1);
+    expect(messages[0].type).toBe(diagram.db.LINETYPE.BIDIRECTIONAL_SOLID);
+  });
+  it('should handle bidirectional dotted arrow messages', async () => {
+    const str = `
+    sequenceDiagram
+    Alice<<-->>Bob:Hello Bob, how are you?`;
+
+    await mermaidAPI.parse(str);
+    const actors = diagram.db.getActors();
+    expect(actors.get('Alice').description).toBe('Alice');
+    expect(actors.get('Bob').description).toBe('Bob');
+
+    const messages = diagram.db.getMessages();
+
+    expect(messages.length).toBe(1);
+    expect(messages[0].type).toBe(diagram.db.LINETYPE.BIDIRECTIONAL_DOTTED);
+  });
  it('should handle actor activation', async () => {
    const str = `
 sequenceDiagram
@ -1645,7 +1675,6 @@ it should handle one actor, when textPlacement is ${textPlacement}`, async () =>
 sequenceDiagram
 participant Alice`;

-      // mermaidAPI.reinitialize({ sequence: { textPlacement: textPlacement } });
      await mermaidAPI.parse(str);
      // diagram.renderer.setConf(mermaidAPI.getConfig().sequence);
      await diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@ -436,7 +436,8 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
    type === diagObj.db.LINETYPE.DOTTED ||
    type === diagObj.db.LINETYPE.DOTTED_CROSS ||
    type === diagObj.db.LINETYPE.DOTTED_POINT ||
-    type === diagObj.db.LINETYPE.DOTTED_OPEN
+    type === diagObj.db.LINETYPE.DOTTED_OPEN ||
+    type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED
  ) {
    line.style('stroke-dasharray', '3, 3');
    line.attr('class', 'messageLine1');
@ -462,6 +463,13 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
  if (type === diagObj.db.LINETYPE.SOLID || type === diagObj.db.LINETYPE.DOTTED) {
    line.attr('marker-end', 'url(' + url + '#arrowhead)');
  }
+  if (
+    type === diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID ||
+    type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED
+  ) {
+    line.attr('marker-start', 'url(' + url + '#arrowhead)');
+    line.attr('marker-end', 'url(' + url + '#arrowhead)');
+  }
  if (type === diagObj.db.LINETYPE.SOLID_POINT || type === diagObj.db.LINETYPE.DOTTED_POINT) {
    line.attr('marker-end', 'url(' + url + '#filled-head)');
  }
@ -1036,6 +1044,8 @@ export const draw = async function (_text: string, id: string, _version: string,
        diagObj.db.LINETYPE.DOTTED_CROSS,
        diagObj.db.LINETYPE.SOLID_POINT,
        diagObj.db.LINETYPE.DOTTED_POINT,
+        diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID,
+        diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED,
      ].includes(msg.type)
    ) {
      sequenceIndex = sequenceIndex + sequenceIndexStep;
@ -1416,6 +1426,8 @@ const buildMessageModel = function (msg, actors, diagObj) {
      diagObj.db.LINETYPE.DOTTED_CROSS,
      diagObj.db.LINETYPE.SOLID_POINT,
      diagObj.db.LINETYPE.DOTTED_POINT,
+      diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID,
+      diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED,
    ].includes(msg.type)
  ) {
    return {};
@ -1423,7 +1435,7 @@ const buildMessageModel = function (msg, actors, diagObj) {
  const [fromLeft, fromRight] = activationBounds(msg.from, actors);
  const [toLeft, toRight] = activationBounds(msg.to, actors);
  const isArrowToRight = fromLeft <= toLeft;
-  const startx = isArrowToRight ? fromRight : fromLeft;
+  let startx = isArrowToRight ? fromRight : fromLeft;
  let stopx = isArrowToRight ? toLeft : toRight;

  // As the line width is considered, the left and right values will be off by 2.
@ -1462,6 +1474,17 @@ const buildMessageModel = function (msg, actors, diagObj) {
    if (![diagObj.db.LINETYPE.SOLID_OPEN, diagObj.db.LINETYPE.DOTTED_OPEN].includes(msg.type)) {
      stopx += adjustValue(3);
    }
+
+    /**
+     * Shorten start position of bidirectional arrow to accommodate for second arrowhead
+     */
+    if (
+      [diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID, diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED].includes(
+        msg.type
+      )
+    ) {
+      startx -= adjustValue(3);
+    }
  }

  const allBounds = [fromLeft, fromRight, toLeft, toRight];
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@ -415,11 +415,11 @@ const drawActorTypeActor = async function (elem, actor, conf, isFooter) {
  const center = actor.x + actor.width / 2;
  const centerY = actorY + 80;

-  elem.lower();
+  const line = elem.append('g').lower();

  if (!isFooter) {
    actorCnt++;
-    elem
+    line
      .append('line')
      .attr('id', 'actor' + actorCnt)
      .attr('x1', center)
@ -735,7 +735,7 @@ export const insertArrowHead = function (elem) {
    .attr('markerUnits', 'userSpaceOnUse')
    .attr('markerWidth', 12)
    .attr('markerHeight', 12)
-    .attr('orient', 'auto')
+    .attr('orient', 'auto-start-reverse')
    .append('path')
    .attr('d', 'M -1 0 L 10 5 L 0 10 z'); // this is actual shape for arrowhead
 };
--- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts
+++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
@ -143,7 +143,7 @@ function transformDataWithoutCategory(data: number[]): SimplePlotDataType {
  if (isLinearAxisData(xyChartData.xAxis)) {
    const min = xyChartData.xAxis.min;
    const max = xyChartData.xAxis.max;
-    const step = (max - min + 1) / data.length;
+    const step = (max - min) / (data.length - 1);
    const categories: string[] = [];
    for (let i = min; i <= max; i += step) {
      categories.push(`${i}`);
--- a/packages/mermaid/src/docs/community/contributing.md
+++ b/packages/mermaid/src/docs/community/contributing.md
@ -52,7 +52,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 18
+pnpm env use --global 20
 ```

 You may also need to reload `.shrc` or `.bashrc` afterwards.
--- a/packages/mermaid/src/docs/config/theming.md
+++ b/packages/mermaid/src/docs/config/theming.md
@ -18,12 +18,12 @@ Themes can now be customized at the site-wide level, or on individual Mermaid di

 ## Site-wide Theme

-To customize themes site-wide, call the `initialize` method on the `mermaidAPI`.
+To customize themes site-wide, call the `initialize` method on the `mermaid`.

 Example of `initialize` call setting `theme` to `base`:

 ```javascript
-mermaidAPI.initialize({
+mermaid.initialize({
  securityLevel: 'loose',
  theme: 'base',
 });
--- a/packages/mermaid/src/docs/config/usage.md
+++ b/packages/mermaid/src/docs/config/usage.md
@ -188,7 +188,7 @@ await mermaid.run({
 ### Calling `mermaid.init` - Deprecated

 ```warning
-mermaid.init is deprecated in v10 and will be removed in v11. Please use mermaid.run instead.
+mermaid.init is deprecated in v10 and will be removed in a future release. Please use mermaid.run instead.
 ```

 By default, `mermaid.init` will be called when the document is ready, finding all elements with
@ -213,10 +213,6 @@ Or with no config object, and a jQuery selection:
 mermaid.init(undefined, $('#someId .yetAnotherClass'));
 ```

-```warning
-This type of integration is deprecated. Instead the preferred way of handling more complex integration is to use the mermaidAPI instead.
-```
-
 ## Usage with webpack

 mermaid fully supports webpack. Here is a [working demo](https://github.com/mermaidjs/mermaid-webpack-demo).
--- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md
+++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
@ -141,18 +141,20 @@ Messages can be of two displayed either solid or with a dotted line.
 [Actor][Arrow][Actor]:Message text
 ```

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

-| 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) |
+| 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)                        |

 ## Activations

@ -205,11 +207,22 @@ sequenceDiagram
    Note over Alice,John: A typical interaction
 ```

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

 ```mermaid-example
 sequenceDiagram
-    Alice->John: Hello John, how are you?
+    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
 ```

--- a/packages/mermaid/src/mermaid.spec.ts
+++ b/packages/mermaid/src/mermaid.spec.ts
@ -207,7 +207,7 @@ describe('when using mermaid and ', () => {
        [Error: Parse error on line 2:
        ...equenceDiagramAlice:->Bob: Hello Bob, h...
        ----------------------^
-        Expecting 'SOLID_OPEN_ARROW', 'DOTTED_OPEN_ARROW', 'SOLID_ARROW', 'DOTTED_ARROW', 'SOLID_CROSS', 'DOTTED_CROSS', 'SOLID_POINT', 'DOTTED_POINT', got 'TXT']
+        Expecting 'SOLID_OPEN_ARROW', 'DOTTED_OPEN_ARROW', 'SOLID_ARROW', 'BIDIRECTIONAL_SOLID_ARROW', 'DOTTED_ARROW', 'BIDIRECTIONAL_DOTTED_ARROW', 'SOLID_CROSS', 'DOTTED_CROSS', 'SOLID_POINT', 'DOTTED_POINT', got 'TXT']
      `);
    });

--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@ -6,7 +6,7 @@ import { dedent } from 'ts-dedent';
 import type { MermaidConfig } from './config.type.js';
 import { log } from './logger.js';
 import utils from './utils.js';
-import type { ParseOptions, ParseResult, RenderResult } from './mermaidAPI.js';
+import type { ParseOptions, ParseResult, RenderResult } from './types.js';
 import { mermaidAPI } from './mermaidAPI.js';
 import { registerLazyLoadedDiagrams, detectType } from './diagram-api/detectType.js';
 import { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js';
@ -277,7 +277,7 @@ if (typeof document !== 'undefined') {
 * ## setParseErrorHandler  Alternative to directly setting parseError using:
 *
 * ```js
- * mermaid.parseError = function(err,hash){=
+ * mermaid.parseError = function(err,hash) {
 *   forExampleDisplayErrorInGui(err);  // do something with the error
 * };
 * ```
@ -408,9 +408,16 @@ const render: typeof mermaidAPI.render = (id, text, container) => {
 export interface Mermaid {
  startOnLoad: boolean;
  parseError?: ParseErrorFunction;
+  /**
+   * @deprecated Use {@link parse} and {@link render} instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
+   * @internal
+   */
  mermaidAPI: typeof mermaidAPI;
  parse: typeof parse;
  render: typeof render;
+  /**
+   * @deprecated Use {@link initialize} and {@link run} instead.
+   */
  init: typeof init;
  run: typeof run;
  registerExternalDiagrams: typeof registerExternalDiagrams;
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@ -69,6 +69,7 @@ vi.mock('stylis', () => {
 import { compile, serialize } from 'stylis';
 import { decodeEntities, encodeEntities } from './utils.js';
 import { Diagram } from './Diagram.js';
+import { toBase64 } from './utils/base64.js';

 /**
 * @see https://vitest.dev/guide/mocking.html Mock part of a module
@ -176,7 +177,7 @@ describe('mermaidAPI', () => {
  });

  describe('putIntoIFrame', () => {
-    const inputSvgCode = 'this is the SVG code';
+    const inputSvgCode = 'this is the SVG code ⛵';

    it('uses the default SVG iFrame height is used if no svgElement given', () => {
      const result = putIntoIFrame(inputSvgCode);
@ -199,11 +200,10 @@ describe('mermaidAPI', () => {
    });

    it('sets src to base64 version of <body style="IFRAME_SVG_BODY_STYLE">svgCode<//body>', () => {
-      const base64encodedSrc = btoa('<body style="' + 'margin:0' + '">' + inputSvgCode + '</body>');
-      const expectedRegExp = new RegExp('src="data:text/html;base64,' + base64encodedSrc + '"');
-
+      const base64encodedSrc = toBase64(`<body style="margin:0">${inputSvgCode}</body>`);
+      const expectedSrc = `src="data:text/html;charset=UTF-8;base64,${base64encodedSrc}"`;
      const result = putIntoIFrame(inputSvgCode);
-      expect(result).toMatch(expectedRegExp);
+      expect(result).toContain(expectedSrc);
    });

    it('uses the height and appends px from the svgElement given', () => {
@ -593,7 +593,6 @@ describe('mermaidAPI', () => {
          mermaidAPI.initialize({ securityLevel: 'loose' });
        },
      };
-      // mermaidAPI.reinitialize(config);
      expect(mermaidAPI.getConfig().secure).toEqual(mermaidAPI.getSiteConfig().secure);
      expect(mermaidAPI.getConfig().securityLevel).toBe('strict');
      mermaidAPI.reset();
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@ -1,14 +1,6 @@
 /**
- * This is the API to be used when optionally handling the integration with the web page, instead of
- * using the default integration provided by mermaid.js.
- *
- * The core of this api is the [**render**](Setup.md?id=render) function which, given a graph
- * definition as text, renders the graph/diagram and returns an svg element for the graph.
- *
- * It is then up to the user of the API to make use of the svg, either insert it somewhere in the
- * page or do something completely different.
- *
- * In addition to the render function, a number of behavioral configuration options are available.
+ * This file contains functions that are used internally by mermaid
+ * and is not intended to be used by the end user.
 */
 // @ts-ignore TODO: Investigate D3 issue
 import { select } from 'd3';
@ -31,6 +23,8 @@ import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.
 import type { DiagramMetadata, DiagramStyleClassDef } from './diagram-api/types.js';
 import { preprocessDiagram } from './preprocess.js';
 import { decodeEntities } from './utils.js';
+import { toBase64 } from './utils/base64.js';
+import type { D3Element, ParseOptions, ParseResult, RenderResult } from './types.js';

 const MAX_TEXTLENGTH = 50_000;
 const MAX_TEXTLENGTH_EXCEEDED_MSG =
@ -56,44 +50,6 @@ const IFRAME_NOT_SUPPORTED_MSG = 'The "iframe" tag is not supported by your brow
 const DOMPURIFY_TAGS = ['foreignobject'];
 const DOMPURIFY_ATTR = ['dominant-baseline'];

-export interface ParseOptions {
-  /**
-   * If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
-   * The `parseError` function will not be called.
-   */
-  suppressErrors?: boolean;
-}
-
-export interface ParseResult {
-  /**
-   * The diagram type, e.g. 'flowchart', 'sequence', etc.
-   */
-  diagramType: string;
-}
-// This makes it clear that we're working with a d3 selected element of some kind, even though it's hard to specify the exact type.
-export type D3Element = any;
-
-export interface RenderResult {
-  /**
-   * The svg code for the rendered graph.
-   */
-  svg: string;
-  /**
-   * The diagram type, e.g. 'flowchart', 'sequence', etc.
-   */
-  diagramType: string;
-  /**
-   * Bind function to be called after the svg has been inserted into the DOM.
-   * This is necessary for adding event listeners to the elements in the svg.
-   * ```js
-   * const { svg, bindFunctions } = mermaidAPI.render('id1', 'graph TD;A-->B');
-   * div.innerHTML = svg;
-   * bindFunctions?.(div); // To call bindFunctions only if it's present.
-   * ```
-   */
-  bindFunctions?: (element: Element) => void;
-}
-
 function processAndSetConfigs(text: string) {
  const processed = preprocessDiagram(text);
  configApi.reset();
@ -248,14 +204,13 @@ export const cleanUpSvgCode = (
 * @param svgCode - the svg code to put inside the iFrame
 * @param svgElement - the d3 node that has the current svgElement so we can get the height from it
 * @returns  - the code with the iFrame that now contains the svgCode
- * TODO replace btoa(). Replace with  buf.toString('base64')?
 */
 export const putIntoIFrame = (svgCode = '', svgElement?: D3Element): string => {
  const height = svgElement?.viewBox?.baseVal?.height
    ? svgElement.viewBox.baseVal.height + 'px'
    : IFRAME_HEIGHT;
-  const base64encodedSrc = btoa('<body style="' + IFRAME_BODY_STYLE + '">' + svgCode + '</body>');
-  return `<iframe style="width:${IFRAME_WIDTH};height:${height};${IFRAME_STYLES}" src="data:text/html;base64,${base64encodedSrc}" sandbox="${IFRAME_SANDBOX_OPTS}">
+  const base64encodedSrc = toBase64(`<body style="${IFRAME_BODY_STYLE}">${svgCode}</body>`);
+  return `<iframe style="width:${IFRAME_WIDTH};height:${height};${IFRAME_STYLES}" src="data:text/html;charset=UTF-8;base64,${base64encodedSrc}" sandbox="${IFRAME_SANDBOX_OPTS}">
  ${IFRAME_NOT_SUPPORTED_MSG}
 </iframe>`;
 };
@ -568,69 +523,8 @@ function addA11yInfo(
 }

 /**
- * ## mermaidAPI configuration defaults
- *
- * ```ts
- *   const config = {
- *     theme: 'default',
- *     logLevel: 'fatal',
- *     securityLevel: 'strict',
- *     startOnLoad: true,
- *     arrowMarkerAbsolute: false,
- *     suppressErrorRendering: false,
- *
- *     er: {
- *       diagramPadding: 20,
- *       layoutDirection: 'TB',
- *       minEntityWidth: 100,
- *       minEntityHeight: 75,
- *       entityPadding: 15,
- *       stroke: 'gray',
- *       fill: 'honeydew',
- *       fontSize: 12,
- *       useMaxWidth: true,
- *     },
- *     flowchart: {
- *       diagramPadding: 8,
- *       htmlLabels: true,
- *       curve: 'basis',
- *     },
- *     sequence: {
- *       diagramMarginX: 50,
- *       diagramMarginY: 10,
- *       actorMargin: 50,
- *       width: 150,
- *       height: 65,
- *       boxMargin: 10,
- *       boxTextMargin: 5,
- *       noteMargin: 10,
- *       messageMargin: 35,
- *       messageAlign: 'center',
- *       mirrorActors: true,
- *       bottomMarginAdj: 1,
- *       useMaxWidth: true,
- *       rightAngles: false,
- *       showSequenceNumbers: false,
- *     },
- *     gantt: {
- *       titleTopMargin: 25,
- *       barHeight: 20,
- *       barGap: 4,
- *       topPadding: 50,
- *       leftPadding: 75,
- *       gridLineStartPadding: 35,
- *       fontSize: 11,
- *       fontFamily: '"Open Sans", sans-serif',
- *       numberSectionStyles: 4,
- *       axisFormat: '%Y-%m-%d',
- *       topAxis: false,
- *       displayMode: '',
- *     },
- *   };
- *   mermaid.initialize(config);
- * ```
+ * @internal - Use mermaid.function instead of mermaid.mermaidAPI.function
 */
-
 export const mermaidAPI = Object.freeze({
  render,
  parse,
--- a/packages/mermaid/src/rendering-util/createText.ts
+++ b/packages/mermaid/src/rendering-util/createText.ts
@ -21,13 +21,10 @@ function addHtmlSpan(element, node, width, classes, addBackground = false) {

  const label = node.label;
  const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
-  div.html(
-    `<span class="${labelClass} ${classes}" ` +
-      (node.labelStyle ? 'style="' + node.labelStyle + '"' : '') +
-      '>' +
-      label +
-      '</span>'
-  );
+  const span = div.append('span');
+  span.html(label);
+  applyStyle(span, node.labelStyle);
+  span.attr('class', `${labelClass} ${classes}`);

  applyStyle(div, node.labelStyle);
  div.style('display', 'table-cell');
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@ -154,10 +154,7 @@ properties:
  secure:
    description: |
      This option controls which `currentConfig` keys are considered secure and
-      can only be changed via call to `mermaidAPI.initialize`.
-      Calls to `mermaidAPI.reinitialize` cannot make changes to the secure keys
-      in the current `currentConfig`.
-
+      can only be changed via call to `mermaid.initialize`.
      This prevents malicious graph directives from overriding a site's default security.
    default:
      [
--- a/packages/mermaid/src/types.ts
+++ b/packages/mermaid/src/types.ts
@ -34,3 +34,41 @@ export interface EdgeData {
 }

 export type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
+
+export interface ParseOptions {
+  /**
+   * If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
+   * The `parseError` function will not be called.
+   */
+  suppressErrors?: boolean;
+}
+
+export interface ParseResult {
+  /**
+   * The diagram type, e.g. 'flowchart', 'sequence', etc.
+   */
+  diagramType: string;
+}
+// This makes it clear that we're working with a d3 selected element of some kind, even though it's hard to specify the exact type.
+export type D3Element = any;
+
+export interface RenderResult {
+  /**
+   * The svg code for the rendered graph.
+   */
+  svg: string;
+  /**
+   * The diagram type, e.g. 'flowchart', 'sequence', etc.
+   */
+  diagramType: string;
+  /**
+   * Bind function to be called after the svg has been inserted into the DOM.
+   * This is necessary for adding event listeners to the elements in the svg.
+   * ```js
+   * const { svg, bindFunctions } = await mermaid.render('id1', 'graph TD;A-->B');
+   * div.innerHTML = svg;
+   * bindFunctions?.(div); // To call bindFunctions only if it's present.
+   * ```
+   */
+  bindFunctions?: (element: Element) => void;
+}
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@ -32,8 +32,7 @@ import type { MermaidConfig } from './config.type.js';
 import memoize from 'lodash-es/memoize.js';
 import merge from 'lodash-es/merge.js';
 import { directiveRegex } from './diagram-api/regexes.js';
-import type { D3Element } from './mermaidAPI.js';
-import type { Point, TextDimensionConfig, TextDimensions } from './types.js';
+import type { D3Element, Point, TextDimensionConfig, TextDimensions } from './types.js';

 export const ZERO_WIDTH_SPACE = '\u200b';

--- a/packages/mermaid/src/utils/base64.ts
+++ b/packages/mermaid/src/utils/base64.ts
@ -0,0 +1,6 @@
+export function toBase64(str: string) {
+  // ref: https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem
+  const utf8Bytes = new TextEncoder().encode(str);
+  const utf8Str = Array.from(utf8Bytes, (byte) => String.fromCodePoint(byte)).join('');
+  return btoa(utf8Str);
+}
--- a/patches/cytoscape@3.28.1.patch
+++ b/patches/cytoscape@3.28.1.patch
@ -1,20 +0,0 @@
-diff --git a/package.json b/package.json
-index f2f77fa79c99382b079f4051ed51eafe8d2379c8..0bfddf55394e86f3a386eb7ab681369d410bae07 100644
--- a/package.json
-+++ b/package.json
-@@ -30,7 +30,15 @@
-   "engines": {
-     "node": ">=0.10"
-   },
-+  "exports": {
-+    ".": {
-+      "import": "./dist/cytoscape.umd.js",
-+      "default": "./dist/cytoscape.cjs.js"
-+    },
-+    "./*": "./*"
-+  },
-   "main": "dist/cytoscape.cjs.js",
-+  "module": "dist/cytoscape.umd.js",
-   "unpkg": "dist/cytoscape.min.js",
-   "jsdelivr": "dist/cytoscape.min.js",
-   "scripts": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/vitest.workspace.js
+++ b/vitest.workspace.js
@ -0,0 +1,3 @@
+import { defineWorkspace } from 'vitest/config';
+
+export default defineWorkspace(['./vite.config.ts', './packages/mermaid/src/docs/vite.config.ts']);