Update docs

chore(deps): update all patch dependencies (patch)

.build/common.ts

@@ -22,9 +22,9 @@ export const packageOptions = {
     packageName: 'mermaid-zenuml',
     file: 'detector.ts',
   },
-  'mermaid-layout-elk': {
+  'mermaid-flowchart-elk': {
-    name: 'mermaid-layout-elk',
+    name: 'mermaid-flowchart-elk',
-    packageName: 'mermaid-layout-elk',
+    packageName: 'mermaid-flowchart-elk',
-    file: 'layouts.ts',
+    file: 'detector.ts',
   },
 } as const;

.build/jisonTransformer.ts

@@ -1,7 +1,6 @@
 import jison from 'jison';
 
 export const transformJison = (src: string): string => {
-  // @ts-ignore - Jison is not typed properly
   const parser = new jison.Generator(src, {
     moduleType: 'js',
     'token-stack': true,

.build/types.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import { packageOptions } from './common.js';
 import { execSync } from 'child_process';
 
@@ -6,17 +5,11 @@ const buildType = (packageName: string) => {
   console.log(`Building types for ${packageName}`);
   try {
     const out = execSync(`tsc -p ./packages/${packageName}/tsconfig.json --emitDeclarationOnly`);
-    if (out.length > 0) {
+    out.length > 0 && console.log(out.toString());
-      console.log(out.toString());
-    }
   } catch (e) {
     console.error(e);
-    if (e.stdout.length > 0) {
+    e.stdout.length > 0 && console.error(e.stdout.toString());
-      console.error(e.stdout.toString());
+    e.stderr.length > 0 && console.error(e.stderr.toString());
-    }
-    if (e.stderr.length > 0) {
-      console.error(e.stderr.toString());
-    }
   }
 };
 

.changeset/README.md

@@ -1,8 +0,0 @@
-# Changesets
-
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
-
-We have a quick list of common questions to get you started engaging with this project in
-[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -1,12 +0,0 @@
-{
-  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
-  "changelog": ["@changesets/changelog-github", { "repo": "mermaid-js/mermaid" }],
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "public",
-  "baseBranch": "master",
-  "updateInternalDependencies": "patch",
-  "bumpVersionsWithWorkspaceProtocolOnly": true,
-  "ignore": ["@mermaid-js/docs", "@mermaid-js/webpack-test", "@mermaid-js/mermaid-example-diagram"]
-}

.cspell/code-terms.txt

@@ -13,7 +13,6 @@ bqstring
 BQUOTE
 bramp
 BRKT
-brotli
 callbackargs
 callbackname
 classdef
@@ -28,7 +27,6 @@ controly
 CSSCLASS
 CYLINDEREND
 CYLINDERSTART
-DAGA
 datakey
 DEND
 descr
@@ -91,7 +89,6 @@ reqs
 rewritelinks
 rgba
 RIGHTOF
-roughjs
 sankey
 sequencenumber
 shrc
@@ -111,17 +108,13 @@ strikethrough
 stringifying
 struct
 STYLECLASS
-STYLEDEF
 STYLEOPTS
 subcomponent
 subcomponents
-subconfig
 SUBROUTINEEND
 SUBROUTINESTART
 Subschemas
 substr
-SVGG
-SVGSVG
 TAGEND
 TAGSTART
 techn
@@ -132,7 +125,6 @@ titlevalue
 topbar
 TRAPEND
 TRAPSTART
-treemap
 ts-nocheck
 tsdoc
 typeof

.cspell/contributors.txt

@@ -4,6 +4,5 @@ cpettitt
 Dong Cai
 Nikolay Rozhkov
 Peng Xiao
-Per Brolin
 subhash-halder
 Vinod Sidharth

.cspell/libraries.txt

@@ -20,7 +20,6 @@ dagre-d3
 Deepdwn
 Docsify
 Docsy
-Doctave
 DokuWiki
 dompurify
 elkjs
@@ -55,17 +54,13 @@ presetAttributify
 pyplot
 redmine
 rehype
-roughjs
 rscratch
-shiki
-Slidev
 sparkline
 sphinxcontrib
 ssim
 stylis
 Swimm
 tsbuildinfo
-tseslint
 Tuleap
 Typora
 unocss

.cspell/mermaid-terms.txt

@@ -9,7 +9,6 @@ elems
 gantt
 gitgraph
 gzipped
-handDrawn
 knsv
 Knut
 marginx
@@ -18,7 +17,6 @@ Markdownish
 mermaidjs
 mindmap
 mindmaps
-mrtree
 multigraph
 nodesep
 NOTEGROUP

.cspell/misc-terms.txt

@@ -1,6 +1 @@
-BRANDES
-circo
-handDrawn
-KOEPF
-neato
 newbranch

.esbuild/build.ts

@@ -2,14 +2,13 @@ import { build } from 'esbuild';
 import { mkdir, writeFile } from 'node:fs/promises';
 import { packageOptions } from '../.build/common.js';
 import { generateLangium } from '../.build/generateLangium.js';
-import type { MermaidBuildOptions } from './util.js';
+import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js';
-import { defaultOptions, getBuildConfig } from './util.js';
 
 const shouldVisualize = process.argv.includes('--visualize');
 
 const buildPackage = async (entryName: keyof typeof packageOptions) => {
-  const commonOptions: MermaidBuildOptions = { ...defaultOptions, entryName } as const;
+  const commonOptions = { ...defaultOptions, entryName } as const;
-  const buildConfigs: MermaidBuildOptions[] = [
+  const buildConfigs = [
     // package.mjs
     { ...commonOptions },
     // package.min.mjs
@@ -36,11 +35,11 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
 
   if (shouldVisualize) {
     for (const { metafile } of results) {
-      if (!metafile?.outputs) {
+      if (!metafile) {
         continue;
       }
       const fileName = Object.keys(metafile.outputs)
-        .find((file) => !file.includes('chunks') && file.endsWith('js'))
+        .filter((file) => !file.includes('chunks') && file.endsWith('js'))[0]
         .replace('dist/', '');
       // Upload metafile into https://esbuild.github.io/analyze/
       await writeFile(`stats/${fileName}.meta.json`, JSON.stringify(metafile));
@@ -49,14 +48,13 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
 };
 
 const handler = (e) => {
-  // eslint-disable-next-line no-console
   console.error(e);
   process.exit(1);
 };
 
 const main = async () => {
   await generateLangium();
-  await mkdir('stats', { recursive: true });
+  await mkdir('stats').catch(() => {});
   const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
   // it should build `parser` before `mermaid` because it's a dependency
   for (const pkg of packageNames) {

.esbuild/jisonPlugin.ts

@@ -1,6 +1,6 @@
 import { readFile } from 'node:fs/promises';
 import { transformJison } from '../.build/jisonTransformer.js';
-import type { Plugin } from 'esbuild';
+import { Plugin } from 'esbuild';
 
 export const jisonPlugin: Plugin = {
   name: 'jison',

.esbuild/server.ts

@@ -1,12 +1,11 @@
-/* eslint-disable no-console */
-import chokidar from 'chokidar';
-import cors from 'cors';
-import { context } from 'esbuild';
-import type { Request, Response } from 'express';
 import express from 'express';
-import { packageOptions } from '../.build/common.js';
+import type { NextFunction, Request, Response } from 'express';
+import cors from 'cors';
+import { getBuildConfig, defaultOptions } from './util.js';
+import { context } from 'esbuild';
+import chokidar from 'chokidar';
 import { generateLangium } from '../.build/generateLangium.js';
-import { defaultOptions, getBuildConfig } from './util.js';
+import { packageOptions } from '../.build/common.js';
 
 const configs = Object.values(packageOptions).map(({ packageName }) =>
   getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: packageName })
@@ -20,28 +19,16 @@ const mermaidIIFEConfig = getBuildConfig({
 });
 configs.push(mermaidIIFEConfig);
 
-const contexts = await Promise.all(
+const contexts = await Promise.all(configs.map((config) => context(config)));
-  configs.map(async (config) => ({ config, context: await context(config) }))
-);
 
-let rebuildCounter = 1;
 const rebuildAll = async () => {
-  const buildNumber = rebuildCounter++;
+  console.time('Rebuild time');
-  const timeLabel = `Rebuild ${buildNumber} Time (total)`;
+  await Promise.all(contexts.map((ctx) => ctx.rebuild())).catch((e) => console.error(e));
-  console.time(timeLabel);
+  console.timeEnd('Rebuild time');
-  await Promise.all(
-    contexts.map(async ({ config, context }) => {
-      const buildVariant = `Rebuild ${buildNumber} Time (${Object.keys(config.entryPoints!)[0]} ${config.format})`;
-      console.time(buildVariant);
-      await context.rebuild();
-      console.timeEnd(buildVariant);
-    })
-  ).catch((e) => console.error(e));
-  console.timeEnd(timeLabel);
 };
 
 let clients: { id: number; response: Response }[] = [];
-function eventsHandler(request: Request, response: Response) {
+function eventsHandler(request: Request, response: Response, next: NextFunction) {
   const headers = {
     'Content-Type': 'text/event-stream',
     Connection: 'keep-alive',
@@ -58,20 +45,19 @@ function eventsHandler(request: Request, response: Response) {
   });
 }
 
-let timeoutID: NodeJS.Timeout | undefined = undefined;
+let timeoutId: NodeJS.Timeout | undefined = undefined;
 
 /**
  * Debounce file change events to avoid rebuilding multiple times.
  */
 function handleFileChange() {
-  if (timeoutID !== undefined) {
+  if (timeoutId !== undefined) {
-    clearTimeout(timeoutID);
+    clearTimeout(timeoutId);
   }
-  // eslint-disable-next-line @typescript-eslint/no-misused-promises
+  timeoutId = setTimeout(async () => {
-  timeoutID = setTimeout(async () => {
     await rebuildAll();
     sendEventsToAll();
-    timeoutID = undefined;
+    timeoutId = undefined;
   }, 100);
 }
 
@@ -88,16 +74,15 @@ async function createServer() {
       ignoreInitial: true,
       ignored: [/node_modules/, /dist/, /docs/, /coverage/],
     })
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
     .on('all', async (event, path) => {
       // Ignore other events.
       if (!['add', 'change'].includes(event)) {
         return;
       }
-      console.log(`${path} changed. Rebuilding...`);
+      if (/\.langium$/.test(path)) {
-      if (path.endsWith('.langium')) {
         await generateLangium();
       }
+      console.log(`${path} changed. Rebuilding...`);
       handleFileChange();
     });
 
@@ -114,4 +99,4 @@ async function createServer() {
   });
 }
 
-void createServer();
+createServer();

.esbuild/util.ts

@@ -8,7 +8,7 @@ import { jisonPlugin } from './jisonPlugin.js';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
-export interface MermaidBuildOptions extends BuildOptions {
+export interface MermaidBuildOptions {
   minify: boolean;
   core: boolean;
   metafile: boolean;
@@ -56,7 +56,7 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
   const external: string[] = ['require', 'fs', 'path'];
   const { name, file, packageName } = packageOptions[entryName];
   const outFileName = getFileName(name, options);
-  const output: BuildOptions = buildOptions({
+  let output: BuildOptions = buildOptions({
     absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
     entryPoints: {
       [outFileName]: `src/${file}`,

.eslintignore

@@ -0,0 +1 @@
+.gitignore

.eslintrc.cjs

@@ -0,0 +1,190 @@
+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: 2022,
+    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-legacy',
+    'plugin:@cspell/recommended',
+    'prettier',
+  ],
+  plugins: [
+    '@typescript-eslint',
+    'no-only-tests',
+    'html',
+    'jest',
+    'jsdoc',
+    'json',
+    '@cspell',
+    'lodash',
+    'unicorn',
+  ],
+  ignorePatterns: [
+    // this file is automatically generated by `pnpm run --filter mermaid types:build-config`
+    'packages/mermaid/src/config.type.ts',
+  ],
+  rules: {
+    curly: 'error',
+    'no-console': 'error',
+    'no-prototype-builtins': 'off',
+    'no-unused-vars': 'off',
+    'cypress/no-async-tests': 'off',
+    '@typescript-eslint/consistent-type-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/no-floating-promises': 'error',
+    '@typescript-eslint/no-misused-promises': 'error',
+    '@typescript-eslint/no-unused-vars': 'warn',
+    '@typescript-eslint/consistent-type-definitions': 'error',
+    '@typescript-eslint/ban-ts-comment': [
+      'error',
+      {
+        'ts-expect-error': 'allow-with-description',
+        'ts-ignore': 'allow-with-description',
+        'ts-nocheck': 'allow-with-description',
+        'ts-check': 'allow-with-description',
+        minimumDescriptionLength: 10,
+      },
+    ],
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        selector: 'typeLike',
+        format: ['PascalCase'],
+        custom: {
+          regex: '^I[A-Z]',
+          match: false,
+        },
+      },
+    ],
+    'json/*': ['error', 'allowComments'],
+    '@cspell/spellchecker': [
+      'error',
+      {
+        checkIdentifiers: true,
+        checkStrings: true,
+        checkStringTemplates: true,
+      },
+    ],
+    '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: {
+        'no-restricted-syntax': [
+          'error',
+          {
+            selector: 'TSEnumDeclaration',
+            message:
+              'Prefer using TypeScript union types over TypeScript enum, since TypeScript enums have a bunch of issues, see https://dev.to/dvddpl/whats-the-problem-with-typescript-enums-2okj',
+          },
+        ],
+        'tsdoc/syntax': 'error',
+      },
+    },
+    {
+      files: ['*.spec.{ts,js}', 'cypress/**', 'demos/**', '**/docs/**'],
+      rules: {
+        'jsdoc/require-jsdoc': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+      },
+    },
+    {
+      files: ['*.spec.{ts,js}', 'tests/**', 'cypress/**/*.js'],
+      rules: {
+        '@cspell/spellchecker': [
+          'error',
+          {
+            checkIdentifiers: false,
+            checkStrings: false,
+            checkStringTemplates: false,
+          },
+        ],
+      },
+    },
+    {
+      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,
+      },
+    },
+  ],
+};

.github/lychee.toml

@@ -41,10 +41,7 @@ exclude = [
 "https://bundlephobia.com",
 
 # Chrome webstore migration issue. Temporary
-"https://chromewebstore.google.com",
+"https://chromewebstore.google.com"
-
-# Drupal 403
-"https://(www.)?drupal.org"
 ]
 
 # Exclude all private IPs from checking.

.github/pull_request_template.md

@@ -15,4 +15,4 @@ Make sure you
 - [ ] :book: have read the [contribution guidelines](https://mermaid.js.org/community/contributing.html)
 - [ ] :computer: have added necessary unit/e2e tests.
 - [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://mermaid.js.org/community/contributing.html#update-documentation) is used for all new features.
-- [ ] :butterfly: If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running `pnpm changeset` and following the prompts. Changesets that add features should be `minor` and those that fix bugs should be `patch`. Please prefix changeset messages with `feat:`, `fix:`, or `chore:`.
+- [ ] :bookmark: targeted `develop` branch

.github/release-drafter.yml

@@ -0,0 +1,36 @@
+name-template: '$NEXT_PATCH_VERSION'
+tag-template: '$NEXT_PATCH_VERSION'
+categories:
+  - title: '🚨 **Breaking Changes**'
+    labels:
+      - 'Breaking Change'
+  - title: '🚀 Features'
+    labels:
+      - 'Type: Enhancement'
+      - 'feature' # deprecated, new PRs shouldn't have this
+  - title: '🐛 Bug Fixes'
+    labels:
+      - 'Type: Bug / Error'
+      - 'fix' # deprecated, new PRs shouldn't have this
+  - title: '🧰 Maintenance'
+    labels:
+      - 'Type: Other'
+      - 'chore' # deprecated, new PRs shouldn't have this
+  - title: '⚡️ Performance'
+    labels:
+      - 'Type: Performance'
+  - title: '📚 Documentation'
+    labels:
+      - 'Area: Documentation'
+change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
+sort-by: title
+sort-direction: ascending
+exclude-labels:
+  - 'Skip changelog'
+no-changes-template: 'This release contains minor changes and bugfixes.'
+template: |
+  # Release Notes
+
+  $CHANGES
+
+  🎉 **Thanks to all contributors helping with this release!** 🎉

.github/workflows/autofix.yml

@@ -1,43 +0,0 @@
-name: autofix.ci # needed to securely identify the workflow
-
-on:
-  pull_request:
-    branches-ignore:
-      - 'renovate/**'
-permissions:
-  contents: read
-
-jobs:
-  autofix:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: pnpm/action-setup@v4
-        # uses version from "packageManager" field in package.json
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          cache: pnpm
-          node-version-file: '.node-version'
-
-      - name: Install Packages
-        run: |
-          pnpm install --frozen-lockfile
-        env:
-          CYPRESS_CACHE_FOLDER: .cache/Cypress
-
-      - name: Fix Linting
-        shell: bash
-        run: pnpm -w run lint:fix
-
-      - name: Sync `./src/config.type.ts` with `./src/schemas/config.schema.yaml`
-        shell: bash
-        run: pnpm run --filter mermaid types:build-config
-
-      - name: Build Docs
-        working-directory: ./packages/mermaid
-        run: pnpm run docs:build
-
-      - uses: autofix-ci/action@ff86a557419858bb967097bfc916833f5647fa8c

.github/workflows/build-docs.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/build.yml

@@ -18,7 +18,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js

.github/workflows/e2e-applitools.yml

@@ -32,7 +32,7 @@ jobs:
 
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js

.github/workflows/e2e.yml

@@ -1,3 +1,9 @@
+# We use github cache to save snapshots between runs.
+# For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
+# If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
+# These are then downloaded before running the E2E, providing the reference snapshots.
+# If there are any errors, the diff image is uploaded to artifacts, and the user is notified.
+
 name: E2E
 
 on:
@@ -24,7 +30,6 @@ env:
       ) || 
       github.event.before
     }}
-  shouldRunParallel: ${{ secrets.CYPRESS_RECORD_KEY != '' && !(github.event_name == 'push' && github.ref == 'refs/heads/develop') }}
 jobs:
   cache:
     runs-on: ubuntu-latest
@@ -33,7 +38,7 @@ jobs:
       options: --user 1001
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
@@ -67,6 +72,16 @@ jobs:
           mkdir -p cypress/snapshots/stats/base
           mv stats cypress/snapshots/stats/base
 
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        id: cypress-snapshot-gen
+        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
+        with:
+          install: false
+          start: pnpm run dev
+          wait-on: 'http://localhost:9000'
+          browser: chrome
+
   e2e:
     runs-on: ubuntu-latest
     container:
@@ -80,7 +95,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
@@ -117,7 +132,7 @@ jobs:
         id: cypress
         # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
         # Otherwise (e.g. if running from fork), we run on a single container only
-        if: ${{ env.shouldRunParallel == 'true' || ( matrix.containers == 1 ) }}
+        if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
         with:
           install: false
           start: pnpm run dev:coverage
@@ -125,16 +140,12 @@ jobs:
           browser: chrome
           # Disable recording if we don't have an API key
           # e.g. if this action was run from a fork
-          record: ${{ env.shouldRunParallel == 'true' }}
+          record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
-          parallel: ${{ env.shouldRunParallel == 'true' }}
+          parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true
           CYPRESS_COMMIT: ${{ github.sha }}
-          ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
-          ARGOS_PARALLEL: ${{ env.shouldRunParallel == 'true' }}
-          ARGOS_PARALLEL_TOTAL: 4
-          ARGOS_PARALLEL_INDEX: ${{ matrix.containers }}
 
       - name: Upload Coverage to Codecov
         uses: codecov/codecov-action@v4
@@ -147,3 +158,55 @@ jobs:
           fail_ci_if_error: false
           verbose: true
           token: 6845cc80-77ee-4e17-85a1-026cd95e0766
+
+      # We upload the artifacts into numbered archives to prevent overwriting
+      - name: Upload Artifacts
+        uses: actions/upload-artifact@v4
+        if: ${{ always() }}
+        with:
+          name: snapshots-${{ matrix.containers }}
+          retention-days: 1
+          path: ./cypress/snapshots
+
+  combineArtifacts:
+    needs: e2e
+    runs-on: ubuntu-latest
+    if: ${{ always() }}
+    steps:
+      # Download all snapshot artifacts and merge them into a single folder
+      - name: Download All Artifacts
+        uses: actions/download-artifact@v4
+        with:
+          path: snapshots
+          pattern: snapshots-*
+          merge-multiple: true
+
+      # For successful push events, we save the snapshots cache
+      - name: Save snapshots cache
+        id: cache-upload
+        if: ${{ github.event_name == 'push' && needs.e2e.result != 'failure' }}
+        uses: actions/cache/save@v4
+        with:
+          path: ./snapshots
+          key: ${{ runner.os }}-snapshots-${{ github.event.after }}
+
+      - name: Flatten images to a folder
+        if: ${{ needs.e2e.result == 'failure'  }}
+        run: |
+          mkdir errors
+          cd snapshots
+          find . -mindepth 2 -type d -name "*__diff_output__*" -exec sh -c 'mv "$0"/*.png ../errors/' {} \;
+
+      - name: Upload Error snapshots
+        if: ${{ needs.e2e.result == 'failure' }}
+        uses: actions/upload-artifact@v4
+        id: upload-artifacts
+        with:
+          name: error-snapshots
+          retention-days: 10
+          path: errors/
+
+      - name: Notify Users
+        if: ${{ needs.e2e.result == 'failure' }}
+        run: |
+          echo "::error title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"

.github/workflows/lint.yml

@@ -19,7 +19,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
@@ -82,3 +82,15 @@ jobs:
         working-directory: ./packages/mermaid
         continue-on-error: ${{ github.event_name == 'push' }}
         run: pnpm run docs:verify
+
+      - name: Rebuild Docs
+        if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
+        working-directory: ./packages/mermaid
+        run: pnpm run docs:build
+
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v9
+        if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
+        with:
+          message: 'Update docs'
+          add: 'docs/*'

.github/workflows/publish-docs.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/release-draft.yml

@@ -0,0 +1,23 @@
+name: Draft Release
+
+on:
+  push:
+    branches:
+      - master
+
+permissions:
+  contents: read
+
+jobs:
+  draft-release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write # write permission is required to create a GitHub release
+      pull-requests: read # required to read PR titles/labels
+    steps:
+      - name: Draft Release
+        uses: release-drafter/release-drafter@v6
+        with:
+          disable-autolabeler: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release-preview-publish.yml

@@ -13,7 +13,7 @@ jobs:
         with:
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/release-publish.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: fregante/setup-git-user@v2
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js

.github/workflows/release.yml

@@ -1,37 +0,0 @@
-name: Release
-
-on:
-  push:
-    branches:
-      - master
-
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
-jobs:
-  release:
-    name: Release
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v3
-
-      - uses: pnpm/action-setup@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          cache: pnpm
-          node-version-file: '.node-version'
-
-      - name: Install Packages
-        run: pnpm install --frozen-lockfile
-
-      - name: Create Release Pull Request or Publish to npm
-        id: changesets
-        uses: changesets/action@v1
-        with:
-          version: pnpm changeset:version
-          publish: pnpm changeset:publish
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/test.yml

@@ -11,7 +11,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js

.github/workflows/update-browserlist.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
       - run: npx update-browserslist-db@latest
       - name: Commit changes
         uses: EndBug/add-and-commit@v9

.gitignore

@@ -35,7 +35,7 @@ cypress/snapshots/
 .tsbuildinfo
 tsconfig.tsbuildinfo
 
-#knsv*.html
+knsv*.html
 local*.html
 stats/
 
@@ -48,7 +48,6 @@ demos/dev/**
 !/demos/dev/example.html
 !/demos/dev/reload.js
 tsx-0/**
-vite.config.ts.timestamp-*
 
 # autogenereated by langium-cli
 generated/

.prettierignore

@@ -16,5 +16,3 @@ generated/
 # Ignore the files creates in /demos/dev except for example.html
 demos/dev/**
 !/demos/dev/example.html
-# TODO: Lots of errors to fix
-cypress/platform/state-refactor.html

.vite/build.ts

@@ -1,5 +1,4 @@
-import type { InlineConfig } from 'vite';
+import { build, InlineConfig, type PluginOption } from 'vite';
-import { build, type PluginOption } from 'vite';
 import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
@@ -47,10 +46,9 @@ interface BuildOptions {
 
 export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions): InlineConfig => {
   const external: (string | RegExp)[] = ['require', 'fs', 'path'];
-  // eslint-disable-next-line no-console
   console.log(entryName, packageOptions[entryName]);
   const { name, file, packageName } = packageOptions[entryName];
-  const output: OutputOptions = [
+  let output: OutputOptions = [
     {
       name,
       format: 'esm',
@@ -85,6 +83,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
     plugins: [
       jisonPlugin(),
       jsonSchemaPlugin(), // handles `.schema.yaml` files
+      // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
       typescript({ compilerOptions: { declaration: false } }),
       istanbul({
         exclude: ['node_modules', 'test/', '__mocks__', 'generated'],
@@ -122,10 +121,10 @@ await generateLangium();
 
 if (watch) {
   await build(getBuildConfig({ minify: false, watch, core: false, entryName: 'parser' }));
-  void build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
+  build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
   if (!mermaidOnly) {
-    void build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
-    void build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-zenuml' }));
+    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-zenuml' }));
   }
 } else if (visualize) {
   await build(getBuildConfig({ minify: false, watch, core: false, entryName: 'parser' }));

.vite/jsonSchemaPlugin.ts

@@ -1,4 +1,4 @@
-import type { PluginOption } from 'vite';
+import { PluginOption } from 'vite';
 import { getDefaults, getSchema, loadSchema } from '../.build/jsonSchema.js';
 
 /**

.vite/server.ts

@@ -23,9 +23,8 @@ async function createServer() {
   app.use(express.static('cypress/platform'));
 
   app.listen(9000, () => {
-    // eslint-disable-next-line no-console
     console.log(`Listening on http://localhost:9000`);
   });
 }
 
-void createServer();
+createServer();

FUNDING.json

@@ -1,7 +0,0 @@
-{
-  "drips": {
-    "ethereum": {
-      "ownedBy": "0x0831DDFe60d009d9448CC976157b539089aB821E"
-    }
-  }
-}

README.md

@@ -35,7 +35,6 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
 [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
 [![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
 [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
-[![Covered by Argos Visual Testing](https://argos-ci.com/badge.svg)](https://argos-ci.com)
 
 <img src="./img/header.png" alt="" />
 

cypress.config.ts

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

cypress/helpers/util.ts

@@ -35,7 +35,7 @@ export const mermaidUrl = (
   };
   const objStr: string = JSON.stringify(codeObject);
   let url = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`;
-  if (api && typeof graphStr === 'string') {
+  if (api) {
     url = `http://localhost:9000/xss.html?graph=${graphStr}`;
   }
 
@@ -54,13 +54,14 @@ export const imgSnapshotTest = (
 ): void => {
   const options: CypressMermaidConfig = {
     ..._options,
-    fontFamily: _options.fontFamily ?? 'courier',
+    fontFamily: _options.fontFamily || 'courier',
     // @ts-ignore TODO: Fix type of fontSize
-    fontSize: _options.fontSize ?? '16px',
+    fontSize: _options.fontSize || '16px',
     sequence: {
-      ...(_options.sequence ?? {}),
+      ...(_options.sequence || {}),
       actorFontFamily: 'courier',
-      noteFontFamily: _options.sequence?.noteFontFamily
+      noteFontFamily:
+        _options.sequence && _options.sequence.noteFontFamily
           ? _options.sequence.noteFontFamily
           : 'courier',
       messageFontFamily: 'courier',
@@ -94,22 +95,8 @@ export const openURLAndVerifyRendering = (
   options: CypressMermaidConfig,
   validation?: any
 ): void => {
-  const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
-
-  cy.visit(url);
-  cy.window().should('have.property', 'rendered', true);
-  cy.get('svg').should('be.visible');
-
-  if (validation) {
-    cy.get('svg').should(validation);
-  }
-
-  verifyScreenshot(name);
-};
-
-export const verifyScreenshot = (name: string): void => {
   const useAppli: boolean = Cypress.env('useAppli');
-  const useArgos: boolean = Cypress.env('useArgos');
+  const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   if (useAppli) {
     cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`);
@@ -119,14 +106,21 @@ export const verifyScreenshot = (name: string): void => {
       batchName: Cypress.spec.name,
       batchId: batchId + Cypress.spec.name,
     });
+  }
+
+  cy.visit(url);
+  cy.window().should('have.property', 'rendered', true);
+  cy.get('svg').should('be.visible');
+
+  if (validation) {
+    cy.get('svg').should(validation);
+  }
+
+  if (useAppli) {
     cy.log(`Check eyes ${Cypress.spec.name}`);
     cy.eyesCheckWindow('Click!');
     cy.log(`Closing eyes ${Cypress.spec.name}`);
     cy.eyesClose();
-  } else if (useArgos) {
-    cy.argosScreenshot(name, {
-      threshold: 0.01,
-    });
   } else {
     cy.matchImageSnapshot(name);
   }

cypress/integration/other/configuration.spec.js

@@ -1,4 +1,4 @@
-import { renderGraph, verifyScreenshot } from '../../helpers/util.ts';
+import { renderGraph } from '../../helpers/util.ts';
 describe('Configuration', () => {
   describe('arrowMarkerAbsolute', () => {
     it('should handle default value false of arrowMarkerAbsolute', () => {
@@ -119,7 +119,8 @@ describe('Configuration', () => {
       const url = 'http://localhost:9000/regression/issue-1874.html';
       cy.visit(url);
       cy.window().should('have.property', 'rendered', true);
-      verifyScreenshot(
+      cy.get('svg').should('be.visible');
+      cy.matchImageSnapshot(
         'configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives'
       );
     });
@@ -144,7 +145,7 @@ describe('Configuration', () => {
           // none of the diagrams should be error diagrams
           expect($svg).to.not.contain('Syntax error');
         });
-      verifyScreenshot(
+      cy.matchImageSnapshot(
         'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set'
       );
     });
@@ -161,7 +162,7 @@ describe('Configuration', () => {
           // some of the diagrams should be error diagrams
           expect($svg).to.contain('Syntax error');
         });
-      verifyScreenshot(
+      cy.matchImageSnapshot(
         'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set'
       );
     });

cypress/integration/other/flowchart-elk.spec.js

@@ -0,0 +1,14 @@
+import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.ts';
+
+describe('Flowchart elk', () => {
+  it('should use dagre as fallback', () => {
+    urlSnapshotTest('http://localhost:9000/flow-elk.html', {
+      name: 'flow-elk fallback to dagre',
+    });
+  });
+  it('should allow overriding with external package', () => {
+    urlSnapshotTest('http://localhost:9000/flow-elk.html?elk=true', {
+      name: 'flow-elk overriding dagre with elk',
+    });
+  });
+});

cypress/integration/other/xss.spec.js

@@ -10,6 +10,7 @@ describe('XSS', () => {
     cy.wait(1000).then(() => {
       cy.get('.mermaid').should('exist');
     });
+    cy.get('svg');
   });
 
   it('should not allow tags in the css', () => {
@@ -136,9 +137,4 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-  it('should sanitize backticks block diagram labels properly', () => {
-    cy.visit('http://localhost:9000/xss25.html');
-    cy.wait(1000);
-    cy.get('#the-malware').should('not.exist');
-  });
 });

cypress/integration/rendering/appli.spec.js

@@ -11,27 +11,6 @@ describe('Git Graph diagram', () => {
       {}
     );
   });
-  it('Should render subgraphs with title margins and edge labels', () => {
-    imgSnapshotTest(
-      `flowchart LR
-
-          subgraph TOP
-              direction TB
-              subgraph B1
-                  direction RL
-                  i1 --lb1-->f1
-              end
-              subgraph B2
-                  direction BT
-                  i2 --lb2-->f2
-              end
-          end
-          A --lb3--> TOP --lb4--> B
-          B1 --lb5--> B2
-        `,
-      { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
-    );
-  });
   // it(`ultraFastTest`, function () {
   //   // Navigate to the url we want to test
   //   // ⭐️ Note to see visual bugs, run the test using the above URL for the 1st run.

cypress/integration/rendering/block.spec.js

@@ -236,7 +236,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL17: width alignment - blocks shold be equal in width', () => {
+  it('BL16: width alignment - blocks shold be equal in width', () => {
     imgSnapshotTest(
       `block-beta
     A("This is the text")
@@ -247,7 +247,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL18: block types 1 - square, rounded and circle', () => {
+  it('BL17: block types 1 - square, rounded and circle', () => {
     imgSnapshotTest(
       `block-beta
     A["square"]
@@ -258,7 +258,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL19: block types 2 - odd, diamond and hexagon', () => {
+  it('BL18: block types 2 - odd, diamond and hexagon', () => {
     imgSnapshotTest(
       `block-beta
     A>"rect_left_inv_arrow"]
@@ -269,7 +269,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL20: block types 3 - stadium', () => {
+  it('BL19: block types 3 - stadium', () => {
     imgSnapshotTest(
       `block-beta
     A(["stadium"])
@@ -278,7 +278,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
+  it('BL20: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
     imgSnapshotTest(
       `block-beta
     A[/"lean right"/]
@@ -290,7 +290,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL22: block types 1 - square, rounded and circle', () => {
+  it('BL21: block types 1 - square, rounded and circle', () => {
     imgSnapshotTest(
       `block-beta
     A["square"]
@@ -301,7 +301,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL23: sizing - it should be possible to make a block wider', () => {
+  it('BL22: sizing - it should be possible to make a block wider', () => {
     imgSnapshotTest(
       `block-beta
       A("rounded"):2
@@ -312,7 +312,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL24: sizing - it should be possible to make a composite block wider', () => {
+  it('BL23: sizing - it should be possible to make a composite block wider', () => {
     imgSnapshotTest(
       `block-beta
       block:2
@@ -324,7 +324,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL25: block in the middle with space on each side', () => {
+  it('BL24: block in the middle with space on each side', () => {
     imgSnapshotTest(
       `block-beta
         columns 3
@@ -335,7 +335,7 @@ describe('Block diagram', () => {
       {}
     );
   });
-  it('BL26: space and an edge', () => {
+  it('BL25: space and an edge', () => {
     imgSnapshotTest(
       `block-beta
   columns 5
@@ -345,7 +345,7 @@ describe('Block diagram', () => {
       {}
     );
   });
-  it('BL27: block sizes for regular blocks', () => {
+  it('BL26: block sizes for regular blocks', () => {
     imgSnapshotTest(
       `block-beta
   columns 3
@@ -354,7 +354,7 @@ describe('Block diagram', () => {
       {}
     );
   });
-  it('BL28: composite block with a set width - f should use the available space', () => {
+  it('BL27: composite block with a set width - f should use the available space', () => {
     imgSnapshotTest(
       `block-beta
   columns 3
@@ -367,8 +367,7 @@ describe('Block diagram', () => {
       {}
     );
   });
-
+  it('BL23: composite block with a set width - f and g should split the available space', () => {
-  it('BL29: composite block with a set width - f and g should split the available space', () => {
     imgSnapshotTest(
       `block-beta
   columns 3

cypress/integration/rendering/c4.spec.js

@@ -1,7 +1,7 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('C4 diagram', () => {
-  it('C4.1 should render a simple C4Context diagram', () => {
+  it('should render a simple C4Context diagram', () => {
     imgSnapshotTest(
       `
       C4Context
@@ -30,8 +30,9 @@ describe('C4 diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
-  it('C4.2 should render a simple C4Container diagram', () => {
+  it('should render a simple C4Container diagram', () => {
     imgSnapshotTest(
       `
       C4Container
@@ -49,8 +50,9 @@ describe('C4 diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
-  it('C4.3 should render a simple C4Component diagram', () => {
+  it('should render a simple C4Component diagram', () => {
     imgSnapshotTest(
       `
       C4Component
@@ -67,8 +69,9 @@ describe('C4 diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
-  it('C4.4 should render a simple C4Dynamic diagram', () => {
+  it('should render a simple C4Dynamic diagram', () => {
     imgSnapshotTest(
       `
       C4Dynamic
@@ -90,8 +93,9 @@ describe('C4 diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
-  it('C4.5 should render a simple C4Deployment diagram', () => {
+  it('should render a simple C4Deployment diagram', () => {
     imgSnapshotTest(
       `
       C4Deployment
@@ -113,5 +117,6 @@ describe('C4 diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
 });

cypress/integration/rendering/classDiagram-v2.spec.js

@@ -76,7 +76,7 @@ describe('Class diagram V2', () => {
     );
   });
 
-  it('2.1 should render a simple class diagram with different visibilities', () => {
+  it('should render a simple class diagram with different visibilities', () => {
     imgSnapshotTest(
       `
     classDiagram-v2
@@ -93,7 +93,7 @@ describe('Class diagram V2', () => {
     );
   });
 
-  it('3: should render multiple class diagrams', () => {
+  it('should render multiple class diagrams', () => {
     imgSnapshotTest(
       [
         `

cypress/integration/rendering/classDiagram.spec.js

@@ -32,6 +32,7 @@ describe('Class diagram', () => {
       `,
       { logLevel: 1 }
     );
+    cy.get('svg');
   });
 
   it('2: should render a simple class diagrams with cardinality', () => {
@@ -60,6 +61,7 @@ describe('Class diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
 
   it('3: should render a simple class diagram with different visibilities', () => {
@@ -77,6 +79,7 @@ describe('Class diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
 
   it('4: should render a simple class diagram with comments', () => {
@@ -106,6 +109,7 @@ describe('Class diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
 
   it('5: should render a simple class diagram with abstract method', () => {
@@ -117,6 +121,7 @@ describe('Class diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
 
   it('6: should render a simple class diagram with static method', () => {
@@ -128,6 +133,7 @@ describe('Class diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
 
   it('7: should render a simple class diagram with Generic class', () => {
@@ -147,6 +153,7 @@ describe('Class diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
 
   it('8: should render a simple class diagram with Generic class and relations', () => {
@@ -167,6 +174,7 @@ describe('Class diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
 
   it('9: should render a simple class diagram with clickable link', () => {
@@ -188,6 +196,7 @@ describe('Class diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
 
   it('10: should render a simple class diagram with clickable callback', () => {
@@ -209,6 +218,7 @@ describe('Class diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
 
   it('11: should render a simple class diagram with return type on method', () => {
@@ -223,6 +233,7 @@ describe('Class diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
 
   it('12: should render a simple class diagram with generic types', () => {
@@ -238,6 +249,7 @@ describe('Class diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
 
   it('13: should render a simple class diagram with css classes applied', () => {
@@ -255,6 +267,7 @@ describe('Class diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
 
   it('14: should render a simple class diagram with css classes applied directly', () => {
@@ -270,6 +283,7 @@ describe('Class diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
 
   it('15: should render a simple class diagram with css classes applied to multiple classes', () => {
@@ -284,6 +298,7 @@ describe('Class diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
 
   it('16: should render multiple class diagrams', () => {
@@ -336,6 +351,7 @@ describe('Class diagram', () => {
       ],
       {}
     );
+    cy.get('svg');
   });
 
   // it('17: should render a class diagram when useMaxWidth is true (default)', () => {
@@ -405,6 +421,7 @@ describe('Class diagram', () => {
       `,
       { logLevel: 1 }
     );
+    cy.get('svg');
   });
 
   it('should render class diagram with newlines in title', () => {
@@ -422,6 +439,7 @@ describe('Class diagram', () => {
           +quack()
         }
       `);
+    cy.get('svg');
   });
 
   it('should render class diagram with many newlines in title', () => {

cypress/integration/rendering/erDiagram.spec.js

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

cypress/integration/rendering/errorDiagram.spec.js

@@ -3,7 +3,7 @@ import { imgSnapshotTest } from '../../helpers/util';
 describe('Error Diagrams', () => {
   beforeEach(() => {
     cy.on('uncaught:exception', (err) => {
-      expect(err.message).to.include('error');
+      expect(err.message).to.include('Parse error');
       // return false to prevent the error from
       // failing this test
       return false;

cypress/integration/rendering/flowchart-elk.spec.js

@@ -837,26 +837,6 @@ subgraph "\`**Two**\`"
   in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
 end
 
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-      it('Sub graphs and markdown strings', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
----
-
-flowchart LR
- subgraph subgraph_ko6czgs5u["Untitled subgraph"]
-        D["Option 1"]
-  end
-    C{"Evaluate"} -- One --> D
-    C -- Two --> E(("Option 2"))
-    D --> E
-      A["A"]
-
 `,
           { flowchart: { titleTopMargin: 0 } }
         );
@@ -875,7 +855,7 @@ describe('Title and arrow styling #4813', () => {
       flowchart LR
       A-->B
       A-->C`,
-      { layout: 'elk' }
+      { flowchart: { defaultRenderer: 'elk' } }
     );
     cy.get('svg').should((svg) => {
       const title = svg[0].querySelector('text');
@@ -891,14 +871,15 @@ describe('Title and arrow styling #4813', () => {
       B-.-oC
       C==xD
       D ~~~ A`,
-      { layout: 'elk' }
+      { flowchart: { defaultRenderer: 'elk' } }
     );
     cy.get('svg').should((svg) => {
       const edges = svg[0].querySelectorAll('.edges path');
-      expect(edges[0].getAttribute('class')).to.contain('edge-pattern-solid');
+      console.log(edges);
-      expect(edges[1].getAttribute('class')).to.contain('edge-pattern-dotted');
+      expect(edges[0]).to.have.attr('pattern', 'solid');
-      expect(edges[2].getAttribute('class')).to.contain('edge-thickness-thick');
+      expect(edges[1]).to.have.attr('pattern', 'dotted');
-      expect(edges[3].getAttribute('class')).to.contain('edge-thickness-invisible');
+      expect(edges[2]).to.have.css('stroke-width', '3.5px');
+      expect(edges[3]).to.have.css('stroke-width', '1.5px');
     });
   });
 });

cypress/integration/rendering/flowchart-v2.spec.js

@@ -99,7 +99,7 @@ describe('Flowchart v2', () => {
       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(417 * 0.95, 417 * 1.05);
+      expect(maxWidthValue).to.be.within(290 * 0.95 - 1, 290 * 1.05);
     });
   });
   it('8: should render a flowchart when useMaxWidth is false', () => {
@@ -118,7 +118,7 @@ describe('Flowchart v2', () => {
       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(417 * 0.95, 417 * 1.05);
+      expect(width).to.be.within(290 * 0.95 - 1, 290 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -1047,9 +1047,7 @@ end
           A --lb3--> TOP --lb4--> B
           B1 --lb5--> B2
         `,
-        {
+        { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
-          flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } },
-        }
       );
     });
   });

cypress/integration/rendering/flowchart.spec.js

@@ -733,7 +733,7 @@ describe('Graph', () => {
   });
   it('38: should render a flowchart when useMaxWidth is true (default)', () => {
     renderGraph(
-      `flowchart TD
+      `graph TD
       A[Christmas] -->|Get money| B(Go shopping)
       B --> C{Let me think}
       C -->|One| D[Laptop]
@@ -751,7 +751,7 @@ describe('Graph', () => {
       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(446 * 0.9, 446 * 1.1);
+      expect(maxWidthValue).to.be.within(300 * 0.9, 300 * 1.1);
     });
   });
   it('39: should render a flowchart when useMaxWidth is false', () => {
@@ -770,7 +770,7 @@ describe('Graph', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±10%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      expect(width).to.be.within(446 * 0.9, 446 * 1.1);
+      expect(width).to.be.within(300 * 0.9, 300 * 1.1);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -911,10 +911,7 @@ graph TD
 
       style default stroke:#000,stroke-width:4px
     `,
-      {
+      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
-        flowchart: { htmlLabels: true },
-        securityLevel: 'loose',
-      }
     );
   });
 });

cypress/integration/rendering/gitGraph.spec.js

@@ -1532,41 +1532,5 @@ gitGraph TB:
         {}
       );
     });
-    it('75: should render a gitGraph with multiple tags on a merge commit on bottom-to-top orientation', () => {
-      imgSnapshotTest(
-        `gitGraph BT:
-        commit id: "ZERO"
-        branch develop
-        commit id:"A"
-        checkout main
-        commit id:"ONE"
-        checkout develop
-        commit id:"B"
-        checkout main
-        merge develop id:"Release 1.0" type:HIGHLIGHT tag: "SAML v2.0" tag: "OpenID v1.1"
-        commit id:"TWO"
-        checkout develop
-        commit id:"C"`,
-        {}
-      );
-    });
-  });
-  it('76: should render a gitGraph with multiple tags on a merge commit on left-to-right orientation', () => {
-    imgSnapshotTest(
-      `gitGraph
-    commit id: "ZERO"
-    branch develop
-    commit id:"A"
-    checkout main
-    commit id:"ONE"
-    checkout develop
-    commit id:"B"
-    checkout main
-    merge develop id:"Release 1.0" type:HIGHLIGHT tag: "SAML v2.0" tag: "OpenID v1.1"
-    commit id:"TWO"
-    checkout develop
-    commit id:"C"`,
-      {}
-    );
   });
 });

cypress/integration/rendering/packet.spec.ts

@@ -10,15 +10,6 @@ describe('packet structure', () => {
     );
   });
 
-  it('should render a simple packet diagram without ranges', () => {
-    imgSnapshotTest(
-      `packet-beta
-  0: "h"
-  1: "i"
-`
-    );
-  });
-
   it('should render a complex packet diagram', () => {
     imgSnapshotTest(
       `packet-beta

cypress/integration/rendering/quadrantChart.spec.js

@@ -8,6 +8,7 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('should render a complete quadrant chart', () => {
     imgSnapshotTest(
@@ -29,6 +30,7 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('should render without points', () => {
     imgSnapshotTest(
@@ -44,6 +46,7 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('should able to render y-axix on right side', () => {
     imgSnapshotTest(
@@ -60,6 +63,7 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('should able to render x-axix on bottom', () => {
     imgSnapshotTest(
@@ -76,6 +80,7 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('should able to render x-axix on bottom and y-axis on right', () => {
     imgSnapshotTest(
@@ -92,6 +97,7 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('should render without title', () => {
     imgSnapshotTest(
@@ -106,6 +112,7 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('should use all the config', () => {
     imgSnapshotTest(
@@ -128,6 +135,7 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('should use all the theme variable', () => {
     imgSnapshotTest(
@@ -150,6 +158,7 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('should render x-axis labels in the center, if x-axis has two labels', () => {
     imgSnapshotTest(
@@ -171,6 +180,7 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('should render y-axis labels in the center, if y-axis has two labels', () => {
     imgSnapshotTest(
@@ -192,6 +202,7 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('should render both axes labels on the left and bottom, if both axes have only one label', () => {
     imgSnapshotTest(
@@ -213,6 +224,7 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
 
   it('it should render data points with styles', () => {
@@ -237,6 +249,7 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
 
   it('it should render data points with styles + classes', () => {

cypress/integration/rendering/requirement.spec.js

@@ -44,5 +44,6 @@ describe('Requirement diagram', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
 });

cypress/integration/rendering/sequencediagram.spec.js

@@ -1,6 +1,8 @@
+/// <reference types="Cypress" />
+
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
-describe('Sequence diagram', () => {
+context('Sequence diagram', () => {
   it('should render a sequence diagram with boxes', () => {
     renderGraph(
       `
@@ -66,19 +68,6 @@ describe('Sequence diagram', () => {
       { sequence: { actorFontFamily: 'courier' } }
     );
   });
-  it('should render bidirectional arrows', () => {
-    imgSnapshotTest(
-      `
-      sequenceDiagram
-      Alice<<->>John: Hello John, how are you?
-      Alice<<-->>John: Hi Alice, I can hear you!
-      John<<->>Alice: This also works the other way
-      John<<-->>Alice: Yes
-      Alice->John: Test
-      John->>Alice: Still works
-      `
-    );
-  });
   it('should handle different line breaks', () => {
     imgSnapshotTest(
       `
@@ -242,7 +231,7 @@ describe('Sequence diagram', () => {
       `
     );
   });
-  describe('font settings', () => {
+  context('font settings', () => {
     it('should render different note fonts when configured', () => {
       imgSnapshotTest(
         `
@@ -339,7 +328,7 @@ describe('Sequence diagram', () => {
       );
     });
   });
-  describe('auth width scaling', () => {
+  context('auth width scaling', () => {
     it('should render long actor descriptions', () => {
       imgSnapshotTest(
         `
@@ -475,18 +464,6 @@ describe('Sequence diagram', () => {
         {}
       );
     });
-    it('should render notes over actors and participant', () => {
-      imgSnapshotTest(
-        `
-        sequenceDiagram
-        actor Alice
-        participant Charlie
-        note over Alice: some note
-        note over Charlie: other note
-      `,
-        {}
-      );
-    });
     it('should render long messages from an actor to the left to one to the right', () => {
       imgSnapshotTest(
         `
@@ -528,7 +505,7 @@ describe('Sequence diagram', () => {
       );
     });
   });
-  describe('background rects', () => {
+  context('background rects', () => {
     it('should render a single and nested rects', () => {
       imgSnapshotTest(
         `
@@ -808,7 +785,7 @@ describe('Sequence diagram', () => {
       );
     });
   });
-  describe('directives', () => {
+  context('directives', () => {
     it('should override config with directive settings', () => {
       imgSnapshotTest(
         `
@@ -840,7 +817,7 @@ describe('Sequence diagram', () => {
       );
     });
   });
-  describe('links', () => {
+  context('links', () => {
     it('should support actor links', () => {
       renderGraph(
         `
@@ -856,7 +833,7 @@ describe('Sequence diagram', () => {
       );
       cy.get('#actor0_popup').should((popupMenu) => {
         const style = popupMenu.attr('style');
-        // expect(style).to.undefined;
+        expect(style).to.undefined;
       });
       cy.get('#root-0').click();
       cy.get('#actor0_popup').should((popupMenu) => {
@@ -931,7 +908,7 @@ describe('Sequence diagram', () => {
       );
     });
   });
-  describe('svg size', () => {
+  context('svg size', () => {
     it('should render a sequence diagram when useMaxWidth is true (default)', () => {
       renderGraph(
         `
@@ -1010,7 +987,7 @@ describe('Sequence diagram', () => {
       });
     });
   });
-  describe('render after error', () => {
+  context('render after error', () => {
     it('should render diagram after fixing destroy participant error', () => {
       cy.on('uncaught:exception', (err) => {
         return false;

cypress/integration/rendering/stateDiagram-v2.spec.js

@@ -8,6 +8,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 1, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('v2 should render a simple state diagrams', () => {
     imgSnapshotTest(
@@ -19,6 +20,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('v2 should render a long descriptions instead of id when available', () => {
     imgSnapshotTest(
@@ -30,6 +32,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('v2 should render a long descriptions with additional descriptions', () => {
     imgSnapshotTest(
@@ -41,6 +44,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('v2 should render a single state with short descriptions', () => {
     imgSnapshotTest(
@@ -51,6 +55,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('v2 should render a transition descriptions with new lines', () => {
     imgSnapshotTest(
@@ -64,6 +69,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('v2 should render a state with a note', () => {
     imgSnapshotTest(
@@ -77,6 +83,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('v2 should render a state with on the left side when so specified', () => {
     imgSnapshotTest(
@@ -90,6 +97,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('v2 should render a state with a note together with another state', () => {
     imgSnapshotTest(
@@ -105,6 +113,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('v2 should render a note with multiple lines in it', () => {
     imgSnapshotTest(
@@ -147,6 +156,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('v2 should render a simple state diagrams 2', () => {
     imgSnapshotTest(
@@ -159,6 +169,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('v2 should render a simple state diagrams with labels', () => {
     imgSnapshotTest(
@@ -174,6 +185,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('v2 should render state descriptions', () => {
     imgSnapshotTest(
@@ -186,6 +198,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('v2 should render composite states', () => {
     imgSnapshotTest(
@@ -204,6 +217,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('v2 should render multiple composite states', () => {
     imgSnapshotTest(
@@ -273,6 +287,7 @@ describe('State diagram', () => {
     `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('v2 should render concurrency states', () => {
     imgSnapshotTest(
@@ -296,6 +311,7 @@ describe('State diagram', () => {
     `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('v2 should render a state with states in it', () => {
     imgSnapshotTest(
@@ -542,43 +558,6 @@ stateDiagram-v2
         { logLevel: 0, fontFamily: 'courier' }
       );
     });
-    it(' can have styles applied ', () => {
-      imgSnapshotTest(
-        `
-stateDiagram-v2
-AState
-style AState fill:#636,border:1px solid red,color:white;
-        `,
-        { logLevel: 0, fontFamily: 'courier' }
-      );
-    });
-    it(' should let styles take preceedence over classes', () => {
-      imgSnapshotTest(
-        `
-stateDiagram-v2
-AState: Should NOT be white
-BState
-classDef exampleStyleClass fill:#fff,color: blue;
-class AState,BState exampleStyleClass
-style AState fill:#636,border:1px solid red,color:white;
-        `,
-        { logLevel: 0, fontFamily: 'courier' }
-      );
-    });
-    it(' should allow styles to take effect in stubgraphs', () => {
-      imgSnapshotTest(
-        `
-  stateDiagram
-    state roundWithTitle {
-      C: Black with white text
-    }
-    D: Black with white text
-
-    style C,D stroke:#00f, fill:black, color:white
-        `,
-        { logLevel: 0, fontFamily: 'courier' }
-      );
-    });
   });
   it('1433: should render a simple state diagram with a title', () => {
     imgSnapshotTest(
@@ -588,20 +567,6 @@ title: simple state diagram
 stateDiagram-v2
 [*] --> State1
 State1 --> [*]
-`,
-      {}
-    );
-  });
-  it('should align dividers correctly', () => {
-    imgSnapshotTest(
-      `stateDiagram-v2
-  state s2 {
-      s3
-      --
-      s4
-      --
-      55
-  }
 `,
       {}
     );

cypress/integration/rendering/stateDiagram.spec.js

@@ -10,6 +10,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('should render a long descriptions instead of id when available', () => {
     imgSnapshotTest(
@@ -21,6 +22,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('should render a long descriptions with additional descriptions', () => {
     imgSnapshotTest(
@@ -32,6 +34,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('should render a single state with short descriptions', () => {
     imgSnapshotTest(
@@ -42,6 +45,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('should render a transition descriptions with new lines', () => {
     imgSnapshotTest(
@@ -55,6 +59,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('should render a state with a note', () => {
     imgSnapshotTest(
@@ -68,6 +73,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('should render a state with on the left side when so specified', () => {
     imgSnapshotTest(
@@ -81,6 +87,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('should render a state with a note together with another state', () => {
     imgSnapshotTest(
@@ -96,6 +103,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('should render a note with multiple lines in it', () => {
     imgSnapshotTest(
@@ -138,6 +146,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('should render a simple state diagrams 2', () => {
     imgSnapshotTest(
@@ -150,6 +159,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('should render a simple state diagrams with labels', () => {
     imgSnapshotTest(
@@ -165,6 +175,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('should render state descriptions', () => {
     imgSnapshotTest(
@@ -177,6 +188,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('should render composite states', () => {
     imgSnapshotTest(
@@ -195,6 +207,7 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('should render multiple composit states', () => {
     imgSnapshotTest(
@@ -264,6 +277,7 @@ describe('State diagram', () => {
     `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('should render concurrency states', () => {
     imgSnapshotTest(
@@ -287,6 +301,7 @@ describe('State diagram', () => {
     `,
       { logLevel: 0, fontFamily: 'courier' }
     );
+    cy.get('svg');
   });
   it('should render a state with states in it', () => {
     imgSnapshotTest(

cypress/integration/rendering/theme.spec.js

@@ -10,6 +10,7 @@ describe('themeCSS balancing, it', () => {
           `,
       {}
     );
+    cy.get('svg');
   });
   it('should not allow unbalanced CSS definitions 2', () => {
     imgSnapshotTest(
@@ -20,6 +21,7 @@ describe('themeCSS balancing, it', () => {
           `,
       {}
     );
+    cy.get('svg');
   });
 });
 
@@ -43,6 +45,7 @@ describe('Pie Chart', () => {
           `,
           { theme }
         );
+        cy.get('svg');
       });
       it('should render a flowchart diagram', () => {
         imgSnapshotTest(
@@ -67,6 +70,7 @@ describe('Pie Chart', () => {
           `,
           { theme }
         );
+        cy.get('svg');
       });
       it('should render a new flowchart diagram', () => {
         imgSnapshotTest(
@@ -92,6 +96,7 @@ describe('Pie Chart', () => {
           `,
           { theme }
         );
+        cy.get('svg');
       });
       it('should render a sequence diagram', () => {
         imgSnapshotTest(
@@ -120,6 +125,7 @@ describe('Pie Chart', () => {
           `,
           { theme }
         );
+        cy.get('svg');
       });
 
       it('should render a class diagram', () => {
@@ -169,6 +175,7 @@ describe('Pie Chart', () => {
           `,
           { theme }
         );
+        cy.get('svg');
       });
       it('should render a state diagram', () => {
         imgSnapshotTest(
@@ -203,6 +210,7 @@ stateDiagram
           `,
           { theme }
         );
+        cy.get('svg');
       });
       it('should render a state diagram (v2)', () => {
         imgSnapshotTest(
@@ -237,6 +245,7 @@ stateDiagram-v2
           `,
           { theme }
         );
+        cy.get('svg');
       });
       it('should render a er diagram', () => {
         imgSnapshotTest(
@@ -257,6 +266,7 @@ erDiagram
           `,
           { theme }
         );
+        cy.get('svg');
       });
       it('should render a user journey diagram', () => {
         imgSnapshotTest(
@@ -277,6 +287,7 @@ erDiagram
                         `,
           { theme }
         );
+        cy.get('svg');
       });
       it('should render a gantt diagram', () => {
         cy.clock(new Date('2014-01-06').getTime());
@@ -315,6 +326,7 @@ erDiagram
        `,
           { theme }
         );
+        cy.get('svg');
       });
     });
   });

cypress/integration/rendering/xyChart.spec.js

@@ -9,6 +9,7 @@ describe('XY Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('Should render a complete chart', () => {
     imgSnapshotTest(
@@ -34,6 +35,7 @@ describe('XY Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('y-axis title not required', () => {
     imgSnapshotTest(
@@ -46,6 +48,7 @@ describe('XY Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('Should render a chart without y-axis with different range', () => {
     imgSnapshotTest(
@@ -57,6 +60,7 @@ describe('XY Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('x axis title not required', () => {
     imgSnapshotTest(
@@ -68,6 +72,7 @@ describe('XY Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('Multiple plots can be rendered', () => {
     imgSnapshotTest(
@@ -82,6 +87,7 @@ describe('XY Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('Decimals and negative numbers are supported', () => {
     imgSnapshotTest(
@@ -92,6 +98,7 @@ describe('XY Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('Render spark line with "plotReservedSpacePercent"', () => {
     imgSnapshotTest(
@@ -109,6 +116,7 @@ describe('XY Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('Render spark bar without displaying other property', () => {
     imgSnapshotTest(
@@ -135,6 +143,7 @@ describe('XY Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('Should use all the config from directive', () => {
     imgSnapshotTest(
@@ -149,6 +158,7 @@ describe('XY Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('Should use all the config from yaml', () => {
     imgSnapshotTest(
@@ -189,6 +199,7 @@ describe('XY Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('Render with show axis title false', () => {
     imgSnapshotTest(
@@ -210,6 +221,7 @@ describe('XY Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('Render with show axis label false', () => {
     imgSnapshotTest(
@@ -231,6 +243,7 @@ describe('XY Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('Render with show axis tick false', () => {
     imgSnapshotTest(
@@ -252,6 +265,7 @@ describe('XY Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('Render with show axis line false', () => {
     imgSnapshotTest(
@@ -273,6 +287,7 @@ describe('XY Chart', () => {
       `,
       {}
     );
+    cy.get('svg');
   });
   it('Render all the theme color', () => {
     imgSnapshotTest(
@@ -302,17 +317,6 @@ describe('XY Chart', () => {
       `,
       {}
     );
-  });
-  it('should use the correct distances between data points', () => {
-    imgSnapshotTest(
-      `
-      xychart-beta
-        x-axis 0 --> 2
-        line [0, 1, 0, 1]
-        bar [1, 0, 1, 0]
-      `,
-      {}
-    );
     cy.get('svg');
   });
 });

cypress/platform/bundle-test.js

@@ -27,7 +27,7 @@ const code3 = `flowchart TD
 A(<img scr='https://iconscout.com/ms-icon-310x310.png' width='20' height='20' />)
 B(<b>Bold text!</b>)`;
 
-if (/test-html-escaping/.exec(location.href)) {
+if (location.href.match('test-html-escaping')) {
   code = code3;
 }
 

cypress/platform/flowchart-refactor.html

@@ -1,866 +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"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        font-family: 'Arial';
-      }
-
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        table-layout: fixed;
-      }
-
-      th,
-      td {
-        border: 1px solid black;
-        padding: 10px;
-        text-align: center;
-        vertical-align: middle;
-      }
-
-      .separator {
-        height: 20px;
-        background-color: #f0f0f0;
-      }
-
-      .vertical-header {
-        text-align: center;
-      }
-
-      .collapsible {
-        background-color: #f9f9f9;
-        color: #444;
-        cursor: pointer;
-        padding: 18px;
-        width: 100%;
-        border: none;
-        text-align: left;
-        outline: none;
-        font-size: 15px;
-      }
-
-      .active,
-      .collapsible:hover {
-        background-color: #ccc;
-      }
-
-      .collapsible:after {
-        content: '\002B';
-        color: #777;
-        font-weight: bold;
-        float: right;
-        margin-left: 2px;
-      }
-
-      .active:after {
-        content: '\2212';
-      }
-
-      .content {
-        padding: 0 5px;
-        max-height: 0;
-        overflow: hidden;
-        transition: max-height 0.2s ease-out;
-        background-color: #f1f1f1;
-      }
-
-      .content .pre-scrollable {
-        max-height: 200px;
-        overflow-y: scroll;
-      }
-    </style>
-  </head>
-
-  <body>
-    <table>
-      <tr>
-        <th></th>
-        <!-- Placeholder for the top left corner -->
-        <th>Dagre</th>
-        <th>Dagre with rough</th>
-        <th>ELK</th>
-        <th>ELK with rough</th>
-      </tr>
-      <tr>
-        <th class="vertical-header">
-          <button class="collapsible">Stadium shape</button>
-          <div class="content">
-            <div class="pre-scrollable">
-              <pre>
-              flowchart LR
-              id1([This is the text in the box])
-            </pre
-              >
-            </div>
-          </div>
-        </th>
-        <td>
-          <pre id="diagram1" class="mermaid">
-flowchart LR
-    id1([This is the text in the box])
-
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handDrawn"} }%%
-flowchart LR
-    id1([This is the text in the box])
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram3" class="mermaid">
-%%{init: {"handDrawn": false, "layout": "elk"} }%%
-flowchart LR
-    id1([This is the text in the box])
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handDrawn", "layout": "elk"} }%%
-flowchart LR
-    id1([This is the text in the box])
-      </pre
-          >
-        </td>
-      </tr>
-      <!-- Separator row -->
-      <tr class="separator">
-        <td colspan="5"></td>
-        <!-- This cell spans all columns including the vertical header -->
-      </tr>
-
-      <tr>
-        <th class="vertical-header">
-          <button class="collapsible">Sub-Routine shape</button>
-          <div class="content">
-            <div class="pre-scrollable">
-              <pre>
-      flowchart LR
-    id1[[This is the text in the box]]
-    </pre
-              >
-            </div>
-          </div>
-        </th>
-        <td>
-          <pre id="diagram5" class="mermaid">
-flowchart LR
-    id1[[This is the text in the box]]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram6" class="mermaid">
-%%{init: {"look": "handDrawn"} }%%
-flowchart LR
-    id1[[This is the text in the box]]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram7" class="mermaid">
-%%{init: {"handDrawn": false, "layout": "elk"} }%%
-flowchart LR
-    id1[[This is the text in the box]]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram8" class="mermaid">
-%%{init: {"look": "handDrawn", "layout": "elk"} }%%
-flowchart LR
-    id1[[This is the text in the box]]
-      </pre
-          >
-        </td>
-      </tr>
-      <!-- Separator row -->
-      <tr class="separator">
-        <td colspan="5"></td>
-        <!-- This cell spans all columns including the vertical header -->
-      </tr>
-
-      <tr>
-        <th class="vertical-header">
-          <button class="collapsible">Cylindrical shape</button>
-          <div class="content">
-            <div class="pre-scrollable">
-              <pre>
-              flowchart LR
-    id1[(Database)]
-    </pre
-              >
-            </div>
-          </div>
-        </th>
-        <td>
-          <pre id="diagram9" class="mermaid">
-          flowchart LR
-    id1[(Database)]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram10" class="mermaid">
-          %%{init: {"look": "handDrawn"} }%%
-          flowchart LR
-    id1[(Database)]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram11" class="mermaid">
-          %%{init: {"handDrawn": false, "layout": "elk"} }%%
-          flowchart LR
-    id1[(Database)]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram12" class="mermaid">
-          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
-          flowchart LR
-    id1[(Database)]
-      </pre
-          >
-        </td>
-      </tr>
-      <!-- Separator row -->
-      <tr class="separator">
-        <td colspan="5"></td>
-        <!-- This cell spans all columns including the vertical header -->
-      </tr>
-
-      <tr>
-        <th class="vertical-header">
-          <button class="collapsible">Circle shape</button>
-          <div class="content">
-            <div class="pre-scrollable">
-              <pre>
-              flowchart LR
-    id1((This is the text in the circle))
-    </pre
-              >
-            </div>
-          </div>
-        </th>
-        <td>
-          <pre id="diagram13" class="mermaid">
-          flowchart LR
-    id1((This is the text in the circle))
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram14" class="mermaid">
-          %%{init: {"look": "handDrawn"} }%%
-          flowchart LR
-    id1((This is the text in the circle))
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram15" class="mermaid">
-          %%{init: {"handDrawn": false, "layout": "elk"} }%%
-          flowchart LR
-    id1((This is the text in the circle))
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram16" class="mermaid">
-          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
-          flowchart LR
-    id1((This is the text in the circle))
-      </pre
-          >
-        </td>
-      </tr>
-      <!-- Separator row -->
-      <tr class="separator">
-        <td colspan="5"></td>
-        <!-- This cell spans all columns including the vertical header -->
-      </tr>
-
-      <tr>
-        <th class="vertical-header">
-          <button class="collapsible">Double Circle shape</button>
-          <div class="content">
-            <div class="pre-scrollable">
-              <pre>
-              flowchart TD
-    id1(((This is the text in the circle)))
-    </pre
-              >
-            </div>
-          </div>
-        </th>
-        <td>
-          <pre id="diagram17" class="mermaid">
-          flowchart TD
-    id1(((This is the text in the circle)))
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram18" class="mermaid">
-          %%{init: {"look": "handDrawn"} }%%
-          flowchart TD
-    id1(((This is the text in the circle)))
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram19" class="mermaid">
-          %%{init: {"handDrawn": false, "layout": "elk"} }%%
-          flowchart TD
-    id1(((This is the text in the circle)))
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram20" class="mermaid">
-          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
-          flowchart TD
-    id1(((This is the text in the circle)))
-      </pre
-          >
-        </td>
-      </tr>
-      <!-- Separator row -->
-      <tr class="separator">
-        <td colspan="5"></td>
-        <!-- This cell spans all columns including the vertical header -->
-      </tr>
-
-      <tr>
-        <th class="vertical-header">
-          <button class="collapsible">Asymmetric shape</button>
-          <div class="content">
-            <div class="pre-scrollable">
-              <pre>
-              flowchart LR
-    id1>This is the text in the box]
-    </pre
-              >
-            </div>
-          </div>
-        </th>
-        <td>
-          <pre id="diagram21" class="mermaid">
-          flowchart LR
-    id1>This is the text in the box]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram22" class="mermaid">
-          %%{init: {"look": "handDrawn"} }%%
-          flowchart LR
-    id1>This is the text in the box]  
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram23" class="mermaid">
-          %%{init: {"handDrawn": false, "layout": "elk"} }%%
-          flowchart LR
-    id1>This is the text in the box]  
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram24" class="mermaid">
-          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
-          flowchart LR
-    id1>This is the text in the box]
-      </pre
-          >
-        </td>
-      </tr>
-      <!-- Separator row -->
-      <tr class="separator">
-        <td colspan="5"></td>
-        <!-- This cell spans all columns including the vertical header -->
-      </tr>
-
-      <tr>
-        <th class="vertical-header">
-          <button class="collapsible">Rhombus/Diamond/Question shape</button>
-          <div class="content">
-            <div class="pre-scrollable">
-              <pre>
-              flowchart LR
-    id1{This is the text in the box}
-    </pre
-              >
-            </div>
-          </div>
-        </th>
-        <td>
-          <pre id="diagram25" class="mermaid">
-          flowchart LR
-    id1{This is the text in the box}
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram26" class="mermaid">
-          %%{init: {"look": "handDrawn"} }%%
-          flowchart LR
-    id1{This is the text in the box}
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram27" class="mermaid">
-          %%{init: {"handDrawn": false, "layout": "elk"} }%%
-          flowchart LR
-    id1{This is the text in the box}
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram28" class="mermaid">
-          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
-          flowchart LR
-    id1{This is the text in the box}
-      </pre
-          >
-        </td>
-      </tr>
-      <!-- Separator row -->
-      <tr class="separator">
-        <td colspan="5"></td>
-        <!-- This cell spans all columns including the vertical header -->
-      </tr>
-
-      <tr>
-        <th class="vertical-header">
-          <button class="collapsible">Hexagon shape</button>
-          <div class="content">
-            <div class="pre-scrollable">
-              <pre>
-              flowchart LR
-    id1{{This is the text in the box}}
-    </pre
-              >
-            </div>
-          </div>
-        </th>
-        <td>
-          <pre id="diagram29" class="mermaid">
-          flowchart LR
-    id1{{This is the text in the box}}
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram31" class="mermaid">
-          %%{init: {"handDrawn": false, "layout": "elk"} }%%
-          flowchart LR
-    id1{{This is the text in the box}}
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram32" class="mermaid">
-          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
-          flowchart LR
-    id1{{This is the text in the box}}
-      </pre
-          >
-        </td>
-      </tr>
-      <!-- Separator row -->
-      <tr class="separator">
-        <td colspan="5"></td>
-        <!-- This cell spans all columns including the vertical header -->
-      </tr>
-
-      <tr>
-        <th class="vertical-header">
-          <button class="collapsible">Parallelogram shape</button>
-          <div class="content">
-            <div class="pre-scrollable">
-              <pre>
-              flowchart TD
-    id1[/This is the text in the box/]
-    </pre
-              >
-            </div>
-          </div>
-        </th>
-        <td>
-          <pre id="diagram33" class="mermaid">
-          flowchart TD
-    id1[/This is the text in the box/]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram34" class="mermaid">
-          %%{init: {"look": "handDrawn"} }%%
-          flowchart TD
-    id1[/This is the text in the box/]  
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram35" class="mermaid">
-          %%{init: {"handDrawn": false, "layout": "elk"} }%%
-          flowchart TD
-    id1[/This is the text in the box/] 
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram36" class="mermaid">
-          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
-          flowchart TD
-    id1[/This is the text in the box/]
-      </pre
-          >
-        </td>
-      </tr>
-      <!-- Separator row -->
-      <tr class="separator">
-        <td colspan="5"></td>
-        <!-- This cell spans all columns including the vertical header -->
-      </tr>
-
-      <tr>
-        <th class="vertical-header">
-          <button class="collapsible">Parallelogram Alt shape</button>
-          <div class="content">
-            <div class="pre-scrollable">
-              <pre>
-              flowchart TD
-    id1[\This is the text in the box\]
-    </pre
-              >
-            </div>
-          </div>
-        </th>
-        <td>
-          <pre id="diagram37" class="mermaid">
-          flowchart TD
-    id1[\This is the text in the box\]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram38" class="mermaid">
-          %%{init: {"look": "handDrawn"} }%%
-          flowchart TD
-    id1[\This is the text in the box\]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram39" class="mermaid">
-          %%{init: {"handDrawn": false, "layout": "elk"} }%%
-          flowchart TD
-    id1[\This is the text in the box\]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram40" class="mermaid">
-          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
-          flowchart TD
-    id1[\This is the text in the box\]
-
-      </pre
-          >
-        </td>
-      </tr>
-      <!-- Separator row -->
-      <tr class="separator">
-        <td colspan="5"></td>
-        <!-- This cell spans all columns including the vertical header -->
-      </tr>
-
-      <tr>
-        <th class="vertical-header">
-          <button class="collapsible">Trapezoid shape</button>
-          <div class="content">
-            <div class="pre-scrollable">
-              <pre>
-              flowchart TD
-    A[/Christmas\]
-    </pre
-              >
-            </div>
-          </div>
-        </th>
-        <td>
-          <pre id="diagram41" class="mermaid">
-          flowchart TD
-    A[/Christmas\]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram42" class="mermaid">
-          %%{init: {"look": "handDrawn"} }%%
-          flowchart TD
-    A[/Christmas\]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram43" class="mermaid">
-          %%{init: {"handDrawn": false, "layout": "elk"} }%%
-          flowchart TD
-    A[/Christmas\]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram44" class="mermaid">
-          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
-          flowchart TD
-    A[/Christmas\]
-      </pre
-          >
-        </td>
-      </tr>
-      <!-- Separator row -->
-      <tr class="separator">
-        <td colspan="5"></td>
-        <!-- This cell spans all columns including the vertical header -->
-      </tr>
-
-      <tr>
-        <th class="vertical-header">
-          <button class="collapsible">Trapezoid Alt shape</button>
-          <div class="content">
-            <div class="pre-scrollable">
-              <pre>
-              flowchart TD
-    A[\Christmas/]
-    </pre
-              >
-            </div>
-          </div>
-        </th>
-        <td>
-          <pre id="diagram45" class="mermaid">
-          flowchart TD
-    A[\Christmas/]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram46" class="mermaid">
-          %%{init: {"look": "handDrawn"} }%%
-          flowchart TD
-    A[\Christmas/]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram47" class="mermaid">
-          %%{init: {"handDrawn": false, "layout": "elk"} }%%
-          flowchart TD
-    A[\Christmas/]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram48" class="mermaid">
-          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
-          flowchart TD
-    A[\Christmas/]  
-      </pre
-          >
-        </td>
-      </tr>
-      <!-- Separator row -->
-      <tr class="separator">
-        <td colspan="5"></td>
-        <!-- This cell spans all columns including the vertical header -->
-      </tr>
-
-      <tr>
-        <th class="vertical-header">
-          <button class="collapsible">Rect with rounded corner</button>
-          <div class="content">
-            <div class="pre-scrollable">
-              <pre>
-              flowchart LR
-    id1(This is the text in the box)
-    </pre
-              >
-            </div>
-          </div>
-        </th>
-        <td>
-          <pre id="diagram49" class="mermaid">
-          flowchart LR
-    id1(This is the text in the box)
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram50" class="mermaid">
-          %%{init: {"look": "handDrawn"} }%%
-          flowchart LR
-    id1(This is the text in the box)
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram51" class="mermaid">
-          %%{init: {"handDrawn": false, "layout": "elk"} }%%
-          flowchart LR
-    id1(This is the text in the box)
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram52" class="mermaid">
-          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
-          flowchart LR
-    id1(This is the text in the box) 
-      </pre
-          >
-        </td>
-      </tr>
-      <!-- Separator row -->
-      <tr class="separator">
-        <td colspan="5"></td>
-        <!-- This cell spans all columns including the vertical header -->
-      </tr>
-
-      <tr>
-        <th class="vertical-header">
-          <button class="collapsible">Rect with sharp corner</button>
-          <div class="content">
-            <div class="pre-scrollable">
-              <pre>
-              flowchart LR
-    id1[This is the text in the box]
-    </pre
-              >
-            </div>
-          </div>
-        </th>
-        <td>
-          <pre id="diagram53" class="mermaid">
-          flowchart LR
-    id1[This is the text in the box]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram54" class="mermaid">
-          %%{init: {"look": "handDrawn"} }%%
-          flowchart LR
-    id1[This is the text in the box]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram55" class="mermaid">
-          %%{init: {"handDrawn": false, "layout": "elk"} }%%
-          flowchart LR
-    id1[This is the text in the box]
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram56" class="mermaid">
-          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
-          flowchart LR
-    id1[This is the text in the box]
-      </pre
-          >
-        </td>
-      </tr>
-      <!-- Separator row -->
-      <tr class="separator">
-        <td colspan="5"></td>
-        <!-- This cell spans all columns including the vertical header -->
-      </tr>
-    </table>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {};
-
-      mermaid.initialize({
-        handDrawn: false,
-        mergeEdges: true,
-        layout: 'dagre',
-        flowchart: { titleTopMargin: 10 },
-        // fontFamily: 'Caveat',
-        fontFamily: 'Kalam',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        fontSize: 16,
-        logLevel: 0,
-      });
-      function callback() {
-        alert('It worked');
-      }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-
-      let coll = document.getElementsByClassName('collapsible');
-      for (const element of coll) {
-        element.addEventListener('click', function () {
-          this.classList.toggle('active');
-          let content = this.nextElementSibling;
-          if (content.style.maxHeight) {
-            content.style.maxHeight = null;
-          } else {
-            content.style.maxHeight = content.scrollHeight + 'px';
-          }
-        });
-      }
-    </script>
-  </body>
-</html>

cypress/platform/flowchart-sate.html

@@ -1,191 +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"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        font-family: 'Arial';
-      }
-
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        table-layout: fixed;
-      }
-
-      th,
-      td {
-        border: 1px solid black;
-        padding: 10px;
-        text-align: center;
-        vertical-align: middle;
-      }
-
-      .separator {
-        height: 20px;
-        background-color: #f0f0f0;
-      }
-
-      .vertical-header {
-        text-align: center;
-      }
-
-      .collapsible {
-        background-color: #f9f9f9;
-        color: #444;
-        cursor: pointer;
-        padding: 18px;
-        width: 100%;
-        border: none;
-        text-align: left;
-        outline: none;
-        font-size: 15px;
-      }
-
-      .active,
-      .collapsible:hover {
-        background-color: #ccc;
-      }
-
-      .collapsible:after {
-        content: '\002B';
-        color: #777;
-        font-weight: bold;
-        float: right;
-        margin-left: 2px;
-      }
-
-      .active:after {
-        content: '\2212';
-      }
-
-      .content {
-        padding: 0 5px;
-        max-height: 0;
-        overflow: hidden;
-        transition: max-height 0.2s ease-out;
-        background-color: #f1f1f1;
-      }
-
-      .content .pre-scrollable {
-        max-height: 200px;
-        overflow-y: scroll;
-      }
-    </style>
-  </head>
-
-  <body>
-    <table>
-      <tr>
-        <th></th>
-        <!-- Placeholder for the top left corner -->
-        <th>State rough</th>
-        <th>Flowchart rough</th>
-      </tr>
-      <tr>
-        <th class="vertical-header">
-          <button class="collapsible">Stadium shape</button>
-          <div class="content">
-            <div class="pre-scrollable">
-              <pre>
-      flowchart LR
-    id1([This is the text in the box])
-
-  </pre
-              >
-            </div>
-          </div>
-        </th>
-        <td>
-          <pre id="diagram1" class="mermaid">
-%%{init: {"look": "handDrawn"} }%%
-stateDiagram-v2
-    stateA
-
-      </pre
-          >
-        </td>
-        <td>
-          <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handDrawn"} }%%
-flowchart LR
-    id1[[This is the text in the box]]
-
-
-      </pre
-          >
-        </td>
-      </tr>
-    </table>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {};
-
-      mermaid.initialize({
-        handDrawn: false,
-        mergeEdges: true,
-        layout: 'dagre',
-        flowchart: { titleTopMargin: 10 },
-        // fontFamily: 'Caveat',
-        fontFamily: 'Kalam',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        fontSize: 16,
-        logLevel: 0,
-      });
-      function callback() {
-        alert('It worked');
-      }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-
-      let coll = document.getElementsByClassName('collapsible');
-      for (const element of coll) {
-        element.addEventListener('click', function () {
-          this.classList.toggle('active');
-          let content = this.nextElementSibling;
-          if (content.style.maxHeight) {
-            content.style.maxHeight = null;
-          } else {
-            content.style.maxHeight = content.scrollHeight + 'px';
-          }
-        });
-      }
-    </script>
-  </body>
-</html>

cypress/platform/knsv-4442.html

@@ -1,433 +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: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat;
-      }
-      .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;
-      }
-      /* tspan {
-        font-size: 6px !important;
-      } */
-    </style>
-  </head>
-  <body>
-    <pre id="diagram" class="mermaid">
-stateDiagram-v2
-    [*] --> Still
-    Still --> [*]
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]    </pre
-    >
-    <pre id="diagram" class="mermaid2">
-flowchart RL
-    subgraph "`one`"
-      a1 -- l1 --> a2
-      a1 -- l2 --> a2
-    end
-    </pre>
-    <pre id="diagram" class="mermaid">
-flowchart RL
-    subgraph "`one`"
-      a1 -- l1 --> a2
-      a1 -- l2 --> a2
-    end
-    </pre>
-    <pre id="diagram" class="mermaid2">
-flowchart
-id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]</pre
-    >
-    <pre id="diagram" class="mermaid2">
-flowchart LR
-    A[A text that needs to be wrapped wraps to another line]
-    B[A text that needs to be<br/>wrapped wraps to another line]
-    C["`A text that needs to be wrapped to another line`"]</pre>
-    <pre id="diagram" class="mermaid2">
-flowchart LR
-    C["`A text
-        that needs
-        to be wrapped
-        in another
-        way`"]
-  </pre
-    >
-    <pre id="diagram" class="mermaid">
-      classDiagram-v2
-        note "I love this diagram!\nDo you love it?"
-    </pre>
-    <pre id="diagram" class="mermaid">
-    stateDiagram-v2
-    State1: The state with a note with minus - and plus + in it
-    note left of State1
-      Important information! You can write
-      notes with . and  in them.
-    end note    </pre
-    >
-    <pre id="diagram" class="mermaid2">
-mindmap
-root
-  Child3(A node with an icon and with a long text that wraps to keep the node size in check)
-</pre
-    >
-    <pre id="diagram" class="mermaid2">
-      %%{init: {"theme": "forest"} }%%
-mindmap
-    id1[**Start2**<br/>end]
-      id2[**Start2**<br />end]
-      %% Another comment
-      id3[**Start2**<br>end] %% Comment
-      id4[**Start2**<br >end<br    >the very end]
-    </pre>
-    <pre id="diagram" class="mermaid2">
-mindmap
-    id1["`**Start2**
-    second line 😎 with long text that is wrapping to the next line`"]
-      id2["`Child **with bold** text`"]
-      id3["`Children of which some
-      is using *italic type of* text`"]
-      id4[Child]
-      id5["`Child
-      Row
-      and another
-      `"]
-    </pre>
-    <pre id="diagram" class="mermaid2">
-mindmap
-    id1("`**Root**`"]
-      id2["`A formatted text... with **bold** and *italics*`"]
-      id3[Regular labels works as usual]
-      id4["`Emojis and unicode works too: 🤓
-      शान्तिः سلام  和平 `"]
-
-    </pre>
-    <pre id="diagram" class="mermaid">
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-flowchart TB
-  %% I could not figure out how to use double quotes in labels in Mermaid
-  subgraph ibm[IBM Espresso CPU]
-    core0[IBM PowerPC Broadway Core 0]
-    core1[IBM PowerPC Broadway Core 1]
-    core2[IBM PowerPC Broadway Core 2]
-
-    rom[16 KB ROM]
-
-    core0 --- core2
-
-    rom --> core2
-  end
-
-  subgraph amd["`**AMD** Latte GPU`"]
-    mem[Memory & I/O Bridge]
-    dram[DRAM Controller]
-    edram[32 MB EDRAM MEM1]
-    rom[512 B SEEPROM]
-
-    sata[SATA IF]
-    exi[EXI]
-
-    subgraph gx[GX]
-      sram[3 MB 1T-SRAM]
-    end
-
-    radeon[AMD Radeon R7xx GX2]
-
-    mem --- gx
-    mem --- radeon
-
-    rom --- mem
-
-    mem --- sata
-    mem --- exi
-
-    dram --- sata
-    dram --- exi
-  end
-
-  ddr3[2 GB DDR3 RAM MEM2]
-
-  mem --- ddr3
-  dram --- ddr3
-  edram --- ddr3
-
-  core1 --- mem
-
-  exi --- rtc
-  rtc{{rtc}}
-</pre
-    >
-    <pre id="diagram" class="mermaid2">
-%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
-flowchart TB
-  %% I could not figure out how to use double quotes in labels in Mermaid
-  subgraph ibm[IBM Espresso CPU]
-    core0[IBM PowerPC Broadway Core 0]
-    core1[IBM PowerPC Broadway Core 1]
-    core2[IBM PowerPC Broadway Core 2]
-
-    rom[16 KB ROM]
-
-    core0 --- core2
-
-    rom --> core2
-  end
-
-  subgraph amd["`**AMD** Latte GPU`"]
-    mem[Memory & I/O Bridge]
-    dram[DRAM Controller]
-    edram[32 MB EDRAM MEM1]
-    rom[512 B SEEPROM]
-
-    sata[SATA IF]
-    exi[EXI]
-
-    subgraph gx[GX]
-      sram[3 MB 1T-SRAM]
-    end
-
-    radeon[AMD Radeon R7xx GX2]
-
-    mem --- gx
-    mem --- radeon
-
-    rom --- mem
-
-    mem --- sata
-    mem --- exi
-
-    dram --- sata
-    dram --- exi
-  end
-
-  ddr3[2 GB DDR3 RAM MEM2]
-
-  mem --- ddr3
-  dram --- ddr3
-  edram --- ddr3
-
-  core1 --- mem
-
-  exi --- rtc
-  rtc{{rtc}}
-</pre
-    >
-
-    <br />
-    <pre id="diagram" class="mermaid2">
-flowchart TB
-  %% I could not figure out how to use double quotes in labels in Mermaid
-  subgraph ibm[IBM Espresso CPU]
-    core0[IBM PowerPC Broadway Core 0]
-    core1[IBM PowerPC Broadway Core 1]
-    core2[IBM PowerPC Broadway Core 2]
-
-    rom[16 KB ROM]
-
-    core0 --- core2
-
-    rom --> core2
-  end
-
-  subgraph amd[AMD Latte GPU]
-    mem[Memory & I/O Bridge]
-    dram[DRAM Controller]
-    edram[32 MB EDRAM MEM1]
-    rom[512 B SEEPROM]
-
-    sata[SATA IF]
-    exi[EXI]
-
-    subgraph gx[GX]
-      sram[3 MB 1T-SRAM]
-    end
-
-    radeon[AMD Radeon R7xx GX2]
-
-    mem --- gx
-    mem --- radeon
-
-    rom --- mem
-
-    mem --- sata
-    mem --- exi
-
-    dram --- sata
-    dram --- exi
-  end
-
-  ddr3[2 GB DDR3 RAM MEM2]
-
-  mem --- ddr3
-  dram --- ddr3
-  edram --- ddr3
-
-  core1 --- mem
-
-  exi --- rtc
-  rtc{{rtc}}
-</pre
-    >
-    <br />
-    &nbsp;
-    <pre id="diagram" class="mermaid2">
-      flowchart LR
-  B1 --be be--x B2
-  B1 --bo bo--o B3
-  subgraph Ugge
-      B2
-      B3
-      subgraph inner
-          B4
-          B5
-      end
-      subgraph inner2
-        subgraph deeper
-          C4
-          C5
-        end
-        C6
-      end
-
-      B4 --> C4
-
-      B3 -- X --> B4
-      B2 --> inner
-
-      C4 --> C5
-  end
-
-  subgraph outer
-      B6
-  end
-  B6 --> B5
-  </pre
-    >
-    <pre id="diagram" class="mermaid2">
-sequenceDiagram
-    Customer->>+Stripe: Makes a payment request
-    Stripe->>+Bank: Forwards the payment request to the bank
-    Bank->>+Customer: Asks for authorization
-    Customer->>+Bank: Provides authorization
-    Bank->>+Stripe: Sends a response with payment details
-    Stripe->>+Merchant: Sends a notification of payment receipt
-    Merchant->>+Stripe: Confirms the payment
-    Stripe->>+Customer: Sends a confirmation of payment
-    Customer->>+Merchant: Receives goods or services
-        </pre
-    >
-    <pre id="diagram" class="mermaid2">
-mindmap
-  root((mindmap))
-    Origins
-      Long history
-      ::icon(fa fa-book)
-      Popularisation
-        British popular psychology author Tony Buzan
-    Research
-      On effectiveness<br/>and features
-      On Automatic creation
-        Uses
-            Creative techniques
-            Strategic planning
-            Argument mapping
-    Tools
-      Pen and paper
-      Mermaid
-    </pre>
-    <br />
-    <pre id="diagram" class="mermaid2">
-  example-diagram
-    </pre>
-
-    <!-- <div id="cy"></div> -->
-    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
-    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
-    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
-    <!-- <script src="./mermaid.js"></script> -->
-
-    <scrpt>
-      // import mindmap from '../../packages/mermaid-mindmap/src/detector'; // import example from
-      '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs'; import mermaid
-      from './mermaid.esm.mjs'; // await mermaid.registerExternalDiagrams([example]);
-      mermaid.parseError = function (err, hash) { // console.error('Mermaid error: ', err); };
-      mermaid.initialize({ // theme: 'forest', startOnLoad: true, logLevel: 0, flowchart: { //
-      defaultRenderer: 'elk', useMaxWidth: false, // htmlLabels: false, htmlLabels: true, }, //
-      htmlLabels: false, gantt: { useMaxWidth: false, }, useMaxWidth: false, }); 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));
-    </scrpt>
-    <script
-      type="text/javascript"
-      src="https://cdn.jsdelivr.net/npm/mermaid@10.2.0/dist/mermaid.min.js"
-    ></script>
-    <script type="module">
-      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10.2.0/dist/mermaid.min.js';
-      (function () {
-        mermaid.initialize({ startOnLoad: false });
-        const elements = document.getElementsByClassName('mermaid');
-        console.log(elements);
-        let id = 0;
-        [...elements].forEach((elem) => {
-          const insertSvg = function (svgCode) {
-            elem.innerHTML = svgCode;
-          };
-
-          console.log(atob(elem.innerText));
-
-          mermaid.render(`graphDiv-${id++}`, atob(elem.innerText), insertSvg);
-        });
-      })();
-    </script>
-  </body>
-</html>

cypress/platform/knsv2.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
@@ -14,50 +14,34 @@
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        /* background: #333; */
+        background: #333;
         font-family: 'Arial';
         /* font-size: 18px !important; */
       }
-
       h1 {
         color: grey;
       }
-
+      .mermaid {
+        border: 1px solid #ddd;
+        margin: 10px;
+      }
       .mermaid2 {
         display: none;
       }
-
       .mermaid svg {
         /* font-size: 18px !important; */
-
+        /* background-color: #efefef; */
-        /* background-color: #efefef;
+        background-color: #333;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
+        background-image: radial-gradient(#333 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
+          radial-gradient(#333 51%, transparent 91%);
         background-size: 20px 20px;
-        background-position:
+        background-position: 0 0, 10px 10px;
-          0 0,
+        background-repeat: repeat;
-          10px 10px;
+        border: 2px solid rgb(131, 142, 205);
-        background-repeat: repeat; */
       }
-
       .malware {
         position: fixed;
         bottom: 0;
@@ -73,130 +57,546 @@
         font-family: monospace;
         font-size: 72px;
       }
-
       /* tspan {
         font-size: 6px !important;
       } */
     </style>
   </head>
-
   <body>
-    <div class="flex">
     <pre id="diagram" class="mermaid">
----
+      block-beta
-  title: hello2
+  blockArrowId<["Label"]>(right)
-  config:
+  blockArrowId2<["Label"]>(left)
-    look: handDrawn
+  blockArrowId3<["Label"]>(up)
-    layout: elk
+  blockArrowId4<["Label"]>(down)
-    elk:
+  blockArrowId5<["Label"]>(x)
-        nodePlacementStrategy: BRANDES_KOEPF
+  blockArrowId6<["Label"]>(y)
----
+  blockArrowId6<["Label"]>(x, down)
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+  block:e:4
+    columns 2
+      f
+      g
+  end
+
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+  block:e:4
+    columns 2
+      f
+      g
+      h
+  end
+
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+  columns 4
+  a b c d
+  block:e:4
+    columns 2
+      f
+      g
+      h
+  end
+  i:4
+
+    </pre>
+    <pre id="diagram" class="mermaid2">
 flowchart LR
-  A[Start] --Some text--> B(Continue)
+  X-- "y" -->z
-  B --> C{Evaluate}
+    </pre>
-  C -- One --> D[Option 1]
+    <pre id="diagram" class="mermaid2">
-  C -- Two --> E[Option 2]
+block-beta
-  C -- Three --> F[fa:fa-car Option 3]
+columns 5
+   A space B
+   A --x B
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+columns 3
+  a["A wide one"] b:2 c:2 d
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+  block:e
+      f
+  end
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+  columns 3
+  a:3
+  block:e:3
+      f
+  end
+  g
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+  columns 3
+  a:3
+  block:e:3
+      f
+      g
+  end
+  h
+  i
+  j
 
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+columns 3
+  a b:2
+  block:e:3
+      f
+  end
+  g h i
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+columns 3
+  a b c
+  e:3
+  f g h
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+columns 1
+  db(("DB"))
+  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
+  block:ID
+    A
+    B["A wide one in the middle"]
+    C
+  end
+  space
+  D
+  ID --> D
+  C --> D
+  style B fill:#f9F,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram" class="mermaid">
+block-beta
+  columns 5
+  A1:3
+  A2:1
+  A3
+  B1 B2 B3:3
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+  block
+    D
+    E
+  end
+  db("This is the text in the box")
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
 
+      block
+        D
+      end
+      A["A: I am a wide one"]
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+    A["square"]
+    B("rounded")
+    C(("circle"))
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+    A>"rect_left_inv_arrow"]
+    B{"diamond"}
+    C{{"hexagon"}}
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+    A(["stadium"])
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+    %% A[["subroutine"]]
+    %% B[("cylinder")]
+    C>"surprise"]
+    </pre>
+    <pre id="diagram" class="mermaid2">
+block-beta
+    A[/"lean right"/]
+    B[\"lean left"\]
+    C[/"trapezoid"\]
+    D[\"trapezoid"/]
+    </pre>
 
+    <pre id="diagram" class="mermaid2">
+flowchart
+      B
+      style B fill:#f9F,stroke:#333,stroke-width:4px
+    </pre>
+
+    <pre id="diagram" class="mermaid2">
+      flowchart LR
+      a1 -- apa --> b1
+    </pre>
+
+    <pre id="diagram" class="mermaid2">
+flowchart RL
+  subgraph "`one`"
+    id
+  end
+    </pre>
+    <pre id="diagram" class="mermaid2">
+flowchart RL
+    subgraph "`one`"
+      a1 -- l1 --> a2
+      a1 -- l2 --> a2
+    end
+    </pre>
+    <pre id="diagram" class="mermaid2">
+flowchart
+id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]</pre
+    >
+    <pre id="diagram" class="mermaid2">
+flowchart LR
+    A[A text that needs to be wrapped wraps to another line]
+    B[A text that needs to be<br/>wrapped wraps to another line]
+    C["`A text that needs to be wrapped to another line`"]</pre>
+    <pre id="diagram" class="mermaid2">
+flowchart LR
+    C["`A text
+        that needs
+        to be wrapped
+        in another
+        way`"]
   </pre
     >
     <pre id="diagram" class="mermaid2">
----
+      classDiagram-v2
-config:
+        note "I love this diagram!\nDo you love it?"
-  look: handdrawn
+    </pre>
-  flowchart:
-    htmlLabels: true
----
-flowchart
-      A[I am a long text, where do I go??? handdrawn - true]
-</pre
-      >
-    </div>
-    <div class="flex">
     <pre id="diagram" class="mermaid2">
----
+    stateDiagram-v2
-config:
+    State1: The state with a note with minus - and plus + in it
-  flowchart:
+    note left of State1
-    htmlLabels: false
+      Important information! You can write
----
+      notes with . and  in them.
-flowchart
+    end note    </pre
-      A[I am a long text, where do I go??? classic - false]
+    >
+    <pre id="diagram" class="mermaid2">
+mindmap
+root
+  Child3(A node with an icon and with a long text that wraps to keep the node size in check)
 </pre
     >
     <pre id="diagram" class="mermaid2">
----
+      %%{init: {"theme": "forest"} }%%
-config:
+mindmap
-  flowchart:
+    id1[**Start2**<br/>end]
-    htmlLabels: true
+      id2[**Start2**<br />end]
----
+      %% Another comment
-flowchart
+      id3[**Start2**<br>end] %% Comment
-      A[I am a long text, where do I go??? classic - true]
+      id4[**Start2**<br >end<br    >the very end]
+    </pre>
+    <pre id="diagram" class="mermaid2">
+mindmap
+    id1["`**Start2**
+    second line 😎 with long text that is wrapping to the next line`"]
+      id2["`Child **with bold** text`"]
+      id3["`Children of which some
+      is using *italic type of* text`"]
+      id4[Child]
+      id5["`Child
+      Row
+      and another
+      `"]
+    </pre>
+    <pre id="diagram" class="mermaid2">
+mindmap
+    id1("`**Root**`"]
+      id2["`A formatted text... with **bold** and *italics*`"]
+      id3[Regular labels works as usual]
+      id4["`Emojis and unicode works too: 🤓
+      शान्तिः سلام  和平 `"]
+
+    </pre>
+    <pre id="diagram" class="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]
+    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
     >
-    </div>
+    <pre id="diagram" class="mermaid2">
-    <pre id="diagram2" class="mermaid2">
+%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd["`**AMD** Latte GPU`"]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+
+    <br />
+    <pre id="diagram" class="mermaid2">
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd[AMD Latte GPU]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+    <br />
+    &nbsp;
+    <pre id="diagram" class="mermaid2">
       flowchart LR
-    id1(Start)-->id2(Stop)
+  B1 --be be--x B2
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+  B1 --bo bo--o B3
-    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+  subgraph Ugge
+      B2
+      B3
+      subgraph inner
+          B4
+          B5
+      end
+      subgraph inner2
+        subgraph deeper
+          C4
+          C5
+        end
+        C6
+      end
 
+      B4 --> C4
 
+      B3 -- X --> B4
+      B2 --> inner
+
+      C4 --> C5
+  end
+
+  subgraph outer
+      B6
+  end
+  B6 --> B5
+  </pre
+    >
+    <pre id="diagram" class="mermaid2">
+sequenceDiagram
+    Customer->>+Stripe: Makes a payment request
+    Stripe->>+Bank: Forwards the payment request to the bank
+    Bank->>+Customer: Asks for authorization
+    Customer->>+Bank: Provides authorization
+    Bank->>+Stripe: Sends a response with payment details
+    Stripe->>+Merchant: Sends a notification of payment receipt
+    Merchant->>+Stripe: Confirms the payment
+    Stripe->>+Customer: Sends a confirmation of payment
+    Customer->>+Merchant: Receives goods or services
+        </pre
+    >
+    <pre id="diagram" class="mermaid2">
+mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectiveness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid
+    </pre>
+    <br />
+    <pre id="diagram" class="mermaid2">
+  example-diagram
     </pre>
 
-    <pre id="diagram3" class="mermaid2">
+    <!-- <div id="cy"></div> -->
-      flowchart LR
+    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
-    A:::foo & B:::bar --> C:::foobar
+    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
-    classDef foo stroke:#f00
+    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
-    classDef bar stroke:#0f0
+    <!-- <script src="./mermaid.js"></script> -->
-    classDef ash color:red
-    class C ash
-    style C stroke:#00f, fill:black
-
-    </pre>
-
-    <pre id="diagram4" class="mermaid2">
-      stateDiagram
-    A:::foo
-    B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    style C stroke:#00f, fill:black, color:white
-
-    </pre>
 
     <script type="module">
+      // import mindmap from '../../packages/mermaid-mindmap/src/detector';
+      // import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
       import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
+      // await mermaid.registerExternalDiagrams([example]);
-      mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
+        // console.error('Mermaid error: ', err);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
       };
+      // mermaid.initialize({
+      //   // theme: 'forest',
+      //   startOnLoad: true,
+      //   logLevel: 0,
+      //   flowchart: {
+      //     // defaultRenderer: 'elk',
+      //     useMaxWidth: false,
+      //     // htmlLabels: false,
+      //     htmlLabels: true,
+      //   },
+      //   // htmlLabels: false,
+      //   gantt: {
+      //     useMaxWidth: false,
+      //   },
+      //   useMaxWidth: false,
+      // });
       mermaid.initialize({
-        // theme: 'base',
+        theme: 'dark',
-        // handDrawnSeed: 12,
+        startOnLoad: true,
-        // look: 'handDrawn',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        flowchart: { titleTopMargin: 10 },
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        fontSize: 12,
         logLevel: 0,
-        securityLevel: 'loose',
       });
       function callback() {
         alert('It worked');
@@ -205,6 +605,10 @@ flowchart LR
         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>

cypress/platform/knsv3.html

@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

cypress/platform/viewer.js

@@ -1,7 +1,7 @@
-import externalExample from './mermaid-example-diagram.esm.mjs';
-import layouts from './mermaid-layout-elk.esm.mjs';
-import zenUml from './mermaid-zenuml.esm.mjs';
 import mermaid from './mermaid.esm.mjs';
+import flowchartELK from './mermaid-flowchart-elk.esm.mjs';
+import externalExample from './mermaid-example-diagram.esm.mjs';
+import zenUml from './mermaid-zenuml.esm.mjs';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));
@@ -46,9 +46,7 @@ const contentLoaded = async function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    await mermaid.registerExternalDiagrams([externalExample, zenUml]);
+    await mermaid.registerExternalDiagrams([externalExample, zenUml, flowchartELK]);
-
-    mermaid.registerLayoutLoaders(layouts);
     mermaid.initialize(graphObj.mermaid);
     await mermaid.run();
   }
@@ -134,7 +132,7 @@ if (typeof document !== 'undefined') {
   window.addEventListener(
     'load',
     function () {
-      if (/xss.html/.exec(this.location.href)) {
+      if (this.location.href.match('xss.html')) {
         this.console.log('Using api');
         void contentLoadedApi().finally(markRendered);
       } else {

cypress/platform/xss25.html

@@ -1,108 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background:#333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-      h1 {
-        color: grey;
-      }
-      .mermaid2 {
-        display: none;
-      }
-      .mermaid svg {
-        /* font-size: 18px !important; */
-      }
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-    </style>
-    <script>
-      function xssAttack() {
-        const div = document.createElement('div');
-        div.id = 'the-malware';
-        div.className = 'malware';
-        div.innerHTML = 'XSS Succeeded';
-        document.getElementsByTagName('body')[0].appendChild(div);
-        throw new Error('XSS Succeeded');
-      }
-    </script>
-  </head>
-  <body>
-    <div>Security check</div>
-    <div class="flex">
-      <div id="diagram" class="mermaid"></div>
-      <div id="res" class=""></div>
-    </div>
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      mermaid.parseError = function (err, hash) {
-        // console.error('Mermaid error: ', err);
-      };
-      mermaid.initialize({
-        theme: 'forest',
-        arrowMarkerAbsolute: true,
-        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
-        logLevel: 0,
-        state: {
-          defaultRenderer: 'dagre-wrapper',
-        },
-        flowchart: {
-          // defaultRenderer: 'dagre-wrapper',
-          nodeSpacing: 10,
-          curve: 'cardinal',
-          htmlLabels: true,
-        },
-        htmlLabels: false,
-        // gantt: { axisFormat: '%m/%d/%Y' },
-        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
-        // fontFamily: '"times", sans-serif',
-        // fontFamily: 'courier',
-        fontSize: 18,
-        curve: 'basis',
-        securityLevel: 'strict',
-        startOnLoad: false,
-        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
-        // themeVariables: {relationLabelColor: 'red'}
-      });
-      function callback() {
-        alert('It worked');
-      }
-
-      let diagram = 'block-beta\n';
-      diagram += '`A-- "X<img src=x on';
-      diagram += 'error=xssAttack()>" -->B';
-
-      console.log(diagram);
-      // document.querySelector('#diagram').innerHTML = diagram;
-      const { svg } = await mermaid.render('diagram', diagram);
-      document.querySelector('#res').innerHTML = svg;
-    </script>
-  </body>
-</html>

cypress/support/e2e.js

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

cypress/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es2020",
     "lib": ["es2020", "dom"],
-    "types": ["cypress", "node", "@argos-ci/cypress/dist/support.d.ts"],
+    "types": ["cypress", "node"],
     "allowImportingTsExtensions": true,
     "noEmit": true
   },

demos/sequence.html

@@ -238,17 +238,6 @@
       Alice-xJohn: Hello John, how are you?
       John--xAlice: Great!
     </pre>
-
-    <hr />
-
-    <pre class="mermaid">
-    sequenceDiagram
-      participant Alice
-      participant Bob
-      Alice<<->>Bob: Hello!
-      Alice<<->>Bob: Wow, we said that at the same time!
-      Bob<<-->>Alice: Bidirectional Arrows are so cool
-    </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({

docker-compose.yml

@@ -1,3 +1,4 @@
+version: '3.9'
 services:
   mermaid:
     build:
@@ -7,7 +8,7 @@ services:
     tty: true
     working_dir: /mermaid
     mem_limit: '8G'
-    entrypoint: ./docker-entrypoint.sh
+    entrypoint: docker-entrypoint.sh
     environment:
       - NODE_OPTIONS=--max_old_space_size=8192
     volumes:
@@ -15,7 +16,6 @@ services:
       - root_cache:/root/.cache
       - root_local:/root/.local
       - root_npm:/root/.npm
-      - /tmp:/tmp
     ports:
       - 9000:9000
       - 3333:3333

docs/community/contributing.md

@@ -56,7 +56,7 @@ The following commands must be sufficient enough to start with:
 
 ```bash
 curl -fsSL https://get.pnpm.io/install.sh | sh -
-pnpm env use --global 20
+pnpm env use --global 18
 ```
 
 You may also need to reload `.shrc` or `.bashrc` afterwards.

docs/config/setup/README.md

@@ -10,4 +10,4 @@
 
 - [config](modules/config.md)
 - [defaultConfig](modules/defaultConfig.md)
-- [mermaid](modules/mermaid.md)
+- [mermaidAPI](modules/mermaidAPI.md)

docs/config/setup/classes/mermaid.UnknownDiagramError.md

@@ -1,171 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/classes/mermaid.UnknownDiagramError.md](../../../../packages/mermaid/src/docs/config/setup/classes/mermaid.UnknownDiagramError.md).
-
-# Class: UnknownDiagramError
-
-[mermaid](../modules/mermaid.md).UnknownDiagramError
-
-## Hierarchy
-
-- `Error`
-
-  ↳ **`UnknownDiagramError`**
-
-## Constructors
-
-### constructor
-
-• **new UnknownDiagramError**(`message`): [`UnknownDiagramError`](mermaid.UnknownDiagramError.md)
-
-#### Parameters
-
-| Name      | Type     |
-| :-------- | :------- |
-| `message` | `string` |
-
-#### Returns
-
-[`UnknownDiagramError`](mermaid.UnknownDiagramError.md)
-
-#### Overrides
-
-Error.constructor
-
-#### Defined in
-
-[packages/mermaid/src/errors.ts:2](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L2)
-
-## Properties
-
-### cause
-
-• `Optional` **cause**: `unknown`
-
-#### Inherited from
-
-Error.cause
-
-#### Defined in
-
-node_modules/.pnpm/typescript\@5.4.5/node_modules/typescript/lib/lib.es2022.error.d.ts:24
-
----
-
-### message
-
-• **message**: `string`
-
-#### Inherited from
-
-Error.message
-
-#### Defined in
-
-node_modules/.pnpm/typescript\@5.4.5/node_modules/typescript/lib/lib.es5.d.ts:1077
-
----
-
-### name
-
-• **name**: `string`
-
-#### Inherited from
-
-Error.name
-
-#### Defined in
-
-node_modules/.pnpm/typescript\@5.4.5/node_modules/typescript/lib/lib.es5.d.ts:1076
-
----
-
-### stack
-
-• `Optional` **stack**: `string`
-
-#### Inherited from
-
-Error.stack
-
-#### Defined in
-
-node_modules/.pnpm/typescript\@5.4.5/node_modules/typescript/lib/lib.es5.d.ts:1078
-
----
-
-### prepareStackTrace
-
-▪ `Static` `Optional` **prepareStackTrace**: (`err`: `Error`, `stackTraces`: `CallSite`\[]) => `any`
-
-Optional override for formatting stack traces
-
-**`See`**
-
-<https://v8.dev/docs/stack-trace-api#customizing-stack-traces>
-
-#### Type declaration
-
-▸ (`err`, `stackTraces`): `any`
-
-##### Parameters
-
-| Name          | Type          |
-| :------------ | :------------ |
-| `err`         | `Error`       |
-| `stackTraces` | `CallSite`\[] |
-
-##### Returns
-
-`any`
-
-#### Inherited from
-
-Error.prepareStackTrace
-
-#### Defined in
-
-node_modules/@types/node/globals.d.ts:28
-
----
-
-### stackTraceLimit
-
-▪ `Static` **stackTraceLimit**: `number`
-
-#### Inherited from
-
-Error.stackTraceLimit
-
-#### Defined in
-
-node_modules/@types/node/globals.d.ts:30
-
-## Methods
-
-### captureStackTrace
-
-▸ **captureStackTrace**(`targetObject`, `constructorOpt?`): `void`
-
-Create .stack property on a target object
-
-#### Parameters
-
-| Name              | Type       |
-| :---------------- | :--------- |
-| `targetObject`    | `object`   |
-| `constructorOpt?` | `Function` |
-
-#### Returns
-
-`void`
-
-#### Inherited from
-
-Error.captureStackTrace
-
-#### Defined in
-
-node_modules/@types/node/globals.d.ts:21

docs/config/setup/interfaces/mermaid.DetailedError.md

@@ -1,49 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.DetailedError.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.DetailedError.md).
-
-# Interface: DetailedError
-
-[mermaid](../modules/mermaid.md).DetailedError
-
-## Properties
-
-### error
-
-• `Optional` **error**: `any`
-
-#### Defined in
-
-[packages/mermaid/src/utils.ts:785](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L785)
-
----
-
-### hash
-
-• **hash**: `any`
-
-#### Defined in
-
-[packages/mermaid/src/utils.ts:783](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L783)
-
----
-
-### message
-
-• `Optional` **message**: `string`
-
-#### Defined in
-
-[packages/mermaid/src/utils.ts:786](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L786)
-
----
-
-### str
-
-• **str**: `string`
-
-#### Defined in
-
-[packages/mermaid/src/utils.ts:781](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/utils.ts#L781)

docs/config/setup/interfaces/mermaid.ExternalDiagramDefinition.md

@@ -1,39 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.ExternalDiagramDefinition.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.ExternalDiagramDefinition.md).
-
-# Interface: ExternalDiagramDefinition
-
-[mermaid](../modules/mermaid.md).ExternalDiagramDefinition
-
-## Properties
-
-### detector
-
-• **detector**: `DiagramDetector`
-
-#### Defined in
-
-[packages/mermaid/src/diagram-api/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L101)
-
----
-
-### id
-
-• **id**: `string`
-
-#### Defined in
-
-[packages/mermaid/src/diagram-api/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L100)
-
----
-
-### loader
-
-• **loader**: `DiagramLoader`
-
-#### Defined in
-
-[packages/mermaid/src/diagram-api/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L102)

docs/config/setup/interfaces/mermaid.LayoutData.md

@@ -1,43 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.LayoutData.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.LayoutData.md).
-
-# Interface: LayoutData
-
-[mermaid](../modules/mermaid.md).LayoutData
-
-## Indexable
-
-▪ \[key: `string`]: `any`
-
-## Properties
-
-### config
-
-• **config**: `MermaidConfig`
-
-#### Defined in
-
-[packages/mermaid/src/rendering-util/types.d.ts:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.d.ts#L118)
-
----
-
-### edges
-
-• **edges**: `Edge`\[]
-
-#### Defined in
-
-[packages/mermaid/src/rendering-util/types.d.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.d.ts#L117)
-
----
-
-### nodes
-
-• **nodes**: `Node`\[]
-
-#### Defined in
-
-[packages/mermaid/src/rendering-util/types.d.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.d.ts#L116)

docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md

@@ -1,39 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.LayoutLoaderDefinition.md).
-
-# Interface: LayoutLoaderDefinition
-
-[mermaid](../modules/mermaid.md).LayoutLoaderDefinition
-
-## Properties
-
-### algorithm
-
-• `Optional` **algorithm**: `string`
-
-#### Defined in
-
-[packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
-
----
-
-### loader
-
-• **loader**: `LayoutLoader`
-
-#### Defined in
-
-[packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)
-
----
-
-### name
-
-• **name**: `string`
-
-#### Defined in
-
-[packages/mermaid/src/rendering-util/render.ts:22](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L22)

docs/config/setup/interfaces/mermaid.Mermaid.md

@@ -1,364 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.Mermaid.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.Mermaid.md).
-
-# Interface: Mermaid
-
-[mermaid](../modules/mermaid.md).Mermaid
-
-## Properties
-
-### contentLoaded
-
-• **contentLoaded**: () => `void`
-
-#### Type declaration
-
-▸ (): `void`
-
-\##contentLoaded Callback function that is called when page is loaded. This functions fetches
-configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
-page.
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
-
----
-
-### detectType
-
-• **detectType**: (`text`: `string`, `config?`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string`
-
-#### Type declaration
-
-▸ (`text`, `config?`): `string`
-
-Detects the type of the graph text.
-
-Takes into consideration the possible existence of an `%%init` directive
-
-##### Parameters
-
-| Name      | Type                                        | Description                                                                                                                                                         |
-| :-------- | :------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `text`    | `string`                                    | The text defining the graph. For example: `mermaid %%{initialize: {"startOnLoad": true, logLevel: "fatal" }}%% graph LR a-->b b-->c c-->d d-->e e-->f f-->g g-->h ` |
-| `config?` | [`MermaidConfig`](mermaid.MermaidConfig.md) | The mermaid config.                                                                                                                                                 |
-
-##### Returns
-
-`string`
-
-A graph definition key
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
-
----
-
-### init
-
-• **init**: (`config?`: [`MermaidConfig`](mermaid.MermaidConfig.md), `nodes?`: `string` | `HTMLElement` | `NodeListOf`<`HTMLElement`>, `callback?`: (`id`: `string`) => `unknown`) => `Promise`<`void`>
-
-**`Deprecated`**
-
-Use [initialize](mermaid.Mermaid.md#initialize) and [run](mermaid.Mermaid.md#run) instead.
-
-#### Type declaration
-
-▸ (`config?`, `nodes?`, `callback?`): `Promise`<`void`>
-
-##### Parameters
-
-| Name        | Type                                                     |
-| :---------- | :------------------------------------------------------- |
-| `config?`   | [`MermaidConfig`](mermaid.MermaidConfig.md)              |
-| `nodes?`    | `string` \| `HTMLElement` \| `NodeListOf`<`HTMLElement`> |
-| `callback?` | (`id`: `string`) => `unknown`                            |
-
-##### Returns
-
-`Promise`<`void`>
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)
-
----
-
-### initialize
-
-• **initialize**: (`config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void`
-
-#### Type declaration
-
-▸ (`config`): `void`
-
-Used to set configurations for mermaid.
-This function should be called before the run function.
-
-##### Parameters
-
-| Name     | Type                                        | Description                       |
-| :------- | :------------------------------------------ | :-------------------------------- |
-| `config` | [`MermaidConfig`](mermaid.MermaidConfig.md) | Configuration object for mermaid. |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
-
----
-
-### mermaidAPI
-
-• **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.defaultConfig; `getConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`userOptions`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.setConfig; `updateSiteConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.updateSiteConfig }>
-
-**`Deprecated`**
-
-Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:424](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L424)
-
----
-
-### parse
-
-• **parse**: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)>
-
-#### Type declaration
-
-▸ (`text`, `parseOptions`): `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>
-
-Parse the text and validate the syntax.
-
-##### Parameters
-
-| Name           | Type                                                                     | Description                     |
-| :------------- | :----------------------------------------------------------------------- | :------------------------------ |
-| `text`         | `string`                                                                 | The mermaid diagram definition. |
-| `parseOptions` | [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` } | Options for parsing.            |
-
-##### Returns
-
-`Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>
-
-An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
-
-**`See`**
-
-[ParseOptions](mermaid.ParseOptions.md)
-
-**`Throws`**
-
-Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
-
-▸ (`text`, `parseOptions?`): `Promise`<[`ParseResult`](mermaid.ParseResult.md)>
-
-##### Parameters
-
-| Name            | Type                                      |
-| :-------------- | :---------------------------------------- |
-| `text`          | `string`                                  |
-| `parseOptions?` | [`ParseOptions`](mermaid.ParseOptions.md) |
-
-##### Returns
-
-`Promise`<[`ParseResult`](mermaid.ParseResult.md)>
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
-
----
-
-### parseError
-
-• `Optional` **parseError**: [`ParseErrorFunction`](../modules/mermaid.md#parseerrorfunction)
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)
-
----
-
-### registerExternalDiagrams
-
-• **registerExternalDiagrams**: (`diagrams`: [`ExternalDiagramDefinition`](mermaid.ExternalDiagramDefinition.md)\[], `opts`: { `lazyLoad?`: `boolean` = true }) => `Promise`<`void`>
-
-#### Type declaration
-
-▸ (`diagrams`, `opts?`): `Promise`<`void`>
-
-Used to register external diagram types.
-
-##### Parameters
-
-| Name             | Type                                                                   | Default value | Description                                                                 |
-| :--------------- | :--------------------------------------------------------------------- | :------------ | :-------------------------------------------------------------------------- |
-| `diagrams`       | [`ExternalDiagramDefinition`](mermaid.ExternalDiagramDefinition.md)\[] | `undefined`   | Array of [ExternalDiagramDefinition](mermaid.ExternalDiagramDefinition.md). |
-| `opts`           | `Object`                                                               | `{}`          | If opts.lazyLoad is false, the diagrams will be loaded immediately.         |
-| `opts.lazyLoad?` | `boolean`                                                              | `true`        | -                                                                           |
-
-##### Returns
-
-`Promise`<`void`>
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
-
----
-
-### registerLayoutLoaders
-
-• **registerLayoutLoaders**: (`loaders`: [`LayoutLoaderDefinition`](mermaid.LayoutLoaderDefinition.md)\[]) => `void`
-
-#### Type declaration
-
-▸ (`loaders`): `void`
-
-##### Parameters
-
-| Name      | Type                                                             |
-| :-------- | :--------------------------------------------------------------- |
-| `loaders` | [`LayoutLoaderDefinition`](mermaid.LayoutLoaderDefinition.md)\[] |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
-
----
-
-### render
-
-• **render**: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)>
-
-#### Type declaration
-
-▸ (`id`, `text`, `svgContainingElement?`): `Promise`<[`RenderResult`](mermaid.RenderResult.md)>
-
-##### Parameters
-
-| Name                    | Type      |
-| :---------------------- | :-------- |
-| `id`                    | `string`  |
-| `text`                  | `string`  |
-| `svgContainingElement?` | `Element` |
-
-##### Returns
-
-`Promise`<[`RenderResult`](mermaid.RenderResult.md)>
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
-
----
-
-### run
-
-• **run**: (`options`: [`RunOptions`](mermaid.RunOptions.md)) => `Promise`<`void`>
-
-#### Type declaration
-
-▸ (`options?`): `Promise`<`void`>
-
-## run
-
-Function that goes through the document to find the chart definitions in there and render them.
-
-The function tags the processed attributes with the attribute data-processed and ignores found
-elements with the attribute already set. This way the init function can be triggered several
-times.
-
-```mermaid-example
-graph LR;
- a(Find elements)-->b{Processed}
- b-->|Yes|c(Leave element)
- b-->|No |d(Transform)
-```
-
-```mermaid
-graph LR;
- a(Find elements)-->b{Processed}
- b-->|Yes|c(Leave element)
- b-->|No |d(Transform)
-```
-
-Renders the mermaid diagrams
-
-##### Parameters
-
-| Name      | Type                                  | Description              |
-| :-------- | :------------------------------------ | :----------------------- |
-| `options` | [`RunOptions`](mermaid.RunOptions.md) | Optional runtime configs |
-
-##### Returns
-
-`Promise`<`void`>
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
-
----
-
-### setParseErrorHandler
-
-• **setParseErrorHandler**: (`parseErrorHandler`: (`err`: `any`, `hash`: `any`) => `void`) => `void`
-
-#### Type declaration
-
-▸ (`parseErrorHandler`): `void`
-
-## setParseErrorHandler Alternative to directly setting parseError using:
-
-```js
-mermaid.parseError = function (err, hash) {
-  forExampleDisplayErrorInGui(err); // do something with the error
-};
-```
-
-This is provided for environments where the mermaid object can't directly have a new member added
-to it (eg. dart interop wrapper). (Initially there is no parseError member of mermaid).
-
-##### Parameters
-
-| Name                | Type                                    | Description                |
-| :------------------ | :-------------------------------------- | :------------------------- |
-| `parseErrorHandler` | (`err`: `any`, `hash`: `any`) => `void` | New parseError() callback. |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
-
----
-
-### startOnLoad
-
-• **startOnLoad**: `boolean`
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418)

docs/config/setup/interfaces/mermaid.MermaidConfig.md

@@ -1,520 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.MermaidConfig.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.MermaidConfig.md).
-
-# Interface: MermaidConfig
-
-[mermaid](../modules/mermaid.md).MermaidConfig
-
-## Properties
-
-### altFontFamily
-
-• `Optional` **altFontFamily**: `string`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:112](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L112)
-
----
-
-### arrowMarkerAbsolute
-
-• `Optional` **arrowMarkerAbsolute**: `boolean`
-
-Controls whether or arrow markers in html code are absolute paths or anchors.
-This matters if you are using base tag settings.
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
-
----
-
-### block
-
-• `Optional` **block**: `BlockDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)
-
----
-
-### c4
-
-• `Optional` **c4**: `C4DiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)
-
----
-
-### class
-
-• `Optional` **class**: `ClassDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:177](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L177)
-
----
-
-### darkMode
-
-• `Optional` **darkMode**: `boolean`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L103)
-
----
-
-### deterministicIDSeed
-
-• `Optional` **deterministicIDSeed**: `string`
-
-This option is the optional seed for deterministic ids.
-If set to `undefined` but deterministicIds is `true`, a simple number iterator is used.
-You can set this attribute to base the seed on a static string.
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L171)
-
----
-
-### deterministicIds
-
-• `Optional` **deterministicIds**: `boolean`
-
-This option controls if the generated ids of nodes in the SVG are
-generated randomly or based on a seed.
-If set to `false`, the IDs are generated based on the current date and
-thus are not deterministic. This is the default behavior.
-
-This matters if your files are checked into source control e.g. git and
-should not change unless content is changed.
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:164](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L164)
-
----
-
-### dompurifyConfig
-
-• `Optional` **dompurifyConfig**: `Config`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)
-
----
-
-### elk
-
-• `Optional` **elk**: `Object`
-
-#### Type declaration
-
-| Name                     | Type                                                                          | Description                                                                                                                                               |
-| :----------------------- | :---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `mergeEdges?`            | `boolean`                                                                     | Elk specific option that allows edges to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram. |
-| `nodePlacementStrategy?` | `"SIMPLE"` \| `"NETWORK_SIMPLEX"` \| `"LINEAR_SEGMENTS"` \| `"BRANDES_KOEPF"` | Elk specific option affecting how nodes are placed.                                                                                                       |
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L91)
-
----
-
-### er
-
-• `Optional` **er**: `ErDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:179](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L179)
-
----
-
-### flowchart
-
-• `Optional` **flowchart**: `FlowchartDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L172)
-
----
-
-### fontFamily
-
-• `Optional` **fontFamily**: `string`
-
-Specifies the font to be used in the rendered diagrams.
-Can be any possible CSS `font-family`.
-See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:111](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L111)
-
----
-
-### fontSize
-
-• `Optional` **fontSize**: `number`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)
-
----
-
-### forceLegacyMathML
-
-• `Optional` **forceLegacyMathML**: `boolean`
-
-This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS
-fonts and browser's MathML implementation, this option is recommended if consistent rendering is important.
-If set to true, ignores legacyMathML.
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L153)
-
----
-
-### gantt
-
-• `Optional` **gantt**: `GanttDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)
-
----
-
-### gitGraph
-
-• `Optional` **gitGraph**: `GitGraphDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)
-
----
-
-### handDrawnSeed
-
-• `Optional` **handDrawnSeed**: `number`
-
-Defines the seed to be used when using handDrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L76)
-
----
-
-### htmlLabels
-
-• `Optional` **htmlLabels**: `boolean`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L104)
-
----
-
-### journey
-
-• `Optional` **journey**: `JourneyDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:175](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L175)
-
----
-
-### layout
-
-• `Optional` **layout**: `string`
-
-Defines which layout algorithm to use for rendering the diagram.
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L81)
-
----
-
-### legacyMathML
-
-• `Optional` **legacyMathML**: `boolean`
-
-This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers
-without their own MathML implementation. If this option is disabled and MathML is not supported, the math
-equations are replaced with a warning. If this option is enabled and MathML is not supported, Mermaid will
-fall back to legacy rendering for KaTeX.
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L146)
-
----
-
-### logLevel
-
-• `Optional` **logLevel**: `0` | `2` | `1` | `"trace"` | `"debug"` | `"info"` | `"warn"` | `"error"` | `"fatal"` | `3` | `4` | `5`
-
-This option decides the amount of logging to be used by mermaid.
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L117)
-
----
-
-### look
-
-• `Optional` **look**: `"classic"` | `"handDrawn"`
-
-Defines which main look to use for the diagram.
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L71)
-
----
-
-### markdownAutoWrap
-
-• `Optional` **markdownAutoWrap**: `boolean`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
-
----
-
-### maxEdges
-
-• `Optional` **maxEdges**: `number`
-
-Defines the maximum number of edges that can be drawn in a graph.
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:90](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L90)
-
----
-
-### maxTextSize
-
-• `Optional` **maxTextSize**: `number`
-
-The maximum allowed size of the users text diagram
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L85)
-
----
-
-### mindmap
-
-• `Optional` **mindmap**: `MindmapDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
-
----
-
-### packet
-
-• `Optional` **packet**: `PacketDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)
-
----
-
-### pie
-
-• `Optional` **pie**: `PieDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:180](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L180)
-
----
-
-### quadrantChart
-
-• `Optional` **quadrantChart**: `QuadrantChartConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181)
-
----
-
-### requirement
-
-• `Optional` **requirement**: `RequirementDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)
-
----
-
-### sankey
-
-• `Optional` **sankey**: `SankeyDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)
-
----
-
-### secure
-
-• `Optional` **secure**: `string`\[]
-
-This option controls which `currentConfig` keys are considered secure and
-can only be changed via call to `mermaid.initialize`.
-This prevents malicious graph directives from overriding a site's default security.
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L138)
-
----
-
-### securityLevel
-
-• `Optional` **securityLevel**: `"strict"` | `"loose"` | `"antiscript"` | `"sandbox"`
-
-Level of trust for parsed diagram
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L121)
-
----
-
-### sequence
-
-• `Optional` **sequence**: `SequenceDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L173)
-
----
-
-### startOnLoad
-
-• `Optional` **startOnLoad**: `boolean`
-
-Dictates whether mermaid starts on Page load
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:125](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L125)
-
----
-
-### state
-
-• `Optional` **state**: `StateDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:178](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L178)
-
----
-
-### suppressErrorRendering
-
-• `Optional` **suppressErrorRendering**: `boolean`
-
-Suppresses inserting 'Syntax error' diagram in the DOM.
-This is useful when you want to control how to handle syntax errors in your application.
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
-
----
-
-### theme
-
-• `Optional` **theme**: `"default"` | `"base"` | `"dark"` | `"forest"` | `"neutral"` | `"null"`
-
-Theme, the CSS style sheet.
-You may also use `themeCSS` to override this value.
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L64)
-
----
-
-### themeCSS
-
-• `Optional` **themeCSS**: `string`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:66](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L66)
-
----
-
-### themeVariables
-
-• `Optional` **themeVariables**: `any`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:65](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L65)
-
----
-
-### timeline
-
-• `Optional` **timeline**: `TimelineDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:176](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L176)
-
----
-
-### wrap
-
-• `Optional` **wrap**: `boolean`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
-
----
-
-### xyChart
-
-• `Optional` **xyChart**: `XYChartConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)

