Merge branch 'develop' into pr/weedySeaDragon/3814

* develop: (815 commits) Move filetype Recommendations to the top Update docs Update integrations.md per review Disable coveralls Update coveralls Ignore bundlephobia Update docs strawman extension and mime type docs Update docs Rename info to note Rename "info" to "note" Update all patch dependencies Fix Directives Documentation Run docs:build Update tutorial link Run build Fix link to Tutorials from n00b-overview page Correct timeline spelling UPdated version to 10.2.3 Remove old changelog ...
2023-06-15 09:49:26 +05:30 · 2023-06-15 09:49:26 +05:30 · 1a6fd69f65
parent a497909446 56a9625d95
commit 1a6fd69f65
507 changed files with 31923 additions and 16485 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -3,4 +3,6 @@ dist/**
 docs/Setup.md
 cypress.config.js
 cypress/plugins/index.js
-coverage
+coverage
+*.json
+node_modules
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -0,0 +1,150 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    'jest/globals': true,
+    node: true,
+  },
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    tsconfigRootDir: __dirname,
+    sourceType: 'module',
+    ecmaVersion: 2020,
+    allowAutomaticSingleRunInference: true,
+    project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
+    parser: '@typescript-eslint/parser',
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:json/recommended',
+    'plugin:markdown/recommended',
+    'plugin:@cspell/recommended',
+    'prettier',
+  ],
+  plugins: [
+    '@typescript-eslint',
+    'no-only-tests',
+    'html',
+    'jest',
+    'jsdoc',
+    'json',
+    '@cspell',
+    'lodash',
+    'unicorn',
+  ],
+  rules: {
+    curly: 'error',
+    'no-console': 'error',
+    'no-prototype-builtins': 'off',
+    'no-unused-vars': 'off',
+    'cypress/no-async-tests': 'off',
+    '@typescript-eslint/no-floating-promises': 'error',
+    '@typescript-eslint/no-misused-promises': 'error',
+    '@typescript-eslint/ban-ts-comment': [
+      'error',
+      {
+        'ts-expect-error': 'allow-with-description',
+        'ts-ignore': 'allow-with-description',
+        'ts-nocheck': 'allow-with-description',
+        'ts-check': 'allow-with-description',
+        minimumDescriptionLength: 10,
+      },
+    ],
+    'json/*': ['error', 'allowComments'],
+    '@cspell/spellchecker': [
+      'error',
+      {
+        checkIdentifiers: false,
+        checkStrings: false,
+        checkStringTemplates: false,
+      },
+    ],
+    'no-empty': [
+      'error',
+      {
+        allowEmptyCatch: true,
+      },
+    ],
+    'no-only-tests/no-only-tests': 'error',
+    'lodash/import-scope': ['error', 'method'],
+    'unicorn/better-regex': 'error',
+    'unicorn/no-abusive-eslint-disable': 'error',
+    'unicorn/no-array-push-push': 'error',
+    'unicorn/no-for-loop': 'error',
+    'unicorn/no-instanceof-array': 'error',
+    'unicorn/no-typeof-undefined': 'error',
+    'unicorn/no-unnecessary-await': 'error',
+    'unicorn/no-unsafe-regex': 'warn',
+    'unicorn/no-useless-promise-resolve-reject': 'error',
+    'unicorn/prefer-array-find': 'error',
+    'unicorn/prefer-array-flat-map': 'error',
+    'unicorn/prefer-array-index-of': 'error',
+    'unicorn/prefer-array-some': 'error',
+    'unicorn/prefer-default-parameters': 'error',
+    'unicorn/prefer-includes': 'error',
+    'unicorn/prefer-negative-index': 'error',
+    'unicorn/prefer-object-from-entries': 'error',
+    'unicorn/prefer-string-starts-ends-with': 'error',
+    'unicorn/prefer-string-trim-start-end': 'error',
+    'unicorn/string-content': 'error',
+    'unicorn/prefer-spread': 'error',
+    'unicorn/no-lonely-if': 'error',
+  },
+  overrides: [
+    {
+      files: ['cypress/**', 'demos/**'],
+      rules: {
+        'no-console': 'off',
+      },
+    },
+    {
+      files: ['*.{js,jsx,mjs,cjs}'],
+      extends: ['plugin:jsdoc/recommended'],
+      rules: {
+        'jsdoc/check-indentation': 'off',
+        'jsdoc/check-alignment': 'off',
+        'jsdoc/check-line-alignment': 'off',
+        'jsdoc/multiline-blocks': 'off',
+        'jsdoc/newline-after-description': 'off',
+        'jsdoc/tag-lines': 'off',
+        'jsdoc/require-param-description': 'off',
+        'jsdoc/require-param-type': 'off',
+        'jsdoc/require-returns': 'off',
+        'jsdoc/require-returns-description': 'off',
+      },
+    },
+    {
+      files: ['*.{ts,tsx}'],
+      plugins: ['tsdoc'],
+      rules: {
+        'tsdoc/syntax': 'error',
+      },
+    },
+    {
+      files: ['*.spec.{ts,js}', 'cypress/**', 'demos/**', '**/docs/**'],
+      rules: {
+        'jsdoc/require-jsdoc': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+      },
+    },
+    {
+      files: ['*.html', '*.md', '**/*.md/*'],
+      rules: {
+        'no-var': 'error',
+        'no-undef': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+        '@typescript-eslint/no-floating-promises': 'off',
+        '@typescript-eslint/no-misused-promises': 'off',
+      },
+      parserOptions: {
+        project: null,
+      },
+    },
+  ],
+};
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -1,114 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es6": true,
-    "jest/globals": true,
-    "node": true
-  },
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "experimentalObjectRestSpread": true,
-      "jsx": true
-    },
-    "sourceType": "module"
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:json/recommended",
-    "plugin:markdown/recommended",
-    "plugin:@cspell/recommended",
-    "prettier"
-  ],
-  "plugins": [
-    "@typescript-eslint",
-    "no-only-tests",
-    "html",
-    "jest",
-    "jsdoc",
-    "json",
-    "@cspell",
-    "lodash"
-  ],
-  "rules": {
-    "curly": "error",
-    "no-console": "error",
-    "no-prototype-builtins": "off",
-    "no-unused-vars": "off",
-    "cypress/no-async-tests": "off",
-    "@typescript-eslint/ban-ts-comment": [
-      "error",
-      {
-        "ts-expect-error": "allow-with-description",
-        "ts-ignore": "allow-with-description",
-        "ts-nocheck": "allow-with-description",
-        "ts-check": "allow-with-description",
-        "minimumDescriptionLength": 10
-      }
-    ],
-    "json/*": ["error", "allowComments"],
-    "@cspell/spellchecker": [
-      "error",
-      {
-        "checkIdentifiers": false,
-        "checkStrings": false,
-        "checkStringTemplates": false
-      }
-    ],
-    "no-empty": [
-      "error",
-      {
-        "allowEmptyCatch": true
-      }
-    ],
-    "no-only-tests/no-only-tests": "error",
-    "lodash/import-scope": ["error", "method"]
-  },
-  "overrides": [
-    {
-      "files": ["cypress/**", "demos/**"],
-      "rules": {
-        "no-console": "off"
-      }
-    },
-    {
-      "files": ["*.{js,jsx,mjs,cjs}"],
-      "extends": ["plugin:jsdoc/recommended"],
-      "rules": {
-        "jsdoc/check-indentation": "off",
-        "jsdoc/check-alignment": "off",
-        "jsdoc/check-line-alignment": "off",
-        "jsdoc/multiline-blocks": "off",
-        "jsdoc/newline-after-description": "off",
-        "jsdoc/tag-lines": "off",
-        "jsdoc/require-param-description": "off",
-        "jsdoc/require-param-type": "off",
-        "jsdoc/require-returns": "off",
-        "jsdoc/require-returns-description": "off"
-      }
-    },
-    {
-      "files": ["*.{ts,tsx}"],
-      "plugins": ["tsdoc"],
-      "rules": {
-        "tsdoc/syntax": "error"
-      }
-    },
-    {
-      "files": ["*.spec.{ts,js}", "cypress/**", "demos/**", "**/docs/**"],
-      "rules": {
-        "jsdoc/require-jsdoc": "off",
-        "@typescript-eslint/no-unused-vars": "off"
-      }
-    },
-    {
-      "files": ["*.html", "*.md", "**/*.md/*"],
-      "rules": {
-        "no-var": "error",
-        "no-undef": "off",
-        "@typescript-eslint/no-unused-vars": "off"
-      }
-    }
-  ]
-}
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@ -1,6 +1,8 @@
 # These are supported funding model platforms

-github: [knsv]
+github:
+  - knsv
+  - sidharthv96
 #patreon: # Replace with a single Patreon username
 #open_collective: # Replace with a single Open Collective username
 #ko_fi: # Replace with a single Ko-fi username
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@ -50,19 +50,11 @@ body:
    attributes:
      label: Setup
      description: |-
-        Please fill out the below info.
-        Note that you only need to fill out one and not both sections.
+        Please fill out the info below.
+        Note that you only need to fill out the relevant section
      value: |-
-        **Desktop**
-
-        - OS and Version: [Windows, Linux, Mac, ...]
+        - Mermaid version: 
        - Browser and Version: [Chrome, Edge, Firefox]
-
-        **Smartphone**
-
-        - Device: [Samsung, iPhone, ...]
-        - OS and Version: [Android, iOS, ...]
-        - Browser and Version: [Chrome, Safari, ...]
  - type: textarea
    attributes:
      label: Additional Context
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -1,4 +1,4 @@
-blank_issues_enabled: false
+blank_issues_enabled: true
 contact_links:
  - name: GitHub Discussions
    url: https://github.com/mermaid-js/mermaid/discussions
--- a/.github/ISSUE_TEMPLATE/diagram_proposal.yml
+++ b/.github/ISSUE_TEMPLATE/diagram_proposal.yml
@ -3,6 +3,7 @@ description: Suggest a new Diagram Type to add to Mermaid.
 labels:
  - 'Status: Triage'
  - 'Type: Enhancement'
+  - 'Type: New Diagram'

 body:
  - type: markdown
@ -17,6 +18,14 @@ body:
        - Use a clear and concise title
        - Fill out the text fields with as much detail as possible.
        - Never be shy to give us screenshots and/or code samples. It will help!
+
+        ## Example issues
+
+        Refer to the discussions here to get an idea of how the diagram syntax is created.
+
+        - https://github.com/mermaid-js/mermaid/issues/4269
+        - https://github.com/mermaid-js/mermaid/issues/4282
+
  - type: textarea
    attributes:
      label: Proposal
@ -35,8 +44,17 @@ body:
      description: If applicable, add screenshots to show possible examples of how the diagram may look like.
  - type: textarea
    attributes:
-      label: Code Sample
+      label: Syntax
      description: |-
-        If applicable, add a code sample for how to implement this new diagram.
-        The text will automatically be rendered as JavaScript code.
-      render: javascript
+        If possible, include a syntax which could be used to write the diagram.
+        Try to add one or two examples of valid use-cases here.
+  - type: dropdown
+    id: implementation
+    attributes:
+      label: Implementation
+      description: |-
+        Would you like to implement this yourself, or is it a proposal for the community?
+        If there is no corresponding PR from your side after 30 days, the diagram will be open for everyone to implement.
+      options:
+        - I will try and implement it myself.
+        - This is a proposal which I'd love to see built into mermaid by the wonderful community.
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@ -14,4 +14,5 @@ Make sure you

 - [ ] :book: have read the [contribution guidelines](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)
 - [ ] :computer: have added unit/e2e tests (if appropriate)
+- [ ] :notebook: have added documentation (if appropriate)
 - [ ] :bookmark: targeted `develop` branch
--- a/.github/workflows/build-docs.yml
+++ b/.github/workflows/build-docs.yml
@ -0,0 +1,29 @@
+name: Build Vitepress docs
+
+on:
+  pull_request:
+
+permissions:
+  contents: read
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          cache: pnpm
+          node-version: 18
+
+      - name: Install Packages
+        run: pnpm install --frozen-lockfile
+
+      - name: Run Build
+        run: pnpm --filter mermaid run docs:build:vitepress
--- a/.github/workflows/dependency-review.yml
+++ b/.github/workflows/dependency-review.yml
@ -17,4 +17,4 @@ jobs:
      - name: 'Checkout Repository'
        uses: actions/checkout@v3
      - name: 'Dependency Review'
-        uses: actions/dependency-review-action@v2
+        uses: actions/dependency-review-action@v3
--- a/.github/workflows/e2e-applitools.yml
+++ b/.github/workflows/e2e-applitools.yml
@ -38,15 +38,8 @@ jobs:
      - name: Setup Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
-          cache: pnpm
          node-version: ${{ matrix.node-version }}

-      - name: Install Packages
-        run: |
-          pnpm install --frozen-lockfile
-        env:
-          CYPRESS_CACHE_FOLDER: .cache/Cypress
-
      - if: ${{ env.USE_APPLI }}
        name: Notify applitools of new batch
        # Copied from docs https://applitools.com/docs/topics/integrations/github-integration-ci-setup.html
@ -54,19 +47,22 @@ jobs:
        env:
          # e.g. mermaid-js/mermaid/my-branch
          APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
-          APPLITOOLS_PARENT_BRANCH: ${{ github.inputs.parent_branch }}
+          APPLITOOLS_PARENT_BRANCH: ${{ github.event.inputs.parent_branch }}
          APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
          APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'

-      - name: Run E2E Tests
-        run: pnpm run e2e
+      - name: Cypress run
+        uses: cypress-io/github-action@v4
+        id: cypress
+        with:
+          start: pnpm run dev
+          wait-on: 'http://localhost:9000'
        env:
-          CYPRESS_CACHE_FOLDER: .cache/Cypress
          # Mermaid applitools.config.js uses this to pick batch name.
          APPLI_BRANCH: ${{ github.ref_name }}
          APPLITOOLS_BATCH_ID: ${{ github.sha }}
          # e.g. mermaid-js/mermaid/my-branch
          APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
-          APPLITOOLS_PARENT_BRANCH: ${{ github.inputs.parent_branch }}
+          APPLITOOLS_PARENT_BRANCH: ${{ github.event.inputs.parent_branch }}
          APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
          APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@ -21,17 +21,14 @@ jobs:

      - name: Setup Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
-        # Need to skip setup if Cypress run is skipped, otherwise an error
-        # is thrown since the pnpm cache step fails
-        if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
        with:
-          cache: pnpm
          node-version: ${{ matrix.node-version }}

      # Install NPM dependencies, cache them correctly
      # and run all Cypress tests
      - name: Cypress run
        uses: cypress-io/github-action@v4
+        id: cypress
        # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
        # Otherwise (e.g. if running from fork), we run on a single container only
        if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
@ -44,3 +41,10 @@ jobs:
          parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
        env:
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+
+      - name: Upload Artifacts
+        uses: actions/upload-artifact@v3
+        if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
+        with:
+          name: error-snapshots
+          path: cypress/snapshots/**/__diff_output__/*
--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@ -13,11 +13,11 @@ on:
      - master
  pull_request:
    branches:
-      - develop
      - master
+  workflow_dispatch:
  schedule:
    # * is a special character in YAML so you have to quote this string
-    - cron: '30 8 * * 5'
+    - cron: '30 8 * * *'

 jobs:
  linkChecker:
@ -36,9 +36,16 @@ jobs:
          restore-keys: cache-lychee-

      - name: Link Checker
-        uses: lycheeverse/lychee-action@v1.5.4
+        uses: lycheeverse/lychee-action@v1.8.0
        with:
-          args: --verbose --no-progress --cache --max-cache-age 1d packages/mermaid/src/docs/**/*.md README.md README.zh-CN.md
+          args: >-
+            --verbose
+            --no-progress
+            --cache
+            --max-cache-age 1d
+            packages/mermaid/src/docs/**/*.md
+            README.md
+            README.zh-CN.md
          fail: true
          jobSummary: true
        env:
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@ -7,9 +7,10 @@ on:
      - opened
      - synchronize
      - ready_for_review
+  workflow_dispatch:

 permissions:
-  contents: read
+  contents: write

 jobs:
  lint:
@ -36,8 +37,35 @@ jobs:
          CYPRESS_CACHE_FOLDER: .cache/Cypress

      - name: Run Linting
-        run: pnpm run lint
+        shell: bash
+        run: |
+          if ! pnpm run lint; then
+              # print a nice error message on lint failure
+              ERROR_MESSAGE='Running `pnpm run lint` failed.'
+              ERROR_MESSAGE+=' Running `pnpm -w run lint:fix` may fix this issue. '
+              ERROR_MESSAGE+=" If this error doesn't occur on your local machine,"
+              ERROR_MESSAGE+=' make sure your packages are up-to-date by running `pnpm install`.'
+              ERROR_MESSAGE+=' You may also need to delete your prettier cache by running'
+              ERROR_MESSAGE+=' `rm ./node_modules/.cache/prettier/.prettier-cache`.'
+              echo "::error title=Lint failure::${ERROR_MESSAGE}"
+              # make sure to return an error exitcode so that GitHub actions shows a red-cross
+              exit 1
+          fi

      - name: Verify Docs
+        id: verifyDocs
        working-directory: ./packages/mermaid
+        continue-on-error: ${{ github.event_name == 'push' }}
        run: pnpm run docs:verify
+
+      - name: Rebuild Docs
+        if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
+        working-directory: ./packages/mermaid
+        run: pnpm run docs:build
+
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v9
+        if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
+        with:
+          message: 'Update docs'
+          add: 'docs/*'
--- a/.github/workflows/pr-labeler.yml
+++ b/.github/workflows/pr-labeler.yml
@ -8,6 +8,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Label PR
-        uses: TimonVS/pr-labeler-action@v3
+        uses: TimonVS/pr-labeler-action@v4
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/publish-docs.yml
+++ b/.github/workflows/publish-docs.yml
@ -6,9 +6,6 @@ on:
    branches:
      - master

-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
  contents: read
@ -40,7 +37,7 @@ jobs:
        run: pnpm install --frozen-lockfile

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

      - name: Run Build
        run: pnpm --filter mermaid run docs:build:vitepress
@ -59,4 +56,4 @@ jobs:
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v2
--- a/.github/workflows/release-preview-publish.yml
+++ b/.github/workflows/release-preview-publish.yml
@ -10,22 +10,30 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - uses: pnpm/action-setup@v2
+
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
+          cache: pnpm
          node-version: 18.x
-      - name: Install Yarn
-        run: npm i yarn --global
+
+      - name: Install Packages
+        run: |
+          pnpm install --frozen-lockfile
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress

      - name: Install Json
        run: npm i json --global

-      - name: Install Packages
-        run: yarn install --frozen-lockfile
-
      - name: Publish
+        working-directory: ./packages/mermaid
        run: |
-          PREVIEW_VERSION=8
+          PREVIEW_VERSION=$(git log --oneline "origin/$GITHUB_REF_NAME" ^"origin/master" | wc -l)
          VERSION=$(echo ${{github.ref}} | tail -c +20)-preview.$PREVIEW_VERSION
          echo $VERSION
          npm version --no-git-tag-version --allow-same-version $VERSION
--- a/.github/workflows/release-publish.yml
+++ b/.github/workflows/release-publish.yml
@ -9,20 +9,23 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
-      - uses: fregante/setup-git-user@v1
+      - uses: fregante/setup-git-user@v2

-      - name: Setup Node.js
+      - uses: pnpm/action-setup@v2
+        # uses version from "packageManager" field in package.json
+
+      - name: Setup Node.js v18
        uses: actions/setup-node@v3
        with:
+          cache: pnpm
          node-version: 18.x
-      - name: Install Yarn
-        run: npm i yarn --global
-
-      - name: Install Json
-        run: npm i json --global

      - name: Install Packages
