Merge pull request #5762 from mermaid-js/changeset-release/master

Version Packages

.build/types.ts

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

.changeset/README.md

@@ -0,0 +1,8 @@
+# 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

@@ -0,0 +1,12 @@
+{
+  "$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,6 +13,7 @@ bqstring
 BQUOTE
 bramp
 BRKT
+brotli
 callbackargs
 callbackname
 classdef
@@ -114,10 +115,13 @@ STYLEDEF
 STYLEOPTS
 subcomponent
 subcomponents
+subconfig
 SUBROUTINEEND
 SUBROUTINESTART
 Subschemas
 substr
+SVGG
+SVGSVG
 TAGEND
 TAGSTART
 techn
@@ -128,6 +132,7 @@ titlevalue
 topbar
 TRAPEND
 TRAPSTART
+treemap
 ts-nocheck
 tsdoc
 typeof

.cspell/contributors.txt

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

.cspell/libraries.txt

@@ -20,6 +20,7 @@ dagre-d3
 Deepdwn
 Docsify
 Docsy
+Doctave
 DokuWiki
 dompurify
 elkjs
@@ -56,12 +57,15 @@ redmine
 rehype
 roughjs
 rscratch
+shiki
+Slidev
 sparkline
 sphinxcontrib
 ssim
 stylis
 Swimm
 tsbuildinfo
+tseslint
 Tuleap
 Typora
 unocss

.cspell/mermaid-terms.txt

@@ -9,7 +9,7 @@ elems
 gantt
 gitgraph
 gzipped
-handdrawn
+handDrawn
 knsv
 Knut
 marginx

.cspell/misc-terms.txt

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

.esbuild/build.ts

@@ -2,7 +2,8 @@ import { build } from 'esbuild';
 import { mkdir, writeFile } from 'node:fs/promises';
 import { packageOptions } from '../.build/common.js';
 import { generateLangium } from '../.build/generateLangium.js';
-import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js';
+import type { MermaidBuildOptions } from './util.js';
+import { defaultOptions, getBuildConfig } from './util.js';
 
 const shouldVisualize = process.argv.includes('--visualize');
 
@@ -35,11 +36,11 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
 
   if (shouldVisualize) {
     for (const { metafile } of results) {
-      if (!metafile) {
+      if (!metafile?.outputs) {
         continue;
       }
       const fileName = Object.keys(metafile.outputs)
-        .filter((file) => !file.includes('chunks') && file.endsWith('js'))[0]
+        .find((file) => !file.includes('chunks') && file.endsWith('js'))
         .replace('dist/', '');
       // Upload metafile into https://esbuild.github.io/analyze/
       await writeFile(`stats/${fileName}.meta.json`, JSON.stringify(metafile));
@@ -48,13 +49,14 @@ 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').catch(() => {});
+  await mkdir('stats', { recursive: true });
   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 { Plugin } from 'esbuild';
+import type { Plugin } from 'esbuild';
 
 export const jisonPlugin: Plugin = {
   name: 'jison',

.esbuild/server.ts

@@ -1,11 +1,12 @@
-import express from 'express';
-import type { NextFunction, Request, Response } from 'express';
-import cors from 'cors';
-import { getBuildConfig, defaultOptions } from './util.js';
-import { context } from 'esbuild';
+/* eslint-disable no-console */
 import chokidar from 'chokidar';
-import { generateLangium } from '../.build/generateLangium.js';
+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 { generateLangium } from '../.build/generateLangium.js';
+import { defaultOptions, getBuildConfig } from './util.js';
 
 const configs = Object.values(packageOptions).map(({ packageName }) =>
   getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: packageName })
@@ -19,16 +20,28 @@ const mermaidIIFEConfig = getBuildConfig({
 });
 configs.push(mermaidIIFEConfig);
 
-const contexts = await Promise.all(configs.map((config) => context(config)));
+const contexts = await Promise.all(
+  configs.map(async (config) => ({ config, context: await context(config) }))
+);
 
+let rebuildCounter = 1;
 const rebuildAll = async () => {
-  console.time('Rebuild time');
-  await Promise.all(contexts.map((ctx) => ctx.rebuild())).catch((e) => console.error(e));
-  console.timeEnd('Rebuild time');
+  const buildNumber = rebuildCounter++;
+  const timeLabel = `Rebuild ${buildNumber} Time (total)`;
+  console.time(timeLabel);
+  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, next: NextFunction) {
+function eventsHandler(request: Request, response: Response) {
   const headers = {
     'Content-Type': 'text/event-stream',
     Connection: 'keep-alive',
@@ -45,19 +58,20 @@ function eventsHandler(request: Request, response: Response, next: NextFunction)
   });
 }
 
-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) {
-    clearTimeout(timeoutId);
+  if (timeoutID !== undefined) {
+    clearTimeout(timeoutID);
   }
-  timeoutId = setTimeout(async () => {
+  // eslint-disable-next-line @typescript-eslint/no-misused-promises
+  timeoutID = setTimeout(async () => {
     await rebuildAll();
     sendEventsToAll();
-    timeoutId = undefined;
+    timeoutID = undefined;
   }, 100);
 }
 
@@ -74,15 +88,16 @@ 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;
       }
-      if (/\.langium$/.test(path)) {
+      console.log(`${path} changed. Rebuilding...`);
+      if (path.endsWith('.langium')) {
         await generateLangium();
       }
-      console.log(`${path} changed. Rebuilding...`);
       handleFileChange();
     });
 
@@ -99,4 +114,4 @@ async function createServer() {
   });
 }
 
-createServer();
+void createServer();

.esbuild/util.ts

@@ -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);
-  let output: BuildOptions = buildOptions({
+  const output: BuildOptions = buildOptions({
     absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
     entryPoints: {
       [outFileName]: `src/${file}`,

.eslintignore

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

.eslintrc.cjs

@@ -1,190 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es6: true,
-    'jest/globals': true,
-    node: true,
-  },
-  root: true,
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaFeatures: {
-      experimentalObjectRestSpread: true,
-      jsx: true,
-    },
-    tsconfigRootDir: __dirname,
-    sourceType: 'module',
-    ecmaVersion: 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,7 +41,10 @@ exclude = [
 "https://bundlephobia.com",
 
 # Chrome webstore migration issue. Temporary
-"https://chromewebstore.google.com"
+"https://chromewebstore.google.com",
+
+# Drupal 403
+"https://(www.)?drupal.org"
 ]
 
 # Exclude all private IPs from checking.

.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.
-- [ ] :bookmark: targeted `develop` branch
+- [ ] :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:`.

.github/release-drafter.yml

@@ -1,36 +0,0 @@
-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

@@ -0,0 +1,43 @@
+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@v2
+      - uses: pnpm/action-setup@v4
 
       - 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@v2
+      - uses: pnpm/action-setup@v4
         # 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@v2
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js

.github/workflows/e2e.yml

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

.github/workflows/lint.yml

@@ -19,7 +19,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
@@ -82,15 +82,3 @@ 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@v2
+      - uses: pnpm/action-setup@v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v4

.github/workflows/release-draft.yml

@@ -1,23 +0,0 @@
-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@v2
+      - uses: pnpm/action-setup@v4
 
       - 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@v2
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js

.github/workflows/release.yml

@@ -0,0 +1,37 @@
+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@v2
+      - uses: pnpm/action-setup@v4
         # 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@v2
+      - uses: pnpm/action-setup@v4
       - run: npx update-browserslist-db@latest
       - name: Commit changes
         uses: EndBug/add-and-commit@v9

.vite/build.ts

@@ -1,4 +1,5 @@
-import { build, InlineConfig, type PluginOption } from 'vite';
+import type { InlineConfig } from 'vite';
+import { build, type PluginOption } from 'vite';
 import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
@@ -46,9 +47,10 @@ 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];
-  let output: OutputOptions = [
+  const output: OutputOptions = [
     {
       name,
       format: 'esm',
@@ -83,7 +85,6 @@ 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'],
@@ -121,10 +122,10 @@ await generateLangium();
 
 if (watch) {
   await build(getBuildConfig({ minify: false, watch, core: false, entryName: 'parser' }));
-  build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
+  void build(getBuildConfig({ minify: false, watch, core: false, entryName: 'mermaid' }));
   if (!mermaidOnly) {
-    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
-    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-zenuml' }));
+    void build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
+    void 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 { PluginOption } from 'vite';
+import type { PluginOption } from 'vite';
 import { getDefaults, getSchema, loadSchema } from '../.build/jsonSchema.js';
 
 /**

.vite/server.ts

@@ -23,8 +23,9 @@ 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`);
   });
 }
 
