Update snapshots

2025-10-02 05:39:38 +02:00 · 2022-12-15 19:14:06 +00:00 · 2022-12-15 19:13:57 +00:00 · 2022-12-15 19:13:47 +00:00 · 2022-12-15 19:12:47 +00:00 · 2022-12-15 19:09:19 +00:00
554 changed files with 2095 additions and 9885 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,5 +3,4 @@ dist/**
 docs/Setup.md
 cypress.config.js
 cypress/plugins/index.js
-coverage
-*.json
+coverage
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,150 +0,0 @@
-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
@@ -0,0 +1,137 @@
+{
+  "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",
+    "unicorn"
+  ],
+  "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"],
+    "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"
+      }
+    }
+  ]
+}
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -1,8 +1,6 @@
 # These are supported funding model platforms

-github:
-  - knsv
-  - sidharthv96
+github: [knsv]
 #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/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -14,5 +14,4 @@ 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/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -3,7 +3,7 @@ name: E2E
 on: [push, pull_request]

 permissions:
-  contents: read
+  contents: write

 jobs:
  build:
@@ -28,16 +28,28 @@ jobs:
          cache: pnpm
          node-version: ${{ matrix.node-version }}

+      # Experiment with this step if we cannot check-in the snapshots to the repo.
+      # - name: Cache snapshots
+      #   id: cache-snapshot
+      #   uses: actions/cache@v3
+      #   with:
+      #     # npm cache files are stored in `~/.npm` on Linux/macOS
+      #     path: ./cypress/snapshots
+      #     key: ${{ runner.os }}-build-${env.GITHUB_REF}
+      #     restore-keys: |
+      #       ${{ runner.os }}-build-develop
+
      # Install NPM dependencies, cache them correctly
      # and run all Cypress tests
      - name: Cypress run
-        uses: cypress-io/github-action@v4
        id: cypress
+        uses: cypress-io/github-action@v4
        # 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 ) }}
        with:
          start: pnpm run dev
+          browser: chrome
          wait-on: 'http://localhost:9000'
          # Disable recording if we don't have an API key
          # e.g. if this action was run from a fork
@@ -52,3 +64,11 @@ jobs:
        with:
          name: error-snapshots
          path: cypress/snapshots/**/__diff_output__/*
+
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v9
+        if: ${{ github.event_name == 'push' }}
+        with:
+          message: 'Update snapshots'
+          add: 'cypress/snapshots/*'
+          pull: '--rebase --autostash'
--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@@ -13,10 +13,11 @@ on:
      - master
  pull_request:
    branches:
+      - develop
      - master
  schedule:
    # * is a special character in YAML so you have to quote this string
-    - cron: '30 8 * * *'
+    - cron: '30 8 * * 5'

 jobs:
  linkChecker:
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -37,20 +37,7 @@ jobs:
          CYPRESS_CACHE_FOLDER: .cache/Cypress

      - name: Run Linting
-        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 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
+        run: pnpm run lint

      - name: Verify Docs
        id: verifyDocs
--- a/.gitignore
+++ b/.gitignore
@@ -26,7 +26,7 @@ Gemfile.lock
 /.vs

 cypress/screenshots/
-cypress/snapshots/
+cypress/snapshots-dev/

 # eslint --cache file
 .eslintcache
--- a/.lintstagedrc.mjs
+++ b/.lintstagedrc.mjs
@@ -1,11 +1,5 @@
 export default {
-  '!(docs/**/*)*.{ts,js,json,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',
-  ],
+  '!(docs/**/*)*.{ts,js,json,html,md,mts}': ['eslint --fix', 'prettier --write'],
  'cSpell.json': ['ts-node-esm scripts/fixCSpell.ts'],
  '**/*.jison': ['pnpm -w run lint:jison'],
 };
--- a/.lycheeignore
+++ b/.lycheeignore
@@ -9,8 +9,5 @@ https://mkdocs.org/
 https://osawards.com/javascript/#nominees
 https://osawards.com/javascript/2019