docs/config/setup/interfaces/mermaid.ParseResult.md

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

docs/config/setup/interfaces/mermaid.RenderOptions.md

@@ -1,19 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderOptions.md).
-
-# Interface: RenderOptions
-
-[mermaid](../modules/mermaid.md).RenderOptions
-
-## Properties
-
-### algorithm
-
-• `Optional` **algorithm**: `string`
-
-#### Defined in
-
-[packages/mermaid/src/rendering-util/render.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L8)

docs/config/setup/interfaces/mermaid.RunOptions.md

@@ -1,71 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.RunOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.RunOptions.md).
-
-# Interface: RunOptions
-
-[mermaid](../modules/mermaid.md).RunOptions
-
-## Properties
-
-### nodes
-
-• `Optional` **nodes**: `ArrayLike`<`HTMLElement`>
-
-The nodes to render. If this is set, `querySelector` will be ignored.
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:48](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L48)
-
----
-
-### postRenderCallback
-
-• `Optional` **postRenderCallback**: (`id`: `string`) => `unknown`
-
-A callback to call after each diagram is rendered.
-
-#### Type declaration
-
-▸ (`id`): `unknown`
-
-##### Parameters
-
-| Name | Type     |
-| :--- | :------- |
-| `id` | `string` |
-
-##### Returns
-
-`unknown`
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:52](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L52)
-
----
-
-### querySelector
-
-• `Optional` **querySelector**: `string`
-
-The query selector to use when finding elements to render. Default: `".mermaid"`.
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:44](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L44)
-
----
-
-### suppressErrors
-
-• `Optional` **suppressErrors**: `boolean`
-
-If `true`, errors will be logged to the console, but not thrown. Default: `false`
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L56)