-        run: yarn install --frozen-lockfile
+        run: |
+          pnpm install --frozen-lockfile
+          npm i json --global
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress

      - name: Prepare release
        run: |
@ -31,7 +34,7 @@ jobs:
          git checkout -t origin/release/$VERSION
          npm version --no-git-tag-version --allow-same-version $VERSION
          git add package.json
-          git commit -m "Bump version $VERSION"
+          git commit -nm "Bump version $VERSION"
          git checkout -t origin/master
          git merge -m "Release $VERSION" --no-ff release/$VERSION
          git push --no-verify
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -33,11 +33,17 @@ jobs:
        run: |
          pnpm run ci --coverage

-      - name: Upload Coverage to Coveralls
-        # it feels a bit weird to use @master, but that's what the docs use
-        # (coveralls also doesn't publish a @v1 we can use)
-        # https://github.com/marketplace/actions/coveralls-github-action
-        uses: coverallsapp/github-action@master
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          flag-name: unit
+      - name: Run ganttDb tests using California timezone
+        env:
+          # Makes sure that gantt db works even in a timezone that has daylight savings
+          # since some days have 25 hours instead of 24.
+          TZ: America/Los_Angeles
+        run: |
+          pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts
+
+      # Coveralls is throwing 500. Disabled for now.
+      # - name: Upload Coverage to Coveralls
+      #   uses: coverallsapp/github-action@v2
+      #   with:
+      #     github-token: ${{ secrets.GITHUB_TOKEN }}
+      #     flag-name: unit
--- a/.gitignore
+++ b/.gitignore
@ -36,3 +36,6 @@ tsconfig.tsbuildinfo
 knsv*.html
 local*.html
 stats/
+
+**/user-avatars/*
+**/contributor-names.json
--- a/.lintstagedrc.mjs
+++ b/.lintstagedrc.mjs
@ -1,5 +1,11 @@
 export default {
-  '!(docs/**/*)*.{ts,js,json,html,md,mts}': ['eslint --fix', 'prettier --write'],
+  '!(docs/**/*)*.{ts,js,html,md,mts}': [
+    'eslint --cache --cache-strategy content --fix',
+    // don't cache prettier yet, since we use `prettier-plugin-jsdoc`,
+    // and prettier doesn't invalidate cache on plugin updates"
+    // https://prettier.io/docs/en/cli.html#--cache
+    'prettier --write',
+  ],
  'cSpell.json': ['ts-node-esm scripts/fixCSpell.ts'],
  '**/*.jison': ['pnpm -w run lint:jison'],
 };
--- a/.lycheeignore
+++ b/.lycheeignore
@ -4,10 +4,11 @@
 # Network error: Forbidden
 https://codepen.io

-# Network error: The certificate was not trusted
-https://mkdocs.org/
-https://osawards.com/javascript/#nominees
-https://osawards.com/javascript/2019
+# Timeout error, maybe Twitter has anti-bot defenses against GitHub's CI servers?
+https://twitter.com/mermaidjs_
+
+# Site is down occasionally
+https://bundlephobia.com/

 # Don't check files that are generated during the build via `pnpm docs:code`
 packages/mermaid/src/docs/config/setup/*
--- a/.npmrc
+++ b/.npmrc
@ -1,3 +1,2 @@
 auto-install-peers=true
 strict-peer-dependencies=false
-use-inline-specifiers-lockfile-format=true
--- a/.percy.yml
+++ b/.percy.yml
@ -1,6 +0,0 @@
-version: 2
-snapshot:
-  widths:
-    - 1280
-discovery:
-  disable-cache: true
--- a/.prettierignore
+++ b/.prettierignore
@ -4,4 +4,5 @@ cypress/platform/xss3.html
 coverage
 # Autogenerated by PNPM
 pnpm-lock.yaml
-stats
+stats
+packages/mermaid/src/docs/.vitepress/components.d.ts
--- a/.tern-project
+++ b/.tern-project
@ -1,15 +0,0 @@
-{
-  "ecmaVersion": 6,
-  "libs": ["browser"],
-  "loadEagerly": [],
-  "dontLoad": ["node_modules/**"],
-  "plugins": {
-    "modules": {},
-    "es_modules": {},
-    "node": {},
-    "doc_comment": {
-      "fullDocs": true,
-      "strong": true
-    }
-  }
-}
--- a/.vite/build.ts
+++ b/.vite/build.ts
@ -3,6 +3,7 @@ import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
 import { readFileSync } from 'fs';
+import typescript from '@rollup/plugin-typescript';
 import { visualizer } from 'rollup-plugin-visualizer';
 import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';

@ -10,6 +11,7 @@ const visualize = process.argv.includes('--visualize');
 const watch = process.argv.includes('--watch');
 const mermaidOnly = process.argv.includes('--mermaid');
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const sourcemap = false;

 type OutputOptions = Exclude<
  Exclude<InlineConfig['build'], undefined>['rollupOptions'],
@ -20,13 +22,14 @@ const visualizerOptions = (packageName: string, core = false): PluginOption[] =>
  if (packageName !== 'mermaid' || !visualize) {
    return [];
  }
-  return ['network', 'treemap', 'sunburst'].map((chartType) =>
-    visualizer({
-      filename: `./stats/${chartType}${core ? '.core' : ''}.html`,
-      template: chartType as TemplateType,
-      gzipSize: true,
-      brotliSize: true,
-    })
+  return ['network', 'treemap', 'sunburst'].map(
+    (chartType) =>
+      visualizer({
+        filename: `./stats/${chartType}${core ? '.core' : ''}.html`,
+        template: chartType as TemplateType,
+        gzipSize: true,
+        brotliSize: true,
+      }) as PluginOption
  );
 };

@ -36,16 +39,16 @@ const packageOptions = {
    packageName: 'mermaid',
    file: 'mermaid.ts',
  },
-  'mermaid-mindmap': {
-    name: 'mermaid-mindmap',
-    packageName: 'mermaid-mindmap',
+  'mermaid-example-diagram': {
+    name: 'mermaid-example-diagram',
+    packageName: 'mermaid-example-diagram',
+    file: 'detector.ts',
+  },
+  'mermaid-zenuml': {
+    name: 'mermaid-zenuml',
+    packageName: 'mermaid-zenuml',
    file: 'detector.ts',
  },
-  // 'mermaid-example-diagram-detector': {
-  //   name: 'mermaid-example-diagram-detector',
-  //   packageName: 'mermaid-example-diagram',
-  //   file: 'detector.ts',
-  // },
 };

 interface BuildOptions {
@ -63,13 +66,13 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
    {
      name,
      format: 'esm',
-      sourcemap: true,
+      sourcemap,
      entryFileNames: `${name}.esm${minify ? '.min' : ''}.mjs`,
    },
    {
      name,
      format: 'umd',
-      sourcemap: true,
+      sourcemap,
      entryFileNames: `${name}${minify ? '.min' : ''}.js`,
    },
  ];
@ -88,7 +91,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
      {
        name,
        format: 'esm',
-        sourcemap: true,
+        sourcemap,
        entryFileNames: `${name}.core.mjs`,
      },
    ];
@ -112,18 +115,19 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
      },
    },
    resolve: {
-      extensions: ['.jison', '.js', '.ts', '.json'],
+      extensions: [],
    },
-    plugins: [jisonPlugin(), ...visualizerOptions(packageName, core)],
+    plugins: [
+      jisonPlugin(),
+      // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
+      typescript({ compilerOptions: { declaration: false } }),
+      ...visualizerOptions(packageName, core),
+    ],
  };

  if (watch && config.build) {
    config.build.watch = {
-      include: [
-        'packages/mermaid-mindmap/src/**',
-        'packages/mermaid/src/**',
-        // 'packages/mermaid-example-diagram/src/**',
-      ],
+      include: ['packages/mermaid-example-diagram/src/**', 'packages/mermaid/src/**'],
    };
  }

@ -131,11 +135,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
 };

 const buildPackage = async (entryName: keyof typeof packageOptions) => {
-  return Promise.allSettled([
-    build(getBuildConfig({ minify: false, entryName })),
-    build(getBuildConfig({ minify: 'esbuild', entryName })),
-    build(getBuildConfig({ minify: false, core: true, entryName })),
-  ]);
+  await build(getBuildConfig({ minify: false, entryName }));
+  await build(getBuildConfig({ minify: 'esbuild', entryName }));
+  await build(getBuildConfig({ minify: false, core: true, entryName }));
 };

 const main = async () => {
@ -146,10 +148,10 @@ const main = async () => {
 };

 if (watch) {
-  build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' }));
+  build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
  if (!mermaidOnly) {
-    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
-    // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-zenuml' }));
  }
 } else if (visualize) {
  await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));
--- a/.vite/server.ts
+++ b/.vite/server.ts
@ -1,14 +1,6 @@
-import express, { NextFunction, Request, Response } from 'express';
+import express from 'express';
+import cors from 'cors';
 import { createServer as createViteServer } from 'vite';
-// import { getBuildConfig } from './build';
-
-const cors = (req: Request, res: Response, next: NextFunction) => {
-  res.header('Access-Control-Allow-Origin', '*');
-  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
-  res.header('Access-Control-Allow-Headers', 'Content-Type');
-
-  next();
-};

 async function createServer() {
  const app = express();
@ -16,14 +8,15 @@ async function createServer() {
  // Create Vite server in middleware mode
  const vite = await createViteServer({
    configFile: './vite.config.ts',
+    mode: 'production',
    server: { middlewareMode: true },
-    appType: 'custom', // don't include Vite's default HTML handling middlewares
+    appType: 'custom', // don't include Vite's default HTML handling middleware
  });

-  app.use(cors);
+  app.use(cors());
  app.use(express.static('./packages/mermaid/dist'));
+  app.use(express.static('./packages/mermaid-zenuml/dist'));
  app.use(express.static('./packages/mermaid-example-diagram/dist'));
-  app.use(express.static('./packages/mermaid-mindmap/dist'));
  app.use(vite.middlewares);
  app.use(express.static('demos'));
  app.use(express.static('cypress/platform'));
@ -33,5 +26,4 @@ async function createServer() {
  });
 }

-// build(getBuildConfig({ minify: false, watch: true }));
 createServer();
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,6 +1,105 @@
-# Change Log
+# Changelog

-// TODO: Populate changelog
+## [10.0.0](https://github.com/mermaid-js/mermaid/releases/tag/v10.0.0)
+
+### Mermaid is ESM only!
+
+We've dropped CJS support. So, you will have to update your import scripts as follows.
+
+```html
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+  mermaid.initialize({ startOnLoad: true });
+</script>
+```
+
+You can keep using v9 by adding the `@9` in the CDN URL.
+
+```diff
+- <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.js"></script>
+```
+
+### mermaid.render is async and doesn't accept callbacks
+
+```js
+// < v10
+mermaid.render('id', 'graph TD;\nA-->B', (svg, bindFunctions) => {
+  element.innerHTML = svg;
+  if (bindFunctions) {
+    bindFunctions(element);
+  }
+});
+
+// Shorter syntax
+if (bindFunctions) {
+  bindFunctions(element);
+}
+// can be replaced with the `?.` shorthand
+bindFunctions?.(element);
+
+// >= v10 with async/await
+const { svg, bindFunctions } = await mermaid.render('id', 'graph TD;\nA-->B');
+element.innerHTML = svg;
+bindFunctions?.(element);
+
+// >= v10 with promise.then
+mermaid.render('id', 'graph TD;A-->B').then(({ svg, bindFunctions }) => {
+  element.innerHTML = svg;
+  bindFunctions?.(element);
+});
+```
+
+### mermaid.parse is async and ParseError is removed
+
+```js
+// < v10
+mermaid.parse(text, parseError);
+
+//>= v10
+await mermaid.parse(text).catch(parseError);
+// or
+try {
+  await mermaid.parse(text);
+} catch (err) {
+  parseError(err);
+}
+```
+
+### Init deprecated and InitThrowsErrors removed
+
+The config passed to `init` was not being used eariler.
+It will now be used.
+The `init` function is deprecated and will be removed in the next major release.
+init currently works as a wrapper to `initialize` and `run`.
+
+```js
+// < v10
+mermaid.init(config, selector, cb);
+
+//>= v10
+mermaid.initialize(config);
+mermaid.run({
+  querySelector: selector,
+  postRenderCallback: cb,
+  suppressErrors: true,
+});
+```
+
+```js
+// < v10
+mermaid.initThrowsErrors(config, selector, cb);
+
+//>= v10
+mermaid.initialize(config);
+mermaid.run({
+  querySelector: selector,
+  postRenderCallback: cb,
+  suppressErrors: false,
+});
+```
+
+// TODO: Populate changelog pre v10

 - Config has a lot of changes
 - globalReset resets to `defaultConfig` instead of current config. Use `reset` instead.
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -1,3 +1,184 @@
 # Contributing

 [Please read about how to contribute documentation and code on the Mermaid documentation site.](https://mermaid-js.github.io/mermaid/#/development)
+
+---
+
+So you want to help? That's great!
+
+![Happy people jumping with excitement](https://media.giphy.com/media/BlVnrxJgTGsUw/giphy.gif)
+
+Here are a few things to know to get you started on the right path.
+
+Below link will help you making a copy of the repository in your local system.
+
+https://docs.github.com/en/get-started/quickstart/fork-a-repo
+
+## Requirements
+
+- [volta](https://volta.sh/) to manage node versions.
+- [Node.js](https://nodejs.org/en/). `volta install node`
+- [pnpm](https://pnpm.io/) package manager. `volta install pnpm`
+
+## Development Installation
+
+```bash
+git clone git@github.com:mermaid-js/mermaid.git
+cd mermaid
+# npx is required for first install as volta support for pnpm is not added yet.
+npx pnpm install
+pnpm test
+```
+
+## Committing code
+
+We make all changes via pull requests. As we have many pull requests from developers new to mermaid, the current approach is to have _knsv, Knut Sveidqvist_ as a main reviewer of changes and merging pull requests. More precisely like this:
+
+- Large changes reviewed by knsv or other developer asked to review by knsv
+- Smaller low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
+- Documentation (updates to the `package/mermaid/src/docs` folder is also allowed via direct commits)
+
+To commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and some describing text.
+
+One example:
+
+`feature/945_state_diagrams`
+
+Another:
+
+`bug/123_nasty_bug_branch`
+
+## Committing documentation
+
+Less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
+
+The documentation is written in **Markdown**. For more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
+
+### Documentation source files are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
+
+The source files for the project documentation are located in the [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) directory. This is where you should make changes.
+The files under `/packages/mermaid/src/docs` are processed to generate the published documentation, and the resulting files are put into the `/docs` directory.
+
+After editing files in the [`/packages/mermaid/src/docs`](packages/mermaid/src/docs) directory, be sure to run `pnpm install` and `pnpm run --filter mermaid docs:build` locally to build the `/docs` directory.
+
+```mermaid
+flowchart LR
+  classDef default fill:#fff,color:black,stroke:black
+
+  source["files in /packages/mermaid/src/docs\n(changes should be done here)"] -- automatic processing\nto generate the final documentation--> published["files in /docs\ndisplayed on the official documentation site"]
+
+```
+
+You can use `note`, `tip`, `warning` and `danger` in triple backticks to add a note, tip, warning or danger box.
+Do not use vitepress specific markdown syntax `::: warning` as it will not be processed correctly.
+
+````
+```note
+Note content
+```
+
+```tip
+Tip content
+```
+
+```warning
+Warning content
+```
+
+```danger
+Danger content
+```
+
+````
+
+**_DO NOT CHANGE FILES IN `/docs`_**
+
+### The official documentation site
+
+**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Vitepress](https://vitepress.vuejs.org/), a simple documentation site generator.**
+
+If you want to preview the whole documentation site on your machine:
+
+```sh
+cd packages/mermaid
+pnpm i
+pnpm docs:dev
+```
+
+You can now build and serve the documentation site:
+
+```sh
+pnpm docs:serve
+```
+
+## Branching
+
+Going forward we will use a git flow inspired approach to branching. So development is done in develop, to do the development in the develop.
+
+Once development is done we branch a release branch from develop for testing.
+
+Once the release happens we merge the release branch to master and kill the release branch.
+
+This means... **branch off your pull request from develop**
+
+## Content of a pull request
+
+A new feature has been born. Great! But without the steps below it might just ... fade away ...
+
+### **Add unit tests for the parsing part**
+
+This is important so that, if someone else does a change to the grammar that does not know about this great feature, gets notified early on when that change breaks the parser. Another important aspect is that without proper parsing tests refactoring is pretty much impossible.
+
+### **Add e2e tests**
+
+This tests the rendering and visual appearance of the diagram. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
+
+To start working with the e2e tests, run `pnpm run dev` to start the dev server, after that start cypress by running `pnpm exec cypress open` in the mermaid folder.
+
+The rendering tests are very straightforward to create. There is a function imgSnapshotTest. This function takes a diagram in text form, the mermaid options and renders that diagram in cypress.
+
+When running in ci it will take a snapshot of the rendered diagram and compare it with the snapshot from last build and flag for review it if it differs.
+
+This is what a rendering test looks like:
+
+```javascript
+it('should render forks and joins', () => {
+  imgSnapshotTest(
+    `
+    stateDiagram
+    state fork_state &lt;&lt;fork&gt;&gt;
+      [*] --> fork_state
+      fork_state --> State2
+      fork_state --> State3
+
+      state join_state &lt;&lt;join&gt;&gt;
+      State2 --> join_state
+      State3 --> join_state
+      join_state --> State4
+      State4 --> [*]
+    `,
+    { logLevel: 0 }
+  );
+  cy.get('svg');
+});
+```
+
+### **Add documentation for it**
+
+Finally, if it is not in the documentation, no one will know about it and then **no one will use it**. Wouldn't that be sad? With all the effort that was put into the feature?
+
+The source files for documentation are in `/packages/mermaid/src/docs` and are written in markdown. Just pick the right section and start typing. See the [Committing Documentation](#committing-documentation) section for more about how the documentation is generated.
+
+#### Adding to or changing the documentation organization
+
+If you want to add a new section or change the organization (structure), then you need to make sure to **change the side navigation** in `mermaid/src/docs/.vitepress/config.js`.
+
+When changes are committed and then released, they become part of the `master` branch and become part of the published documentation on https://mermaid-js.github.io/mermaid/
+
+## Last words
+
+Don't get daunted if it is hard in the beginning. We have a great community with only encouraging words. So if you get stuck, ask for help and hints in the slack forum. If you want to show off something good, show it off there.
+
+[Join our slack community if you want closer contact!](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+
+![A superhero wishing you good luck](https://media.giphy.com/media/l49JHz7kJvl6MCj3G/giphy.gif)
--- a/README.md
+++ b/README.md
@ -1,8 +1,37 @@
-# mermaid
+<p align="center">
+<img src="https://raw.githubusercontent.com/mermaid-js/mermaid/develop/docs/public/favicon.svg" height="150">
+</p>
+<h1 align="center">
+Mermaid
+</h1>
+<p align="center">
+Generate diagrams from markdown-like text.
+<p>
+<p align="center">
+  <a href="https://www.npmjs.com/package/mermaid"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
+<p>

-[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
+<p align="center">
+<a href="https://mermaid.live/"><b>Live Editor!</b></a>
+</p>
+<p align="center">
+ <a href="https://mermaid.js.org">📖 Documentation</a> | <a href="https://mermaid.js.org/intro/">🚀 Getting Started</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 Join Us</a>
+</p>
+<p align="center">
+<a href="./README.zh-CN.md">简体中文</a>
+</p>

-English | [简体中文](./README.zh-CN.md)
+<br>
+<br>
+
+[![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid)
+[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml)
+[![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid)
+[![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master)
+[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
+[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
+[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)

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

@ -10,7 +39,7 @@ English | [简体中文](./README.zh-CN.md)

 **Thanks to all involved, people committing pull requests, people answering questions! 🙏**

-<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
+<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>

 ## About

@ -27,14 +56,12 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia

 Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
 [Tutorials](./docs/config/Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/misc/integrations.md).
+Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).

-You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/misc/integrations.md).
+You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).

 For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/community/n00b-overview.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).

-🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md)
-
 In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.

 <a href="https://applitools.com/">
@ -138,6 +165,13 @@ class Class10 {
  int id
  size()
 }
+namespace Namespace01 {
+  class Class11
+  class Class12 {
+    int id
+    size()
+  }
+}
 ```

 ```mermaid
@ -157,6 +191,13 @@ class Class10 {
  int id
  size()
 }
+namespace Namespace01 {
+  class Class11
+  class Class12 {
+    int id
+    size()
+  }
+}
 ```

 ### State diagram [<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkEFvgzAMhf8K8nEqpYSNthx22Xbcqcexg0sCiZQQlDhIFeK_L8A6TfXp6fOz9ewJGssFVOAJSbwr7ByadGR1n8T6evpO0vQ1uZDSekOrXGFsPqJPO6q-2-imH8f_0TeHXm50lfelsAMjnEHFY6xpMdRAUhhRQxUlFy0GTTXU_RytYeAx-AdXZB1ULWovdoCB7OXWN1CRC-Ju-r3uz6UtchGHJqDbsPygU57iysb2reoWHpyOWBINvsqypb3vFMlw3TfWZF5xiY7keC6zkpUnZIUojwW-FAVvrvn51LLnvOXHQ84Q5nn-AVtLcwk">live editor</a>]
@ -199,6 +240,44 @@ pie

 ### Git graph [experimental - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>]

+### Bar chart (using gantt chart) [<a href="https://mermaid-js.github.io/mermaid/#/gantt">docs</a> - <a href="https://mermaid.live/edit#pako:eNptkU1vhCAQhv8KIenNugiI4rkf6bmXpvEyFVxJFDYyNt1u9r8X63Z7WQ9m5pknLzieaBeMpQ3dg0dsPUkPOhwteXZIXmJcbCT3xMAxkuh8Z8kIEclyMIB209fqKcwTICFvG4IvFy_oLrZ-g9F26ILfQgvNFN94VaRXQ1iWqpumZBcu1J8p1E1TXDx59eQNr5LyEqjJn6hv5QnGNlxevZJmdLLpy5xJSzut45biYCfb0iaVxvawjNjS1p-TCguG16PvaIPzYjO67e3BwX6GiTY9jPFKH43DMF_hGMDY1J4oHg-_f8hFTJFd8L3br3yZx4QHxENsdrt1nO8dDstH3oVpF50ZYMbhU6ud4qoGLqyqBJRCmO6j0HXPZdGbihUc6Pmc0QP49xD-b5X69ZQv2gjO81IwzWqhC1lKrjJ6pA3nVS7SMiVjrKirWlYp5fs3osgrWeo00lorLWvOzz8JVbXm">live editor</a>]
+
+```
+gantt
+    title Git Issues - days since last update
+    dateFormat  X
+    axisFormat %s
+
+    section Issue19062
+    71   : 0, 71
+    section Issue19401
+    36   : 0, 36
+    section Issue193
+    34   : 0, 34
+    section Issue7441
+    9    : 0, 9
+    section Issue1300
+    5    : 0, 5
+```
+
+```mermaid
+gantt
+    title Git Issues - days since last update
+    dateFormat  X
+    axisFormat %s
+
+    section Issue19062
+    71   : 0, 71
+    section Issue19401
+    36   : 0, 36
+    section Issue193
+    34   : 0, 34
+    section Issue7441
+    9    : 0, 9
+    section Issue1300
+    5    : 0, 5
+```
+
 ### User Journey diagram [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">docs</a> - <a href="https://mermaid.live/edit#pako:eNplkMFuwjAQRH9l5TMiTVIC-FqqnjhxzWWJN4khsSN7XRSh_HsdKBVt97R6Mzsj-yoqq0hIAXCywRkaSwNxWHNHsB_hYt1ZmwYUfiueKtbWwIcFtjf5zgH2eCZgQgkrCXt64GgMg2fUzkvIn5Xd_V5COtMFvCH_62ht_5yk7MU8sn61HDTfxD8VYiF6cj1qFd94nWkpuKWYKWRcFdUYOi5FaaZoDYNCpnel2Toha-w8LQQGtofRVEKyC_Qw7TQ2DvsfV2dRUTy6Ch6H-UMb7TlGVtbUupl5cF3ELfPgZZLM8rLR3IbjsrJ94rVq0XH7uS2SIis2mOVUrHNc5bmqjul2U2evaa3WL2mGYpqmL2BGiho">live editor</a>]

 ```
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@ -1,8 +1,37 @@
-# mermaid
+<p align="center">
+<img src="https://raw.githubusercontent.com/mermaid-js/mermaid/develop/docs/public/favicon.svg" height="150">
+</p>
+<h1 align="center">
+Mermaid
+</h1>
+<p align="center">
+通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。
+<p>
+<p align="center">
+  <a href="https://www.npmjs.com/package/mermaid"><img src="https://img.shields.io/npm/v/mermaid?color=ff3670&label="></a>
+<p>

-[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
+<p align="center">
+<a href="https://mermaid.live/"><b>Live Editor!</b></a>
+</p>
+<p align="center">
+ <a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 加入我们</a>
+</p>
+<p align="center">
+<a href="./README.md">English</a>
+</p>

-[English](./README.md) | 简体中文
+<br>
+<br>
+
+[![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid)
+[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml)
+[![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid)
+[![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master)
+[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
+[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
+[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)

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

@ -10,7 +39,7 @@

 **感谢所有参与进来提交 PR，解答疑问的人们! 🙏**

-<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/img/book-banner-pre-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
+<a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>

 ## 关于 Mermaid

@ -24,12 +53,10 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd
 Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。<br/>
 <br/>
 Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
-你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/misc/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
+你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。

 如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/community/n00b-overview.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).

-🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [文档](https://mermaidjs.github.io) | 🙌 [贡献](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [更新日志](./docs/CHANGELOG.md)
-
 <!-- </Main description> -->

 ## 示例
@ -325,7 +352,7 @@ _很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在

 来自 Knut Sveidqvist:

-> _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库! _ >_同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ >_感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
+> _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库！_ > _同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ > _感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
 >
 > _感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_

--- a/V10-BreakingChanges.md
+++ b/V10-BreakingChanges.md
@ -1,5 +0,0 @@
-# A collection of updates that change the behaviour
-
-## Lazy loading and asynchronisity
-
- Invalid dates are rendered as syntax error instead of returning best guess or the current date
--- a/mocks/c4Renderer.js
+++ b/mocks/c4Renderer.js
@ -0,0 +1,21 @@
+/**
+ * Mocked C4Context diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const drawPersonOrSystemArray = vi.fn();
+export const drawBoundary = vi.fn();
+
+export const setConf = vi.fn();
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  drawPersonOrSystemArray,
+  drawBoundary,
+  setConf,
+  draw,
+};
--- a/mocks/classRenderer-v2.js
+++ b/mocks/classRenderer-v2.js
@ -0,0 +1,16 @@
+/**
+ * Mocked class diagram v2 renderer
+ */
+
+import { vi } from 'vitest';
+
+export const setConf = vi.fn();
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  setConf,
+  draw,
+};
--- a/mocks/classRenderer.js
+++ b/mocks/classRenderer.js
@ -0,0 +1,13 @@
+/**
+ * Mocked class diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  draw,
+};
--- a/mocks/d3.ts
+++ b/mocks/d3.ts
@ -1,79 +1,14 @@
 // @ts-nocheck TODO: Fix TS
-import { vi } from 'vitest';
-
-const NewD3 = function () {
-  /**
-   *
-   */
-  function returnThis() {
-    return this;
-  }
-  return {
-    append: function () {
-      return NewD3();
-    },
-    lower: returnThis,
-    attr: returnThis,
-    style: returnThis,
-    text: returnThis,
-    0: {
-      0: {
-        getBBox: function () {
-          return {
-            height: 10,
-            width: 20,
-          };
-        },
-      },
-    },
-  };
-};
+import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js';

 export const select = function () {
-  return new NewD3();
+  return new MockedD3();
 };

 export const selectAll = function () {
-  return new NewD3();
+  return new MockedD3();
 };

 export const curveBasis = 'basis';
 export const curveLinear = 'linear';
 export const curveCardinal = 'cardinal';