-# Timeout error, maybe Twitter has anti-bot defences against GitHub's CI servers?
-https://twitter.com/mermaidjs_
-
 # Don't check files that are generated during the build via `pnpm docs:code`
 packages/mermaid/src/docs/config/setup/*
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -36,11 +36,16 @@ const packageOptions = {
    packageName: 'mermaid',
    file: 'mermaid.ts',
  },
-  'mermaid-example-diagram': {
-    name: 'mermaid-example-diagram',
-    packageName: 'mermaid-example-diagram',
+  'mermaid-mindmap': {
+    name: 'mermaid-mindmap',
+    packageName: 'mermaid-mindmap',
    file: 'detector.ts',
  },
+  // 'mermaid-example-diagram-detector': {
+  //   name: 'mermaid-example-diagram-detector',
+  //   packageName: 'mermaid-example-diagram',
+  //   file: 'detector.ts',
+  // },
 };

 interface BuildOptions {
@@ -114,7 +119,11 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)

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

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

 if (watch) {
-  build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
+  build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' }));
  if (!mermaidOnly) {
-    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
+    // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
  }
 } else if (visualize) {
  await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));
--- a/.vite/server.ts
+++ b/.vite/server.ts
@@ -1,5 +1,6 @@
 import express, { NextFunction, Request, Response } from 'express';
 import { createServer as createViteServer } from 'vite';
+// import { getBuildConfig } from './build';

 const cors = (req: Request, res: Response, next: NextFunction) => {
  res.header('Access-Control-Allow-Origin', '*');
@@ -21,8 +22,8 @@ async function createServer() {

  app.use(cors);
  app.use(express.static('./packages/mermaid/dist'));
-  // app.use(express.static('./packages/mermaid-example-diagram/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'));
@@ -32,4 +33,5 @@ async function createServer() {
  });
 }

+// build(getBuildConfig({ minify: false, watch: true }));
 createServer();
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # 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](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/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)
+[![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_)

 English | [简体中文](./README.zh-CN.md)

@@ -10,7 +10,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/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>
+<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>

 ## About

--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -1,6 +1,6 @@
 # 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](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/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)
+[![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_)

 [English](./README.md) | 简体中文

@@ -10,7 +10,7 @@

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

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

 ## 关于 Mermaid

--- a/cSpell.json
+++ b/cSpell.json
@@ -6,7 +6,6 @@
    "adamiecki",
    "alois",
    "antiscript",
-    "appli",
    "applitools",
    "asciidoctor",
    "ashish",
@@ -14,9 +13,7 @@
    "bbox",
    "bilkent",
    "bisheng",
-    "blrs",
    "braintree",
-    "brkt",
    "brolin",
    "brotli",
    "classdef",
@@ -33,7 +30,6 @@
    "doku",
    "dompurify",
    "edgechromium",
-    "elkjs",
    "faber",
    "flatmap",
    "ftplugin",
@@ -42,7 +38,6 @@
    "gitgraph",
    "globby",
    "graphlib",
-    "graphviz",
    "grav",
    "greywolf",
    "inkdrop",
@@ -56,10 +51,9 @@
    "knut",
    "laganeckas",
    "lintstagedrc",
-    "logmsg",
    "lucida",
+    "mansalva",
    "matthieu",
-    "mdast",
    "mdbook",
    "mermerd",
    "mindaugas",
@@ -67,15 +61,12 @@
    "mindmaps",
    "mitigations",
    "mkdocs",
-    "mult",
    "orlandoni",
    "phpbb",
    "plantuml",
    "playfair",
    "pnpm",
    "podlite",
-    "quence",
-    "radious",
    "ranksep",
    "rect",
    "rects",
@@ -85,20 +76,16 @@
    "setupgraphviewbox",
    "shiki",
    "sidharth",
-    "sidharthv",
    "sphinxcontrib",
+    "ssim",
    "statediagram",
    "stylis",
    "substate",
    "sveidqvist",
-    "swimm",
    "techn",
-    "teststr",
-    "textlength",
    "treemap",
    "ts-nocheck",
    "tuleap",
-    "ugge",
    "unist",
    "verdana",
    "viewports",
--- a/cypress.config.cjs
+++ b/cypress.config.cjs
@@ -5,9 +5,17 @@ const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin')

 module.exports = defineConfig({
  projectId: 'n2sma2',
+  viewportWidth: 1440,
+  viewportHeight: 1024,
  e2e: {
    specPattern: 'cypress/integration/**/*.{js,jsx,ts,tsx}',
    setupNodeEvents(on, config) {
+      on('before:browser:launch', (browser = {}, launchOptions) => {
+        if (browser.name === 'chrome' && browser.isHeadless) {
+          launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
+        }
+        return launchOptions;
+      });
      addMatchImageSnapshotPlugin(on, config);
      // copy any needed variables from process.env to config.env
      config.env.useAppli = process.env.USE_APPLI ? true : false;
--- 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 = 'mermaid-batch' + new Date().getTime();
+const batchId = 'mermid-batch' + new Date().getTime();

 export const mermaidUrl = (graphStr, options, api) => {
  const obj = {
@@ -46,22 +46,8 @@ 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);
-};
-
-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) {
@@ -74,20 +60,81 @@ const openURLAndVerifyRendering = (url, options, validation = undefined) => {
    });
  }

-  cy.visit(url);
-  cy.window().should('have.property', 'rendered', true);
-  cy.get('svg').should('be.visible');
+  const url = mermaidUrl(graphStr, options, api);

+  cy.visit(url);
  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
@@ -117,7 +117,6 @@ describe('Configuration', () => {
    });
    it('should not taint the initial configuration when using multiple directives', () => {
      const url = 'http://localhost:9000/regression/issue-1874.html';
-      cy.viewport(1440, 1024);
      cy.visit(url);

      cy.get('svg');
--- a/cypress/integration/other/external-diagrams.spec.js
+++ b/cypress/integration/other/external-diagrams.spec.js
@@ -1,10 +1,13 @@
-import { urlSnapshotTest } from '../../helpers/util';
-
 describe('mermaid', () => {
  describe('registerDiagram', () => {
-    it('should work on @mermaid-js/mermaid-example-diagram', () => {
-      const url = 'http://localhost:9000/external-diagrams-example-diagram.html';
-      urlSnapshotTest(url, {}, false, false);
+    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();
    });
  });
 });
--- a/cypress/integration/other/ghsa.spec.js
+++ b/cypress/integration/other/ghsa.spec.js
@@ -7,10 +7,4 @@ 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 },
-    });
-  });
 });