docs/config/setup/interfaces/mermaidAPI.ParseOptions.md

@@ -2,11 +2,11 @@
 >
 > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 >
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.ParseOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.ParseOptions.md).
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.ParseOptions.md).
 
 # Interface: ParseOptions
 
-[mermaid](../modules/mermaid.md).ParseOptions
+[mermaidAPI](../modules/mermaidAPI.md).ParseOptions
 
 ## Properties
 
@@ -19,4 +19,4 @@ The `parseError` function will not be called.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:43](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L43)
+[mermaidAPI.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L64)

docs/config/setup/interfaces/mermaidAPI.ParseResult.md

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

docs/config/setup/interfaces/mermaidAPI.RenderResult.md

@@ -2,11 +2,11 @@
 >
 > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 >
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderResult.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderResult.md).
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.RenderResult.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaidAPI.RenderResult.md).
 
 # Interface: RenderResult
 
-[mermaid](../modules/mermaid.md).RenderResult
+[mermaidAPI](../modules/mermaidAPI.md).RenderResult
 
 ## Properties
 
@@ -18,7 +18,7 @@ Bind function to be called after the svg has been inserted into the DOM.
 This is necessary for adding event listeners to the elements in the svg.
 
 ```js
-const { svg, bindFunctions } = await mermaid.render('id1', 'graph TD;A-->B');
+const { svg, bindFunctions } = mermaidAPI.render('id1', 'graph TD;A-->B');
 div.innerHTML = svg;
 bindFunctions?.(div); // To call bindFunctions only if it's present.
 ```