-
-export const MockD3 = (name, parent) => {
-  const children = [];
-  const elem = {
-    get __children() {
-      return children;
-    },
-    get __name() {
-      return name;
-    },
-    get __parent() {
-      return parent;
-    },
-    node() {
-      return {
-        getBBox() {
-          return {
-            x: 5,
-            y: 10,
-            height: 15,
-            width: 20,
-          };
-        },
-      };
-    },
-  };
-  elem.append = (name) => {
-    const mockElem = MockD3(name, elem);
-    children.push(mockElem);
-    return mockElem;
-  };
-  elem.lower = vi.fn(() => elem);
-  elem.attr = vi.fn(() => elem);
-  elem.text = vi.fn(() => elem);
-  elem.style = vi.fn(() => elem);
-  return elem;
-};
--- a/mocks/erRenderer.js
+++ b/mocks/erRenderer.js
@ -0,0 +1,16 @@
+/**
+ * Mocked er diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const setConf = vi.fn();
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  setConf,
+  draw,
+};
--- a/mocks/flowRenderer-v2.js
+++ b/mocks/flowRenderer-v2.js
@ -0,0 +1,24 @@
+/**
+ * Mocked flow (flowchart) diagram v2 renderer
+ */
+
+import { vi } from 'vitest';
+
+export const setConf = vi.fn();
+export const addVertices = vi.fn();
+export const addEdges = vi.fn();
+export const getClasses = vi.fn().mockImplementation(() => {
+  return {};
+});
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  setConf,
+  addVertices,
+  addEdges,
+  getClasses,
+  draw,
+};
--- a/mocks/ganttRenderer.js
+++ b/mocks/ganttRenderer.js
@ -0,0 +1,16 @@
+/**
+ * Mocked gantt diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const setConf = vi.fn();
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  setConf,
+  draw,
+};
--- a/mocks/gitGraphRenderer.js
+++ b/mocks/gitGraphRenderer.js
@ -0,0 +1,13 @@
+/**
+ * Mocked git (graph) diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  draw,
+};
--- a/mocks/journeyRenderer.js
+++ b/mocks/journeyRenderer.js
@ -0,0 +1,15 @@
+/**
+ * Mocked pie (picChart) diagram renderer
+ */
+
+import { vi } from 'vitest';
+export const setConf = vi.fn();
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  setConf,
+  draw,
+};
--- a/mocks/pieRenderer.js
+++ b/mocks/pieRenderer.js
@ -0,0 +1,13 @@
+/**
+ * Mocked pie (picChart) diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  draw,
+};
--- a/mocks/requirementRenderer.js
+++ b/mocks/requirementRenderer.js
@ -0,0 +1,13 @@
+/**
+ * Mocked requirement diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  draw,
+};
--- a/mocks/sequenceRenderer.js
+++ b/mocks/sequenceRenderer.js
@ -0,0 +1,23 @@
+/**
+ * Mocked sequence diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const bounds = vi.fn();
+export const drawActors = vi.fn();
+export const drawActorsPopup = vi.fn();
+
+export const setConf = vi.fn();
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  bounds,
+  drawActors,
+  drawActorsPopup,
+  setConf,
+  draw,
+};
--- a/mocks/stateRenderer-v2.js
+++ b/mocks/stateRenderer-v2.js
@ -0,0 +1,22 @@
+/**
+ * Mocked state diagram v2 renderer
+ */
+
+import { vi } from 'vitest';
+
+export const setConf = vi.fn();
+export const getClasses = vi.fn().mockImplementation(() => {
+  return {};
+});
+export const stateDomId = vi.fn().mockImplementation(() => {
+  return 'mocked-stateDiagram-stateDomId';
+});
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  setConf,
+  getClasses,
+  draw,
+};
--- a/cSpell.json
+++ b/cSpell.json
@ -5,30 +5,41 @@
    "acyclicer",
    "adamiecki",
    "alois",
+    "aloisklink",
    "antiscript",
+    "antlr",
+    "appli",
    "applitools",
    "asciidoctor",
    "ashish",
+    "ashishjain",
    "astah",
    "bbox",
    "bilkent",
    "bisheng",
+    "blrs",
    "braintree",
+    "brkt",
    "brolin",
    "brotli",
+    "città",
+    "classdef",
    "codedoc",
    "colour",
+    "commitlint",
    "cpettitt",
    "customizability",
    "cuzon",
    "cytoscape",
    "dagre",
+    "deepdwn",
    "descr",
    "docsify",
    "docsy",
    "doku",
    "dompurify",
    "edgechromium",
+    "elkjs",
    "faber",
    "flatmap",
    "ftplugin",
@ -37,57 +48,97 @@
    "gitgraph",
    "globby",
    "graphlib",
+    "graphviz",
    "grav",
    "greywolf",
+    "huynh",
+    "huynhicode",
    "inkdrop",
    "jaoude",
+    "jgreywolf",
    "jison",
+    "jiti",
    "kaufmann",
    "khroma",
    "klemm",
    "klink",
    "knsv",
    "knut",
+    "knutsveidqvist",
    "laganeckas",
+    "linetype",
    "lintstagedrc",
+    "logmsg",
    "lucida",
+    "markdownish",
    "matthieu",
+    "matthieumorel",
+    "mdast",
    "mdbook",
+    "mermaidjs",
    "mermerd",
    "mindaugas",
    "mindmap",
    "mindmaps",
    "mitigations",
    "mkdocs",
+    "mmorel",
+    "mult",
+    "nextra",
    "orlandoni",
+    "pathe",
+    "pbrolin",
    "phpbb",
    "plantuml",
    "playfair",
+    "pnpm",
    "podlite",
+    "quence",
+    "radious",
    "ranksep",
+    "rect",
+    "rects",
    "redmine",
+    "rehype",
+    "roledescription",
    "sandboxed",
    "setupgraphviewbox",
    "shiki",
    "sidharth",
+    "sidharthv",
    "sphinxcontrib",
+    "startx",
+    "starty",
    "statediagram",
+    "steph",
+    "stopx",
+    "stopy",
    "stylis",
    "substate",
    "sveidqvist",
+    "swimm",
    "techn",
+    "teststr",
+    "textlength",
    "treemap",
    "ts-nocheck",
+    "tsdoc",
    "tuleap",
+    "tylerlong",
+    "ugge",
    "unist",
    "upvoting",
+    "unocss",
+    "valign",
    "verdana",
    "viewports",
    "vinod",
    "visio",
    "vitepress",
+    "vueuse",
    "xlink",
-    "yash"
+    "yash",
+    "zenuml"
  ],
  "patterns": [
    { "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" },
@ -127,6 +178,7 @@
  ],
  "ignorePaths": [
    "packages/mermaid/src/docs/CHANGELOG.md",
-    "packages/mermaid/src/docs/.vitepress/redirect.ts"
+    "packages/mermaid/src/docs/.vitepress/redirect.ts",
+    "packages/mermaid/src/docs/.vitepress/contributor-names.json"
  ]
 }
--- a/cypress/helpers/util.js
+++ b/cypress/helpers/util.js
@ -2,7 +2,7 @@ const utf8ToB64 = (str) => {
  return window.btoa(unescape(encodeURIComponent(str)));
 };