--- a/cypress/integration/other/rerender.spec.js
+++ b/cypress/integration/other/rerender.spec.js
@@ -1,14 +1,12 @@
 describe('Rerendering', () => {
  it('should be able to render after an error has occurred', () => {
    const url = 'http://localhost:9000/render-after-error.html';
-    cy.viewport(1440, 1024);
    cy.visit(url);
    cy.get('#graphDiv').should('exist');
  });

  it('should be able to render and rerender a graph via API', () => {
    const url = 'http://localhost:9000/rerender.html';
-    cy.viewport(1440, 1024);
    cy.visit(url);
    cy.get('#graph [id^=flowchart-A]').should('have.text', 'XMas');

--- a/cypress/integration/rendering/c4.spec.js
+++ b/cypress/integration/rendering/c4.spec.js
@@ -1,122 +0,0 @@
-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
@@ -485,7 +485,8 @@ describe('Class diagram V2', () => {
      classDiagram-v2
        note "I love this diagram!\nDo you love it?"
        class Class10 {
-            int id
+          <<service>>
+          int id
          size()
        }
        note for Class10 "Cool class\nI said it's very cool class!"
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@@ -414,6 +414,7 @@ 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';

-describe('Current diagram', () => {
+describe('State diagram', () => {
  it('should render a state with states in it', () => {
    imgSnapshotTest(
      `
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -182,20 +182,6 @@ describe('Entity Relationship Diagram', () => {
    cy.get('svg');
  });

-  it('should render entities with length in attributes type', () => {
-    renderGraph(
-      `
-    erDiagram
-        CLUSTER {
-          varchar(99) name
-          string(255) description 
-        }
-      `,
-      { logLevel: 1 }
-    );
-    cy.get('svg');
-  });
-
  it('should render entities and attributes with big and small entity names', () => {
    renderGraph(
      `
--- a/cypress/integration/rendering/flowchart-elk.spec.js
+++ b/cypress/integration/rendering/flowchart-elk.spec.js
@@ -1,687 +0,0 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
-
-describe('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 }
-    );
-  });
-});
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -225,7 +225,10 @@ describe('Gantt diagram', () => {
      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(984 * 0.95, 984 * 1.05);
+      expect(maxWidthValue).to.be.within(
+        Cypress.config().viewportWidth * 0.95,
+        Cypress.config().viewportWidth * 1.05
+      );
    });
  });

@@ -269,7 +272,10 @@ describe('Gantt diagram', () => {
      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(484 * 0.95, 484 * 1.05);
-      expect(width).to.be.within(984 * 0.95, 984 * 1.05);
+      expect(width).to.be.within(
+        Cypress.config().viewportWidth * 0.95,
+        Cypress.config().viewportWidth * 1.05
+      );
      expect(svg).to.not.have.attr('style');
    });
  });
--- a/cypress/integration/rendering/mindmap.spec.ts
+++ b/cypress/integration/rendering/mindmap.spec.ts
@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';

 /**
 * Check whether the SVG Element has a Mindmap root
@@ -158,6 +158,7 @@ mindmap
      undefined,
      shouldHaveRoot
    );
+    cy.get('svg');
  });
  it('rounded rect shape', () => {
    imgSnapshotTest(
@@ -171,6 +172,7 @@ mindmap
      undefined,
      shouldHaveRoot
    );
+    cy.get('svg');
  });
  it('circle shape', () => {
    imgSnapshotTest(
@@ -184,6 +186,7 @@ mindmap
      undefined,
      shouldHaveRoot
    );
+    cy.get('svg');
  });
  it('default shape', () => {
    imgSnapshotTest(
@@ -195,6 +198,7 @@ mindmap
      undefined,
      shouldHaveRoot
    );
+    cy.get('svg');
  });
  it('adding children', () => {
    imgSnapshotTest(
@@ -208,6 +212,7 @@ mindmap
      undefined,
      shouldHaveRoot
    );
+    cy.get('svg');
  });
  it('adding grand children', () => {
    imgSnapshotTest(
@@ -222,6 +227,7 @@ mindmap
      undefined,
      shouldHaveRoot
    );
+    cy.get('svg');
  });
  /* The end */
 });
--- a/cypress/integration/rendering/pie.spec.js
+++ b/cypress/integration/rendering/pie.spec.js
@@ -54,7 +54,10 @@ describe('Pie Chart', () => {
      const style = svg.attr('style');
      expect(style).to.match(/^max-width: [\d.]+px;$/);
      const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.eq(984);
+      expect(maxWidthValue).to.be.within(
+        Cypress.config().viewportWidth * 0.95,
+        Cypress.config().viewportWidth * 1.05
+      );
    });
  });
  it('should render a pie diagram when useMaxWidth is false', () => {
@@ -68,10 +71,11 @@ describe('Pie Chart', () => {
      { pie: { useMaxWidth: false } }
    );
    cy.get('svg').should((svg) => {
-      // const height = parseFloat(svg.attr('height'));
      const width = parseFloat(svg.attr('width'));
-      // expect(height).to.eq(450);
-      expect(width).to.eq(984);
+      expect(width).to.be.within(
+        Cypress.config().viewportWidth * 0.95,
+        Cypress.config().viewportWidth * 1.05
+      );
      expect(svg).to.not.have.attr('style');
    });
  });
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -3,42 +3,6 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util';

 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(
      `
--- a/cypress/integration/rendering/timeline.spec.ts
+++ b/cypress/integration/rendering/timeline.spec.ts
@@ -1,164 +0,0 @@
-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/platform/ashish2.html
+++ b/cypress/platform/ashish2.html
@@ -1,231 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://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 '../../packages/mermaid/src/mermaid';
-      // 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/class.html
+++ b/cypress/platform/class.html
@@ -46,9 +46,13 @@
    <pre class="mermaid" style="width: 100%; height: 20%">
      %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
      classDiagram-v2
-classA <|-- classB : implements
-classC *-- classD : composition
-classE o-- classF : aggregation
+       class BankAccount{
+        +String owner
+        +BigDecimal balance
+        +deposit(amount) bool
+        +withdrawl(amount) int
+       }
+       cssClass "BankAccount" customCss
    </pre>
    <pre class="mermaid2" style="width: 100%; height: 20%">
        %%{init: {'theme': 'base',  'fontFamily': 'courier', 'themeVariables': {  'primaryColor': '#fff000'}}}%%
--- a/cypress/platform/e2e.html
+++ b/cypress/platform/e2e.html
@@ -1,32 +1,8 @@
 <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 +12,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,8 +2,34 @@
  <body>
    <h1>Should correctly load a third-party diagram using registerDiagram</h1>
    <pre id="diagram" class="mermaid">
-example-diagram
+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))
    </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> -->
@@ -11,16 +37,13 @@ example-diagram
    <!-- <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 exampleDiagram from '../../packages/mermaid-example-diagram/src/detector';
+      import mindmap from '../../packages/mermaid-mindmap/src/detector';
      // import example from '../../packages/mermaid-example-diagram/src/detector';
      import mermaid from '../../packages/mermaid/src/mermaid';

-      await mermaid.registerExternalDiagrams([exampleDiagram]);
+      await mermaid.registerExternalDiagrams([mindmap]);
      await mermaid.initialize({ logLevel: 0 });
      await mermaid.initThrowsErrorsAsync();
-      if (window.Cypress) {
-        window.rendered = true;
-      }
    </script>
  </body>
 </html>
--- a/cypress/platform/ghsa1.html
+++ b/cypress/platform/ghsa1.html
@@ -4,7 +4,7 @@
  </script>
  <body>
    <div id="target">
-      <h1>Background should be yellow!!!</h1>
+      <h1>This element does not belong to the SVG but we can style it</h1>
    </div>
    <svg id="diagram"></svg>

@@ -21,9 +21,6 @@
      const diagram = document.getElementById('diagram');
      const svg = 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
@@ -21,9 +21,6 @@
      const diagram = document.getElementById('diagram');
      const svg = 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
@@ -1,103 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background:#333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-      h1 {
-        color: grey;
-      }
-      .mermaid2 {
-        display: none;
-      }
-      .mermaid svg {
-        /* font-size: 18px !important; */
-      }
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-    </style>
-  </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 src="./mermaid.js"></script>
-    <script>
-      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);
-      // document.querySelector('#diagram').innerHTML = diagram;
-      mermaid.render('diagram', diagram, (res) => {
-        document.querySelector('#res').innerHTML = res;
-        if (window.Cypress) {
-          window.rendered = true;
-        }
-      });
-    </script>
-  </body>
-</html>
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -54,205 +54,39 @@
    </style>
  </head>
  <body>
+    <div>Security check</div>
    <pre id="diagram" class="mermaid">
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-graph BT
-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
-    </pre>
-    <pre id="diagram" class="mermaid2">
-flowchart-elk TB
-      a --> b
-      a --> c
-      b --> d
-      c --> d
-    </pre>
-    <pre id="diagram" class="mermaid2">
-%%{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]
+flowchart LR
+    %% Actors
+    A
+    subgraph Sub
+        B --> C
    end

-    radeon[AMD Radeon R7xx GX2]
+    %% Accusations
+    A --L --> Sub

-    mem --- gx
-    mem --- radeon
+    %% Offense
+    B --> A
+
+    </pre>
+    <pre id="diagram" class="mermaid">
+      stateDiagram-v2
+
+      [*] --> S1
+      S1 --> S2: long line using<br/>should work
+      S1 --> S3: long line using <br>should work
+      S1 --> S4: long line using \\nshould work

-    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
+      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
    </pre>

    <!-- <div id="cy"></div> -->
@@ -262,19 +96,18 @@ mindmap
    <!-- <script src="./mermaid.js"></script> -->

    <script type="module">
-      // import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      import example from '../../packages/mermaid-example-diagram/src/detector';
+      import mindmap from '../../packages/mermaid-mindmap/src/detector';
+      // import example from '../../packages/mermaid-example-diagram/src/detector';
      import mermaid from '../../packages/mermaid/src/mermaid';
-      await mermaid.registerExternalDiagrams([example]);
+      await mermaid.registerExternalDiagrams([mindmap]);
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
-        theme: 'forest',
+        theme: 'default',
        startOnLoad: true,
-        logLevel: 5,
+        logLevel: 0,
        flowchart: {
-          // defaultRenderer: 'elk',
          useMaxWidth: false,
          htmlLabels: true,
        },
--- a/cypress/platform/knsv3.html
+++ b/cypress/platform/knsv3.html
@@ -1,111 +1,257 @@
-<!DOCTYPE html>
-<html lang="en">
+<html>
  <head>
-    <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=" />
+    <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>
-      div.mermaid {
-        /* font-family: 'trebuchet ms', verdana, arial; */
-        font-family: 'Courier New', Courier, monospace !important;
+      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; */
      }
    </style>
  </head>
-
  <body>
-    <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>
+    <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

-    <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>
+      A-->B
+      B-->C
+      C-->D
+      B-->D
+      D-->E
+      E-->A
+      E-->F
+      F-->D
+      F-->G
+      B-->G
+      G-->D

-    <script type="module">
-      // import mermaid from './mermaid.esm.mjs';
-      import mermaid from '../../packages/mermaid/src/mermaid';
-      // import mermaidMindmap from './mermaid-mindmap.esm.mjs';
+      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

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

-      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',
-      ];
+      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>
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
-        theme: 'base',
-        startOnLoad: true,
+        // theme: 'neutral',
+        // arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
-        flowchart: {
-          useMaxWidth: false,
-          htmlLabels: true,
-        },
-        gantt: {
-          useMaxWidth: false,
-        },
-        useMaxWidth: false,
+        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'}
      });
      function callback() {
        alert('It worked');
      }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
    </script>
  </body>
 </html>
--- a/cypress/platform/sidv.html
+++ b/cypress/platform/sidv.html
@@ -1,283 +1,14 @@
 <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>
-    <pre id="diagram" class="mermaid">
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-graph TB
-      a --> b
-      a --> c
-      b --> d
-      c --> d
+    <pre class="mermaid">
+    none
+    hello world
    </pre>
-    <pre id="diagram" class="mermaid">
-flowchart-elk LR
-  subgraph A
-  a -->b
-  end
-  subgraph B
-  b
-  end
-    </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
-    >
-    <br />
-    <pre id="diagram" class="mermaid">
-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">
-      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
-    </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 type="module">
-      import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      // import example from '../../packages/mermaid-example-diagram/src/detector';
-      import mermaid from '../../packages/mermaid/src/mermaid';
-      await mermaid.registerExternalDiagrams([mindmap]);
-      mermaid.parseError = function (err, hash) {
-        // console.error('Mermaid error: ', err);
-      };
+    <script src="./mermaid.js"></script>
+    <script>
      mermaid.initialize({
-        // theme: 'forest',
-        startOnLoad: true,
-        logLevel: 0,
-        flowchart: {
-          // defaultRenderer: 'elk',
-          useMaxWidth: false,
-          htmlLabels: true,
-        },
-        gantt: {
-          useMaxWidth: false,
-        },
-        useMaxWidth: false,
+        logLevel: 1,
      });
-      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/viewer.js
+++ b/cypress/platform/viewer.js
@@ -1,17 +1,10 @@
 import mermaid2 from '../../packages/mermaid/src/mermaid';
-import externalExample from '../../packages/mermaid-example-diagram/src/detector';
+import mindmap from '../../packages/mermaid-mindmap/src/detector';

 function b64ToUtf8(str) {
  return decodeURIComponent(escape(window.atob(str)));
 }

-// Adds a rendered flag to window when rendering is done, so cypress can wait for it.
-function markRendered() {
-  if (window.Cypress) {
-    window.rendered = true;
-  }
-}
-
 /**
 * ##contentLoaded Callback function that is called when page is loaded. This functions fetches
 * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
@@ -44,10 +37,9 @@ const contentLoaded = async function () {
      document.getElementsByTagName('body')[0].appendChild(div);
    }

-    await mermaid2.registerExternalDiagrams([externalExample]);
+    await mermaid2.registerExternalDiagrams([mindmap]);
    mermaid2.initialize(graphObj.mermaid);
-    await mermaid2.init();
-    markRendered();
+    mermaid2.init();
  }
 };

@@ -136,7 +128,6 @@ const contentLoadedApi = function () {
      );
    }
  }
-  markRendered();
 };

 if (typeof document !== 'undefined') {
@@ -151,7 +142,7 @@ if (typeof document !== 'undefined') {
        contentLoadedApi();
      } else {
        this.console.log('Not using api');
-        void contentLoaded();
+        contentLoaded();
      }
    },
    false
--- a/cypress/snapshots/other/configuration.spec.js/configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives.snap.png
+++ b/cypress/snapshots/other/configuration.spec.js/configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives.snap.png
--- a/cypress/snapshots/other/external-diagrams.spec.js/mermaid
+++ b/cypress/snapshots/other/external-diagrams.spec.js/mermaid
--- a/cypress/snapshots/other/ghsa.spec.js/CSS-injections-should-not-allow-CSS-injections-outside-of-the-diagram.snap.png
+++ b/cypress/snapshots/other/ghsa.spec.js/CSS-injections-should-not-allow-CSS-injections-outside-of-the-diagram.snap.png
--- a/cypress/snapshots/rendering/appli.spec.js/Git-Graph-diagram-1-should-render-a-simple-gitgraph-with-commit-on-main-branch.snap.png
+++ b/cypress/snapshots/rendering/appli.spec.js/Git-Graph-diagram-1-should-render-a-simple-gitgraph-with-commit-on-main-branch.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-0-should-render-a-simple-class-diagram.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-0-should-render-a-simple-class-diagram.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-1-should-render-a-simple-class-diagram.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-1-should-render-a-simple-class-diagram.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-10-should-render-a-simple-class-diagram-with-clickable-callback.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-10-should-render-a-simple-class-diagram-with-clickable-callback.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-11-should-render-a-simple-class-diagram-with-return-type-on-method.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-11-should-render-a-simple-class-diagram-with-return-type-on-method.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-12-should-render-a-simple-class-diagram-with-generic-types.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-12-should-render-a-simple-class-diagram-with-generic-types.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-13-should-render-a-simple-class-diagram-with-css-classes-applied.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-13-should-render-a-simple-class-diagram-with-css-classes-applied.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-14-should-render-a-simple-class-diagram-with-css-classes-applied-directly.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-14-should-render-a-simple-class-diagram-with-css-classes-applied-directly.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-1433-should-render-a-simple-class-with-a-title.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-1433-should-render-a-simple-class-with-a-title.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-15-should-render-a-simple-class-diagram-with-css-classes-applied-two-multiple-classes.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-15-should-render-a-simple-class-diagram-with-css-classes-applied-two-multiple-classes.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-16a-should-render-a-simple-class-diagram-with-static-field.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-16a-should-render-a-simple-class-diagram-with-static-field.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-16b-should-handle-the-direction-statement-with-TB.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-16b-should-handle-the-direction-statement-with-TB.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-17a-should-handle-the-direction-statement-with-BT.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-17a-should-handle-the-direction-statement-with-BT.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-17b-should-handle-the-direction-statement-with-RL.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-17b-should-handle-the-direction-statement-with-RL.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-18-should-handle-the-direction-statement-with-LR.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-18-should-handle-the-direction-statement-with-LR.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-18-should-render-a-simple-class-diagram-with-notes.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-18-should-render-a-simple-class-diagram-with-notes.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-2-should-render-a-simple-class-diagrams-with-cardinality.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-2-should-render-a-simple-class-diagrams-with-cardinality.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-4-should-render-a-simple-class-diagram-with-comments.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-4-should-render-a-simple-class-diagram-with-comments.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-5-should-render-a-simple-class-diagram-with-abstract-method.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-5-should-render-a-simple-class-diagram-with-abstract-method.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-6-should-render-a-simple-class-diagram-with-static-method.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-6-should-render-a-simple-class-diagram-with-static-method.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-7-should-render-a-simple-class-diagram-with-Generic-class.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-7-should-render-a-simple-class-diagram-with-Generic-class.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-8-should-render-a-simple-class-diagram-with-Generic-class-and-relations.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-8-should-render-a-simple-class-diagram-with-Generic-class-and-relations.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-9-should-render-a-simple-class-diagram-with-clickable-link.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-9-should-render-a-simple-class-diagram-with-clickable-link.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-should-render-a-simple-class-diagram-with-different-visibilities.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-should-render-a-simple-class-diagram-with-different-visibilities.snap.png
--- a/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-should-render-multiple-class-diagrams.snap.png
+++ b/cypress/snapshots/rendering/classDiagram-v2.spec.js/Class-diagram-V2-should-render-multiple-class-diagrams.snap.png
--- a/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-1-should-render-a-simple-class-diagram.snap.png
+++ b/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-1-should-render-a-simple-class-diagram.snap.png
--- a/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-10-should-render-a-simple-class-diagram-with-clickable-callback.snap.png
+++ b/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-10-should-render-a-simple-class-diagram-with-clickable-callback.snap.png
--- a/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-11-should-render-a-simple-class-diagram-with-return-type-on-method.snap.png
+++ b/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-11-should-render-a-simple-class-diagram-with-return-type-on-method.snap.png
--- a/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-12-should-render-a-simple-class-diagram-with-generic-types.snap.png
+++ b/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-12-should-render-a-simple-class-diagram-with-generic-types.snap.png
--- a/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-13-should-render-a-simple-class-diagram-with-css-classes-applied.snap.png
+++ b/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-13-should-render-a-simple-class-diagram-with-css-classes-applied.snap.png
--- a/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-14-should-render-a-simple-class-diagram-with-css-classes-applied-directly.snap.png
+++ b/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-14-should-render-a-simple-class-diagram-with-css-classes-applied-directly.snap.png
--- a/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-15-should-render-a-simple-class-diagram-with-css-classes-applied-two-multiple-classes.snap.png
+++ b/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-15-should-render-a-simple-class-diagram-with-css-classes-applied-two-multiple-classes.snap.png
--- a/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-16-should-render-multiple-class-diagrams.snap.png
+++ b/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-16-should-render-multiple-class-diagrams.snap.png
--- a/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-19-should-render-a-simple-class-diagram-with-notes.snap.png
+++ b/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-19-should-render-a-simple-class-diagram-with-notes.snap.png
--- a/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-2-should-render-a-simple-class-diagrams-with-cardinality.snap.png
+++ b/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-2-should-render-a-simple-class-diagrams-with-cardinality.snap.png
--- a/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-3-should-render-a-simple-class-diagram-with-different-visibilities.snap.png
+++ b/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-3-should-render-a-simple-class-diagram-with-different-visibilities.snap.png
--- a/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-4-should-render-a-simple-class-diagram-with-comments.snap.png
+++ b/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-4-should-render-a-simple-class-diagram-with-comments.snap.png
--- a/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-5-should-render-a-simple-class-diagram-with-abstract-method.snap.png
+++ b/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-5-should-render-a-simple-class-diagram-with-abstract-method.snap.png
--- a/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-6-should-render-a-simple-class-diagram-with-static-method.snap.png
+++ b/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-6-should-render-a-simple-class-diagram-with-static-method.snap.png
--- a/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-7-should-render-a-simple-class-diagram-with-Generic-class.snap.png
+++ b/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-7-should-render-a-simple-class-diagram-with-Generic-class.snap.png
--- a/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-8-should-render-a-simple-class-diagram-with-Generic-class-and-relations.snap.png
+++ b/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-8-should-render-a-simple-class-diagram-with-Generic-class-and-relations.snap.png
--- a/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-9-should-render-a-simple-class-diagram-with-clickable-link.snap.png
+++ b/cypress/snapshots/rendering/classDiagram.spec.js/Class-diagram-9-should-render-a-simple-class-diagram-with-clickable-link.snap.png
--- a/cypress/snapshots/rendering/conf-and-directives.spec.js/Configuration-and-directives---nodes-should-be-light-blue-No-config---use-default.snap.png
+++ b/cypress/snapshots/rendering/conf-and-directives.spec.js/Configuration-and-directives---nodes-should-be-light-blue-No-config---use-default.snap.png
--- a/cypress/snapshots/rendering/conf-and-directives.spec.js/Configuration-and-directives---nodes-should-be-light-blue-Settings-from-directive---nodes-should-be-grey.snap.png
+++ b/cypress/snapshots/rendering/conf-and-directives.spec.js/Configuration-and-directives---nodes-should-be-light-blue-Settings-from-directive---nodes-should-be-grey.snap.png
--- a/cypress/snapshots/rendering/conf-and-directives.spec.js/Configuration-and-directives---nodes-should-be-light-blue-Settings-from-directive-overriding-theme-variable---nodes-should-be-red.snap.png
+++ b/cypress/snapshots/rendering/conf-and-directives.spec.js/Configuration-and-directives---nodes-should-be-light-blue-Settings-from-directive-overriding-theme-variable---nodes-should-be-red.snap.png
--- a/cypress/snapshots/rendering/conf-and-directives.spec.js/Configuration-and-directives---nodes-should-be-light-blue-Settings-from-initialize---nodes-should-be-green.snap.png
+++ b/cypress/snapshots/rendering/conf-and-directives.spec.js/Configuration-and-directives---nodes-should-be-light-blue-Settings-from-initialize---nodes-should-be-green.snap.png
--- a/cypress/snapshots/rendering/conf-and-directives.spec.js/Configuration-and-directives---nodes-should-be-light-blue-Settings-from-initialize-and-directive---nodes-should-be-grey.snap.png
+++ b/cypress/snapshots/rendering/conf-and-directives.spec.js/Configuration-and-directives---nodes-should-be-light-blue-Settings-from-initialize-and-directive---nodes-should-be-grey.snap.png
--- a/cypress/snapshots/rendering/conf-and-directives.spec.js/Configuration-and-directives---nodes-should-be-light-blue-Settings-from-initialize-overriding-themeVariable---nodes-should-be-red.snap.png
+++ b/cypress/snapshots/rendering/conf-and-directives.spec.js/Configuration-and-directives---nodes-should-be-light-blue-Settings-from-initialize-overriding-themeVariable---nodes-should-be-red.snap.png
--- a/cypress/snapshots/rendering/conf-and-directives.spec.js/Configuration-and-directives---nodes-should-be-light-blue-Theme-from-initialize,-directive-overriding-theme-variable---nodes-should-be-red.snap.png
+++ b/cypress/snapshots/rendering/conf-and-directives.spec.js/Configuration-and-directives---nodes-should-be-light-blue-Theme-from-initialize,-directive-overriding-theme-variable---nodes-should-be-red.snap.png
--- a/cypress/snapshots/rendering/conf-and-directives.spec.js/Configuration-and-directives---nodes-should-be-light-blue-Theme-variable-from-initialize,-theme-from-directive---nodes-should-be-red.snap.png
+++ b/cypress/snapshots/rendering/conf-and-directives.spec.js/Configuration-and-directives---nodes-should-be-light-blue-Theme-variable-from-initialize,-theme-from-directive---nodes-should-be-red.snap.png
--- a/cypress/snapshots/rendering/conf-and-directives.spec.js/conf-and-directives.spec-when-rendering-several-diagrams-diagram-1.snap.png
+++ b/cypress/snapshots/rendering/conf-and-directives.spec.js/conf-and-directives.spec-when-rendering-several-diagrams-diagram-1.snap.png
--- a/cypress/snapshots/rendering/current.spec.js/State-diagram-should-render-a-state-with-states-in-it.snap.png
+++ b/cypress/snapshots/rendering/current.spec.js/State-diagram-should-render-a-state-with-states-in-it.snap.png
--- a/cypress/snapshots/rendering/debug.spec.js/Flowchart-34-testing-the-label-width-in-percy.snap.png
+++ b/cypress/snapshots/rendering/debug.spec.js/Flowchart-34-testing-the-label-width-in-percy.snap.png
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
sidharthv96	8acc6c1c53	Update snapshots	2022-12-15 19:14:06 +00:00
sidharthv96	be1656b136	Update snapshots	2022-12-15 19:13:57 +00:00
sidharthv96	33c5ba02e6	Update snapshots	2022-12-15 19:13:47 +00:00
sidharthv96	1015516416	Update snapshots	2022-12-15 19:12:47 +00:00
sidharthv96	d475696534	Update snapshots	2022-12-15 19:09:19 +00:00
sidharthv96	f1634216c4	Update snapshots	2022-12-15 19:09:16 +00:00
Sidharth Vinod	2777ed24f2	Merge branch 'develop' into sidv/e2eCI * develop: (44 commits) Update docs Add `workflow_dispatch` to lint.yml chore: update docs folder lint fix typescript error fix(docs): build the docs fix(docs): remove duplicate section chore(deps): update all non-major dependencies Update docs/misc/integrations.md Add links to github atom add-ons remove links from atom.io; add note Atom has been archived set svg role to 'graphics-document document' common function for a11y; add to renderAsync; + renderAsync spec feat: add links to theme listing fix cspell fix cspell fix lint refactor theming doc remove typeof use camelCase ...	2022-12-16 00:34:36 +05:30
Sidharth Vinod	579536a151	Pull before commit	2022-12-16 00:32:41 +05:30
sidharthv96	2c4443ec71	Update snapshots	2022-12-08 10:12:47 +00:00
Sidharth Vinod	638607da00	reduce failure threshold	2022-12-08 15:36:07 +05:30
sidharthv96	f3e1479c77	Update snapshots	2022-12-08 09:29:38 +00:00
Sidharth Vinod	bc5b9d3937	fix: CI write permissions	2022-12-08 14:54:03 +05:30
Sidharth Vinod	976585401c	Upload ci snapshots	2022-12-08 14:22:48 +05:30
Sidharth Vinod	6694bca803	Add ssim:fast	2022-12-08 14:18:24 +05:30
Sidharth Vinod	2a7dc427ae	Use ci snapshots	2022-12-08 14:13:25 +05:30
Sidharth Vinod	a3d8f1f8e4	Remove ssim:fast	2022-12-08 14:05:37 +05:30
Sidharth Vinod	688d671d2e	Add pingfang font	2022-12-08 14:04:06 +05:30
Sidharth Vinod	b14b23a6af	Use ssim fast algorithm	2022-12-08 13:07:23 +05:30
Sidharth Vinod	aa949b4ff6	Increase blur	2022-12-08 12:54:45 +05:30
Sidharth Vinod	e792bf5239	Add blur	2022-12-08 12:54:28 +05:30
Sidharth Vinod	a0d3b8c1fe	Increase threshold	2022-12-07 17:22:57 +05:30
Sidharth Vinod	a86f831b3e	Remove courier font	2022-12-07 16:24:09 +05:30
Sidharth Vinod	1c794ce619	Add courier font	2022-12-07 15:50:07 +05:30
Sidharth Vinod	86cab46cf0	Try SSIM	2022-12-07 15:07:08 +05:30
Sidharth Vinod	e6e02a9b70	Fix viewport size	2022-12-07 15:03:42 +05:30
Sidharth Vinod	f3a209badc	Remove hardcoded width in tests	2022-12-07 14:01:52 +05:30
Sidharth Vinod	69e84b6731	Fix viewport size	2022-12-07 14:01:35 +05:30
Sidharth Vinod	58dca0afe3	add snapshots to repo	2022-12-07 13:26:33 +05:30
Sidharth Vinod	af1a7bea1f	add snapshots to repo	2022-12-07 13:26:08 +05:30