@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:73](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L73)
+[mermaidAPI.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L94)
 
 ---
 
@@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L63)
+[mermaidAPI.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L84)
 
 ---
 
@@ -63,4 +63,4 @@ The svg code for the rendered graph.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59)
+[mermaidAPI.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L80)

docs/config/setup/modules/config.md

@@ -10,11 +10,11 @@
 
 ### defaultConfig
 
-• `Const` **defaultConfig**: [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
+• `Const` **defaultConfig**: `MermaidConfig`
 
 #### Defined in
 
-[packages/mermaid/src/config.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L8)
+[config.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L8)
 
 ## Functions
 
@@ -27,8 +27,8 @@ Pushes in a directive to the configuration
 #### Parameters
 
 | Name        | Type            | Description              |
-| :---------- | :-------------------------------------------------------- | :----------------------- |
+| :---------- | :-------------- | :----------------------- |
-| `directive` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) | The directive to push in |
+| `directive` | `MermaidConfig` | The directive to push in |
 
 #### Returns
 
@@ -36,13 +36,13 @@ Pushes in a directive to the configuration
 
 #### Defined in
 
-[packages/mermaid/src/config.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L188)
+[config.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L188)
 
 ---
 
 ### getConfig
 
-▸ **getConfig**(): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
+▸ **getConfig**(): `MermaidConfig`
 
 ## getConfig
 
@@ -54,19 +54,19 @@ Pushes in a directive to the configuration
 
 #### Returns
 
-[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
+`MermaidConfig`
 
 The currentConfig
 
 #### Defined in
 
-[packages/mermaid/src/config.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L131)
+[config.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L131)
 
 ---
 
 ### getSiteConfig
 
-▸ **getSiteConfig**(): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
+▸ **getSiteConfig**(): `MermaidConfig`
 
 ## getSiteConfig
 
@@ -78,13 +78,13 @@ The currentConfig
 
 #### Returns
 
-[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
+`MermaidConfig`
 
 The siteConfig
 
 #### Defined in
 
-[packages/mermaid/src/config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96)
+[config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96)
 
 ---
 
@@ -109,8 +109,8 @@ The siteConfig
 #### Parameters
 
 | Name     | Type            | Default value | Description                                                                                                                                                   |
-| :------- | :-------------------------------------------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| :------- | :-------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `config` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) | `siteConfig`  | base set of values, which currentConfig could be **reset** to. Defaults to the current siteConfig (e.g returned by [getSiteConfig](config.md#getsiteconfig)). |
+| `config` | `MermaidConfig` | `siteConfig`  | base set of values, which currentConfig could be **reset** to. Defaults to the current siteConfig (e.g returned by [getSiteConfig](config.md#getsiteconfig)). |
 
 #### Returns
 
@@ -118,7 +118,7 @@ The siteConfig
 
 #### Defined in
 
-[packages/mermaid/src/config.ts:221](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L221)
+[config.ts:218](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L218)
 
 ---
 
@@ -147,7 +147,7 @@ options in-place
 
 #### Defined in
 
-[packages/mermaid/src/config.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L146)
+[config.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L146)
 
 ---
 
@@ -158,8 +158,8 @@ options in-place
 #### Parameters
 
 | Name   | Type            |
-| :----- | :-------------------------------------------------------- |
+| :----- | :-------------- |
-| `conf` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) |
+| `conf` | `MermaidConfig` |
 
 #### Returns
 
@@ -167,13 +167,13 @@ options in-place
 
 #### Defined in
 
-[packages/mermaid/src/config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75)
+[config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75)
 
 ---
 
 ### setConfig
 
-▸ **setConfig**(`conf`): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
+▸ **setConfig**(`conf`): `MermaidConfig`
 
 ## setConfig
 
@@ -188,24 +188,24 @@ corresponding siteConfig value.
 #### Parameters
 
 | Name   | Type            | Description                 |
-| :----- | :-------------------------------------------------------- | :-------------------------- |
+| :----- | :-------------- | :-------------------------- |
-| `conf` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) | The potential currentConfig |
+| `conf` | `MermaidConfig` | The potential currentConfig |
 
 #### Returns
 
-[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
+`MermaidConfig`
 
 The currentConfig merged with the sanitized conf
 
 #### Defined in
 
-[packages/mermaid/src/config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113)
+[config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113)
 
 ---
 
 ### setSiteConfig
 
-▸ **setSiteConfig**(`conf`): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
+▸ **setSiteConfig**(`conf`): `MermaidConfig`
 
 ## setSiteConfig
 
@@ -221,56 +221,56 @@ function _Default value: At default, will mirror Global Config_
 #### Parameters
 
 | Name   | Type            | Description                                 |
-| :----- | :-------------------------------------------------------- | :------------------------------------------ |
+| :----- | :-------------- | :------------------------------------------ |
-| `conf` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) | The base currentConfig to use as siteConfig |
+| `conf` | `MermaidConfig` | The base currentConfig to use as siteConfig |
 
 #### Returns
 
-[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
+`MermaidConfig`
 
 The new siteConfig
 
 #### Defined in
 
-[packages/mermaid/src/config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61)
+[config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61)
 
 ---
 
 ### updateCurrentConfig
 
-▸ **updateCurrentConfig**(`siteCfg`, `_directives`): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
+▸ **updateCurrentConfig**(`siteCfg`, `_directives`): `MermaidConfig`
 
 #### Parameters
 
 | Name          | Type               |
-| :------------ | :----------------------------------------------------------- |
+| :------------ | :----------------- |
-| `siteCfg`     | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)    |
+| `siteCfg`     | `MermaidConfig`    |
-| `_directives` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)\[] |
+| `_directives` | `MermaidConfig`\[] |
 
 #### Returns
 
-[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
+`MermaidConfig`
 
 #### Defined in
 
-[packages/mermaid/src/config.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L15)
+[config.ts:15](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L15)
 
 ---
 
 ### updateSiteConfig
 
-▸ **updateSiteConfig**(`conf`): [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
+▸ **updateSiteConfig**(`conf`): `MermaidConfig`
 
 #### Parameters
 
 | Name   | Type            |
-| :----- | :-------------------------------------------------------- |
+| :----- | :-------------- |
-| `conf` | [`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md) |
+| `conf` | `MermaidConfig` |
 
 #### Returns
 
-[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)
+`MermaidConfig`
 
 #### Defined in
 
-[packages/mermaid/src/config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79)
+[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79)

docs/config/setup/modules/defaultConfig.md

@@ -14,13 +14,13 @@
 
 #### Defined in
 
-[packages/mermaid/src/defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266)
+[defaultConfig.ts:275](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L275)
 
 ---
 
 ### default
 
-• `Const` **default**: `RequiredDeep`<[`MermaidConfig`](../interfaces/mermaid.MermaidConfig.md)>
+• `Const` **default**: `RequiredDeep`<`MermaidConfig`>
 
 Default mermaid configuration options.
 
@@ -30,4 +30,4 @@ Non-JSON JS default values are listed in this file, e.g. functions, or
 
 #### Defined in
 
-[packages/mermaid/src/defaultConfig.ts:18](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L18)
+[defaultConfig.ts:18](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L18)

docs/config/setup/modules/mermaid.md

@@ -1,90 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/modules/mermaid.md](../../../../packages/mermaid/src/docs/config/setup/modules/mermaid.md).
-
-# Module: mermaid
-
-## Classes
-
-- [UnknownDiagramError](../classes/mermaid.UnknownDiagramError.md)
-
-## Interfaces
-
-- [DetailedError](../interfaces/mermaid.DetailedError.md)
-- [ExternalDiagramDefinition](../interfaces/mermaid.ExternalDiagramDefinition.md)
-- [LayoutData](../interfaces/mermaid.LayoutData.md)
-- [LayoutLoaderDefinition](../interfaces/mermaid.LayoutLoaderDefinition.md)
-- [Mermaid](../interfaces/mermaid.Mermaid.md)
-- [MermaidConfig](../interfaces/mermaid.MermaidConfig.md)
-- [ParseOptions](../interfaces/mermaid.ParseOptions.md)
-- [ParseResult](../interfaces/mermaid.ParseResult.md)
-- [RenderOptions](../interfaces/mermaid.RenderOptions.md)
-- [RenderResult](../interfaces/mermaid.RenderResult.md)
-- [RunOptions](../interfaces/mermaid.RunOptions.md)
-
-## Type Aliases
-
-### InternalHelpers
-
-Ƭ **InternalHelpers**: typeof `internalHelpers`
-
-#### Defined in
-
-[packages/mermaid/src/internals.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/internals.ts#L33)
-
----
-
-### ParseErrorFunction
-
-Ƭ **ParseErrorFunction**: (`err`: `string` | [`DetailedError`](../interfaces/mermaid.DetailedError.md) | `unknown`, `hash?`: `any`) => `void`
-
-#### Type declaration
-
-▸ (`err`, `hash?`): `void`
-
-##### Parameters
-
-| Name    | Type                                                                               |
-| :------ | :--------------------------------------------------------------------------------- |
-| `err`   | `string` \| [`DetailedError`](../interfaces/mermaid.DetailedError.md) \| `unknown` |
-| `hash?` | `any`                                                                              |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[packages/mermaid/src/Diagram.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/Diagram.ts#L10)
-
----
-
-### SVG
-
-Ƭ **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
-
-#### Defined in
-
-[packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)
-
----
-
-### SVGGroup
-
-Ƭ **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
-
-#### Defined in
-
-[packages/mermaid/src/diagram-api/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L132)
-
-## Variables
-
-### default
-
-• `Const` **default**: [`Mermaid`](../interfaces/mermaid.Mermaid.md)
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:440](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L440)

docs/config/setup/modules/mermaidAPI.md

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

docs/config/theming.md

@@ -24,12 +24,12 @@ Themes can now be customized at the site-wide level, or on individual Mermaid di
 
 ## Site-wide Theme
 
-To customize themes site-wide, call the `initialize` method on the `mermaid`.
+To customize themes site-wide, call the `initialize` method on the `mermaidAPI`.
 
 Example of `initialize` call setting `theme` to `base`:
 
 ```javascript
-mermaid.initialize({
+mermaidAPI.initialize({
   securityLevel: 'loose',
   theme: 'base',
 });

docs/config/usage.md

@@ -193,7 +193,7 @@ await mermaid.run({
 ### Calling `mermaid.init` - Deprecated
 
 > **Warning**
-> mermaid.init is deprecated in v10 and will be removed in a future release. Please use mermaid.run instead.
+> mermaid.init is deprecated in v10 and will be removed in v11. Please use mermaid.run instead.
 
 By default, `mermaid.init` will be called when the document is ready, finding all elements with
 `class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need
@@ -217,6 +217,9 @@ Or with no config object, and a jQuery selection:
 mermaid.init(undefined, $('#someId .yetAnotherClass'));
 ```
 
+> **Warning**
+> This type of integration is deprecated. Instead the preferred way of handling more complex integration is to use the mermaidAPI instead.
+
 ## Usage with webpack
 
 mermaid fully supports webpack. Here is a [working demo](https://github.com/mermaidjs/mermaid-webpack-demo).

docs/ecosystem/integrations-community.md

@@ -42,8 +42,6 @@ To add an integration to this list, see the [Integrations - create page](./integ
   - [CloudScript.io Mermaid Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
 - [Azure Devops](https://learn.microsoft.com/en-us/azure/devops/project/wiki/markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
 - [Deepdwn](https://billiam.itch.io/deepdwn) ✅
-- [Doctave](https://www.doctave.com/) ✅
-  - [Mermaid in Markdown code blocks](https://docs.doctave.com/components/mermaid) ✅
 - [GitBook](https://gitbook.com)
   - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
   - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
@@ -56,10 +54,8 @@ To add an integration to this list, see the [Integrations - create page](./integ
   - [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
 - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
-- [MonsterWriter](https://www.monsterwriter.com/) ✅
 - [Joplin](https://joplinapp.org) ✅
 - [LiveBook](https://livebook.dev) ✅
-- [Slidev](https://sli.dev) ✅
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
 - [Mermerd](https://github.com/KarnerTh/mermerd)
@@ -135,7 +131,7 @@ Communication tools and platforms
 ### Wikis
 
 - [DokuWiki](https://dokuwiki.org)
-  - [ComboStrap](https://combostrap.com/utility/create-diagram-with-mermaid-vh3ab9yj)
+  - [ComboStrap](https://combostrap.com/mermaid)
   - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
 - [Foswiki](https://foswiki.org)
   - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
@@ -210,7 +206,6 @@ Communication tools and platforms
   - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
 - [JSDoc](https://jsdoc.app/)
   - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
-- [Madness](https://madness.dannyb.co/)
 - [mdBook](https://rust-lang.github.io/mdBook/index.html)
   - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
 - [MkDocs](https://www.mkdocs.org)

docs/ecosystem/mermaid-chart.md

@@ -6,13 +6,9 @@
 
 # Mermaid Chart
 
-The Future of Diagramming & Visual Collaboration
-
-Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
-
 <br />
 
-<a href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=552855&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 
 ## About
 
@@ -22,26 +18,22 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 
 - **Editor** - A web based editor for creating and editing Mermaid diagrams.
 
-- **Visual Editor** - The Visual Editor enables users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
+- **Presentation** - A presentation mode for viewing Mermaid diagrams in a slideshow format.
 
-- **AI Chat** - Use our embedded AI Chat to generate diagrams from natural language descriptions.
+- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro plan).
 
 - **Plugins** - A plugin system for extending the functionality of Mermaid.
 
-  Official Mermaid Chart plugins:
+  Plugins are available for:
 
-  - [Mermaid Chart GPT](https://chat.openai.com/g/g-1IRFKwq4G-mermaid-chart)
+  - [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt)
-  - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)
   - [JetBrains IDE](https://plugins.jetbrains.com/plugin/23043-mermaid-chart)
   - [Microsoft PowerPoint and Word](https://appsource.microsoft.com/en-us/product/office/WA200006214?tab=Overview)
+  - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)
 
-  Visit our [Plugins](https://www.mermaidchart.com/plugins) page for more information.
+- **AI diagramming** - A feature for generating Mermaid diagrams from text using AI (Pro plan).
 
-- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro and Enterprise plans).
+- **More** - To learn more, visit our [Product](https://www.mermaidchart.com/product) page.
-
-- **Comments** - Enhance collaboration by adding comments to diagrams.
-
-- **Presentations** - A presentation mode for viewing Mermaid diagrams in a slideshow format.
 
 ## Plans
 
@@ -51,9 +43,11 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 
 - **Enterprise** - A paid plan for enterprise use that includes all Pro features, and more.
 
-To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
+## Access
 
-Mermaid Chart is currently offering a 14-day free trial on our Pro and Enterprise tiers. Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
+Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
+
+Mermaid Chart is currently offering a 14-day free trial of our newly-launched Pro tier. To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
 
 ## Mermaid JS contributions