-const batchId = 'mermid-batch' + new Date().getTime();
+const batchId = 'mermaid-batch' + new Date().getTime();

 export const mermaidUrl = (graphStr, options, api) => {
  const obj = {
@ -22,7 +22,7 @@ export const mermaidUrl = (graphStr, options, api) => {
  return url;
 };

-export const imgSnapshotTest = (graphStr, _options, api = false, validation) => {
+export const imgSnapshotTest = (graphStr, _options = {}, api = false, validation = undefined) => {
  cy.log(_options);
  const options = Object.assign(_options);
  if (!options.fontFamily) {
@ -46,8 +46,22 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
  if (!options.fontSize) {
    options.fontSize = '16px';
  }
+  const url = mermaidUrl(graphStr, options, api);
+  openURLAndVerifyRendering(url, options, validation);
+};
+
+export const urlSnapshotTest = (url, _options, api = false, validation) => {
+  const options = Object.assign(_options);
+  openURLAndVerifyRendering(url, options, validation);
+};
+
+export const renderGraph = (graphStr, options, api) => {
+  const url = mermaidUrl(graphStr, options, api);
+  openURLAndVerifyRendering(url, options);
+};
+
+export const openURLAndVerifyRendering = (url, options, validation = undefined) => {
  const useAppli = Cypress.env('useAppli');
-  cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');

  if (useAppli) {
@ -60,82 +74,20 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
    });
  }

-  const url = mermaidUrl(graphStr, options, api);
-
  cy.visit(url);
+  cy.window().should('have.property', 'rendered', true);
+  cy.get('svg').should('be.visible');
+
  if (validation) {
    cy.get('svg').should(validation);
  }
-  cy.get('svg');
-  // Default name to test title

  if (useAppli) {
    cy.log('Check eyes' + Cypress.spec.name);
    cy.eyesCheckWindow('Click!');
-    cy.log('Closing eyes: ' + Cypress.spec.name);
+    cy.log('Closing eyes' + Cypress.spec.name);
    cy.eyesClose();
  } else {
    cy.matchImageSnapshot(name);
  }
 };
-
-export const urlSnapshotTest = (url, _options, api = false, validation) => {
-  cy.log(_options);
-  const options = Object.assign(_options);
-  if (!options.fontFamily) {
-    options.fontFamily = 'courier';
-  }
-  if (!options.sequence) {
-    options.sequence = {};
-  }
-  if (!options.sequence || (options.sequence && !options.sequence.actorFontFamily)) {
-    options.sequence.actorFontFamily = 'courier';
-  }
-  if (options.sequence && !options.sequence.noteFontFamily) {
-    options.sequence.noteFontFamily = 'courier';
-  }
-  options.sequence.actorFontFamily = 'courier';
-  options.sequence.noteFontFamily = 'courier';
-  options.sequence.messageFontFamily = 'courier';
-  if (options.sequence && !options.sequence.actorFontFamily) {
-    options.sequence.actorFontFamily = 'courier';
-  }
-  if (!options.fontSize) {
-    options.fontSize = '16px';
-  }
-  const useAppli = Cypress.env('useAppli');
-  cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
-  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
-
-  if (useAppli) {
-    cy.log('Opening eyes 2' + Cypress.spec.name);
-    cy.eyesOpen({
-      appName: 'Mermaid',
-      testName: name,
-      batchName: Cypress.spec.name,
-      batchId: batchId + Cypress.spec.name,
-    });
-  }
-
-  cy.visit(url);
-  if (validation) {
-    cy.get('svg').should(validation);
-  }
-  cy.get('body');
-  // Default name to test title
-
-  if (useAppli) {
-    cy.log('Check eyes 2' + Cypress.spec.name);
-    cy.eyesCheckWindow('Click!');
-    cy.log('Closing eyes 2' + Cypress.spec.name);
-    cy.eyesClose();
-  } else {
-    cy.matchImageSnapshot(name);
-  }
-};
-
-export const renderGraph = (graphStr, options, api) => {
-  const url = mermaidUrl(graphStr, options, api);
-
-  cy.visit(url);
-};
--- a/cypress/integration/other/configuration.spec.js
+++ b/cypress/integration/other/configuration.spec.js
@ -1,4 +1,4 @@
-import { renderGraph } from '../../helpers/util';
+import { renderGraph } from '../../helpers/util.js';
 describe('Configuration', () => {
  describe('arrowMarkerAbsolute', () => {
    it('should handle default value false of arrowMarkerAbsolute', () => {
--- a/cypress/integration/other/external-diagrams.spec.js
+++ b/cypress/integration/other/external-diagrams.spec.js
@ -1,13 +1,10 @@
+import { urlSnapshotTest } from '../../helpers/util.js';
+
 describe('mermaid', () => {
  describe('registerDiagram', () => {
-    it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => {
-      const url = 'http://localhost:9000/external-diagrams-mindmap.html';
-      cy.visit(url);
-
-      cy.get('svg', {
-        // may be a bit slower than normal, since vite might need to re-compile mermaid/mermaid-mindmap/mermaid-example-diagram
-        timeout: 10000,
-      }).matchImageSnapshot();
+    it('should work on @mermaid-js/mermaid-example-diagram', () => {
+      const url = 'http://localhost:9000/external-diagrams-example-diagram.html';
+      urlSnapshotTest(url, {}, false, false);
    });
  });
 });
--- a/cypress/integration/other/ghsa.spec.js
+++ b/cypress/integration/other/ghsa.spec.js
@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util';
+import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.js';

 describe('CSS injections', () => {
  it('should not allow CSS injections outside of the diagram', () => {
@ -7,4 +7,17 @@ describe('CSS injections', () => {
      flowchart: { htmlLabels: false },
    });
  });
+  it('should not allow adding styletags affecting the page', () => {
+    urlSnapshotTest('http://localhost:9000/ghsa3.html', {
+      logLevel: 1,
+      flowchart: { htmlLabels: false },
+    });
+  });
+  it('should not allow manipulating styletags using arrowheads', () => {
+    openURLAndVerifyRendering('http://localhost:9000/xss23-css.html', {
+      logLevel: 1,
+      arrowMarkerAbsolute: false,
+      flowchart: { htmlLabels: true },
+    });
+  });
 });
--- a/cypress/integration/rendering/c4.spec.js
+++ b/cypress/integration/rendering/c4.spec.js
@ -0,0 +1,122 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+
+describe('C4 diagram', () => {
+  it('should render a simple C4Context diagram', () => {
+    imgSnapshotTest(
+      `
+      C4Context
+      accTitle: C4 context demo
+      accDescr: Many large C4 diagrams
+
+      title System Context diagram for Internet Banking System
+
+      Enterprise_Boundary(b0, "BankBoundary0") {
+          Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+
+          System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+          Enterprise_Boundary(b1, "BankBoundary") {
+            System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+          }
+        }
+
+      BiRel(customerA, SystemAA, "Uses")
+      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+      Rel(SystemC, customerA, "Sends e-mails to")
+
+      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
+      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
+      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render a simple C4Container diagram', () => {
+    imgSnapshotTest(
+      `
+      C4Container
+      title Container diagram for Internet Banking System
+
+      System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
+      Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
+
+      Container_Boundary(c1, "Internet Banking") {
+          Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to customers via their web browser")
+      }
+
+      Rel(customer, spa, "Uses", "HTTPS")
+      Rel(email_system, customer, "Sends e-mails to")
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render a simple C4Component diagram', () => {
+    imgSnapshotTest(
+      `
+      C4Component
+      title Component diagram for Internet Banking System - API Application
+
+      Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
+
+      Container_Boundary(api, "API Application") {
+        Component(sign, "Sign In Controller", "MVC Rest Controller", "Allows users to sign in to the internet banking system")
+      }
+
+      Rel_Back(spa, sign, "Uses", "JSON/HTTPS")
+      UpdateRelStyle(spa, sign, $offsetY="-40")
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render a simple C4Dynamic diagram', () => {
+    imgSnapshotTest(
+      `
+      C4Dynamic
+      title Dynamic diagram for Internet Banking System - API Application
+
+      ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
+      Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
+      Container_Boundary(b, "API Application") {
+        Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
+        Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
+      }
+      Rel(c1, c2, "Submits credentials to", "JSON/HTTPS")
+      Rel(c2, c3, "Calls isAuthenticated() on")
+      Rel(c3, c4, "select * from users where username = ?", "JDBC")
+
+      UpdateRelStyle(c1, c2, $textColor="red", $offsetY="-40")
+      UpdateRelStyle(c2, c3, $textColor="red", $offsetX="-40", $offsetY="60")
+      UpdateRelStyle(c3, c4, $textColor="red", $offsetY="-40", $offsetX="10")
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render a simple C4Deployment diagram', () => {
+    imgSnapshotTest(
+      `
+      C4Deployment
+      title Deployment Diagram for Internet Banking System - Live
+
+      Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
+          Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
+      }
+
+      Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
+          Deployment_Node(dn, "bigbank-api*** x8", "Ubuntu 16.04 LTS"){
+              Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
+                  Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
+              }
+          }
+      }
+
+      Rel(mobile, api, "Makes API calls to", "json/HTTPS")
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+});
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util.js';
 describe('Class diagram V2', () => {
  it('0: should render a simple class diagram', () => {
    imgSnapshotTest(
@ -13,7 +13,6 @@ describe('Class diagram V2', () => {
        `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('1: should render a simple class diagram', () => {
@ -47,7 +46,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('2: should render a simple class diagrams with cardinality', () => {
@ -76,7 +74,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('should render a simple class diagram with different visibilities', () => {
@ -94,7 +91,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('should render multiple class diagrams', () => {
@ -147,7 +143,6 @@ describe('Class diagram V2', () => {
      ],
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('4: should render a simple class diagram with comments', () => {
@ -177,7 +172,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('5: should render a simple class diagram with abstract method', () => {
@ -189,7 +183,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('6: should render a simple class diagram with static method', () => {
@ -201,7 +194,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('7: should render a simple class diagram with Generic class', () => {
@ -221,7 +213,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('8: should render a simple class diagram with Generic class and relations', () => {
@ -242,7 +233,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('9: should render a simple class diagram with clickable link', () => {
@ -264,7 +254,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('10: should render a simple class diagram with clickable callback', () => {
@ -286,7 +275,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('11: should render a simple class diagram with return type on method', () => {
@ -301,7 +289,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('12: should render a simple class diagram with generic types', () => {
@ -317,7 +304,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('13: should render a simple class diagram with css classes applied', () => {
@ -335,7 +321,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('14: should render a simple class diagram with css classes applied directly', () => {
@ -351,7 +336,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
@ -365,7 +349,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('16a: should render a simple class diagram with static field', () => {
@ -378,7 +361,6 @@ describe('Class diagram V2', () => {
            `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('16b: should handle the direction statement with TB', () => {
@ -403,7 +385,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('18: should handle the direction statement with LR', () => {
@ -428,7 +409,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });
  it('17a: should handle the direction statement with BT', () => {
    imgSnapshotTest(
@ -452,7 +432,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });
  it('17b: should handle the direction statement with RL', () => {
    imgSnapshotTest(
@ -476,7 +455,6 @@ describe('Class diagram V2', () => {
      `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('18: should render a simple class diagram with notes', () => {
@ -485,8 +463,7 @@ describe('Class diagram V2', () => {
      classDiagram-v2
        note "I love this diagram!\nDo you love it?"
        class Class10 {
-          <<service>>
-          int id
+            int id
          size()
        }
        note for Class10 "Cool class\nI said it's very cool class!"
@ -494,7 +471,6 @@ describe('Class diagram V2', () => {
        `,
      { logLevel: 1, flowchart: { htmlLabels: false } }
    );
-    cy.get('svg');
  });

  it('1433: should render a simple class with a title', () => {
@ -504,8 +480,86 @@ title: simple class diagram
 ---
 classDiagram-v2
 class Class10
-`,
-      {}
+`
+    );
+  });
+
+  it('should render a class with text label', () => {
+    imgSnapshotTest(
+      `classDiagram
+  class C1["Class 1 with text label"]
+  C1 -->  C2`
+    );
+  });
+
+  it('should render two classes with text labels', () => {
+    imgSnapshotTest(
+      `classDiagram
+  class C1["Class 1 with text label"]
+  class C2["Class 2 with chars @?"]
+  C1 -->  C2`
+    );
+  });
+  it('should render a class with a text label, members and annotation', () => {
+    imgSnapshotTest(
+      `classDiagram
+  class C1["Class 1 with text label"] {
+    &lt;&lt;interface&gt;&gt;
+    +member1
+  }
+  C1 -->  C2`
+    );
+  });
+  it('should render multiple classes with same text labels', () => {
+    imgSnapshotTest(
+      `classDiagram
+class C1["Class with text label"]
+class C2["Class with text label"]
+class C3["Class with text label"]
+C1 --> C2
+C3 ..> C2
+  `
+    );
+  });
+  it('should render classes with different text labels', () => {
+    imgSnapshotTest(
+      `classDiagram
+class C1["OneWord"]
+class C2["With, Comma"]
+class C3["With (Brackets)"]
+class C4["With [Brackets]"]
+class C5["With {Brackets}"]
+class C7["With 1 number"]
+class C8["With . period..."]
+class C9["With - dash"]
+class C10["With _ underscore"]
+class C11["With ' single quote"]
+class C12["With ~!@#$%^&*()_+=-/?"]
+class C13["With Città foreign language"]
+  `
+    );
+  });
+
+  it('should render classLabel if class has already been defined earlier', () => {
+    imgSnapshotTest(
+      `classDiagram
+  Animal <|-- Duck
+  class Duck["Duck with text label"]
+`
+    );
+  });
+  it('should add classes namespaces', function () {
+    imgSnapshotTest(
+      `
+      classDiagram
+      namespace Namespace1 {
+        class C1
+        class C2
+      }
+      C1 --> C2
+      class C3
+      class C4
+      `
    );
  });
 });
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';

 describe('Class diagram', () => {
  it('1: should render a simple class diagram', () => {
@ -286,7 +286,7 @@ describe('Class diagram', () => {
    cy.get('svg');
  });

-  it('15: should render a simple class diagram with css classes applied two multiple classes', () => {
+  it('15: should render a simple class diagram with css classes applied to multiple classes', () => {
    imgSnapshotTest(
      `
    classDiagram
@ -414,7 +414,6 @@ describe('Class diagram', () => {
    classDiagram
      note "I love this diagram!\nDo you love it?"
      class Class10 {
-        <<service>>
        int id
        size()
      }
--- a/cypress/integration/rendering/current.spec.js
+++ b/cypress/integration/rendering/current.spec.js
@ -1,6 +1,6 @@
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util.js';

-describe('State diagram', () => {
+describe('Current diagram', () => {
  it('should render a state with states in it', () => {
    imgSnapshotTest(
      `
--- a/cypress/integration/rendering/debug.spec.js
+++ b/cypress/integration/rendering/debug.spec.js
@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util.js';

 describe('Flowchart', () => {
  it('34: testing the label width in percy', () => {
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';

 describe('Entity Relationship Diagram', () => {
  it('should render a simple ER diagram', () => {
@ -10,7 +10,6 @@ describe('Entity Relationship Diagram', () => {
      `,
      { logLevel: 1 }
    );
-    cy.get('svg');
  });

  it('should render an ER diagram with a recursive relationship', () => {
@ -23,7 +22,6 @@ describe('Entity Relationship Diagram', () => {
      `,
      { logLevel: 1 }
    );
-    cy.get('svg');
  });

  it('should render an ER diagram with multiple relationships between the same two entities', () => {
@ -35,7 +33,6 @@ describe('Entity Relationship Diagram', () => {
      `,
      { logLevel: 1 }
    );
-    cy.get('svg');
  });

  it('should render a cyclical ER diagram', () => {
@ -48,7 +45,6 @@ describe('Entity Relationship Diagram', () => {
      `,
      { logLevel: 1 }
    );
-    cy.get('svg');
  });

  it('should render a not-so-simple ER diagram', () => {
@ -66,7 +62,6 @@ describe('Entity Relationship Diagram', () => {
      `,
      { logLevel: 1 }
    );
-    cy.get('svg');
  });

  it('should render multiple ER diagrams', () => {
@ -85,7 +80,6 @@ describe('Entity Relationship Diagram', () => {
      ],
      { logLevel: 1 }
    );
-    cy.get('svg');
  });

  it('should render an ER diagram with blank or empty labels', () => {
@ -98,7 +92,6 @@ describe('Entity Relationship Diagram', () => {
      `,
      { logLevel: 1 }
    );
-    cy.get('svg');
  });

  it('should render an ER diagrams when useMaxWidth is true (default)', () => {
@ -151,7 +144,6 @@ describe('Entity Relationship Diagram', () => {
      `,
      { er: { useMaxWidth: false } }
    );
-    cy.get('svg');
  });

  it('should render entities with and without attributes', () => {
@ -164,7 +156,6 @@ describe('Entity Relationship Diagram', () => {
      `,
      { logLevel: 1 }
    );
-    cy.get('svg');
  });

  it('should render entities with generic and array attributes', () => {
@ -179,7 +170,19 @@ describe('Entity Relationship Diagram', () => {
      `,
      { logLevel: 1 }
    );
-    cy.get('svg');
+  });
+
+  it('should render entities with length in attributes type', () => {
+    renderGraph(
+      `
+    erDiagram
+        CLUSTER {
+          varchar(99) name
+          string(255) description
+        }
+      `,
+      { logLevel: 1 }
+    );
  });

  it('should render entities and attributes with big and small entity names', () => {
@ -195,7 +198,6 @@ describe('Entity Relationship Diagram', () => {
      `,
      { logLevel: 1 }
    );
-    cy.get('svg');
  });

  it('should render entities with keys', () => {
@ -214,7 +216,6 @@ describe('Entity Relationship Diagram', () => {
      `,
      { logLevel: 1 }
    );
-    cy.get('svg');
  });

  it('should render entities with comments', () => {
@ -233,7 +234,6 @@ describe('Entity Relationship Diagram', () => {
      `,
      { logLevel: 1 }
    );
-    cy.get('svg');
  });

  it('should render entities with keys and comments', () => {
@ -253,7 +253,6 @@ describe('Entity Relationship Diagram', () => {
      `,
      { logLevel: 1 }
    );
-    cy.get('svg');
  });

  it('should render entities with aliases', () => {
@ -271,7 +270,6 @@ describe('Entity Relationship Diagram', () => {
      `,
      { logLevel: 1 }
    );
-    cy.get('svg');
  });

  it('1433: should render a simple ER diagram with a title', () => {
--- a/cypress/integration/rendering/errorDiagram.spec.js
+++ b/cypress/integration/rendering/errorDiagram.spec.js
@ -0,0 +1,45 @@
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('Error Diagrams', () => {
+  beforeEach(() => {
+    cy.on('uncaught:exception', (err) => {
+      expect(err.message).to.include('Parse error');
+      // return false to prevent the error from
+      // failing this test
+      return false;
+    });
+  });
+
+  it('should render a simple ER diagram', () => {
+    imgSnapshotTest(
+      `
+      error
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render error diagram for actual errors', () => {
+    imgSnapshotTest(
+      `
+    flowchart TD
+      A[Christmas] --|Get money| B(Go shopping)
+      `,
+      { logLevel: 1 }
+    );
+  });
+
+  it('should render error for wrong ER diagram', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+        ATLAS-ORGANIZATION ||--|{ ATLAS-PROJECTS : "has many"
+        ATLAS-PROJECTS ||--|{ MONGODB-CLUSTERS : "has many"
+        ATLAS-PROJECTS ||--|{ ATLAS-TEAMS : "has many"
+        MONGODB-CLUSTERS ||..|{
+        ATLAS-TEAMS ||..|{
+      `,
+      { logLevel: 1 }
+    );
+  });
+});
--- a/cypress/integration/rendering/flowchart-elk.spec.js
+++ b/cypress/integration/rendering/flowchart-elk.spec.js
@ -0,0 +1,846 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+
+describe.skip('Flowchart ELK', () => {
+  it('1-elk: should render a simple flowchart', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      {}
+    );
+    imgSnapshotTest(
+      `flowchart TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { defaultRenderer: 'elk' } }
+    );
+  });
+
+  it('2-elk: should render a simple flowchart with diagramPadding set to 0', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      %% this is a comment
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { diagramPadding: 0 } }
+    );
+  });
+
+  it('3-elk: a link with correct arrowhead to a subgraph', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+        P1
+        P1 -->P1.5
+        subgraph P1.5
+          P2
+          P2.5(( A ))
+          P3
+        end
+        P2 --> P4
+        P3 --> P6
+        P1.5 --> P5
+      `,
+      {}
+    );
+  });
+
+  it('4-elk: Length of edges', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+      L1 --- L2
+      L2 --- C
+      M1 ---> C
+      R1 .-> R2
+      R2 <.-> C
+      C -->|Label 1| E1
+      C <-- Label 2 ---> E2
+      C ----> E3
+      C <-...-> E4
+      C ======> E5
+      `,
+      {}
+    );
+  });
+  it('5-elk: should render escaped without html labels', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+        a["<strong>Haiya</strong>"]---->b
+      `,
+      { htmlLabels: false, flowchart: { htmlLabels: false } }
+    );
+  });
+  it('6-elk: should render non-escaped with html labels', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+        a["<strong>Haiya</strong>"]===>b
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('7-elk: should render a flowchart when useMaxWidth is true (default)', () => {
+    renderGraph(
+      `flowchart-elk TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { useMaxWidth: true } }
+    );
+    cy.get('svg').should((svg) => {
+      expect(svg).to.have.attr('width', '100%');
+      // expect(svg).to.have.attr('height');
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      // const height = parseFloat(svg.attr('height'));
+      // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+      const style = svg.attr('style');
+      expect(style).to.match(/^max-width: [\d.]+px;$/);
+      const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+      expect(maxWidthValue).to.be.within(230 * 0.95, 230 * 1.05);
+    });
+  });
+  it('8-elk: should render a flowchart when useMaxWidth is false', () => {
+    renderGraph(
+      `flowchart-elk TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { useMaxWidth: false } }
+    );
+    cy.get('svg').should((svg) => {
+      // const height = parseFloat(svg.attr('height'));
+      const width = parseFloat(svg.attr('width'));
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+      expect(width).to.be.within(230 * 0.95, 230 * 1.05);
+      expect(svg).to.not.have.attr('style');
+    });
+  });
+
+  it('V2 elk - 16: Render Stadium shape', () => {
+    imgSnapshotTest(
+      ` flowchart-elk TD
+      A([stadium shape test])
+      A -->|Get money| B([Go shopping])
+      B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
+      C -->|One| D([Laptop])
+      C -->|Two| E([iPhone])
+      C -->|Three| F([Car<br/>wroom wroom])
+      click A "index.html#link-clicked" "link test"
+      click B testClick "click test"
+      classDef someclass fill:#f96;
+      class A someclass;
+      class C someclass;
+      `,
+      { flowchart: { htmlLabels: false }, fontFamily: 'courier' }
+    );
+  });
+
+  it('50-elk: handle nested subgraphs in reverse order', () => {
+    imgSnapshotTest(
+      `flowchart-elk LR
+        a -->b
+        subgraph A
+        B
+        end
+        subgraph B
+        b
+        end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('51-elk: handle nested subgraphs in reverse order', () => {
+    imgSnapshotTest(
+      `flowchart-elk LR
+        a -->b
+        subgraph A
+        B
+        end
+        subgraph B
+        b
+        end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('52-elk: handle nested subgraphs in several levels', () => {
+    imgSnapshotTest(
+      `flowchart-elk TB
+    b-->B
+    a-->c
+    subgraph O
+      A
+    end
+    subgraph B
+      c
+    end
+    subgraph A
+        a
+        b
+        B
+    end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('53-elk: handle nested subgraphs with edges in and out', () => {
+    imgSnapshotTest(
+      `flowchart-elk TB
+  internet
+  nat
+  routeur
+  lb1
+  lb2
+  compute1
+  compute2
+  subgraph project
+  routeur
+  nat
+    subgraph subnet1
+      compute1
+      lb1
+    end
+    subgraph subnet2
+      compute2
+      lb2
+    end
+  end
+  internet --> routeur
+  routeur --> subnet1 & subnet2
+  subnet1 & subnet2 --> nat --> internet
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('54-elk: handle nested subgraphs with outgoing links', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+  subgraph  main
+    subgraph subcontainer
+      subcontainer-child
+    end
+     subcontainer-child--> subcontainer-sibling
+  end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('55-elk: handle nested subgraphs with outgoing links 2', () => {
+    imgSnapshotTest(
+      `flowchart-elk TD
+
+subgraph one[One]
+    subgraph sub_one[Sub One]
+        _sub_one
+    end
+    subgraph sub_two[Sub Two]
+        _sub_two
+    end
+    _one
+end
+
+%% here, either the first or the second one
+sub_one --> sub_two
+_one --> b
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('56-elk: handle nested subgraphs with outgoing links 3', () => {
+    imgSnapshotTest(
+      `flowchart-elk TB
+  subgraph container_Beta
+    process_C-->Process_D
+  end
+  subgraph container_Alpha
+    process_A-->process_B
+    process_A-->|messages|process_C
+    end
+    process_B-->|via_AWSBatch|container_Beta
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('57-elk: handle nested subgraphs with outgoing links 4', () => {
+    imgSnapshotTest(
+      `flowchart-elk LR
+subgraph A
+a -->b
+end
+subgraph B
+b
+end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('57-elk: handle nested subgraphs with outgoing links 2', () => {
+    imgSnapshotTest(
+      `flowchart-elk TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+    one --> two
+    three --> two
+    two --> c2
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('57.x: handle nested subgraphs with outgoing links 5', () => {
+    imgSnapshotTest(
+      `%% this does not produce the desired result
+flowchart-elk TB
+  subgraph container_Beta
+    process_C-->Process_D
+  end
+  subgraph container_Alpha
+    process_A-->process_B
+    process_B-->|via_AWSBatch|container_Beta
+    process_A-->|messages|process_C
+  end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('58-elk: handle styling with style expressions', () => {
+    imgSnapshotTest(
+      `
+    flowchart-elk LR
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('59-elk: handle styling of subgraphs and links', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk TD
+  A[Christmas] ==> D
+  A[Christmas] -->|Get money| B(Go shopping)
+  A[Christmas] ==> C
+  subgraph T ["Test"]
+    A
+    B
+    C
+  end
+
+  classDef Test fill:#F84E68,stroke:#333,color:white;
+  class A,T Test
+  classDef TestSub fill:green;
+  class T TestSub
+  linkStyle 0,1 color:orange, stroke: orange;
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('60-elk: handle styling for all node shapes - v2', () => {
+    imgSnapshotTest(
+      `
+      flowchart-elk LR
+      A[red text] -->|default style| B(blue text)
+      C([red text]) -->|default style| D[[blue text]]
+      E[(red text)] -->|default style| F((blue text))
+      G>red text] -->|default style| H{blue text}
+      I{{red text}} -->|default style| J[/blue text/]
+      K[\\ red text\\] -->|default style| L[/blue text\\]
+      M[\\ red text/] -->|default style| N[blue text];
+      O(((red text))) -->|default style| P(((blue text)));
+      linkStyle default color:Sienna;
+      style A stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style B stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style C stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style D stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style E stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style F stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style G stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style H stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style I stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style J stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style K stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style L stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style M stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style N stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      style O stroke:#ff0000,fill:#ffcccc,color:#ff0000;
+      style P stroke:#0000ff,fill:#ccccff,color:#0000ff;
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose', logLevel: 2 }
+    );
+  });
+  it('61-elk: fontawesome icons in edge labels', () => {
+    imgSnapshotTest(
+      `
+      flowchart-elk TD
+        C -->|fa:fa-car Car| F[fa:fa-car Car]
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('62-elk: should render styled subgraphs', () => {
+    imgSnapshotTest(
+      `
+      flowchart-elk TB
+      A
+      B
+      subgraph foo[Foo SubGraph]
+        C
+        D
+      end
+      subgraph bar[Bar SubGraph]
+        E
+        F
+      end
+      G
+
+      A-->B
+      B-->C
+      C-->D
+      B-->D
+      D-->E
+      E-->A
+      E-->F
+      F-->D
+      F-->G
+      B-->G
+      G-->D
+
+      style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
+      style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('63-elk: title on subgraphs should be themable', () => {
+    imgSnapshotTest(
+      `
+      %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
+      flowchart-elk LR
+      subgraph A
+          a --> b
+      end
+      subgraph B
+          i -->f
+      end
+      A --> B
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('65-elk: text-color from classes', () => {
+    imgSnapshotTest(
+      `
+      flowchart-elk LR
+        classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
+        Lorem --> Ipsum --> Dolor
+        class Lorem,Dolor dark
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('66-elk: More nested subgraph cases (TB)', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk TB
+    subgraph two
+    b1
+    end
+    subgraph three
+    c2
+    end
+
+    three --> two
+    two --> c2
+
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('67-elk: More nested subgraph cases (RL)', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk RL
+    subgraph two
+    b1
+    end
+    subgraph three
+    c2
+    end
+
+    three --> two
+    two --> c2
+
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('68-elk: More nested subgraph cases (BT)', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk BT
+    subgraph two
+    b1
+    end
+    subgraph three
+    c2
+    end
+
+    three --> two
+    two --> c2
+
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('69-elk: More nested subgraph cases (LR)', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk LR
+    subgraph two
+    b1
+    end
+    subgraph three
+    c2
+    end
+
+    three --> two
+    two --> c2
+
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('70-elk: Handle nested subgraph cases (TB) link out and link between subgraphs', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk TB
+   subgraph S1
+    sub1 -->sub2
+   end
+  subgraph S2
+    sub4
+   end
+   S1 --> S2
+   sub1 --> sub4
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('71-elk: Handle nested subgraph cases (RL) link out and link between subgraphs', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk RL
+   subgraph S1
+    sub1 -->sub2
+   end
+  subgraph S2
+    sub4
+   end
+   S1 --> S2
+   sub1 --> sub4
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('72-elk: Handle nested subgraph cases (BT) link out and link between subgraphs', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk BT
+   subgraph S1
+    sub1 -->sub2
+   end
+  subgraph S2
+    sub4
+   end
+   S1 --> S2
+   sub1 --> sub4
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('74-elk: Handle nested subgraph cases (RL) link out and link between subgraphs', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk RL
+   subgraph S1
+    sub1 -->sub2
+   end
+  subgraph S2
+    sub4
+   end
+   S1 --> S2
+   sub1 --> sub4
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('74-elk: Handle labels for multiple edges from and to the same couple of nodes', () => {
+    imgSnapshotTest(
+      `
+flowchart-elk RL
+    subgraph one
+      a1 -- l1 --> a2
+      a1 -- l2 --> a2
+    end
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('76-elk: handle unicode encoded character with HTML labels true', () => {
+    imgSnapshotTest(
+      `flowchart-elk TB
+      a{{"Lorem 'ipsum' dolor 'sit' amet, 'consectetur' adipiscing 'elit'."}}
+      --> b{{"Lorem #quot;ipsum#quot; dolor #quot;sit#quot; amet,#quot;consectetur#quot; adipiscing #quot;elit#quot;."}}
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('2050-elk: handling of different rendering direction in subgraphs', () => {
+    imgSnapshotTest(
+      `
+    flowchart-elk LR
+
+      subgraph TOP
+        direction TB
+        subgraph B1
+            direction RL
+            i1 -->f1
+        end
+        subgraph B2
+            direction BT
+            i2 -->f2
+        end
+      end
+      A --> TOP --> B
+      B1 --> B2
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+
+  it('2388-elk: handling default in the node name', () => {
+    imgSnapshotTest(
+      `
+      flowchart-elk LR
+      default-index.js --> dot.template.js
+      index.js --> module-utl.js
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('2824-elk: Clipping of edges', () => {
+    imgSnapshotTest(
+      `
+      flowchart-elk TD
+          A --> B
+          A --> C
+          B --> C
+      `,
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+    );
+  });
+  it('1433-elk: should render a titled flowchart with titleTopMargin set to 0', () => {
+    imgSnapshotTest(
+      `---
+title: Simple flowchart
+---
+flowchart-elk TD
+A --> B
+`,
+      { titleTopMargin: 0 }
+    );
+  });
+  it('elk: should include classes on the edges', () => {
+    renderGraph(
+      `flowchart-elk TD
+      A --> B --> C --> D
+      `,
+      {}
+    );
+    cy.get('svg').should((svg) => {
+      const edges = svg.querySelectorAll('.edges > path');
+      edges.forEach((edge) => {
+        expect(edge).to.have.class('flowchart-link');
+      });
+    });
+  });
+  describe('Markdown strings flowchart-elk (#4220)', () => {
+    describe('html labels', () => {
+      it('With styling and classes', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    classDef someclass fill:#f96
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('With formatting in a node', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+  a{"\`The **cat** in the hat\`"} -- 1o --> b
+  a -- 2o --> c
+  a -- 3o --> d
+  g --2i--> a
+  d --1i--> a
+  h --3i -->a
+  b --> d(The dog in the hog)
+  c --> d
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('New line in node and formatted edge label', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Wrapping long text with a new line', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+b(\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`) --> c
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Sub graphs and markdown strings', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart-elk LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+    });
+
+    describe('svg text labels', () => {
+      it('With styling and classes', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    classDef someclass fill:#f96
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('With formatting in a node', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+  a{"\`The **cat** in the hat\`"} -- 1o --> b
+  a -- 2o --> c
+  a -- 3o --> d
+  g --2i--> a
+  d --1i--> a
+  h --3i -->a
+  b --> d(The dog in the hog)
+  c --> d
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('New line in node and formatted edge label', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Wrapping long text with a new line', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Sub graphs and markdown strings', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart-elk LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+    });
+  });
+});
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';

 describe('Flowchart v2', () => {
  it('1: should render a simple flowchart', () => {
@ -674,4 +674,170 @@ A --> B
      { titleTopMargin: 0 }
    );
  });
+  it('3192: It should be possieble to render flowcharts with invisible edges', () => {
+    imgSnapshotTest(
+      `---
+title: Simple flowchart with invisible edges
+---
+flowchart TD
+A ~~~ B
+`,
+      { titleTopMargin: 0 }
+    );
+  });
+  it('4023: Should render html labels with images and-or text correctly', () => {
+    imgSnapshotTest(
+      `flowchart TD
+    B[<img src='https://mermaid.js.org/mermaid-logo.svg'>]
+    B-->C[<img src="https://mermaid.js.org/mermaid-logo.svg"> more text <img src='https://mermaid.js.org/mermaid-logo.svg'>]
+    B-->D(<img src='https://mermaid.js.org/mermaid-logo.svg'> some text)
+    B-->E(plain)`,
+      {}
+    );
+  });
+  describe('Markdown strings flowchart (#4220)', () => {
+    describe('html labels', () => {
+      it('With styling and classes', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    classDef someclass fill:#f96
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('With formatting in a node', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+  a{"\`The **cat** in the hat\`"} -- 1o --> b
+  a -- 2o --> c
+  a -- 3o --> d
+  g --2i--> a
+  d --1i--> a
+  h --3i -->a
+  b --> d(The dog in the hog)
+  c --> d
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('New line in node and formatted edge label', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Wrapping long text with a new line', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Sub graphs and markdown strings', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": true}} }%%
+flowchart LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+    });
+
+    describe('svg text labels', () => {
+      it('With styling and classes', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+    A:::someclass --> B["\`The **cat** in the hat\`"]:::someclass
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+    classDef someclass fill:#f96
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('With formatting in a node', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+  a{"\`The **cat** in the hat\`"} -- 1o --> b
+  a -- 2o --> c
+  a -- 3o --> d
+  g --2i--> a
+  d --1i--> a
+  h --3i -->a
+  b --> d(The dog in the hog)
+  c --> d
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('New line in node and formatted edge label', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1)
+NL\`") --"\`1o **bold**\`"--> c
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Wrapping long text with a new line', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+b("\`The dog in **the** hog.(1).. a a a a *very long text* about it
+Word!
+
+Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. \`") --> c
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+      it('Sub graphs and markdown strings', () => {
+        imgSnapshotTest(
+          `%%{init: {"flowchart": {"htmlLabels": false}} }%%
+flowchart LR
+subgraph "One"
+  a("\`The **cat**
+  in the hat\`") -- "1o" --> b{{"\`The **dog** in the hog\`"}}
+end
+subgraph "\`**Two**\`"
+  c("\`The **cat**
+  in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
+end
+
+`,
+          { titleTopMargin: 0 }
+        );
+      });
+    });
+  });
 });
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';

 describe('Graph', () => {
  it('1: should render a simple flowchart no htmlLabels', () => {
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@ -133,6 +133,24 @@ describe('Gantt diagram', () => {
    );
  });

+  it('should default to showing today marker', () => {
+    // This test only works if the environment thinks today is 1010-10-10
+    imgSnapshotTest(
+      `
+      gantt
+        title Show today marker (vertical line should be visible)
+        dateFormat YYYY-MM-DD
+        axisFormat %d
+        %% Should default to being on
+        %% todayMarker on
+        section Section1
+         Yesterday: 1010-10-09, 1d
+         Today: 1010-10-10, 1d
+      `,
+      {}
+    );
+  });
+
  it('should hide today marker', () => {
    imgSnapshotTest(
      `
@ -142,7 +160,8 @@ describe('Gantt diagram', () => {
        axisFormat %d
        todayMarker off
        section Section1
-         Today: 1, -1h
+         Yesterday: 1010-10-09, 1d
+         Today: 1010-10-10, 1d
      `,
      {}
    );
@ -157,7 +176,8 @@ describe('Gantt diagram', () => {
      axisFormat %d
      todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
      section Section1
-       Today: 1, -1h
+       Yesterday: 1010-10-09, 1d
+       Today: 1010-10-10, 1d
      `,
      {}
    );
@ -310,38 +330,6 @@ describe('Gantt diagram', () => {
    );
  });

-  it('should render accessibility tags', function () {
-    const expectedTitle = 'Gantt Diagram';
-    const expectedAccDescription = 'Tasks for Q4';
-    renderGraph(
-      `
-      gantt
-      accTitle: ${expectedTitle}
-      accDescr: ${expectedAccDescription}
-      dateFormat  YYYY-MM-DD
-      section Section
-      A task :a1, 2014-01-01, 30d
-      `,
-      {}
-    );
-    cy.get('svg').should((svg) => {
-      const el = svg.get(0);
-      const children = Array.from(el.children);
-
-      const titleEl = children.find(function (node) {
-        return node.tagName === 'title';
-      });
-      const descriptionEl = children.find(function (node) {
-        return node.tagName === 'desc';
-      });
-
-      expect(titleEl).to.exist;
-      expect(titleEl.textContent).to.equal(expectedTitle);
-      expect(descriptionEl).to.exist;
-      expect(descriptionEl.textContent).to.equal(expectedAccDescription);
-    });
-  });
-
  it('should render a gantt diagram with tick is 15 minutes', () => {
    imgSnapshotTest(
      `
@ -467,4 +455,39 @@ describe('Gantt diagram', () => {
      { gantt: { topAxis: true } }
    );
  });
+
+  it('should render when compact is true', () => {
+    imgSnapshotTest(
+      `
+      ---
+      displayMode: compact
+      ---
+      gantt
+        title GANTT compact
+        dateFormat  HH:mm:ss
+        axisFormat  %Hh%M
+
+        section DB Clean
+        Clean: 12:00:00, 10m
+        Clean: 12:30:00, 12m
+        Clean: 13:00:00, 8m
+        Clean: 13:30:00, 9m
+        Clean: 14:00:00, 13m
+        Clean: 14:30:00, 10m
+        Clean: 15:00:00, 11m
+
+        section Sessions
+        A: 12:00:00, 63m
+        B: 12:30:00, 12m
+        C: 13:05:00, 12m
+        D: 13:06:00, 33m
+        E: 13:15:00, 55m
+        F: 13:20:00, 12m
+        G: 13:32:00, 18m
+        H: 13:50:00, 20m
+        I: 14:10:00, 10m
+    `,
+      {}
+    );
+  });
 });
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@ -328,7 +328,7 @@ describe('Git Graph diagram', () => {
 title: simple gitGraph
 ---
 gitGraph
-  commit
+  commit id: "1-abcdefg"
 `,
      {}
    );
--- a/cypress/integration/rendering/mindmap.spec.ts
+++ b/cypress/integration/rendering/mindmap.spec.ts
@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+import { imgSnapshotTest } from '../../helpers/util.js';

 /**
 * Check whether the SVG Element has a Mindmap root
@ -52,6 +52,17 @@ root[A root with a long text that wraps to keep the node size in check]
    );
  });

+  it('a root with wrapping text and long words that exceed width', () => {
+    imgSnapshotTest(
+      `mindmap
+root[A few smaller words but then averylongsetofcharacterswithoutwhitespacetoseparate that we expect to wrapontonextlinesandnotexceedwidthparameters]
+    `,
+      {},
+      undefined,
+      shouldHaveRoot
+    );
+  });
+
  it('a root with an icon', () => {
    imgSnapshotTest(
      `mindmap
@ -158,7 +169,6 @@ mindmap
      undefined,
      shouldHaveRoot
    );
-    cy.get('svg');
  });
  it('rounded rect shape', () => {
    imgSnapshotTest(
@ -172,7 +182,6 @@ mindmap
      undefined,
      shouldHaveRoot
    );
-    cy.get('svg');
  });
  it('circle shape', () => {
    imgSnapshotTest(
@ -186,7 +195,6 @@ mindmap
      undefined,
      shouldHaveRoot
    );
-    cy.get('svg');
  });
  it('default shape', () => {
    imgSnapshotTest(
@ -198,7 +206,6 @@ mindmap
      undefined,
      shouldHaveRoot
    );
-    cy.get('svg');
  });
  it('adding children', () => {
    imgSnapshotTest(
@ -212,7 +219,6 @@ mindmap
      undefined,
      shouldHaveRoot
    );
-    cy.get('svg');
  });
  it('adding grand children', () => {
    imgSnapshotTest(
@ -227,7 +233,19 @@ mindmap
      undefined,
      shouldHaveRoot
    );
-    cy.get('svg');
+  });
+  describe('Markdown strings mindmaps (#4220)', () => {
+    it('Formatted label with linebreak and a wrapping label and emojis', () => {
+      imgSnapshotTest(
+        `mindmap
+    id1[\`**Start** with
+    a second line 😎\`]
+      id2[\`The dog in **the** hog... a *very long text* about it
+Word!\`]
+`,
+        { titleTopMargin: 0 }
+      );
+    });
  });
  /* The end */
 });
--- a/cypress/integration/rendering/pie.spec.js
+++ b/cypress/integration/rendering/pie.spec.js
@ -75,4 +75,15 @@ describe('Pie Chart', () => {
      expect(svg).to.not.have.attr('style');
    });
  });
+  it('should render a pie diagram when textPosition is set', () => {
+    imgSnapshotTest(
+      `
+        pie
+          "Dogs": 50
+          "Cats": 25
+        `,
+      { logLevel: 1, pie: { textPosition: 0.9 } }
+    );
+    cy.get('svg');
+  });
 });
--- a/cypress/integration/rendering/quadrantChart.spec.js
+++ b/cypress/integration/rendering/quadrantChart.spec.js
@ -0,0 +1,163 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+
+describe('Quadrant Chart', () => {
+  it('should render if only chart type is provided', () => {
+    imgSnapshotTest(
+      `
+  quadrantChart
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render a complete quadrant chart', () => {
+    imgSnapshotTest(
+      `
+  quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+    Campaign F: [0.35, 0.78]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render without points', () => {
+    imgSnapshotTest(
+      `
+  quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should able to render y-axix on right side', () => {
+    imgSnapshotTest(
+      `
+  %%{init: {"quadrantChart": {"yAxisPosition": "right"}}}%%
+  quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should able to render x-axix on bottom', () => {
+    imgSnapshotTest(
+      `
+  %%{init: {"quadrantChart": {"xAxisPosition": "bottom"}}}%%
+  quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should able to render x-axix on bottom and y-axis on right', () => {
+    imgSnapshotTest(
+      `
+  %%{init: {"quadrantChart": {"xAxisPosition": "bottom", "yAxisPosition": "right"}}}%%
+  quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render without title', () => {
+    imgSnapshotTest(
+      `
+  quadrantChart
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should use all the config', () => {
+    imgSnapshotTest(
+      `
+  %%{init: {"quadrantChart": {"chartWidth": 600, "chartHeight": 600, "titlePadding": 20, "titleFontSize": 10, "quadrantPadding": 20, "quadrantTextTopPadding": 40, "quadrantLabelFontSize": 20, "quadrantInternalBorderStrokeWidth": 3, "quadrantExternalBorderStrokeWidth": 5, "xAxisLabelPadding": 20, "xAxisLabelFontSize": 20, "yAxisLabelPadding": 20, "yAxisLabelFontSize": 20, "pointTextPadding": 20, "pointLabelFontSize": 20, "pointRadius": 10 }}}%%
+  quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+    Campaign F: [0.35, 0.78]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should use all the theme variable', () => {
+    imgSnapshotTest(
+      `
+  %%{init: {"themeVariables": {"quadrant1Fill": "#b4dcff","quadrant2Fill": "#fef0ff", "quadrant3Fill": "#fffaf0", "quadrant4Fill": "#f0fff2", "quadrant1TextFill": "#ff0000", "quadrant2TextFill": "#2d00df", "quadrant3TextFill": "#00ffda", "quadrant4TextFill": "#e68300", "quadrantPointFill": "#0149ff", "quadrantPointTextFill": "#dc00ff", "quadrantXAxisTextFill": "#ffb500", "quadrantYAxisTextFill": "#fae604", "quadrantInternalBorderStrokeFill": "#3636f2", "quadrantExternalBorderStrokeFill": "#ff1010", "quadrantTitleFill": "#00ea19"} }}%%
+  quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+    Campaign F: [0.35, 0.78]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+});
--- a/cypress/integration/rendering/requirement.spec.js
+++ b/cypress/integration/rendering/requirement.spec.js
@ -46,69 +46,4 @@ describe('Requirement diagram', () => {
    );
    cy.get('svg');
  });
-
-  it('should render accessibility tags', function () {
-    const expectedTitle = 'Gantt Diagram';
-    const expectedAccDescription = 'Tasks for Q4';
-    renderGraph(
-      `
-    requirementDiagram
-    accTitle: ${expectedTitle}
-    accDescr: ${expectedAccDescription}
-
-    requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    functionalRequirement test_req2 {
-    id: 1.1
-    text: the second test text.
-    risk: low
-    verifymethod: inspection
-    }
-
-    performanceRequirement test_req3 {
-    id: 1.2
-    text: the third test text.
-    risk: medium
-    verifymethod: demonstration
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    element test_entity2 {
-    type: word doc
-    docRef: reqs/test_entity
-    }
-
-
-    test_entity - satisfies -> test_req2
-    test_req - traces -> test_req2
-    test_req - contains -> test_req3
-    test_req <- copies - test_entity2
-      `,
-      {}
-    );
-    cy.get('svg').should((svg) => {
-      const el = svg.get(0);
-      const children = Array.from(el.children);
-
-      const titleEl = children.find(function (node) {
-        return node.tagName === 'title';
-      });
-      const descriptionEl = children.find(function (node) {
-        return node.tagName === 'desc';
-      });
-
-      expect(titleEl).to.exist;
-      expect(titleEl.textContent).to.equal(expectedTitle);
-      expect(descriptionEl).to.exist;
-      expect(descriptionEl.textContent).to.equal(expectedAccDescription);
-    });
-  });
 });
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@ -1,8 +1,44 @@
 /// <reference types="Cypress" />

-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';

 context('Sequence diagram', () => {
+  it('should render a sequence diagram with boxes', () => {
+    renderGraph(
+      `
+    sequenceDiagram
+      box LightGrey Alice and Bob
+      participant Alice
+      participant Bob
+      end
+      participant John as John<br/>Second Line
+      Alice ->> Bob: Hello Bob, how are you?
+      Bob-->>John: How about you John?
+      Bob--x Alice: I am good thanks!
+      Bob-x John: I am good thanks!
+      Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+      Bob-->Alice: Checking with John...
+      alt either this
+        Alice->>John: Yes
+        else or this
+        Alice->>John: No
+        else or this will happen
+        Alice->John: Maybe
+      end
+      par this happens in parallel
+      Alice -->> Bob: Parallel message 1
+      and
+      Alice -->> John: Parallel message 2
+      end
+    `,
+      { sequence: { useMaxWidth: false } }
+    );
+    cy.get('svg').should((svg) => {
+      const width = parseFloat(svg.attr('width'));
+      expect(width).to.be.within(830 * 0.95, 830 * 1.05);
+      expect(svg).to.not.have.attr('style');
+    });
+  });
  it('should render a simple sequence diagram', () => {
    imgSnapshotTest(
      `
@ -52,6 +88,16 @@ context('Sequence diagram', () => {
      {}
    );
  });
+  it('should handle empty lines', () => {
+    imgSnapshotTest(
+      `
+      sequenceDiagram
+      Alice->>John: Hello John<br/>
+      John-->>Alice: Great<br/><br/>day!
+    `,
+      {}
+    );
+  });
  it('should handle line breaks and wrap annotations', () => {
    imgSnapshotTest(
      `
@ -80,7 +126,34 @@ context('Sequence diagram', () => {
        loop Loopy
            Bob->>Alice: Pasten
        end      `,
-      { wrap: true }
+      {
+        sequence: {
+          wrap: true,
+        },
+      }
+    );
+  });
+  it('should render a sequence diagram with par_over', () => {
+    imgSnapshotTest(
+      `
+        sequenceDiagram
+        participant Alice
+        participant Bob
+        participant John
+        par_over Section title
+          Alice ->> Bob: Message 1<br>Second line
+          Bob ->> John: Message 2
+        end
+        par_over Two line<br>section title
+          Note over Alice: Alice note
+          Note over Bob: Bob note<br>Second line
+          Note over John: John note
+        end
+        par_over Mixed section
+          Alice ->> Bob: Message 1
+          Note left of Bob: Alice/Bob Note
+        end
+      `
    );
  });
  context('font settings', () => {
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';

 describe('State diagram', () => {
  it('v2 should render a simple info', () => {
@ -328,7 +328,7 @@ describe('State diagram', () => {
      }
    );
  });
-  it('v2 it should be possibel to use a choice', () => {
+  it('v2 it should be possible to use a choice', () => {
    imgSnapshotTest(
      `
  stateDiagram-v2
@ -530,7 +530,7 @@ stateDiagram-v2
          [*] --> A
          A --> B: test({ foo#colon; 'far' })
          B --> [*]
-            classDef badBadEvent fill:#f00,color:white,font-weight:bold 
+            classDef badBadEvent fill:#f00,color:white,font-weight:bold
            class B badBadEvent
           `,
        { logLevel: 0, fontFamily: 'courier' }
@ -543,14 +543,14 @@ stateDiagram-v2
          classDef notMoving fill:white
          classDef movement font-style:italic;
          classDef badBadEvent fill:#f00,color:white,font-weight:bold
-    
+
          [*] --> Still
          Still --> [*]
          Still --> Moving
          Moving --> Still
          Moving --> Crash
          Crash --> [*]
-    
+
          class Still notMoving
          class Moving, Crash movement
          class Crash badBadEvent
--- a/cypress/integration/rendering/stateDiagram.spec.js
+++ b/cypress/integration/rendering/stateDiagram.spec.js
@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';

 describe('State diagram', () => {
  it('should render a simple state diagrams', () => {
--- a/cypress/integration/rendering/theme.spec.js
+++ b/cypress/integration/rendering/theme.spec.js
@ -25,6 +25,7 @@ describe('themeCSS balancing, it', () => {
  });
 });

+// TODO: Delete/Rename this describe, keeping the inner contents.
 describe('Pie Chart', () => {
  // beforeEach(()=>{
  //   cy.clock((new Date('2014-06-09')).getTime());
--- a/cypress/integration/rendering/timeline.spec.ts
+++ b/cypress/integration/rendering/timeline.spec.ts
@ -0,0 +1,164 @@
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+describe('Timeline diagram', () => {
+  it('1: should render a simple timeline with no specific sections', () => {
+    imgSnapshotTest(
+      `timeline
+    title History of Social Media Platform
+    2002 : LinkedIn
+    2004 : Facebook : Google
+    2005 : Youtube
+    2006 : Twitter
+      `,
+      {}
+    );
+  });
+  it('2: should render a timeline diagram with sections', () => {
+    imgSnapshotTest(
+      `timeline
+    title Timeline of Industrial Revolution
+    section 17th-20th century
+        Industry 1.0 : Machinery, Water power, Steam <br>power
+        Industry 2.0 : Electricity, Internal combustion engine, Mass production
+        Industry 3.0 : Electronics, Computers, Automation
+    section 21st century
+        Industry 4.0 : Internet, Robotics, Internet of Things
+        Industry 5.0 : Artificial intelligence, Big data,3D printing
+      `,
+      {}
+    );
+  });
+  it('3: should render a complex timeline with sections, and long events text with <br>', () => {
+    imgSnapshotTest(
+      `timeline
+        title England's History Timeline
+        section Stone Age
+          7600 BC : Britain's oldest known house was built in Orkney, Scotland
+          6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
+        section Broze Age
+          2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
+                  : New styles of pottery and ways of burying the dead appear.
+          2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
+                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
+      `,
+      {}
+    );
+  });
+  it('4: should render a simple timeline with directives and disableMultiColor:true ', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+      `,
+      {}
+    );
+  });
+  it('5: should render a simple timeline with directive overriden colors', () => {
+    imgSnapshotTest(
+      ` %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+              'cScale0': '#ff0000',
+              'cScale1': '#00ff00',
+              'cScale2': '#0000ff'
+       } } }%%
+       timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
+  it('6: should render a simple timeline in base theme', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
+
+  it('7: should render a simple timeline in default theme', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
+
+  it('8: should render a simple timeline in dark theme', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
+
+  it('9: should render a simple timeline in neutral theme', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
+
+  it('10: should render a simple timeline in forest theme', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
+    timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+      `,
+      {}
+    );
+  });
+});
--- a/cypress/integration/rendering/zenuml.spec.js
+++ b/cypress/integration/rendering/zenuml.spec.js
@ -0,0 +1,19 @@
+import { imgSnapshotTest } from '../../helpers/util.js';
+
+describe('Zen UML', () => {
+  it('Basic Zen UML diagram', () => {
+    imgSnapshotTest(
+      `
+    zenuml
+			A.method() {
+        if(x) {
+          B.method() {
+            selfCall() { return X }
+          }
+        }
+      }
+    `,
+      {}
+    );
+  });
+});
--- a/cypress/platform/ashish2.html
+++ b/cypress/platform/ashish2.html
@ -0,0 +1,231 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background:#333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+      }
+      h1 {
+        color: grey;
+      }
+      .mermaid2 {
+        display: none;
+      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+        background-color: #eee;
+        background-image: radial-gradient(#fff 1%, transparent 11%),
+          radial-gradient(#fff 1%, transparent 11%);
+        background-size: 20px 20px;
+        background-position: 0 0, 10px 10px;
+        background-repeat: repeat;
+      }
+      .malware {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>Security check</div>
+    <pre id="diagram" class="mermaid2">
+ timeline
+        title My day
+        section section with no tasks
+        section Go to work at the dog office
+          1930 : first step : second step is a long step
+               : third step
+          1940 : fourth step : fifth step
+        section Go home
+          1950 : India got independent and already won war against Pakistan
+          1960 : India fights poverty, looses war to China and gets nuclear weapons from USA and USSR
+          1970 : Green Revolution comes to india
+        section Another section with no tasks
+          I am a big big big tasks
+          I am not so big tasks
+    </pre>
+    <pre id="diagram" class="mermaid">
+ timeline
+        title MermaidChart 2023 Timeline
+        section 2023 Q1 <br> Release Personal Tier
+          Buttet 1 : sub-point 1a : sub-point 1b
+               : sub-point 1c
+          Bullet 2 : sub-point 2a : sub-point 2b
+        section 2023 Q2 <br> Release XYZ Tier
+          Buttet 3 : sub-point <br> 3a : sub-point 3b
+               : sub-point 3c
+          Bullet 4 : sub-point 4a : sub-point 4b
+
+    </pre>
+
+    <pre id="diagram" class="mermaid">
+ timeline
+        title England's History Timeline
+        section Stone Age
+          7600 BC : Britain's oldest known house was built in Orkney, Scotland
+          6000 BC : Sea levels rise and Britain becomes an island. The people who live here are hunter-gatherers.
+        section Broze Age
+          2300 BC : People arrive from Europe and settle in Britain. They bring farming and metalworking.
+               : New styles of pottery and ways of burying the dead appear.
+          2200 BC : The last major building works are completed at Stonehenge. People now bury their dead in stone circles.
+                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.
+
+    </pre>
+    <pre id="diagram" class="mermaid2">
+      %%{'init': { 'logLevel': 'debug', 'theme': 'default', 'timeline': {'disableMulticolor':false} } }%%
+ timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google : Pixar
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008s : Instagram
+          2010 : Pinterest
+    </pre>
+    <pre id="diagram" class="mermaid2">
+      %%{init: { 'logLevel': 'debug', 'theme': 'base', 'themeVariables': {
+              'cScale0': '#ff0000',
+              'cScale1': '#00ff00',
+              'cScale2': '#ff0000'
+              } } }%%
+ timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google : Pixar
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008s : Instagram
+          2010 : Pinterest
+    </pre>
+
+    <pre id="diagram" class="mermaid2">
+          %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
+              'cScale0': '#ff0000',
+              'cScale1': '#00ff00',
+              'cScale2': '#0000ff'
+       } } }%%
+       timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008 : Instagram
+          2010 : Pinterest
+
+    </pre>
+
+    <pre id="diagram" class="mermaid2">
+ timeline
+        title History of Social Media Platform
+          2002 : LinkedIn
+          2004 : Facebook : Google
+          2005 : Youtube
+          2006 : Twitter
+          2007 : Tumblr
+          2008s : Instagram
+          2010 : Pinterest
+    </pre>
+    <pre id="diagram" class="mermaid2">
+mindmap
+  root
+    child1((Circle))
+        grandchild 1
+        grandchild 2
+    child2(Round rectangle)
+        grandchild 3
+        grandchild 4
+    child3[Square]
+        grandchild 5
+        ::icon(mdi mdi-fire)
+        gc6((grand<br/>child 6))
+        ::icon(mdi mdi-fire)
+          gc7((grand<br/>grand<br/>child 8))
+        </pre>
+    <pre id="diagram" class="mermaid2">
+      flowchart-elk TB
+      a --> b
+      a --> c
+      b --> d
+      c --> d
+    </pre>
+
+    <!-- <div id="cy"></div> -->
+    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
+    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
+    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
+    <script type="module">
+      //import mindmap from '../../packages/mermaid-mindmap/src/detector';
+      // import example from '../../packages/mermaid-example-diagram/src/detector';
+      // import timeline from '../../packages/mermaid-timeline/src/detector';
+      import mermaid from './mermaid.esm.mjs';
+      // await mermaid.registerExternalDiagrams([]);
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'base',
+        startOnLoad: true,
+        logLevel: 0,
+        flowchart: {
+          useMaxWidth: false,
+          htmlLabels: true,
+        },
+        gantt: {
+          useMaxWidth: false,
+        },
+        timeline: {
+          disableMulticolor: false,
+          htmlLabels: false,
+        },
+        useMaxWidth: true,
+        lazyLoadedDiagrams: [
+          // './mermaid-mindmap-detector.esm.mjs',
+          // './mermaid-example-diagram-detector.esm.mjs',
+          //'./mermaid-timeline-detector.esm.mjs',
+        ],
+      });
+      function callback() {
+        alert('It worked');
+      }
+      mermaid.parseError = function (err, hash) {
+        console.error('In parse error:');
+        console.error(err);
+      };
+      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
+      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
+      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
+      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
+    </script>
+  </body>
+</html>
--- a/cypress/platform/bundle-test.js
+++ b/cypress/platform/bundle-test.js
@ -1,4 +1,5 @@
-import mermaid from '../../packages/mermaid/src/mermaid';
+// TODO: this file should be testing the ./mermaid.core.mjs file, as that's the file listed in the package.json file that users will use
+import mermaid from './mermaid.esm.mjs';

 let code = `flowchart LR
 Power_Supply --> Transmitter_A
@ -49,13 +50,9 @@ mermaid.initialize({
    ],
  },
 });
-mermaid.render(
-  'the-id-of-the-svg',
-  code,
-  (svg) => {
-    console.log(svg);
-    const elem = document.querySelector('#graph-to-be');
-    elem.innerHTML = svg;
-  }
-  // ,document.querySelector('#tmp')
-);
+void (async () => {
+  const { svg } = await mermaid.render('the-id-of-the-svg', code);
+  console.log(svg);
+  const elem = document.querySelector('#graph-to-be');
+  elem.innerHTML = svg;
+})();
--- a/cypress/platform/class.html
+++ b/cypress/platform/class.html
@ -12,7 +12,6 @@
    <style>
      body {
        background: rgb(221, 208, 208);
-        /*background:#333;*/
        font-family: 'Arial';
      }
      h1 {
@ -46,13 +45,9 @@
    <pre class="mermaid" style="width: 100%; height: 20%">
      %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
      classDiagram-v2
-       class BankAccount{
-        +String owner
-        +BigDecimal balance
-        +deposit(amount) bool
-        +withdrawl(amount) int
-       }
-       cssClass "BankAccount" customCss
+classA <|-- classB : implements
+classC *-- classD : composition
+classE o-- classF : aggregation
    </pre>
    <pre class="mermaid2" style="width: 100%; height: 20%">
        %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
@ -117,24 +112,16 @@
        callback Shape "callbackFunction" "This is a tooltip for a callback"

    </pre>
-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
        theme: 'default',
-        // arrowMarkerAbsolute: true,
-        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
        flowchart: { curve: 'linear', htmlLabels: true },
-        // gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorMargin: 50, showSequenceNumbers: true },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
-        // fontFamily: '"arial", sans-serif',
-        // themeVariables: {
-        //   fontFamily: '"arial", sans-serif',
-        // },
        curve: 'linear',
        securityLevel: 'loose',
      });
--- a/cypress/platform/click_security_loose.html
+++ b/cypress/platform/click_security_loose.html
@ -125,7 +125,6 @@
      </pre>
    </div>

-    <script src="./mermaid.js"></script>
    <script>
      function clickByFlow(elemName) {
        const div = document.createElement('div');
@ -162,6 +161,9 @@

        document.getElementsByTagName('body')[0].appendChild(div);
      }
+    </script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
      mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
    </script>
  </body>
--- a/cypress/platform/click_security_other.html
+++ b/cypress/platform/click_security_other.html
@ -59,8 +59,8 @@
    Add another diagram to demo page    : 48h
    </pre>

-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
      function clickByFlow(elemName) {
        const div = document.createElement('div');
        div.className = 'created-by-click';
--- a/cypress/platform/click_security_sandbox.html
+++ b/cypress/platform/click_security_sandbox.html
@ -125,8 +125,8 @@
      </pre>
    </div>

-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
      function clickByFlow(elemName) {
        const div = document.createElement('div');
        div.className = 'created-by-click';
--- a/cypress/platform/click_security_strict.html
+++ b/cypress/platform/click_security_strict.html
@ -61,8 +61,8 @@
    Add another diagram to demo page    : 48h
    </pre>

-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
      function clickByFlow(elemName) {
        const div = document.createElement('div');
        div.className = 'created-by-click';
--- a/cypress/platform/css1.html
+++ b/cypress/platform/css1.html
@ -28,8 +28,8 @@
    end
    A --> B
    </pre>
-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
      function showFullFirstSquad(elemName) {
        console.log('show ' + elemName);
      }
--- a/cypress/platform/current2.html
+++ b/cypress/platform/current2.html
@ -107,8 +107,8 @@ Note over Alice,Bob: Looks
 Note over Bob,Alice: Looks back
    </pre>

-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
--- a/cypress/platform/e2e.html
+++ b/cypress/platform/e2e.html
@ -1,32 +1,12 @@
 <html>
  <head>
    <meta charset="utf-8" />
-    <!-- <meta charset="iso-8859-15"/> -->
    <script src="./viewer.js" type="module"></script>
-    <!-- <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet" /> -->
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
      rel="stylesheet"
    />
    <style>
-      body {
-        /* font-family: 'Mansalva', cursive;*/
-        /* font-family: 'Mansalva', cursive; */
-        /* font-family: 'arial'; */
-        /* font-family: "trebuchet ms", verdana, arial; */
-      }
-      /* div {
-        font-family: 'arial';
-      } */
-      /* .mermaid-main-font {
-        font-family: "trebuchet ms", verdana, arial;
-        font-family: var(--mermaid-font-family);
-      } */
-      /* :root {
-        --mermaid-font-family: '"trebuchet ms", verdana, arial';
-        --mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
-        --mermaid-font-family: '"Lucida Console", Monaco, monospace';
-      } */
      svg {
        border: 2px solid darkred;
      }
@ -36,21 +16,5 @@
      }
    </style>
  </head>
-  <body>
-    <!-- <script src="./mermaid.js"></script> -->
-    <script>
-      // Notice startOnLoad=false
-      // This prevents default handling in mermaid from render before the e2e logic is applied
-      // mermaid.initialize({
-      //   startOnLoad: false,
-      //   useMaxWidth: true,
-      //   // "themeCSS": ":root { --mermaid-font-family: \"trebuchet ms\", verdana, arial;}",
-      //   // fontFamily: '\"trebuchet ms\", verdana, arial;'
-      //   // fontFamily: '"Comic Sans MS", "Comic Sans", cursive'
-      //   // fontFamily: '"Mansalva", cursive',
-      //   // fontFamily: '"Noto Sans SC", sans-serif'
-      //   fontFamily: '"Noto Sans SC", sans-serif'
-      // });
-    </script>
-  </body>
+  <body></body>
 </html>
--- a/cypress/platform/external-diagrams-example-diagram.html
+++ b/cypress/platform/external-diagrams-example-diagram.html
@ -2,34 +2,8 @@
  <body>
    <h1>Should correctly load a third-party diagram using registerDiagram</h1>
    <pre id="diagram" class="mermaid">
-mindmap
-  root
-    A
-    B
-    C
-    D
-    E
-    A2
-    B2
-    C2
-    D2
-    E2
-    child1((Circle))
-        grandchild 1
-        grandchild 2
-    child2(Round rectangle)
-        grandchild 3
-        grandchild 4
-    child3[Square]
-        grandchild 5
-        ::icon(mdi mdi-fire)
-        gc6((grand<br/>child 6))
-        ::icon(mdi mdi-fire)
-          gc7((grand<br/>grand<br/>child 8))
+example-diagram
    </pre>
-    <!-- <pre id="diagram" class="mermaid2">
-      example-diagram
-    </pre> -->

    <!-- <div id="cy"></div> -->
    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
@ -37,13 +11,16 @@ mindmap
    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
    <!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
    <script type="module">
-      import mindmap from '../../packages/mermaid-mindmap/src/detector';
+      import exampleDiagram from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
      // import example from '../../packages/mermaid-example-diagram/src/detector';
-      import mermaid from '../../packages/mermaid/src/mermaid';
+      import mermaid from './mermaid.esm.mjs';

-      await mermaid.registerExternalDiagrams([mindmap]);
+      await mermaid.registerExternalDiagrams([exampleDiagram]);
      await mermaid.initialize({ logLevel: 0 });
-      await mermaid.initThrowsErrorsAsync();
+      await mermaid.run();
+      if (window.Cypress) {
+        window.rendered = true;
+      }
    </script>
  </body>
 </html>
--- a/cypress/platform/flow.html
+++ b/cypress/platform/flow.html
@ -29,8 +29,8 @@
        click a_a "http://www.aftonbladet.se" "apa"
    </pre>

-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
      mermaid.initialize({
        theme: 'forest',
        // themeCSS: '.node rect { fill: red; }',
--- a/cypress/platform/flow2.html
+++ b/cypress/platform/flow2.html
@ -0,0 +1,46 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <style>
+      body {
+        font-family: 'trebuchet ms', verdana, arial;
+      }
+    </style>
+  </head>
+  <body>
+    <pre class="mermaid">
+      graph TB
+      subgraph One
+        a1-->a2-->a3
+      end
+    </pre>
+    <pre class="mermaid">
+      graph TB
+        a_a --> b_b:::apa --> c_c:::apa
+        classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
+        class a_a apa;
+    </pre>
+    <pre class="mermaid">
+      graph TB
+        a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
+        a_a --> c --> d_d --> c_c
+        classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
+        class a_a apa;
+        click a_a "http://www.aftonbladet.se" "apa"
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+
+      mermaid.initialize({
+        theme: 'forest',
+        // themeCSS: '.node rect { fill: red; }',
+        logLevel: 3,
+        flowchart: { curve: 'linear' },
+        gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50 },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+      });
+    </script>
+  </body>
+</html>
--- a/cypress/platform/ghsa1.html
+++ b/cypress/platform/ghsa1.html
@ -4,23 +4,26 @@
  </script>
  <body>
    <div id="target">
-      <h1>This element does not belong to the SVG but we can style it</h1>
+      <h1>Background should be yellow!!!</h1>
    </div>
    <svg id="diagram"></svg>

-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
      mermaid.initialize({ startOnLoad: false, logLevel: 0 });

      const graph = `
-     %%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
-            graph TD
-                A[Goose]
-            `;
+      %%{ init: { "themeVariables" : { "textColor": "green;} #target { background-color: crimson }", "mainBkg": "#fff000" } } }%%
+             graph TD
+                 A[Goose]
+             `;

      const diagram = document.getElementById('diagram');
-      const svg = mermaid.render('diagram-svg', graph);
+      const { svg } = await mermaid.render('diagram-svg', graph);
      diagram.innerHTML = svg;
+      if (window.Cypress) {
+        window.rendered = true;
+      }
    </script>
  </body>
 </html>
--- a/cypress/platform/ghsa2.html
+++ b/cypress/platform/ghsa2.html
@ -8,8 +8,8 @@
    </div>
    <svg id="diagram"></svg>

-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
      mermaid.initialize({ startOnLoad: false, logLevel: 0 });

      const graph = `
@ -19,8 +19,11 @@
            `;

      const diagram = document.getElementById('diagram');
-      const svg = mermaid.render('diagram-svg', graph);
+      const { svg } = await mermaid.render('diagram-svg', graph);
      diagram.innerHTML = svg;
+      if (window.Cypress) {
+        window.rendered = true;
+      }
    </script>
  </body>
 </html>
--- a/cypress/platform/ghsa3.html
+++ b/cypress/platform/ghsa3.html
@ -0,0 +1,101 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background:#333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+      }
+      h1 {
+        color: grey;
+      }
+      .mermaid2 {
+        display: none;
+      }
+      .mermaid svg {
+        /* font-size: 18px !important; */
+      }
+      .malware {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 150px;
+        background: red;
+        color: black;
+        display: flex;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-family: monospace;
+        font-size: 72px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>PAGE SHOULD NOT BE RED</h1>
+    <div class="flex">
+      <div id="diagram" class="mermaid"></div>
+      <div id="res" class=""></div>
+    </div>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'forest',
+        arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        state: {
+          defaultRenderer: 'dagre-wrapper',
+        },
+        flowchart: {
+          // defaultRenderer: 'dagre-wrapper',
+          nodeSpacing: 10,
+          curve: 'cardinal',
+          htmlLabels: true,
+        },
+        htmlLabels: true,
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        // fontFamily: '"times", sans-serif',
+        // fontFamily: 'courier',
+        fontSize: 18,
+        curve: 'basis',
+        // securityLevel: 'strict',
+        startOnLoad: false,
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      function callback() {
+        alert('It worked');
+      }
+
+      let diagram = '%%{init: {"flowchart": {"htmlLabels": "true"}} }%%\n';
+      diagram += 'flowchart\n';
+      diagram += 'A["<p><sty';
+      diagram += 'le> * { background : red}</style>test</p>"]';
+
+      console.log(diagram);
+      const { svg } = await mermaid.render('diagram', diagram);
+      document.querySelector('#res').innerHTML = svg;
+      if (window.Cypress) {
+        window.rendered = true;
+      }
+    </script>
+  </body>
+</html>
--- a/cypress/platform/git-graph.html
+++ b/cypress/platform/git-graph.html
@ -43,8 +43,8 @@
       cssClass "BankAccount" customCss
    </pre>

-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
--- a/cypress/platform/gitgraph.html
+++ b/cypress/platform/gitgraph.html
@ -130,8 +130,8 @@
      commit
      merge main
    </pre>
-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
--- a/cypress/platform/gitgraph2.html
+++ b/cypress/platform/gitgraph2.html
@ -98,8 +98,8 @@
      commit
      merge main
    </pre>
-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
--- a/cypress/platform/huge.html
+++ b/cypress/platform/huge.html
--- a/cypress/platform/info.html
+++ b/cypress/platform/info.html
@ -7,8 +7,8 @@
    <pre class="mermaid">
 info
    </pre>
-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
      mermaid.initialize({
        theme: 'forest',
        // themeCSS: '.node rect { fill: red; }',
--- a/cypress/platform/interaction.html
+++ b/cypress/platform/interaction.html
@ -87,8 +87,8 @@
    Add another diagram to demo page    : 48h
    </pre>

-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
      function clickByFlow(elemName) {
        const div = document.createElement('div');
        div.className = 'created-by-click';
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@ -42,368 +42,86 @@
    </style>
  </head>
  <body>
-    <pre class="mermaid2" style="width: 50%">
-flowchart LR
-  subgraph one
-    direction LR
-    A[myClass1] --> B[default]
-    subgraph two
-      direction BT
-      C[myClass2] --> D[default]
-    end
-  end
+    <pre class="mermaid" style="width: 50%">
+      %%{init: {"flowchart": {"htmlLabels": true}} }%%
+      flowchart LR
+      b("`The dog in **the** hog.(1).. a a a a *very long text* about it
+      Word!
+      
+      Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words.`") --apa--> c
+      
+          </pre
+    >
+    <pre class="mermaid" style="width: 50%">
+      classDiagram-v2

+      classA -- classB : Inheritance
+      classA -- classC : link
+      classC -- classD : link
+      classB -- classD
    </pre>
-    <pre class="mermaid2" style="width: 50%">
-flowchart LR
-  classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
-  classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
-  classDef type stroke:#502604,fill:#FAB565,color:#502604,rx:20px,ry:20px;;
-
-  O0("Joe")
-  class O0 aPID;
-
-  O1("Person")
-  class O1 crm;
-  O0 -- has type -->O1["Person"]
-
-  O2("aat:300411314")
-  class O2 type;
-  click O2 function "Sorry the newline html tags are not being processed correctly<br/> So all of this appears on the <br/> same line."
-  O0 -- has type -->O2["Bug"]
-  click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred";
+    <pre class="mermaid" style="width: 50%">
+      sequenceDiagram
+      Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
+      loop Loopy
+          Bob->>Alice: Pasten
+      end
    </pre>
-    <pre class="mermaid2" style="width: 50%">
-flowchart TD
-    subgraph test
-    direction TB
-    subgraph test2
-      direction LR
-      F --> D
-    end
-    subgraph test3
-      direction TB
-      G --> H
-    end
-    end
+    <pre class="mermaid" style="width: 50%">
+      %%{init: {"flowchart": {"htmlLabels": false}} }%%
+      flowchart LR
+      b("`The dog in **the** hog.(1)
+      NL`") --"`1o **bold**`"--> c[new strings svg labels]
    </pre>
-    <pre class="mermaid2" style="width: 50%">
-flowchart TD
-
-  release-branch[Create Release Branch]:::relClass
-  develop-branch[Update Develop Branch]:::relClass
-  github-release-draft[GitHub Release Draft]:::relClass
-  trigger-pipeline[Trigger Jenkins pipeline]:::fixClass
-  github-release[GitHub Release]:::postClass
-
-  build-ready --> release-branch
-  build-ready --> develop-branch
-  release-branch --> jenkins-release-build
-  jenkins-release-build --> github-release-draft
-  jenkins-release-build --> install-release
-  install-release --> verify-release
-  jenkins-release-build --> announce
-  github-release-draft --> github-release
-  verify-release --> verify-check
-  verify-check -- Yes --> github-release
-  verify-check -- No --> release-fix
-  release-fix --> release-branch-pr
-  verify-check -- No --> delete-artifacts
-  release-branch-pr --> trigger-pipeline
-  delete-artifacts --> trigger-pipeline
-  trigger-pipeline --> jenkins-release-build
-
-
+    <pre class="mermaid" style="width: 50%">
+      %%{init: {"flowchart": {"htmlLabels": true}} }%%
+      flowchart LR
+      b("`The dog in **the** hog.(1)
+      NL`") --"`1o **bold**`"--> c[new strings html labels]
    </pre>
-    <pre class="mermaid2" style="width: 50%">
-flowchart LR
-        a["<strong>Haiya</strong>"]===>b
+    <pre class="mermaid" style="width: 50%">
+      %%{init: {"flowchart": {"htmlLabels": true}} }%%
+      flowchart LR
+      b("The dog in the hog.(1)\nNL") --"1o bold"--> c[old strings svg labels]
    </pre>
-    <pre class="mermaid2" style="width: 50%">
-flowchart TD
-    A --> B
-    A --> C
-    B --> C
-    </pre>
-    <pre class="mermaid2" style="width: 50%">
-flowchart TD
-      A([stadium shape test])
-      A -->|Get money| B([Go shopping])
-      B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
-      C -->|One| D([Laptop])
-      C -->|Two| E([iPhone])
-      C -->|Three| F([Car<br/>wroom wroom])
-      click A "index.html#link-clicked" "link test"
-      click B testClick "click test"
-      classDef someclass fill:#f96;
-      class A someclass;
-      class C someclass;
-    </pre>
-    <pre class="mermaid2" style="width: 50%">
-   sequenceDiagram
-      title: My Sequence Diagram Title
-      accTitle: My Acc Sequence Diagram
-      accDescr: My Sequence Diagram Description
-
-      Alice->>John: Hello John, how are you?
-      John-->>Alice: Great!
-      Alice-)John: See you later!
-    </pre>
-    <pre class="mermaid2" style="width: 50%">
-graph TD
-    A -->|000| B
-    B -->|111| C
-
-    linkStyle 1 stroke:#ff3,stroke-width:4px,color:red;
-    </pre>
-    <pre class="mermaid2" style="width: 100%">
-  journey
-      accTitle: My User Journey Diagram
-      accDescr: My User Journey Diagram Description
-
-      title My working day
-      section Go to work
-        Make tea: 5: Me
-        Go upstairs: 3: Me
-        Do work: 1: Me, Cat
-      section Go home
-        Go downstairs: 5: Me
-        Sit down: 5: Me
-    </pre>
-    <pre class="mermaid2" style="width: 100%">
-        info
-    </pre>
-    <pre class="mermaid2" style="width: 100%">
-requirementDiagram
-      accTitle: My req Diagram
-      accDescr: My req Diagram Description
-
-    requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    functionalRequirement test_req2 {
-    id: 1.1
-    text: the second test text.
-    risk: low
-    verifymethod: inspection
-    }
-
-    performanceRequirement test_req3 {
-    id: 1.2
-    text: the third test text.
-    risk: medium
-    verifymethod: demonstration
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    element test_entity2 {
-    type: word doc
-    docRef: reqs/test_entity
-    }
-
-
-    test_entity - satisfies -> test_req2
-    test_req - traces -> test_req2
-    test_req - contains -> test_req3
-    test_req <- copies - test_entity2
-    </pre>
-    <pre class="mermaid2" style="width: 100%">
-gantt
-    dateFormat  YYYY-MM-DD
-    title       Adding GANTT diagram functionality to mermaid
-    excludes    weekends
-    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
-
-    section A section
-    Completed task            :done,    des1, 2014-01-06,2014-01-08
-    Active task               :active,  des2, 2014-01-09, 3d
-    Future task               :         des3, after des2, 5d
-    Future task2              :         des4, after des3, 5d
-
-    section Critical tasks
-    Completed task in the critical line :crit, done, 2014-01-06,24h
-    Implement parser and jison          :crit, done, after des1, 2d
-    Create tests for parser             :crit, active, 3d
-    Future task in critical line        :crit, 5d
-    Create tests for renderer           :2d
-    Add to mermaid                      :1d
-    Functionality added                 :milestone, 2014-01-25, 0d
-
-    section Documentation
-    Describe gantt syntax               :active, a1, after des1, 3d
-    Add gantt diagram to demo page      :after a1  , 20h
-    Add another diagram to demo page    :doc1, after a1  , 48h
-
-    section Last section
-    Describe gantt syntax               :after doc1, 3d
-    Add gantt diagram to demo page      :20h
-    Add another diagram to demo page    :48h
-    </pre>
-    <pre class="mermaid2" style="width: 100%">
-stateDiagram
-  state Active {
-    Idle
-  }
-  Inactive --> Idle: ACT
-  Active --> Active: LOG
-    </pre>
-    <pre class="mermaid2" style="width: 100%">
-      flowchart TB
-        accTitle: My flowchart
-        accDescr: My flowchart Description
-        subgraph One
-          a1-->a2-->a3
-        end
-    </pre>
-    <pre class="mermaid2" style="width: 100%">
-        sequenceDiagram
-          A ->> B: 1
-          rect rgb(204, 0, 102)
-            break yes
-              rect rgb(0, 204, 204)
-                C ->> C: 0
-              end
-            end
-          end
-          B ->> A: Return
-    </pre>
-    <pre class="mermaid2" style="width: 100%">
-classDiagram
-accTitle: My class diagram
-accDescr: My class diagram Description
-Class01 <|-- AveryLongClass : Cool
-Class09 --> C2 : Where am i?
-Class09 --* C3
-Class09 --|> Class07
-Class07 : equals()
-Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
-class Class10 {
-  int id
-  size()
-}
-    </pre>
-    <pre class="mermaid2" style="width: 100%">
-%%{init: {'config': {'wrap': true }}}%%
-        sequenceDiagram
-        participant A as Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
-        A->>Bob: Hola
-        Bob-->A: Pasten !
-    </pre>
-    <pre class="mermaid2" style="width: 100%">
-      gitGraph
-       commit id: "ZERO"
-       branch develop
-       commit id:"A"
-       checkout main
-       commit id:"ONE"
-       checkout develop
-       commit id:"B"
-       branch featureA
-       commit id:"FIX"
-       commit id: "FIX-2"
-       checkout main
-       commit id:"TWO"
-       cherry-pick id:"A"
-       commit id:"THREE"
-       cherry-pick id:"FIX"
-       checkout develop
-       commit id:"C"
-       merge featureA
-    </pre>
-    <pre class="mermaid2" style="width: 100%">
-flowchart TD
-      A[Christmas] -->|Get money| B(Go shopping)
-      B --> C{Let me think}
-      C -->|One| D[Laptop]
-      C -->|Two| E[iPhone]
-      C -->|Three| F[fa:fa-car Car]
-    </pre>
-    <pre class="mermaid2" style="width: 100%">
-        classDiagram
-          Animal "1" <|-- Duck
-          Animal <|-- Fish
-          Animal <--o Zebra
-          Animal : +int age
-          Animal : +String gender
-          Animal: +isMammal()
-          Animal: +mate()
-          class Duck{
-            +String beakColor
-            +swim()
-            +quack()
-          }
-          class Fish{
-            -int sizeInFeet
-            -canEat()
-          }
-          class Zebra{
-            +bool is_wild
-            +run()
-          }
-    </pre>
-    <pre class="mermaid2" style="width: 100%">
-        erDiagram
-    CAR ||--o{ NAMED-DRIVER : allows
-    CAR {
-        string registrationNumber
-        string make
-        string model
-    }
-    PERSON ||--o{ NAMED-DRIVER : is
-    PERSON {
-        string firstName
-        string lastName
-        int age
-    }
-    </pre>
-
-    <!-- <script src="./mermaid.js"></script> -->
-    <script src="./mermaid.js"></script>
-    <script>
+    <script type="module">
+      // import mindmap from '../../packages/mermaid-mindmap/src/detector';
+      // import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
+      import mermaid from './mermaid.esm.mjs';
+      // await mermaid.registerExternalDiagrams([example]);
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
-        maxTextSize: 900000,
+        // theme: 'forest',
        startOnLoad: true,
-        securityLevel: 'loose',
        logLevel: 0,
-        fontFamily: 'courier',
        flowchart: {
-          // curve: 'curveLinear',
-          useMaxWidth: true,
-          htmlLabels: false,
-          fontFamily: 'courier',
+          // defaultRenderer: 'elk',
+          useMaxWidth: false,
+          // htmlLabels: false,
+          htmlLabels: true,
        },
-        lazyLoadedDiagrams: ['./mermaid-mindmap-detector.js'],
+        // htmlLabels: false,
+        gantt: {
+          useMaxWidth: false,
+        },
+        sequence: {
+          wrap: true,
+        },
+        useMaxWidth: false,
      });
      function callback() {
        alert('It worked');
      }
-
-      function clickByFlow(elemName) {
-        const div = document.createElement('div');
-        div.className = 'created-by-click';
-        div.style = 'padding: 20px; background: green; color: white;';
-        div.innerText = 'Clicked By Flow';
-
-        document.getElementsByTagName('body')[0].appendChild(div);
-      }
-
      mermaid.parseError = function (err, hash) {
        console.error('In parse error:');
        console.error(err);
      };
+      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
+      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
+      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
+      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
    </script>
  </body>
 </html>
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@ -29,9 +29,9 @@
      }
      .mermaid svg {
        /* font-size: 18px !important; */
-        background-color: #eee;
-        background-image: radial-gradient(#fff 1%, transparent 11%),
-          radial-gradient(#fff 1%, transparent 11%);
+        background-color: #efefef;
+        background-image: radial-gradient(#fff 51%, transparent 91%),
+          radial-gradient(#fff 51%, transparent 91%);
        background-size: 20px 20px;
        background-position: 0 0, 10px 10px;
        background-repeat: repeat;
@ -51,68 +51,369 @@
        font-family: monospace;
        font-size: 72px;
      }
+      /* tspan {
+        font-size: 6px !important;
+      } */
    </style>
  </head>
  <body>
-    <div>Security check</div>
    <pre id="diagram" class="mermaid">
-flowchart TD
-    A --> B
-    B --> C
-    A --> C
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]    </pre
+    >
+    <pre id="diagram" class="mermaid2">
+flowchart RL
+    subgraph "`one`"
+      a1 -- l1 --> a2
+      a1 -- l2 --> a2
+    end
    </pre>
    <pre id="diagram" class="mermaid">
-mindmap
-  root
-    child1((Circle))
-        grandchild 1
-        grandchild 2
-    child2(Round rectangle)
-        grandchild 3
-        grandchild 4
-    child3[Square]
-        grandchild 5
-        ::icon(mdi mdi-fire)
-        gc6((grand<br/>child 6))
-        ::icon(mdi mdi-fire)
-          gc7((grand<br/>grand<br/>child 8))
-        </pre>
+flowchart RL
+    subgraph "`one`"
+      a1 -- l1 --> a2
+      a1 -- l2 --> a2
+    end
+    </pre>
+    <pre id="diagram" class="mermaid2">
+flowchart
+id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]</pre
+    >
+    <pre id="diagram" class="mermaid2">
+flowchart LR
+    A[A text that needs to be wrapped wraps to another line]
+    B[A text that needs to be<br/>wrapped wraps to another line]
+    C["`A text that needs to be wrapped to another line`"]</pre>
+    <pre id="diagram" class="mermaid2">
+flowchart LR
+    C["`A text
+        that needs
+        to be wrapped
+        in another
+        way`"]
+  </pre
+    >
    <pre id="diagram" class="mermaid">
-      gantt
-        title Style today marker (vertical line should be 5px wide and half-transparent blue)
-        dateFormat YYYY-MM-DD
-        axisFormat %d
-        todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
-        section Section1
-        Today: 1, -1h
+      classDiagram-v2
+        note "I love this diagram!\nDo you love it?"
+    </pre>
+    <pre id="diagram" class="mermaid">
+    stateDiagram-v2
+    State1: The state with a note with minus - and plus + in it
+    note left of State1
+      Important information! You can write
+      notes with . and  in them.
+    end note    </pre
+    >
+    <pre id="diagram" class="mermaid2">
+mindmap
+root
+  Child3(A node with an icon and with a long text that wraps to keep the node size in check)
+</pre
+    >
+    <pre id="diagram" class="mermaid2">
+      %%{init: {"theme": "forest"} }%%
+mindmap
+    id1[**Start2**<br/>end]
+      id2[**Start2**<br />end]
+      %% Another comment
+      id3[**Start2**<br>end] %% Comment
+      id4[**Start2**<br >end<br    >the very end]
+    </pre>
+    <pre id="diagram" class="mermaid2">
+mindmap
+    id1["`**Start2**
+    second line 😎 with long text that is wrapping to the next line`"]
+      id2["`Child **with bold** text`"]
+      id3["`Children of which some
+      is using *italic type of* text`"]
+      id4[Child]
+      id5["`Child
+      Row
+      and another
+      `"]
+    </pre>
+    <pre id="diagram" class="mermaid2">
+mindmap
+    id1("`**Root**`"]
+      id2["`A formatted text... with **bold** and *italics*`"]
+      id3[Regular labels works as usual]
+      id4["`Emojis and unicode works too: 🤓
+      शान्तिः سلام  和平 `"]
+
+    </pre>
+    <pre id="diagram" class="mermaid">
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd["`**AMD** Latte GPU`"]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+    <pre id="diagram" class="mermaid2">
+%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd["`**AMD** Latte GPU`"]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+
+    <br />
+    <pre id="diagram" class="mermaid2">
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd[AMD Latte GPU]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+    <br />
+    &nbsp;
+    <pre id="diagram" class="mermaid2">
+      flowchart LR
+  B1 --be be--x B2
+  B1 --bo bo--o B3
+  subgraph Ugge
+      B2
+      B3
+      subgraph inner
+          B4
+          B5
+      end
+      subgraph inner2
+        subgraph deeper
+          C4
+          C5
+        end
+        C6
+      end
+
+      B4 --> C4
+
+      B3 -- X --> B4
+      B2 --> inner
+
+      C4 --> C5
+  end
+
+  subgraph outer
+      B6
+  end
+  B6 --> B5
+  </pre
+    >
+    <pre id="diagram" class="mermaid2">
+sequenceDiagram
+    Customer->>+Stripe: Makes a payment request
+    Stripe->>+Bank: Forwards the payment request to the bank
+    Bank->>+Customer: Asks for authorization
+    Customer->>+Bank: Provides authorization
+    Bank->>+Stripe: Sends a response with payment details
+    Stripe->>+Merchant: Sends a notification of payment receipt
+    Merchant->>+Stripe: Confirms the payment
+    Stripe->>+Customer: Sends a confirmation of payment
+    Customer->>+Merchant: Receives goods or services
+        </pre
+    >
+    <pre id="diagram" class="mermaid2">
+mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectiveness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid
+    </pre>
+    <br />
+    <pre id="diagram" class="mermaid2">
+  example-diagram
    </pre>

    <!-- <div id="cy"></div> -->
    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
-    <script src="./mermaid.js"></script>
+    <!-- <script src="./mermaid.js"></script> -->

-    <script>
+    <script type="module">
+      // import mindmap from '../../packages/mermaid-mindmap/src/detector';
+      // import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
+      import mermaid from './mermaid.esm.mjs';
+      // await mermaid.registerExternalDiagrams([example]);
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
-        theme: 'base',
+        // theme: 'forest',
        startOnLoad: true,
        logLevel: 0,
        flowchart: {
+          // defaultRenderer: 'elk',
          useMaxWidth: false,
+          // htmlLabels: false,
          htmlLabels: true,
        },
+        // htmlLabels: false,
        gantt: {
          useMaxWidth: false,
        },
        useMaxWidth: false,
-        lazyLoadedDiagrams: [
-          './mermaid-mindmap-detector.esm.mjs',
-          './mermaid-example-diagram-detector.esm.mjs',
-        ],
      });
      function callback() {
        alert('It worked');
--- a/cypress/platform/knsv3.html
+++ b/cypress/platform/knsv3.html
@ -1,257 +1,111 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mindmap Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background:#333; */
-        font-family: 'Courier New', Courier, monospace;
-        /* font-size: 18px !important; */
-      }
-      h1 {
-        color: grey;
-      }
-      .mermaid2 {
-        display: none;
-      }
-      .mermaid {
-        border: 1px solid red;
-        font-family: 'Courier New', Courier, monospace;
-        /* font-size: 18px !important; */
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
      }
    </style>
  </head>
+
  <body>
-    <div>info below</div>
-    <div class="">
-      <pre class="mermaid2" style="width: 100%; height: 400px">
-flowchart TB;subgraph "number as labels";1;end;
-      </pre>
-      <pre class="mermaid2" style="width: 100%; height: 400px">
-flowchart TB;a[APA];
-      </pre>
-      <pre class="mermaid2" style="margin-left: 100px">
-graph TD
-      work --> sleep
-      sleep --> work
-      eat --> sleep
-      work --> eat
-      </pre>
-      <pre class="mermaid2" style="margin-left: 100px">
-flowchart TD
-      work --> sleep
-      sleep --> work
-      eat --> sleep
-      work --> eat
-      </pre>
-      <pre class="mermaid2" style="">
- graph TB
-      A
-      B
-      subgraph foo[Foo SubGraph]
-        C
-        D
-      end
-      subgraph bar[Bar SubGraph]
-        E
-        F
-      end
-      G
+    <h1>Mindmap diagram demo</h1>
+    <pre class="mermaid">
+        mindmap
+        root
+            child1((Circle))
+                grandchild 1
+                grandchild 2
+            child2(Round rectangle)
+                grandchild 3
+                grandchild 4
+            child3[Square]
+                grandchild 5
+                ::icon(mdi mdi-fire)
+                gc6((grand<br/>child 6))
+                ::icon(mdi mdi-fire)
+                gc7((grand<br/>grand<br/>child 8))
+    </pre>

-      A-->B
-      B-->C
-      C-->D
-      B-->D
-      D-->E
-      E-->A
-      E-->F
-      F-->D
-      F-->G
-      B-->G
-      G-->D
+    <h2>Mindmap with root wrapping text and a shape</h2>
+    <pre class="mermaid">
+        mindmap
+            root[A root with a long text that wraps to keep the node size in check]
+    </pre>

-      style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
-      style bar fill:#999,stroke-width:2px,stroke:#0F0,color:blue
-      </pre>
-      <pre class="mermaid2" style="">
-      graph TB
-%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
-      A
-      B
-      subgraph foo[Foo SubGraph]
-        C
-        D
-      end
-      subgraph bar[Bar SubGraph]
-        E
-        F
-      end
-      G
+    <script type="module">
+      // import mermaid from './mermaid.esm.mjs';
+      import mermaid from '../../packages/mermaid/dist/mermaid.esm.mjs';
+      // import mermaidMindmap from './mermaid-mindmap.esm.mjs';

-      A-->B
-      B-->C
-      C-->D
-      B-->D
-      D-->E
-      E-->A
-      E-->F
-      F-->D
-      F-->G
-      B-->G
-      G-->D
+      // import mermaidMindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/+esm';
+      // await mermaid.registerExternalDiagrams([mermaidMindmap]);

-      style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
-      style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
-      </pre>
-      <pre class="mermaid2" style="">
-      graph TD
-        A[Christmas] ==> D
-        A[Christmas] -->|Get money| B(Go shopping)
-        A[Christmas] ==> C
-      </pre>
-      <pre class="mermaid2" style="">
-      graph TD
-%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
-        A[Christmas] ==> D
-        A[Christmas] -->|Get money| B(Go shopping)
-        A[Christmas] ==> C
-      </pre>
-      <pre class="mermaid2" style="">
-      flowchart TD
-        A[Christmas] ==> D
-        A[Christmas] -->|Get money| B(Go shopping)
-        A[Christmas] ==> C
-      </pre>
-      <pre class="mermaid2" style="">
-      flowchart TD
-%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
-        A[Christmas] ==> D
-        A[Christmas] -->|Get money| B(Go shopping)
-        A[Christmas] ==> C
-      </pre>
-      <pre class="mermaid2" style="">
-flowchart LR
-        a["<strong>Haiya</strong>"]---->b
-      </pre>
-      <pre class="mermaid" style="">
-flowchart LR
-%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
-        a["<strong>Haiya</strong>"]---->b
-      </pre>
-      <pre class="mermaid2" style="">
-      flowchart TD
-        A[Christmas] ==> D
-        A[Christmas] -->|Get money| B(Go shopping)
-        A[Christmas] ==> C
-      </pre>
-      <pre class="mermaid2" style="">
-      flowchart TD
-%%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
-        A[Christmas] ==> D
-        A[Christmas] -->|Get money| B(Go shopping)
-        A[Christmas] ==> C
-      </pre>
-      <pre class="mermaid2" style="">
-      %%{init: { "logLevel": 1, "flowchart": {"htmlLabels":true }} }%%
-classDiagram-v2
-      Class01 <|-- AveryLongClass : Cool
-      &lt;&lt;interface&gt;&gt; Class01
-      Class03 *-- Class04
-      Class05 o-- Class06
-      Class07 .. Class08
-      Class09 --> C2 : Where am i?
-      Class09 --* C3
-      Class09 --|> Class07
-      Class12 <|.. Class08
-      Class11 ..>Class12
-      Class07 : equals()
-      Class07 : Object[] elementData
-      Class01 : size()
-      Class01 : int chimp
-      Class01 : int gorilla
-      Class01 : -int privateChimp
-      Class01 : +int publicGorilla
-      Class01 : #int protectedMarmoset
-      Class08 <--> C2: Cool label
-      class Class10 {
-        &lt;&lt;service&gt;&gt;
-        int id
-        test()
-      }
-      </pre>
-      <pre class="mermaid2" style="">
-classDiagram-v2
-      Class01 <|-- AveryLongClass : Cool
-      &lt;&lt;interface&gt;&gt; Class01
-      Class03 *-- Class04
-      Class05 o-- Class06
-      Class07 .. Class08
-      Class09 --> C2 : Where am i?
-      Class09 --* C3
-      Class09 --|> Class07
-      Class12 <|.. Class08
-      Class11 ..>Class12
-      Class07 : equals()
-      Class07 : Object[] elementData
-      Class01 : size()
-      Class01 : int chimp
-      Class01 : int gorilla
-      Class01 : -int privateChimp
-      Class01 : +int publicGorilla
-      Class01 : #int protectedMarmoset
-      Class08 <--> C2: Cool label
-      class Class10 {
-        &lt;&lt;service&gt;&gt;
-        int id
-        test()
-      }
-      </pre>
-      <pre class="mermaid" style="">
-flowchart BT
-   subgraph S1
-    sub1 -->sub2
-   end
-  subgraph S2
-    sub4
-   end
-   S1 --> S2
-   sub1 --> sub4
-      </pre>
-    </div>
-    <script src="./mermaid.js"></script>
-    <script>
+      const ALLOWED_TAGS = [
+        'a',
+        'b',
+        'blockquote',
+        'br',
+        'dd',
+        'div',
+        'dl',
+        'dt',
+        'em',
+        'foreignObject',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'h7',
+        'h8',
+        'hr',
+        'i',
+        'li',
+        'ul',
+        'ol',
+        'p',
+        'pre',
+        'span',
+        'strike',
+        'strong',
+        'table',
+        'tbody',
+        'td',
+        'tfoot',
+        'th',
+        'thead',
+        'tr',
+      ];
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
-        // theme: 'neutral',
-        // arrowMarkerAbsolute: true,
-        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        theme: 'base',
+        startOnLoad: true,
        logLevel: 0,
-        flowchart: { curve: 'cardinal', htmlLabels: false },
-        // htmlLabels: true,
-        // gantt: { axisFormat: '%m/%d/%Y' },
-        // sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
-        // fontFamily: '"times", sans-serif',
-        fontFamily: 'courier',
-        // fontSize: 18,
-        // curve: 'cardinal',
-        securityLevel: 'loose',
-        // themeVariables: {relationLabelColor: 'red'}
+        flowchart: {
+          useMaxWidth: false,
+          htmlLabels: true,
+        },
+        gantt: {
+          useMaxWidth: false,
+        },
+        useMaxWidth: false,
      });
      function callback() {
        alert('It worked');
      }
+      mermaid.parseError = function (err, hash) {
+        console.error('In parse error:');
+        console.error(err);
+      };
    </script>
  </body>
 </html>
--- a/cypress/platform/per.html
+++ b/cypress/platform/per.html
@ -59,7 +59,7 @@ A-->B
    >
    <script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
    <script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
-    <script src="./packages/mermaid/dist/mermaid.js"></script>
+    <script src="./packages/mermaid/dist/mermaid.esm.mjs"></script>
    <script>
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
--- a/cypress/platform/regression/issue-1874.html
+++ b/cypress/platform/regression/issue-1874.html
@ -1,14 +1,4 @@
 <html>
-  <head>
-    <script src="http://localhost:9000/mermaid.js"></script>
-    <script>
-      mermaid.initialize({
-        theme: 'base',
-        themeVariables: {},
-        startOnLoad: true,
-      });
-    </script>
-  </head>
  <body>
    <h1>Example</h1>
    <pre class="mermaid">
@ -26,4 +16,12 @@ sequenceDiagram
    Note left of Ernie: Cookies are good
    </pre>
  </body>
+  <script type="module">
+    import mermaid from '/mermaid.esm.mjs';
+    mermaid.initialize({
+      theme: 'base',
+      themeVariables: {},
+      startOnLoad: true,
+    });
+  </script>
 </html>
--- a/Show More
+++ b/Show More