-createServer();
+void createServer();

README.md

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

cypress.config.ts

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

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) {
+  if (api && typeof graphStr === 'string') {
     url = `http://localhost:9000/xss.html?graph=${graphStr}`;
   }
 
@@ -54,16 +54,15 @@ 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 && _options.sequence.noteFontFamily
-          ? _options.sequence.noteFontFamily
-          : 'courier',
+      noteFontFamily: _options.sequence?.noteFontFamily
+        ? _options.sequence.noteFontFamily
+        : 'courier',
       messageFontFamily: 'courier',
     },
   };
@@ -95,8 +94,22 @@ 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 name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
+  const useArgos: boolean = Cypress.env('useArgos');
 
   if (useAppli) {
     cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`);
@@ -106,21 +119,14 @@ export const openURLAndVerifyRendering = (
       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 } from '../../helpers/util.ts';
+import { renderGraph, verifyScreenshot } from '../../helpers/util.ts';
 describe('Configuration', () => {
   describe('arrowMarkerAbsolute', () => {
     it('should handle default value false of arrowMarkerAbsolute', () => {
@@ -119,8 +119,7 @@ describe('Configuration', () => {
       const url = 'http://localhost:9000/regression/issue-1874.html';
       cy.visit(url);
       cy.window().should('have.property', 'rendered', true);
-      cy.get('svg').should('be.visible');
-      cy.matchImageSnapshot(
+      verifyScreenshot(
         'configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives'
       );
     });
@@ -145,7 +144,7 @@ describe('Configuration', () => {
           // none of the diagrams should be error diagrams
           expect($svg).to.not.contain('Syntax error');
         });
-      cy.matchImageSnapshot(
+      verifyScreenshot(
         'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set'
       );
     });
@@ -162,7 +161,7 @@ describe('Configuration', () => {
           // some of the diagrams should be error diagrams
           expect($svg).to.contain('Syntax error');
         });
-      cy.matchImageSnapshot(
+      verifyScreenshot(
         'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set'
       );
     });

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

@@ -1,14 +0,0 @@
-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,7 +10,6 @@ describe('XSS', () => {
     cy.wait(1000).then(() => {
       cy.get('.mermaid').should('exist');
     });
-    cy.get('svg');
   });
 
   it('should not allow tags in the css', () => {

cypress/integration/rendering/appli.spec.js

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

cypress/integration/rendering/c4.spec.js

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

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

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

cypress/integration/rendering/classDiagram.spec.js

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

cypress/integration/rendering/erDiagram.spec.js

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

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('Parse error');
+      expect(err.message).to.include('error');
       // return false to prevent the error from
       // failing this test
       return false;

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

@@ -837,6 +837,26 @@ 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 } }
         );
@@ -855,7 +875,7 @@ describe('Title and arrow styling #4813', () => {
       flowchart LR
       A-->B
       A-->C`,
-      { flowchart: { defaultRenderer: 'elk' } }
+      { layout: 'elk' }
     );
     cy.get('svg').should((svg) => {
       const title = svg[0].querySelector('text');
@@ -871,15 +891,14 @@ describe('Title and arrow styling #4813', () => {
       B-.-oC
       C==xD
       D ~~~ A`,
-      { flowchart: { defaultRenderer: 'elk' } }
+      { layout: 'elk' }
     );
     cy.get('svg').should((svg) => {
       const edges = svg[0].querySelectorAll('.edges path');
-      console.log(edges);
-      expect(edges[0]).to.have.attr('pattern', 'solid');
-      expect(edges[1]).to.have.attr('pattern', 'dotted');
-      expect(edges[2]).to.have.css('stroke-width', '3.5px');
-      expect(edges[3]).to.have.css('stroke-width', '1.5px');
+      expect(edges[0].getAttribute('class')).to.contain('edge-pattern-solid');
+      expect(edges[1].getAttribute('class')).to.contain('edge-pattern-dotted');
+      expect(edges[2].getAttribute('class')).to.contain('edge-thickness-thick');
+      expect(edges[3].getAttribute('class')).to.contain('edge-thickness-invisible');
     });
   });
 });

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(290 * 0.95 - 1, 290 * 1.05);
+      expect(maxWidthValue).to.be.within(417 * 0.95, 417 * 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(290 * 0.95 - 1, 290 * 1.05);
+      expect(width).to.be.within(417 * 0.95, 417 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -1047,7 +1047,9 @@ 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(
-      `graph TD
+      `flowchart 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(300 * 0.9, 300 * 1.1);
+      expect(maxWidthValue).to.be.within(446 * 0.9, 446 * 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(300 * 0.9, 300 * 1.1);
+      expect(width).to.be.within(446 * 0.9, 446 * 1.1);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -905,13 +905,16 @@ graph TD
   it('67: should be able to style default node independently', () => {
     imgSnapshotTest(
       `
-    flowchart TD
+      flowchart TD
       classDef default fill:#a34
       hello --> default
 
       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,5 +1532,41 @@ 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,6 +10,15 @@ 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,7 +8,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render a complete quadrant chart', () => {
     imgSnapshotTest(
@@ -30,7 +29,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render without points', () => {
     imgSnapshotTest(
@@ -46,7 +44,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should able to render y-axix on right side', () => {
     imgSnapshotTest(
@@ -63,7 +60,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should able to render x-axix on bottom', () => {
     imgSnapshotTest(
@@ -80,7 +76,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should able to render x-axix on bottom and y-axis on right', () => {
     imgSnapshotTest(
@@ -97,7 +92,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render without title', () => {
     imgSnapshotTest(
@@ -112,7 +106,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should use all the config', () => {
     imgSnapshotTest(
@@ -135,7 +128,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should use all the theme variable', () => {
     imgSnapshotTest(
@@ -158,7 +150,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render x-axis labels in the center, if x-axis has two labels', () => {
     imgSnapshotTest(
@@ -180,7 +171,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render y-axis labels in the center, if y-axis has two labels', () => {
     imgSnapshotTest(
@@ -202,7 +192,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render both axes labels on the left and bottom, if both axes have only one label', () => {
     imgSnapshotTest(
@@ -224,7 +213,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('it should render data points with styles', () => {
@@ -249,7 +237,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('it should render data points with styles + classes', () => {

cypress/integration/rendering/requirement.spec.js

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

cypress/integration/rendering/sequencediagram.spec.js

@@ -1,8 +1,6 @@
-/// <reference types="Cypress" />
-
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
-context('Sequence diagram', () => {
+describe('Sequence diagram', () => {
   it('should render a sequence diagram with boxes', () => {
     renderGraph(
       `
@@ -68,6 +66,19 @@ context('Sequence diagram', () => {
       { sequence: { actorFontFamily: 'courier' } }
     );
   });
+  it('should render bidirectional arrows', () => {
+    imgSnapshotTest(
+      `
+      sequenceDiagram
+      Alice<<->>John: Hello John, how are you?
+      Alice<<-->>John: Hi Alice, I can hear you!
+      John<<->>Alice: This also works the other way
+      John<<-->>Alice: Yes
+      Alice->John: Test
+      John->>Alice: Still works
+      `
+    );
+  });
   it('should handle different line breaks', () => {
     imgSnapshotTest(
       `
@@ -231,7 +242,7 @@ context('Sequence diagram', () => {
       `
     );
   });
-  context('font settings', () => {
+  describe('font settings', () => {
     it('should render different note fonts when configured', () => {
       imgSnapshotTest(
         `
@@ -328,7 +339,7 @@ context('Sequence diagram', () => {
       );
     });
   });
-  context('auth width scaling', () => {
+  describe('auth width scaling', () => {
     it('should render long actor descriptions', () => {
       imgSnapshotTest(
         `
@@ -464,6 +475,18 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should render notes over actors and participant', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        actor Alice
+        participant Charlie
+        note over Alice: some note
+        note over Charlie: other note
+      `,
+        {}
+      );
+    });
     it('should render long messages from an actor to the left to one to the right', () => {
       imgSnapshotTest(
         `
@@ -505,7 +528,7 @@ context('Sequence diagram', () => {
       );
     });
   });
-  context('background rects', () => {
+  describe('background rects', () => {
     it('should render a single and nested rects', () => {
       imgSnapshotTest(
         `
@@ -785,7 +808,7 @@ context('Sequence diagram', () => {
       );
     });
   });
-  context('directives', () => {
+  describe('directives', () => {
     it('should override config with directive settings', () => {
       imgSnapshotTest(
         `
@@ -817,7 +840,7 @@ context('Sequence diagram', () => {
       );
     });
   });
-  context('links', () => {
+  describe('links', () => {
     it('should support actor links', () => {
       renderGraph(
         `
@@ -833,7 +856,7 @@ context('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) => {
@@ -908,7 +931,7 @@ context('Sequence diagram', () => {
       );
     });
   });
-  context('svg size', () => {
+  describe('svg size', () => {
     it('should render a sequence diagram when useMaxWidth is true (default)', () => {
       renderGraph(
         `
@@ -987,7 +1010,7 @@ context('Sequence diagram', () => {
       });
     });
   });
-  context('render after error', () => {
+  describe('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,7 +8,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 1, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a simple state diagrams', () => {
     imgSnapshotTest(
@@ -20,7 +19,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a long descriptions instead of id when available', () => {
     imgSnapshotTest(
@@ -32,7 +30,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a long descriptions with additional descriptions', () => {
     imgSnapshotTest(
@@ -44,7 +41,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a single state with short descriptions', () => {
     imgSnapshotTest(
@@ -55,7 +51,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a transition descriptions with new lines', () => {
     imgSnapshotTest(
@@ -69,7 +64,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a state with a note', () => {
     imgSnapshotTest(
@@ -83,7 +77,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a state with on the left side when so specified', () => {
     imgSnapshotTest(
@@ -97,7 +90,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a state with a note together with another state', () => {
     imgSnapshotTest(
@@ -113,7 +105,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a note with multiple lines in it', () => {
     imgSnapshotTest(
@@ -156,7 +147,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a simple state diagrams 2', () => {
     imgSnapshotTest(
@@ -169,7 +159,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a simple state diagrams with labels', () => {
     imgSnapshotTest(
@@ -185,7 +174,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render state descriptions', () => {
     imgSnapshotTest(
@@ -198,7 +186,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render composite states', () => {
     imgSnapshotTest(
@@ -217,7 +204,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render multiple composite states', () => {
     imgSnapshotTest(
@@ -287,7 +273,6 @@ describe('State diagram', () => {
     `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render concurrency states', () => {
     imgSnapshotTest(
@@ -311,7 +296,6 @@ describe('State diagram', () => {
     `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a state with states in it', () => {
     imgSnapshotTest(
@@ -581,6 +565,20 @@ 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(
@@ -590,6 +588,20 @@ 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,7 +10,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a long descriptions instead of id when available', () => {
     imgSnapshotTest(
@@ -22,7 +21,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a long descriptions with additional descriptions', () => {
     imgSnapshotTest(
@@ -34,7 +32,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a single state with short descriptions', () => {
     imgSnapshotTest(
@@ -45,7 +42,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a transition descriptions with new lines', () => {
     imgSnapshotTest(
@@ -59,7 +55,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a state with a note', () => {
     imgSnapshotTest(
@@ -73,7 +68,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a state with on the left side when so specified', () => {
     imgSnapshotTest(
@@ -87,7 +81,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a state with a note together with another state', () => {
     imgSnapshotTest(
@@ -103,7 +96,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a note with multiple lines in it', () => {
     imgSnapshotTest(
@@ -146,7 +138,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a simple state diagrams 2', () => {
     imgSnapshotTest(
@@ -159,7 +150,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a simple state diagrams with labels', () => {
     imgSnapshotTest(
@@ -175,7 +165,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render state descriptions', () => {
     imgSnapshotTest(
@@ -188,7 +177,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render composite states', () => {
     imgSnapshotTest(
@@ -207,7 +195,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render multiple composit states', () => {
     imgSnapshotTest(
@@ -277,7 +264,6 @@ describe('State diagram', () => {
     `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render concurrency states', () => {
     imgSnapshotTest(
@@ -301,7 +287,6 @@ describe('State diagram', () => {
     `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a state with states in it', () => {
     imgSnapshotTest(

cypress/integration/rendering/theme.spec.js

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

cypress/integration/rendering/xyChart.spec.js

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

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 (location.href.match('test-html-escaping')) {
+if (/test-html-escaping/.exec(location.href)) {
   code = code3;
 }
 

cypress/platform/flowchart-refactor.html

@@ -134,7 +134,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 flowchart LR
     id1([This is the text in the box])
       </pre
@@ -142,7 +142,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
 flowchart LR
     id1([This is the text in the box])
       </pre
@@ -150,7 +150,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
 flowchart LR
     id1([This is the text in the box])
       </pre
@@ -185,7 +185,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram6" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 flowchart LR
     id1[[This is the text in the box]]
       </pre
@@ -193,7 +193,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram7" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
 flowchart LR
     id1[[This is the text in the box]]
       </pre
@@ -201,7 +201,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram8" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
 flowchart LR
     id1[[This is the text in the box]]
       </pre
@@ -236,7 +236,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram10" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart LR
     id1[(Database)]
       </pre
@@ -244,7 +244,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram11" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1[(Database)]
       </pre
@@ -252,7 +252,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram12" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart LR
     id1[(Database)]
       </pre
@@ -287,7 +287,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram14" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart LR
     id1((This is the text in the circle))
       </pre
@@ -295,7 +295,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram15" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1((This is the text in the circle))
       </pre
@@ -303,7 +303,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram16" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart LR
     id1((This is the text in the circle))
       </pre
@@ -338,7 +338,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram18" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart TD
     id1(((This is the text in the circle)))
       </pre
@@ -346,7 +346,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram19" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart TD
     id1(((This is the text in the circle)))
       </pre
@@ -354,7 +354,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram20" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart TD
     id1(((This is the text in the circle)))
       </pre
@@ -389,7 +389,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram22" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart LR
     id1>This is the text in the box]  
       </pre
@@ -397,7 +397,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram23" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1>This is the text in the box]  
       </pre
@@ -405,7 +405,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram24" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart LR
     id1>This is the text in the box]
       </pre
@@ -440,7 +440,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram26" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart LR
     id1{This is the text in the box}
       </pre
@@ -448,7 +448,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram27" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1{This is the text in the box}
       </pre
@@ -456,7 +456,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram28" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart LR
     id1{This is the text in the box}
       </pre
@@ -491,7 +491,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram31" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1{{This is the text in the box}}
       </pre
@@ -499,7 +499,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram32" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart LR
     id1{{This is the text in the box}}
       </pre
@@ -534,7 +534,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram34" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart TD
     id1[/This is the text in the box/]  
       </pre
@@ -542,7 +542,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram35" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart TD
     id1[/This is the text in the box/] 
       </pre
@@ -550,7 +550,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram36" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart TD
     id1[/This is the text in the box/]
       </pre
@@ -585,7 +585,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram38" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart TD
     id1[\This is the text in the box\]
       </pre
@@ -593,7 +593,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram39" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart TD
     id1[\This is the text in the box\]
       </pre
@@ -601,7 +601,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram40" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart TD
     id1[\This is the text in the box\]
 
@@ -637,7 +637,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram42" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart TD
     A[/Christmas\]
       </pre
@@ -645,7 +645,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram43" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart TD
     A[/Christmas\]
       </pre
@@ -653,7 +653,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram44" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart TD
     A[/Christmas\]
       </pre
@@ -688,7 +688,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram46" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart TD
     A[\Christmas/]
       </pre
@@ -696,7 +696,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram47" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart TD
     A[\Christmas/]
       </pre
@@ -704,7 +704,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram48" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart TD
     A[\Christmas/]  
       </pre
@@ -739,7 +739,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram50" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart LR
     id1(This is the text in the box)
       </pre
@@ -747,7 +747,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram51" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1(This is the text in the box)
       </pre
@@ -755,7 +755,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram52" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart LR
     id1(This is the text in the box) 
       </pre
@@ -790,7 +790,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram54" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart LR
     id1[This is the text in the box]
       </pre
@@ -798,7 +798,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram55" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1[This is the text in the box]
       </pre
@@ -806,7 +806,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram56" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart LR
     id1[This is the text in the box]
       </pre
@@ -822,12 +822,12 @@ flowchart LR
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      import { layouts } from './mermaid-layout-elk.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
       mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {};
 
       mermaid.initialize({
-        handdrawn: false,
+        handDrawn: false,
         mergeEdges: true,
         layout: 'dagre',
         flowchart: { titleTopMargin: 10 },

cypress/platform/flowchart-sate.html

@@ -125,7 +125,7 @@
         </th>
         <td>
           <pre id="diagram1" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 stateDiagram-v2
     stateA
 
@@ -134,7 +134,7 @@ stateDiagram-v2
         </td>
         <td>
           <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 flowchart LR
     id1[[This is the text in the box]]
 
@@ -147,12 +147,12 @@ flowchart LR
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      import { layouts } from './mermaid-layout-elk.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
       mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {};
 
       mermaid.initialize({
-        handdrawn: false,
+        handDrawn: false,
         mergeEdges: true,
         layout: 'dagre',
         flowchart: { titleTopMargin: 10 },

cypress/platform/knsv2.html

@@ -36,12 +36,15 @@
         font-family: 'Arial';
         /* font-size: 18px !important; */
       }
+
       h1 {
         color: grey;
       }
+
       .mermaid2 {
         display: none;
       }
+
       .mermaid svg {
         /* font-size: 18px !important; */
 
@@ -54,6 +57,7 @@
           10px 10px;
         background-repeat: repeat; */
       }
+
       .malware {
         position: fixed;
         bottom: 0;
@@ -69,32 +73,79 @@
         font-family: monospace;
         font-size: 72px;
       }
+
       /* tspan {
               font-size: 6px !important;
             } */
     </style>
   </head>
+
   <body>
-    <pre id="diagram" class="mermaid">
+    <div class="flex">
+      <pre id="diagram" class="mermaid">
+---
+  title: hello2
+  config:
+    look: handDrawn
+    layout: elk
+    elk:
+        nodePlacementStrategy: BRANDES_KOEPF
+---
+flowchart LR
+  A[Start] --Some text--> B(Continue)
+  B --> C{Evaluate}
+  C -- One --> D[Option 1]
+  C -- Two --> E[Option 2]
+  C -- Three --> F[fa:fa-car Option 3]
+
+
+
+</pre
+      >
+      <pre id="diagram" class="mermaid2">
+---
+config:
+  look: handdrawn
+  flowchart:
+    htmlLabels: true
+---
 flowchart
-   a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
-        a_a --> c --> d_d --> c_c
-        classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
-        class a_a apa;
-        click a_a "http://www.aftonbladet.se" "bookmark"
-        click c_c callback "new tooltip"
-      </pre
-    >
-    <pre id="diagram2" class="mermaid">
+      A[I am a long text, where do I go??? handdrawn - true]
+</pre
+      >
+    </div>
+    <div class="flex">
+      <pre id="diagram" class="mermaid2">
+---
+config:
+  flowchart:
+    htmlLabels: false
+---
+flowchart
+      A[I am a long text, where do I go??? classic - false]
+</pre
+      >
+      <pre id="diagram" class="mermaid2">
+---
+config:
+  flowchart:
+    htmlLabels: true
+---
+flowchart
+      A[I am a long text, where do I go??? classic - true]
+</pre
+      >
+    </div>
+    <pre id="diagram2" class="mermaid2">
 flowchart LR
     id1(Start)-->id2(Stop)
     style id1 fill:#f9f,stroke:#333,stroke-width:4px
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 
-      
+
     </pre>
 
-    <pre id="diagram3" class="mermaid">
+    <pre id="diagram3" class="mermaid2">
       flowchart LR
     A:::foo & B:::bar --> C:::foobar
     classDef foo stroke:#f00
@@ -105,9 +156,9 @@ flowchart LR
 
     </pre>
 
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
       stateDiagram
-    A:::foo 
+    A:::foo
     B:::bar --> C:::foobar
     classDef foo stroke:#f00
     classDef bar stroke:#0f0
@@ -117,8 +168,8 @@ flowchart LR
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      // import { layouts } from './mermaid-layout-elk.esm.mjs';
-      // mermaid.registerLayoutLoaders(layouts);
+      import layouts from './mermaid-layout-elk.esm.mjs';
+      mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {
         console.error('Mermaid error: ', err);
       };
@@ -127,8 +178,8 @@ flowchart LR
       };
       mermaid.initialize({
         // theme: 'base',
-        // handdrawnSeed: 12,
-        // look: 'handdrawn',
+        // handDrawnSeed: 12,
+        // look: 'handDrawn',
         // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
         // layout: 'dagre',
         // layout: 'elk',

cypress/platform/state-refactor.html

@@ -115,7 +115,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 stateDiagram-v2
     stateId
 
@@ -123,7 +123,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
     stateId
 
@@ -131,7 +131,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
 stateDiagram-v2
     stateId
 
@@ -162,21 +162,21 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 stateDiagram-v2
     state "This is a state description" as s3
       </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
     state "This is a state description" as s4
       </pre>
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
 stateDiagram-v2
     state "This is a state description" as s5
       </pre>
@@ -206,7 +206,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 stateDiagram-v2
     s22 : This is a state description
 
@@ -214,7 +214,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
     s23 : This is a state description
 
@@ -222,7 +222,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
 stateDiagram-v2
     s24 : This is a state description
 
@@ -258,7 +258,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 
    stateDiagram-v2
     s41 --> s42
@@ -268,7 +268,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
     s51 --> s52
 
@@ -277,7 +277,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
 stateDiagram-v2
     s61 --> s62
 
@@ -316,7 +316,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 
    stateDiagram-v2
     a3 --> a4: A transition
@@ -326,7 +326,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
     a5 --> a6: A transition
 
@@ -335,7 +335,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
 stateDiagram-v2
    a7 --> a8: A transition
 
@@ -376,7 +376,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 
    stateDiagram-v2
        [*] --> test
@@ -387,7 +387,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
        [*] --> test
     test --> [*]
@@ -397,7 +397,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
 stateDiagram-v2
       [*] --> test
     test --> [*]
@@ -445,7 +445,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 
    stateDiagram-v2
        [*] --> First
@@ -459,7 +459,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
        [*] --> First
     state First {
@@ -472,7 +472,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
 stateDiagram-v2
       [*] --> First
     state First {
@@ -547,7 +547,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 
    stateDiagram-v2
     [*] --> Level1
@@ -572,7 +572,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
  stateDiagram-v2
     [*] --> Level1
 
@@ -595,7 +595,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
  stateDiagram-v2
     [*] --> Level1
 
@@ -676,7 +676,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 
    stateDiagram-v2
    [*] --> B1
@@ -699,7 +699,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
  stateDiagram-v2
   [*] --> B1
     B1 --> B2
@@ -722,7 +722,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
  stateDiagram-v2
 [*] --> B1
     B1 --> B2
@@ -784,7 +784,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 
    stateDiagram-v2
    state if_state <<choice>>
@@ -796,7 +796,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
  stateDiagram-v2
    state if_state <<choice>>
     [*] --> IsPositive
@@ -807,7 +807,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
  stateDiagram-v2
  state if_state <<choice>>
     [*] --> IsPositive
@@ -865,7 +865,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
    stateDiagram-v2
     state fork_state <<fork>>
       [*] --> fork_state
@@ -882,7 +882,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
    stateDiagram-v2
     state fork_state <<fork>>
       [*] --> fork_state
@@ -899,7 +899,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
    stateDiagram-v2
     state fork_state <<fork>>
       [*] --> fork_state
@@ -955,7 +955,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
    stateDiagram-v2
      TN3: The state with a note
         note right of TN3
@@ -968,7 +968,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
    stateDiagram-v2
      TN5: The state with a note
         note right of TN5
@@ -982,7 +982,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
    stateDiagram-v2
      TN7: The state with a note
         note right of TN7
@@ -1052,7 +1052,7 @@ state Active {
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
      stateDiagram-v2
     [*] --> Active
 
@@ -1073,7 +1073,7 @@ state Active {
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
      stateDiagram-v2
     [*] --> Active
 
@@ -1095,7 +1095,7 @@ state Active {
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
      stateDiagram-v2
     [*] --> Active
 
@@ -1159,7 +1159,7 @@ direction LR
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
      stateDiagram-v2
    direction LR
     [*] --> D1
@@ -1174,7 +1174,7 @@ direction LR
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
      stateDiagram-v2
     direction LR
     [*] --> D1
@@ -1189,7 +1189,7 @@ direction LR
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
      stateDiagram-v2
     direction LR
     [*] --> D1
@@ -1222,14 +1222,14 @@ direction LR
 
   <script type="module">
     import mermaid from './mermaid.esm.mjs';
-    import { layouts } from './mermaid-layout-elk.esm.mjs';
+    import layouts from './mermaid-layout-elk.esm.mjs';
     mermaid.registerLayoutLoaders(layouts);
     mermaid.parseError = function (err, hash) {
 
     };
 
     mermaid.initialize({
-      handdrawn: false,
+      handDrawn: false,
       mergeEdges: true,
       layout: 'dagre',
       flowchart: { titleTopMargin: 10 },
@@ -1254,7 +1254,7 @@ direction LR
 
     let coll = document.getElementsByClassName("collapsible");
     for (const element of coll) {
-  element.addEventListener("click", function () {
+      element.addEventListener("click", function () {
         this.classList.toggle("active");
         let content = this.nextElementSibling;
         if (content.style.maxHeight) {
@@ -1268,4 +1268,4 @@ direction LR
   </script>
 </body>
 
-</html>
+</html>

cypress/platform/viewer.js

@@ -1,7 +1,7 @@
-import mermaid from './mermaid.esm.mjs';
-// import flowchartELK from './mermaid-flowchart-elk.esm.mjs';
 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';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));
@@ -9,7 +9,6 @@ function b64ToUtf8(str) {
 
 // Adds a rendered flag to window when rendering is done, so cypress can wait for it.
 function markRendered() {
-  console.log('Done rendering');
   if (window.Cypress) {
     window.rendered = true;
   }
@@ -47,8 +46,9 @@ const contentLoaded = async function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    // await mermaid.registerExternalDiagrams([externalExample, zenUml, flowchartELK]);
     await mermaid.registerExternalDiagrams([externalExample, zenUml]);
+
+    mermaid.registerLayoutLoaders(layouts);
     mermaid.initialize(graphObj.mermaid);
     await mermaid.run();
   }
@@ -134,7 +134,7 @@ if (typeof document !== 'undefined') {
   window.addEventListener(
     'load',
     function () {
-      if (this.location.href.match('xss.html')) {
+      if (/xss.html/.exec(this.location.href)) {
         this.console.log('Using api');
         void contentLoadedApi().finally(markRendered);
       } else {

cypress/support/e2e.js

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

cypress/tsconfig.json

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

demos/sequence.html

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

docker-compose.yml

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

docs/community/contributing.md

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

docs/config/setup/README.md

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

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

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

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

@@ -0,0 +1,49 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.DetailedError.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.DetailedError.md).
+
+# Interface: DetailedError
+
+[mermaid](../modules/mermaid.md).DetailedError
+
+## Properties
+
+### error
+
+• `Optional` **error**: `any`
+
+#### Defined in
+
+[packages/mermaid/src/utils.ts: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

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

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

@@ -0,0 +1,43 @@
+> **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

@@ -0,0 +1,39 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.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

@@ -0,0 +1,364 @@
+> **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

@@ -0,0 +1,520 @@
+> **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.ParseOptions.md

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

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

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

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

@@ -0,0 +1,19 @@
+> **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.RenderResult.md

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

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

@@ -0,0 +1,71 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.RunOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.RunOptions.md).
+
+# Interface: RunOptions
+
+[mermaid](../modules/mermaid.md).RunOptions
+
+## Properties
+
+### nodes
+
+• `Optional` **nodes**: `ArrayLike`<`HTMLElement`>
+
+The nodes to render. If this is set, `querySelector` will be ignored.
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts: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.ParseResult.md

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

docs/config/setup/modules/config.md

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

docs/config/setup/modules/defaultConfig.md

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

docs/config/setup/modules/mermaid.md

@@ -0,0 +1,90 @@
+> **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

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

docs/config/theming.md

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

docs/config/usage.md

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

docs/ecosystem/integrations-community.md

@@ -42,6 +42,8 @@ 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)
@@ -54,8 +56,10 @@ 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)
@@ -131,7 +135,7 @@ Communication tools and platforms
 ### Wikis
 
 - [DokuWiki](https://dokuwiki.org)
-  - [ComboStrap](https://combostrap.com/mermaid)
+  - [ComboStrap](https://combostrap.com/utility/create-diagram-with-mermaid-vh3ab9yj)
   - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
 - [Foswiki](https://foswiki.org)
   - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
@@ -206,6 +210,7 @@ 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

@@ -12,7 +12,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 
 <br />
 
-<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+<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>
 
 ## About
 

docs/intro/syntax-reference.md

@@ -83,3 +83,139 @@ Allows for the limited reconfiguration of a diagram just before it is rendered.
 ### [Theme Manipulation](../config/theming.md)
 
 An application of using Directives to change [Themes](../config/theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.
+
+### Layout and look
+
+We've restructured how Mermaid renders diagrams, enabling new features like selecting layout and look. **Currently, this is supported for flowcharts and state diagrams**, with plans to extend support to all diagram types.
+
+### Selecting Diagram Looks
+
+Mermaid offers a variety of styles or “looks” for your diagrams, allowing you to tailor the visual appearance to match your specific needs or preferences. Whether you prefer a hand-drawn or classic style, you can easily customize your diagrams.
+
+**Available Looks:**
+
+```
+•	Hand-Drawn Look: For a more personal, creative touch, the hand-drawn look brings a sketch-like quality to your diagrams. This style is perfect for informal settings or when you want to add a bit of personality to your diagrams.
+•	Classic Look: If you prefer the traditional Mermaid style, the classic look maintains the original appearance that many users are familiar with. It’s great for consistency across projects or when you want to keep the familiar aesthetic.
+```
+
+**How to Select a Look:**
+
+You can select a look by adding the look parameter in the metadata section of your Mermaid diagram code. Here’s an example:
+
+```mermaid-example
+---
+config:
+  look: handDrawn
+  theme: neutral
+---
+flowchart LR
+  A[Start] --> B{Decision}
+  B -->|Yes| C[Continue]
+  B -->|No| D[Stop]
+```
+
+```mermaid
+---
+config:
+  look: handDrawn
+  theme: neutral
+---
+flowchart LR
+  A[Start] --> B{Decision}
+  B -->|Yes| C[Continue]
+  B -->|No| D[Stop]
+```
+
+#### Selecting Layout Algorithms
+
+In addition to customizing the look of your diagrams, Mermaid Chart now allows you to choose different layout algorithms to better organize and present your diagrams, especially when dealing with more complex structures. The layout algorithm dictates how nodes and edges are arranged on the page.
+
+#### Supported Layout Algorithms:
+
+```
+•	Dagre (default): This is the classic layout algorithm that has been used in Mermaid for a long time. It provides a good balance of simplicity and visual clarity, making it ideal for most diagrams.
+•	ELK: For those who need more sophisticated layout capabilities, especially when working with large or intricate diagrams, the ELK (Eclipse Layout Kernel) layout offers advanced options. It provides a more optimized arrangement, potentially reducing overlapping and improving readability. This is not included out the box but needs to be added when integrating mermaid for sites/applications that want to have elk support.
+```
+
+#### How to Select a Layout Algorithm:
+
+You can specify the layout algorithm directly in the metadata section of your Mermaid diagram code. Here’s an example:
+
+```mermaid-example
+---
+config:
+  layout: elk
+  look: handDrawn
+  theme: dark
+---
+flowchart TB
+  A[Start] --> B{Decision}
+  B -->|Yes| C[Continue]
+  B -->|No| D[Stop]
+```
+
+```mermaid
+---
+config:
+  layout: elk
+  look: handDrawn
+  theme: dark
+---
+flowchart TB
+  A[Start] --> B{Decision}
+  B -->|Yes| C[Continue]
+  B -->|No| D[Stop]
+```
+
+In this example, the `layout: elk` line configures the diagram to use the ELK layout algorithm, along with the hand drawn look and forest theme.
+
+#### Customizing ELK Layout:
+
+When using the ELK layout, you can further refine the diagram’s configuration, such as how nodes are placed and whether parallel edges should be combined:
+
+- To combine parallel edges, use mergeEdges: true | false.
+- To configure node placement, use nodePlacementStrategy with the following options:
+  - SIMPLE
+  - NETWORK_SIMPLEX
+  - LINEAR_SEGMENTS
+  - BRANDES_KOEPF (default)
+
+**Example configuration:**
+
+```
+---
+config:
+  layout: elk
+  elk:
+    mergeEdges: true
+    nodePlacementStrategy: LINEAR_SEGMENTS
+---
+flowchart LR
+  A[Start] --> B{Choose Path}
+  B -->|Option 1| C[Path 1]
+  B -->|Option 2| D[Path 2]
+
+#### Using Dagre Layout with Classic Look:
+```
+
+Another example:
+
+```
+---
+config:
+  layout: dagre
+  look: classic
+  theme: default
+---
+
+flowchart LR
+A[Start] --> B{Choose Path}
+B -->|Option 1| C[Path 1]
+B -->|Option 2| D[Path 2]
+
+```
+
+These options give you the flexibility to create diagrams that not only look great but are also arranged to best suit your data’s structure and flow.
+
+When integrating Mermaid, you can include look and layout configuration with the initialize call. This is also where you add the loading of elk.

docs/news/blog.md

@@ -6,6 +6,48 @@
 
 # Blog
 
+## [Mermaid v11 is out!](https://www.mermaidchart.com/blog/posts/mermaid-v11/)
+
+23 August 2024 · 2 mins
+
+Mermaid v11 introduces advanced layout options, new diagram types, and enhanced customization features, thanks to the incredible contributions from our community.
+
+## [Mermaid Innovation - Introducing New Looks for Mermaid Diagrams](https://www.mermaidchart.com/blog/posts/mermaid-innovation-introducing-new-looks-for-mermaid-diagrams/)
+
+6 August 2024 ·3 mins
+
+Discover the fresh new and unique Neo and Hand-Drawn looks for Mermaid Diagrams, while still offering the classic look you love.
+
+## [The Mermaid Chart Plugin for Jira: A How-To User Guide](https://www.mermaidchart.com/blog/posts/the-mermaid-chart-plugin-for-jira-a-how-to-user-guide/)
+
+31 July 2024 · 5 mins
+
+The Mermaid Chart plugin for Jira has arrived!
+
+## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://www.mermaidchart.com/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
+
+22 July 2024 · 5 mins
+
+The Mermaid AI chat interface
+
+## [How to Make a Sequence Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
+
+8 July 2024 · 6 mins
+
+Sequence diagrams are important for communicating complex systems in a clear and concise manner.
+
+## [How to Use the New “Comments” Feature in Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
+
+2 July 2024 · 3 mins
+
+How to Use the New Comments Feature in Mermaid Chart
+
+## [How to Use the official Mermaid Chart for Confluence app](https://www.mermaidchart.com/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
+
+21 May 2024 · 4 mins
+
+It doesn’t matter if you’re a data enthusiast, software engineer, or visual storyteller; our Confluence app can allow you to embed Mermaid Chart diagrams — and dynamically edit them — within your Confluence pages.
+
 ## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)
 
 7 May 2024 · 5 mins

docs/syntax/entityRelationshipDiagram.md

@@ -136,7 +136,7 @@ Cardinality is a property that describes how many elements of another entity can
 |      1+      |      1+       | One or more  |
 | zero or more | zero or more  | Zero or more |
 | zero or many | zero or many  | Zero or more |
-|   many(0)    |    many(1)    | Zero or more |
+|   many(0)    |    many(0)    | Zero or more |
 |      0+      |      0+       | Zero or more |
 |   only one   |   only one    | Exactly one  |
 |      1       |       1       | Exactly one  |

docs/syntax/gantt.md

@@ -172,7 +172,7 @@ The `title` is an _optional_ string to be displayed at the top of the Gantt char
 The `excludes` is an _optional_ attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".
 These date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of 'skipped' days will be added to the end of the task to ensure the duration is as specified in the code.
 
-#### Weekend (v\<MERMAID_RELEASE_VERSION>+)
+#### Weekend (v\11.0.0+)
 
 When excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday.
 To define the weekend start day, there is an _optional_ attribute `weekend` that can be added in a new line followed by either `friday` or `saturday`.

docs/syntax/gitgraph.md

@@ -918,7 +918,7 @@ Usage example:
        commit
 ```
 
-### Bottom to Top (`BT:`) (v\<MERMAID_RELEASE_VERSION>+)
+### Bottom to Top (`BT:`) (v11.0.0+)
 
 In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.
 

docs/syntax/packet.md

@@ -4,7 +4,7 @@
 >
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/packet.md](../../packages/mermaid/src/docs/syntax/packet.md).
 
-# Packet Diagram (v\<MERMAID_RELEASE_VERSION>+)
+# Packet Diagram (v11.0.0+)
 
 ## Introduction
 
@@ -12,7 +12,7 @@ A packet diagram is a visual representation used to illustrate the structure and
 
 ## Usage
 
-This diagram type is particularly useful for network engineers, educators, and students who require a clear and concise way to represent the structure of network packets.
+This diagram type is particularly useful for developers, network engineers, educators, and students who require a clear and concise way to represent the structure of network packets.
 
 ## Syntax
 

docs/syntax/sequenceDiagram.md

@@ -206,18 +206,20 @@ Messages can be of two displayed either solid or with a dotted line.
 [Actor][Arrow][Actor]:Message text
 ```
 
-There are six types of arrows currently supported:
+There are ten types of arrows currently supported:
 
-| Type   | Description                                      |
-| ------ | ------------------------------------------------ |
-| `->`   | Solid line without arrow                         |
-| `-->`  | Dotted line without arrow                        |
-| `->>`  | Solid line with arrowhead                        |
-| `-->>` | Dotted line with arrowhead                       |
-| `-x`   | Solid line with a cross at the end               |
-| `--x`  | Dotted line with a cross at the end.             |
-| `-)`   | Solid line with an open arrow at the end (async) |
-| `--)`  | Dotted line with a open arrow at the end (async) |
+| Type     | Description                                          |
+| -------- | ---------------------------------------------------- |
+| `->`     | Solid line without arrow                             |
+| `-->`    | Dotted line without arrow                            |
+| `->>`    | Solid line with arrowhead                            |
+| `-->>`   | Dotted line with arrowhead                           |
+| `<<->>`  | Solid line with bidirectional arrowheads (v11.0.0+)  |
+| `<<-->>` | Dotted line with bidirectional arrowheads (v11.0.0+) |
+| `-x`     | Solid line with a cross at the end                   |
+| `--x`    | Dotted line with a cross at the end.                 |
+| `-)`     | Solid line with an open arrow at the end (async)     |
+| `--)`    | Dotted line with a open arrow at the end (async)     |
 
 ## Activations
 
@@ -304,17 +306,35 @@ sequenceDiagram
     Note over Alice,John: A typical interaction
 ```
 
-It is also possible to add a line break (applies to text input in general):
+## Line breaks
+
+Line break can be added to Note and Message:
 
 ```mermaid-example
 sequenceDiagram
-    Alice->John: Hello John, how are you?
+    Alice->John: Hello John,<br/>how are you?
     Note over Alice,John: A typical interaction<br/>But now in two lines
 ```
 
 ```mermaid
 sequenceDiagram
-    Alice->John: Hello John, how are you?
+    Alice->John: Hello John,<br/>how are you?
+    Note over Alice,John: A typical interaction<br/>But now in two lines
+```
+
+Line breaks in Actor names requires aliases:
+
+```mermaid-example
+sequenceDiagram
+    participant Alice as Alice<br/>Johnson
+    Alice->John: Hello John,<br/>how are you?
+    Note over Alice,John: A typical interaction<br/>But now in two lines
+```
+
+```mermaid
+sequenceDiagram
+    participant Alice as Alice<br/>Johnson
+    Alice->John: Hello John,<br/>how are you?
     Note over Alice,John: A typical interaction<br/>But now in two lines
 ```
 

docs/syntax/stateDiagram.md

@@ -483,8 +483,8 @@ a _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by
 
 Here is an example of a classDef with just one property-value pair:
 
-```
-    classDef movement font-style:italic;
+```txt
+classDef movement font-style:italic;
 ```
 
 where
@@ -496,8 +496,8 @@ If you want to have more than one _property-value pair_ then you put a comma (`,
 
 Here is an example with three property-value pairs:
 
-```
-    classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+```txt
+classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
 ```
 
 where
@@ -522,7 +522,7 @@ There are two ways to apply a `classDef` style to a state:
 A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:
 
 ```txt
-    class [one or more state names, separated by commas] [name of a style defined with classDef]
+class [one or more state names, separated by commas] [name of a style defined with classDef]
 ```
 
 Here is an example applying the `badBadEvent` style to a state named `Crash`: