Merge branch 'develop' of https://github.com/mermaid-js/mermaid into xychart

* 'develop' of https://github.com/mermaid-js/mermaid: (546 commits)
  rebuild
  chore: Use string templates
  chore: Update docs
  chore: Fix docs
  chore: Add argos token to cypress config.
  chore: Remove cy.get('svg') calls
  chore: fix Argos parallel
  chore: Support local screenshot testing without applitools or argos
  chore: Skip checking drupal links
  chore: Remove reference screenshot generation from E2E
  chore: Remove cytoscape patch.
  chore(argos): disable matchImageSnapshot
  chore(argos): put parallel mode only when necessary
  chore(argos): setup parallel mode
  chore: setup Argos Visual Testing on E2E
  Fixed linters
  Added more specs for elk detector
  Fixed wrong elk detector, check only beginning of the line for diagram keywords
  Removed unused patch
  Fix cytoscape patch
  ...

.build/common.ts

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

.build/jisonTransformer.ts

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

.build/types.ts

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

.cspell/code-terms.txt

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

.cspell/contributors.txt

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

.cspell/libraries.txt

@@ -54,16 +54,13 @@ presetAttributify
 pyplot
 redmine
 rehype
-roughjs
 rscratch
-shiki
 sparkline
 sphinxcontrib
 ssim
 stylis
 Swimm
 tsbuildinfo
-tseslint
 Tuleap
 Typora
 unocss

.cspell/mermaid-terms.txt

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

.cspell/misc-terms.txt

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

.esbuild/build.ts

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

.esbuild/jisonPlugin.ts

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

.esbuild/server.ts

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

.esbuild/util.ts

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

.eslintignore

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

.eslintrc.cjs

@@ -0,0 +1,190 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    'jest/globals': true,
+    node: true,
+  },
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true,
+    },
+    tsconfigRootDir: __dirname,
+    sourceType: 'module',
+    ecmaVersion: 2022,
+    allowAutomaticSingleRunInference: true,
+    project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
+    parser: '@typescript-eslint/parser',
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:json/recommended',
+    'plugin:markdown/recommended-legacy',
+    'plugin:@cspell/recommended',
+    'prettier',
+  ],
+  plugins: [
+    '@typescript-eslint',
+    'no-only-tests',
+    'html',
+    'jest',
+    'jsdoc',
+    'json',
+    '@cspell',
+    'lodash',
+    'unicorn',
+  ],
+  ignorePatterns: [
+    // this file is automatically generated by `pnpm run --filter mermaid types:build-config`
+    'packages/mermaid/src/config.type.ts',
+  ],
+  rules: {
+    curly: 'error',
+    'no-console': 'error',
+    'no-prototype-builtins': 'off',
+    'no-unused-vars': 'off',
+    'cypress/no-async-tests': 'off',
+    '@typescript-eslint/consistent-type-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/no-floating-promises': 'error',
+    '@typescript-eslint/no-misused-promises': 'error',
+    '@typescript-eslint/no-unused-vars': 'warn',
+    '@typescript-eslint/consistent-type-definitions': 'error',
+    '@typescript-eslint/ban-ts-comment': [
+      'error',
+      {
+        'ts-expect-error': 'allow-with-description',
+        'ts-ignore': 'allow-with-description',
+        'ts-nocheck': 'allow-with-description',
+        'ts-check': 'allow-with-description',
+        minimumDescriptionLength: 10,
+      },
+    ],
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        selector: 'typeLike',
+        format: ['PascalCase'],
+        custom: {
+          regex: '^I[A-Z]',
+          match: false,
+        },
+      },
+    ],
+    'json/*': ['error', 'allowComments'],
+    '@cspell/spellchecker': [
+      'error',
+      {
+        checkIdentifiers: true,
+        checkStrings: true,
+        checkStringTemplates: true,
+      },
+    ],
+    'no-empty': [
+      'error',
+      {
+        allowEmptyCatch: true,
+      },
+    ],
+    'no-only-tests/no-only-tests': 'error',
+    'lodash/import-scope': ['error', 'method'],
+    'unicorn/better-regex': 'error',
+    'unicorn/no-abusive-eslint-disable': 'error',
+    'unicorn/no-array-push-push': 'error',
+    'unicorn/no-for-loop': 'error',
+    'unicorn/no-instanceof-array': 'error',
+    'unicorn/no-typeof-undefined': 'error',
+    'unicorn/no-unnecessary-await': 'error',
+    'unicorn/no-unsafe-regex': 'warn',
+    'unicorn/no-useless-promise-resolve-reject': 'error',
+    'unicorn/prefer-array-find': 'error',
+    'unicorn/prefer-array-flat-map': 'error',
+    'unicorn/prefer-array-index-of': 'error',
+    'unicorn/prefer-array-some': 'error',
+    'unicorn/prefer-default-parameters': 'error',
+    'unicorn/prefer-includes': 'error',
+    'unicorn/prefer-negative-index': 'error',
+    'unicorn/prefer-object-from-entries': 'error',
+    'unicorn/prefer-string-starts-ends-with': 'error',
+    'unicorn/prefer-string-trim-start-end': 'error',
+    'unicorn/string-content': 'error',
+    'unicorn/prefer-spread': 'error',
+    'unicorn/no-lonely-if': 'error',
+  },
+  overrides: [
+    {
+      files: ['cypress/**', 'demos/**'],
+      rules: {
+        'no-console': 'off',
+      },
+    },
+    {
+      files: ['*.{js,jsx,mjs,cjs}'],
+      extends: ['plugin:jsdoc/recommended'],
+      rules: {
+        'jsdoc/check-indentation': 'off',
+        'jsdoc/check-alignment': 'off',
+        'jsdoc/check-line-alignment': 'off',
+        'jsdoc/multiline-blocks': 'off',
+        'jsdoc/newline-after-description': 'off',
+        'jsdoc/tag-lines': 'off',
+        'jsdoc/require-param-description': 'off',
+        'jsdoc/require-param-type': 'off',
+        'jsdoc/require-returns': 'off',
+        'jsdoc/require-returns-description': 'off',
+      },
+    },
+    {
+      files: ['*.{ts,tsx}'],
+      plugins: ['tsdoc'],
+      rules: {
+        'no-restricted-syntax': [
+          'error',
+          {
+            selector: 'TSEnumDeclaration',
+            message:
+              'Prefer using TypeScript union types over TypeScript enum, since TypeScript enums have a bunch of issues, see https://dev.to/dvddpl/whats-the-problem-with-typescript-enums-2okj',
+          },
+        ],
+        'tsdoc/syntax': 'error',
+      },
+    },
+    {
+      files: ['*.spec.{ts,js}', 'cypress/**', 'demos/**', '**/docs/**'],
+      rules: {
+        'jsdoc/require-jsdoc': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+      },
+    },
+    {
+      files: ['*.spec.{ts,js}', 'tests/**', 'cypress/**/*.js'],
+      rules: {
+        '@cspell/spellchecker': [
+          'error',
+          {
+            checkIdentifiers: false,
+            checkStrings: false,
+            checkStringTemplates: false,
+          },
+        ],
+      },
+    },
+    {
+      files: ['*.html', '*.md', '**/*.md/*'],
+      rules: {
+        'no-var': 'error',
+        'no-undef': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+        '@typescript-eslint/no-floating-promises': 'off',
+        '@typescript-eslint/no-misused-promises': 'off',
+      },
+      parserOptions: {
+        project: null,
+      },
+    },
+  ],
+};

.github/lychee.toml

@@ -44,7 +44,7 @@ exclude = [
 "https://chromewebstore.google.com",
 
 # Drupal 403
-"https://(www.)?drupal.org"
+"https://www.drupal.org"
 ]
 
 # Exclude all private IPs from checking.

.gitignore

@@ -35,7 +35,7 @@ cypress/snapshots/
 .tsbuildinfo
 tsconfig.tsbuildinfo
 
-#knsv*.html
+knsv*.html
 local*.html
 stats/
 

.prettierignore

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

.vite/build.ts

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

.vite/jsonSchemaPlugin.ts

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

.vite/server.ts

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

cypress/helpers/util.ts

@@ -35,7 +35,7 @@ export const mermaidUrl = (
   };
   const objStr: string = JSON.stringify(codeObject);
   let url = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`;
-  if (api && typeof graphStr === 'string') {
+  if (api) {
     url = `http://localhost:9000/xss.html?graph=${graphStr}`;
   }
 
@@ -54,15 +54,16 @@ export const imgSnapshotTest = (
 ): void => {
   const options: CypressMermaidConfig = {
     ..._options,
-    fontFamily: _options.fontFamily ?? 'courier',
+    fontFamily: _options.fontFamily || 'courier',
     // @ts-ignore TODO: Fix type of fontSize
-    fontSize: _options.fontSize ?? '16px',
+    fontSize: _options.fontSize || '16px',
     sequence: {
-      ...(_options.sequence ?? {}),
+      ...(_options.sequence || {}),
       actorFontFamily: 'courier',
-      noteFontFamily: _options.sequence?.noteFontFamily
-        ? _options.sequence.noteFontFamily
-        : 'courier',
+      noteFontFamily:
+        _options.sequence && _options.sequence.noteFontFamily
+          ? _options.sequence.noteFontFamily
+          : 'courier',
       messageFontFamily: 'courier',
     },
   };
@@ -94,10 +95,10 @@ export const openURLAndVerifyRendering = (
   options: CypressMermaidConfig,
   validation?: any
 ): void => {
-  const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
+  const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   cy.visit(url);
-  // cy.window().should('have.property', 'rendered', true);
+  cy.window().should('have.property', 'rendered', true);
   cy.get('svg').should('be.visible');
 
   if (validation) {

cypress/integration/rendering/appli.spec.js

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

cypress/integration/rendering/sequencediagram.spec.js

@@ -1,6 +1,8 @@
+// <reference types="Cypress" />
+
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
-describe('Sequence diagram', () => {
+context('Sequence diagram', () => {
   it('should render a sequence diagram with boxes', () => {
     renderGraph(
       `
@@ -242,7 +244,7 @@ describe('Sequence diagram', () => {
       `
     );
   });
-  describe('font settings', () => {
+  context('font settings', () => {
     it('should render different note fonts when configured', () => {
       imgSnapshotTest(
         `
@@ -339,7 +341,7 @@ describe('Sequence diagram', () => {
       );
     });
   });
-  describe('auth width scaling', () => {
+  context('auth width scaling', () => {
     it('should render long actor descriptions', () => {
       imgSnapshotTest(
         `
@@ -528,7 +530,7 @@ describe('Sequence diagram', () => {
       );
     });
   });
-  describe('background rects', () => {
+  context('background rects', () => {
     it('should render a single and nested rects', () => {
       imgSnapshotTest(
         `
@@ -808,7 +810,7 @@ describe('Sequence diagram', () => {
       );
     });
   });
-  describe('directives', () => {
+  context('directives', () => {
     it('should override config with directive settings', () => {
       imgSnapshotTest(
         `
@@ -840,7 +842,7 @@ describe('Sequence diagram', () => {
       );
     });
   });
-  describe('links', () => {
+  context('links', () => {
     it('should support actor links', () => {
       renderGraph(
         `
@@ -856,7 +858,7 @@ describe('Sequence diagram', () => {
       );
       cy.get('#actor0_popup').should((popupMenu) => {
         const style = popupMenu.attr('style');
-        // expect(style).to.undefined;
+        expect(style).to.undefined;
       });
       cy.get('#root-0').click();
       cy.get('#actor0_popup').should((popupMenu) => {
@@ -931,7 +933,7 @@ describe('Sequence diagram', () => {
       );
     });
   });
-  describe('svg size', () => {
+  context('svg size', () => {
     it('should render a sequence diagram when useMaxWidth is true (default)', () => {
       renderGraph(
         `
@@ -1010,7 +1012,7 @@ describe('Sequence diagram', () => {
       });
     });
   });
-  describe('render after error', () => {
+  context('render after error', () => {
     it('should render diagram after fixing destroy participant error', () => {
       cy.on('uncaught:exception', (err) => {
         return false;

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

@@ -542,43 +542,6 @@ stateDiagram-v2
         { logLevel: 0, fontFamily: 'courier' }
       );
     });
-    it(' can have styles applied ', () => {
-      imgSnapshotTest(
-        `
-stateDiagram-v2
-AState
-style AState fill:#636,border:1px solid red,color:white;
-        `,
-        { logLevel: 0, fontFamily: 'courier' }
-      );
-    });
-    it(' should let styles take preceedence over classes', () => {
-      imgSnapshotTest(
-        `
-stateDiagram-v2
-AState: Should NOT be white
-BState
-classDef exampleStyleClass fill:#fff,color: blue;
-class AState,BState exampleStyleClass
-style AState fill:#636,border:1px solid red,color:white;
-        `,
-        { logLevel: 0, fontFamily: 'courier' }
-      );
-    });
-    it(' should allow styles to take effect in stubgraphs', () => {
-      imgSnapshotTest(
-        `
-  stateDiagram
-    state roundWithTitle {
-      C: Black with white text
-    }
-    D: Black with white text
-
-    style C,D stroke:#00f, fill:black, color:white
-        `,
-        { logLevel: 0, fontFamily: 'courier' }
-      );
-    });
   });
   it('1433: should render a simple state diagram with a title', () => {
     imgSnapshotTest(

cypress/integration/rendering/xyChart.spec.js

@@ -1,18 +1,19 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('XY Chart', () => {
-  it('should render the simplest possible chart', () => {
-    imgSnapshotTest(
-      `
+  describe('single dataset', () => {
+    it('should render the simplest possible chart', () => {
+      imgSnapshotTest(
+        `
       xychart-beta
         line [10, 30, 20]
       `,
-      {}
-    );
-  });
-  it('Should render a complete chart', () => {
-    imgSnapshotTest(
-      `
+        {}
+      );
+    });
+    it('Should render a complete chart', () => {
+      imgSnapshotTest(
+        `
       xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
@@ -20,82 +21,68 @@ describe('XY Chart', () => {
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
         line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
       `,
-      {}
-    );
-  });
-  it('Should render a chart without title', () => {
-    imgSnapshotTest(
-      `
+        {}
+      );
+    });
+    it('Should render a chart without title', () => {
+      imgSnapshotTest(
+        `
       xychart-beta
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
         line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
       `,
-      {}
-    );
-  });
-  it('y-axis title not required', () => {
-    imgSnapshotTest(
-      `
+        {}
+      );
+    });
+    it('y-axis title not required', () => {
+      imgSnapshotTest(
+        `
       xychart-beta
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis 4000 --> 11000
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
         line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
       `,
-      {}
-    );
-  });
-  it('Should render a chart without y-axis with different range', () => {
-    imgSnapshotTest(
-      `
+        {}
+      );
+    });
+    it('Should render a chart without y-axis with different range', () => {
+      imgSnapshotTest(
+        `
       xychart-beta
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
         line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
       `,
-      {}
-    );
-  });
-  it('x axis title not required', () => {
-    imgSnapshotTest(
-      `
+        {}
+      );
+    });
+    it('x axis title not required', () => {
+      imgSnapshotTest(
+        `
       xychart-beta
         x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
         line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
       `,
-      {}
-    );
-  });
-  it('Multiple plots can be rendered', () => {
-    imgSnapshotTest(
-      `
-      xychart-beta
-        line [23, 46, 77, 34]
-        line [45, 32, 33, 12]
-        bar [87, 54, 99, 85]
-        line [78, 88, 22, 4]
-        line [22, 29, 75, 33]
-        bar [52, 96, 35, 10]
-      `,
-      {}
-    );
-  });
-  it('Decimals and negative numbers are supported', () => {
-    imgSnapshotTest(
-      `
+        {}
+      );
+    });
+    it('Decimals and negative numbers are supported', () => {
+      imgSnapshotTest(
+        `
       xychart-beta
         y-axis -2.4 --> 3.5
         line [+1.3, .6, 2.4, -.34]
       `,
-      {}
-    );
-  });
-  it('Render spark line with "plotReservedSpacePercent"', () => {
-    imgSnapshotTest(
-      `
+        {}
+      );
+    });
+    it('Render spark line with "plotReservedSpacePercent"', () => {
+      imgSnapshotTest(
+        `
       ---
       config:
         theme: dark
@@ -107,12 +94,12 @@ describe('XY Chart', () => {
       xychart-beta
         line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
       `,
-      {}
-    );
-  });
-  it('Render spark bar without displaying other property', () => {
-    imgSnapshotTest(
-      `
+        {}
+      );
+    });
+    it('Render spark bar without displaying other property', () => {
+      imgSnapshotTest(
+        `
       ---
       config:
         theme: dark
@@ -133,12 +120,12 @@ describe('XY Chart', () => {
       xychart-beta
         bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
       `,
-      {}
-    );
-  });
-  it('Should use all the config from directive', () => {
-    imgSnapshotTest(
-      `
+        {}
+      );
+    });
+    it('Should use all the config from directive', () => {
+      imgSnapshotTest(
+        `
       %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5},  "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60  }}}%%
       xychart-beta
         title "Sales Revenue"
@@ -147,12 +134,12 @@ describe('XY Chart', () => {
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
         line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
       `,
-      {}
-    );
-  });
-  it('Should use all the config from yaml', () => {
-    imgSnapshotTest(
-      `
+        {}
+      );
+    });
+    it('Should use all the config from yaml', () => {
+      imgSnapshotTest(
+        `
       ---
       config:
         theme: forest
@@ -187,12 +174,12 @@ describe('XY Chart', () => {
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
         line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
       `,
-      {}
-    );
-  });
-  it('Render with show axis title false', () => {
-    imgSnapshotTest(
-      `
+        {}
+      );
+    });
+    it('Render with show axis title false', () => {
+      imgSnapshotTest(
+        `
       ---
       config:
         xyChart:
@@ -208,12 +195,12 @@ describe('XY Chart', () => {
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
         line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
       `,
-      {}
-    );
-  });
-  it('Render with show axis label false', () => {
-    imgSnapshotTest(
-      `
+        {}
+      );
+    });
+    it('Render with show axis label false', () => {
+      imgSnapshotTest(
+        `
       ---
       config:
         xyChart:
@@ -229,12 +216,12 @@ describe('XY Chart', () => {
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
         line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
       `,
-      {}
-    );
-  });
-  it('Render with show axis tick false', () => {
-    imgSnapshotTest(
-      `
+        {}
+      );
+    });
+    it('Render with show axis tick false', () => {
+      imgSnapshotTest(
+        `
       ---
       config:
         xyChart:
@@ -250,12 +237,12 @@ describe('XY Chart', () => {
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
         line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
       `,
-      {}
-    );
-  });
-  it('Render with show axis line false', () => {
-    imgSnapshotTest(
-      `
+        {}
+      );
+    });
+    it('Render with show axis line false', () => {
+      imgSnapshotTest(
+        `
       ---
       config:
         xyChart:
@@ -271,12 +258,12 @@ describe('XY Chart', () => {
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
         line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
       `,
-      {}
-    );
-  });
-  it('Render all the theme color', () => {
-    imgSnapshotTest(
-      `
+        {}
+      );
+    });
+    it('Render all the theme color', () => {
+      imgSnapshotTest(
+        `
       ---
       config:
         themeVariables:
@@ -300,19 +287,110 @@ describe('XY Chart', () => {
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
         line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
       `,
-      {}
-    );
+        {}
+      );
+    });
   });
-  it('should use the correct distances between data points', () => {
-    imgSnapshotTest(
-      `
+
+  describe('multiple datasets', () => {
+    describe('vertical', () => {
+      it('should render bar diagram for 3 datasets', () => {
+        imgSnapshotTest(
+          `
       xychart-beta
-        x-axis 0 --> 2
-        line [0, 1, 0, 1]
-        bar [1, 0, 1, 0]
+      title "Basic xychart with multiple datasets"
+      x-axis "Relevant categories" [category1, "category 2", category3, category4]
+      y-axis Animals 0 --> 160
+      bar "dogs" [0, 20, 40, 30]
+      bar "cats" [20, 40, 0, 30]
+      bar "birds" [30, 60, 50, 30]
       `,
-      {}
-    );
-    cy.get('svg');
+          {}
+        );
+        cy.get('svg');
+      });
+
+      it('should render line diagram for 3 datasets', () => {
+        imgSnapshotTest(
+          `
+      xychart-beta
+      title "Basic xychart with multiple datasets"
+      x-axis "Relevant categories" [category1, "category 2", category3, category4]
+      y-axis Animals 0 --> 160
+      line "dogs" [0, 20, 40, 30]
+      line "cats" [20, 40, 0, 30]
+      line "birds" [30, 60, 50, 30]
+      `,
+          {}
+        );
+        cy.get('svg');
+      });
+
+      it('should render a mix of multiple bar and line plots', () => {
+        imgSnapshotTest(
+          `
+      xychart-beta
+        line [23, 46, 77, 34]
+        line [45, 32, 33, 12]
+        bar [87, 54, 99, 85]
+        line [78, 88, 22, 4]
+        line [22, 29, 75, 33]
+        bar [52, 96, 35, 10]
+      `,
+          {}
+        );
+        cy.get('svg');
+      });
+    });
+
+    describe('horizontal', () => {
+      it('should render bar diagram for 3 datasets', () => {
+        imgSnapshotTest(
+          `
+      xychart-beta horizontal
+      title "Basic xychart with multiple datasets"
+      x-axis "Relevant categories" [category1, "category 2", category3, category4]
+      y-axis Animals 0 --> 160
+      bar "dogs" [0, 20, 40, 30]
+      bar "cats" [20, 40, 0, 30]
+      bar "birds" [30, 60, 50, 30]
+      `,
+          {}
+        );
+        cy.get('svg');
+      });
+
+      it('should render line diagram for 3 datasets', () => {
+        imgSnapshotTest(
+          `
+      xychart-beta horizontal
+      title "Basic xychart with multiple datasets"
+      x-axis "Relevant categories" [category1, "category 2", category3, category4]
+      y-axis Animals 0 --> 160
+      line "dogs" [0, 20, 40, 30]
+      line "cats" [20, 40, 0, 30]
+      line "birds" [30, 60, 50, 30]
+      `,
+          {}
+        );
+        cy.get('svg');
+      });
+
+      it('should render a mix of multiple bar and line plots', () => {
+        imgSnapshotTest(
+          `
+      xychart-beta horizontal
+        line [23, 46, 77, 34]
+        line [45, 32, 33, 12]
+        bar [87, 54, 99, 85]
+        line [78, 88, 22, 4]
+        line [22, 29, 75, 33]
+        bar [52, 96, 35, 10]
+      `,
+          {}
+        );
+        cy.get('svg');
+      });
+    });
   });
 });

cypress/platform/bundle-test.js

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

cypress/platform/flowchart-refactor.html

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

cypress/platform/flowchart-sate.html

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

cypress/platform/knsv-4442.html

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

cypress/platform/knsv2.html

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

cypress/platform/knsv3.html

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

cypress/platform/viewer.js

@@ -1,5 +1,5 @@
 import mermaid from './mermaid.esm.mjs';
-// import flowchartELK from './mermaid-flowchart-elk.esm.mjs';
+import flowchartELK from './mermaid-flowchart-elk.esm.mjs';
 import externalExample from './mermaid-example-diagram.esm.mjs';
 import zenUml from './mermaid-zenuml.esm.mjs';
 
@@ -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,7 @@ const contentLoaded = async function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    // await mermaid.registerExternalDiagrams([externalExample, zenUml, flowchartELK]);
-    await mermaid.registerExternalDiagrams([externalExample, zenUml]);
+    await mermaid.registerExternalDiagrams([externalExample, zenUml, flowchartELK]);
     mermaid.initialize(graphObj.mermaid);
     await mermaid.run();
   }
@@ -134,7 +132,7 @@ if (typeof document !== 'undefined') {
   window.addEventListener(
     'load',
     function () {
-      if (/xss.html/.exec(this.location.href)) {
+      if (this.location.href.match('xss.html')) {
         this.console.log('Using api');
         void contentLoadedApi().finally(markRendered);
       } else {

demos/sequence.html

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

demos/xychart.html

@@ -52,7 +52,7 @@
     line [+1.3, .6, 2.4, -.34]
     </pre>
 
-    <h1>XY Charts Bar with multiple category</h1>
+    <h1>XY Charts bar with single dataset</h1>
     <pre class="mermaid">
     xychart-beta
     title "Basic xychart with many categories"
@@ -61,7 +61,28 @@
     bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
     </pre>
 
-    <h1>XY Charts line with multiple category</h1>
+    <h1>XY Charts bar with multiple datasets</h1>
+    <pre class="mermaid">
+      xychart-beta
+      title "Basic xychart with multiple datasets"
+      x-axis "Relevant categories" [category1, "category 2", category3, category4]
+      bar "dogs" [0, 60, 40, 30]
+      bar "cats" [20, 40, 50, 30]
+      bar "birds" [30, 60, 50, 30]
+    </pre>
+
+    <h1>XY Charts bar horizontal with multiple datasets</h1>
+    <pre class="mermaid">
+      xychart-beta horizontal
+      title "Basic xychart with multiple datasets"
+      x-axis "Relevant categories" [category1, "category 2", category3, category4]
+      y-axis Animals 0 --> 160
+      bar "dogs" [0, 60, 40, 30]
+      bar "cats" [20, 40, 50, 30]
+      bar "birds" [30, 60, 50, 30]
+    </pre>
+
+    <h1>XY Charts line single dataset</h1>
     <pre class="mermaid">
     xychart-beta
     title "Line chart with many category"
@@ -70,7 +91,7 @@
     line "sample line" [52, 96, 35, 10, 87, 34, 67, 99]
     </pre>
 
-    <h1>XY Charts category with large text</h1>
+    <h1>XY Charts bar with large text</h1>
     <pre class="mermaid">
     xychart-beta
     title "Basic xychart with many categories with category overlap"

docs/config/setup/README.md

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

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

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

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

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

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

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

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

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

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

@@ -1,407 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.Mermaid.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.Mermaid.md).
-
-# Interface: Mermaid
-
-[mermaid](../modules/mermaid.md).Mermaid
-
-## Properties
-
-### contentLoaded
-
-• **contentLoaded**: () => `void`
-
-#### Type declaration
-
-▸ (): `void`
-
-\##contentLoaded Callback function that is called when page is loaded. This functions fetches
-configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
-page.
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)
-
----
-
-### 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:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
-
----
-
-### 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:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
-
----
-
-### 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:429](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L429)
-
----
-
-### internalHelpers
-
-• **internalHelpers**: `Object`
-
-Internal helpers for mermaid
-
-**`Deprecated`**
-
-- This should not be used by external packages, as the definitions will change without notice.
-
-#### Type declaration
-
-| Name                         | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| :--------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `common`                     | { `evaluate`: (`val?`: `string` \| `boolean`) => `boolean` ; `getMax`: (...`values`: `number`\[]) => `number` ; `getMin`: (...`values`: `number`\[]) => `number` ; `getRows`: (`s?`: `string`) => `string`\[] ; `getUrl`: (`useAbsolute`: `boolean`) => `string` ; `hasBreaks`: (`text`: `string`) => `boolean` ; `lineBreakRegex`: `RegExp` ; `removeScript`: (`txt`: `string`) => `string` ; `sanitizeText`: (`text`: `string`, `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` ; `sanitizeTextOrArray`: (`a`: `string` \| `string`\[] \| `string`\[]\[], `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` \| `string`\[] ; `splitBreaks`: (`text`: `string`) => `string`\[] } |
-| `common.evaluate`            | (`val?`: `string` \| `boolean`) => `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| `common.getMax`              | (...`values`: `number`\[]) => `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `common.getMin`              | (...`values`: `number`\[]) => `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `common.getRows`             | (`s?`: `string`) => `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `common.getUrl`              | (`useAbsolute`: `boolean`) => `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `common.hasBreaks`           | (`text`: `string`) => `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `common.lineBreakRegex`      | `RegExp`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| `common.removeScript`        | (`txt`: `string`) => `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| `common.sanitizeText`        | (`text`: `string`, `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `common.sanitizeTextOrArray` | (`a`: `string` \| `string`\[] \| `string`\[]\[], `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` \| `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `common.splitBreaks`         | (`text`: `string`) => `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `getConfig`                  | () => [`MermaidConfig`](mermaid.MermaidConfig.md)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `insertCluster`              | (`elem`: `any`, `node`: `any`) => `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `insertEdge`                 | (`elem`: `any`, `edge`: `any`, `clusterDb`: `any`, `diagramType`: `any`, `startNode`: `any`, `endNode`: `any`, `id`: `any`) => { `originalPath`: `any` ; `updatedPath`: `any` }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `insertEdgeLabel`            | (`elem`: `any`, `edge`: `any`) => `Promise`<`any`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `insertMarkers`              | (`elem`: `any`, `markerArray`: `any`, `type`: `any`, `id`: `any`) => `void`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `insertNode`                 | (`elem`: `any`, `node`: `any`, `dir`: `any`) => `Promise`<`any`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| `interpolateToCurve`         | (`interpolate`: `undefined` \| `string`, `defaultCurve`: `CurveFactory`) => `CurveFactory`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `labelHelper`                | (`parent`: `any`, `node`: `any`, `_classes`: `any`) => `Promise`<{ `bbox`: `any` ; `halfPadding`: `number` ; `label`: `any` = labelEl; `shapeSvg`: `any` }>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `log`                        | `Record`<`LogLevel`, (...`data`: `any`\[]) => `void`(`message?`: `any`, ...`optionalParams`: `any`\[]) => `void`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `positionEdgeLabel`          | (`edge`: `any`, `paths`: `any`) => `void`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
-
----
-
-### mermaidAPI
-
-• **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.defaultConfig; `getConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.setConfig; `updateSiteConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.updateSiteConfig }>
-
-**`Deprecated`**
-
-Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)
-
----
-
-### 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:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420)
-
----
-
-### parseError
-
-• `Optional` **parseError**: [`ParseErrorFunction`](../modules/mermaid.md#parseerrorfunction)
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:414](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L414)
-
----
-
-### 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:428](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L428)
-
----
-
-### 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:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
-
----
-
-### 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:421](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L421)
-
----
-
-### 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:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
-
----
-
-### 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:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
-
----
-
-### startOnLoad
-
-• **startOnLoad**: `boolean`
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:413](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L413)

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

@@ -1,527 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.MermaidConfig.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.MermaidConfig.md).
-
-# Interface: MermaidConfig
-
-[mermaid](../modules/mermaid.md).MermaidConfig
-
-## Properties
-
-### altFontFamily
-
-• `Optional` **altFontFamily**: `string`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:110](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L110)
-
----
-
-### 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:129](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L129)
-
----
-
-### block
-
-• `Optional` **block**: `BlockDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)
-
----
-
-### c4
-
-• `Optional` **c4**: `C4DiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
-
----
-
-### class
-
-• `Optional` **class**: `ClassDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:175](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L175)
-
----
-
-### darkMode
-
-• `Optional` **darkMode**: `boolean`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L101)
-
----
-
-### 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:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L169)
-
----
-
-### 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:162](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L162)
-
----
-
-### dompurifyConfig
-
-• `Optional` **dompurifyConfig**: `Config`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)
-
----
-
-### elk.mergeEdges
-
-• `Optional` **elk.mergeEdges**: `boolean`
-
-Elk specific option that allows egdes to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram.
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L95)
-
----
-
-### elk.nodePlacement.strategy
-
-• `Optional` **elk.nodePlacement.strategy**: `"SIMPLE"` | `"NETWORK_SIMPLEX"` | `"LINEAR_SEGMENTS"` | `"BRANDES_KOEPF"`
-
-Elk specific option affedcting how nodes are placed.
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L100)
-
----
-
-### er
-
-• `Optional` **er**: `ErDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:177](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L177)
-
----
-
-### flowchart
-
-• `Optional` **flowchart**: `FlowchartDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L170)
-
----
-
-### 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:109](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L109)
-
----
-
-### fontSize
-
-• `Optional` **fontSize**: `number`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)
-
----
-
-### 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:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L151)
-
----
-
-### gantt
-
-• `Optional` **gantt**: `GanttDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L172)
-
----
-
-### gitGraph
-
-• `Optional` **gitGraph**: `GitGraphDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)
-
----
-
-### 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:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L102)
-
----
-
-### journey
-
-• `Optional` **journey**: `JourneyDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L173)
-
----
-
-### 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:144](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L144)
-
----
-
-### 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:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L115)
-
----
-
-### 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:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
-
----
-
-### 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:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)
-
----
-
-### packet
-
-• `Optional` **packet**: `PacketDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)
-
----
-
-### pie
-
-• `Optional` **pie**: `PieDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:178](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L178)
-
----
-
-### quadrantChart
-
-• `Optional` **quadrantChart**: `QuadrantChartConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:179](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L179)
-
----
-
-### requirement
-
-• `Optional` **requirement**: `RequirementDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181)
-
----
-
-### sankey
-
-• `Optional` **sankey**: `SankeyDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)
-
----
-
-### 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:136](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L136)
-
----
-
-### securityLevel
-
-• `Optional` **securityLevel**: `"strict"` | `"loose"` | `"antiscript"` | `"sandbox"`
-
-Level of trust for parsed diagram
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:119](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L119)
-
----
-
-### sequence
-
-• `Optional` **sequence**: `SequenceDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L171)
-
----
-
-### startOnLoad
-
-• `Optional` **startOnLoad**: `boolean`
-
-Dictates whether mermaid starts on Page load
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L123)
-
----
-
-### state
-
-• `Optional` **state**: `StateDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:176](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L176)
-
----
-
-### 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:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
-
----
-
-### theme
-
-• `Optional` **theme**: `"default"` | `"forest"` | `"dark"` | `"neutral"` | `"null"`
-
-Theme, the CSS style sheet.
-You may also use `themeCSS` to override this value.
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L64)
-
----
-
-### themeCSS
-
-• `Optional` **themeCSS**: `string`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:66](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L66)
-
----
-
-### themeVariables
-
-• `Optional` **themeVariables**: `any`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:65](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L65)
-
----
-
-### timeline
-
-• `Optional` **timeline**: `TimelineDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)
-
----
-
-### wrap
-
-• `Optional` **wrap**: `boolean`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)
-
----
-
-### xyChart
-
-• `Optional` **xyChart**: `XYChartConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:180](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L180)

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

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

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

@@ -1,71 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.RunOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.RunOptions.md).
-
-# Interface: RunOptions
-
-[mermaid](../modules/mermaid.md).RunOptions
-
-## Properties
-
-### nodes
-
-• `Optional` **nodes**: `ArrayLike`<`HTMLElement`>
-
-The nodes to render. If this is set, `querySelector` will be ignored.
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:43](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L43)
-
----
-
-### 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:47](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L47)
-
----
-
-### querySelector
-
-• `Optional` **querySelector**: `string`
-
-The query selector to use when finding elements to render. Default: `".mermaid"`.
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:39](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L39)
-
----
-
-### 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:51](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L51)

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

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

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

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

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

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

docs/config/setup/modules/config.md

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

docs/config/setup/modules/defaultConfig.md

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

docs/config/setup/modules/mermaid.md

@@ -1,58 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/modules/mermaid.md](../../../../packages/mermaid/src/docs/config/setup/modules/mermaid.md).
-
-# Module: mermaid
-
-## Classes
-
-- [UnknownDiagramError](../classes/mermaid.UnknownDiagramError.md)
-
-## Interfaces
-
-- [DetailedError](../interfaces/mermaid.DetailedError.md)
-- [ExternalDiagramDefinition](../interfaces/mermaid.ExternalDiagramDefinition.md)
-- [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)
-- [RenderResult](../interfaces/mermaid.RenderResult.md)
-- [RunOptions](../interfaces/mermaid.RunOptions.md)
-
-## Type Aliases
-
-### ParseErrorFunction
-
-Ƭ **ParseErrorFunction**: (`err`: `string` | [`DetailedError`](../interfaces/mermaid.DetailedError.md) | `unknown`, `hash?`: `any`) => `void`
-
-#### Type declaration
-
-▸ (`err`, `hash?`): `void`
-
-##### Parameters
-
-| Name    | Type                                                                               |
-| :------ | :--------------------------------------------------------------------------------- |
-| `err`   | `string` \| [`DetailedError`](../interfaces/mermaid.DetailedError.md) \| `unknown` |
-| `hash?` | `any`                                                                              |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[packages/mermaid/src/Diagram.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/Diagram.ts#L10)
-
-## Variables
-
-### default
-
-• `Const` **default**: [`Mermaid`](../interfaces/mermaid.Mermaid.md)
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:440](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L440)

docs/config/setup/modules/mermaidAPI.md

@@ -0,0 +1,283 @@
+> **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:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L75)
+
+## 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:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L223)
+
+---
+
+### createCssStyles
+
+▸ **createCssStyles**(`config`, `classDefs?`): `string`
+
+Create the user styles
+
+#### Parameters
+
+| Name        | Type                                                             | Description                                                                                                               |
+| :---------- | :--------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------ |
+| `config`    | `MermaidConfig`                                                  | configuration that has style and theme settings to use                                                                    |
+| `classDefs` | `undefined` \| `null` \| `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:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L154)
+
+---
+
+### 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:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L200)
+
+---
+
+### cssImportantStyles
+
+▸ **cssImportantStyles**(`cssClass`, `element`, `cssClasses?`): `string`
+
+Create a CSS style that starts with the given class name, then the element,
+with an enclosing block that has each of the cssClasses followed by !important;
+
+#### Parameters
+
+| Name         | Type        | Default value | Description                                    |
+| :----------- | :---------- | :------------ | :--------------------------------------------- |
+| `cssClass`   | `string`    | `undefined`   | CSS class name                                 |
+| `element`    | `string`    | `undefined`   | CSS element                                    |
+| `cssClasses` | `string`\[] | `[]`          | list of CSS styles to append after the element |
+
+#### Returns
+
+`string`
+
+- the constructed string
+
+#### Defined in
+
+[mermaidAPI.ts:139](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L139)
+
+---
+
+### 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
+
+#### 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 `mermaid`.
+To customize themes site-wide, call the `initialize` method on the `mermaidAPI`.
 
 Example of `initialize` call setting `theme` to `base`:
 
 ```javascript
-mermaid.initialize({
+mermaidAPI.initialize({
   securityLevel: 'loose',
   theme: 'base',
 });

docs/config/usage.md

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

docs/syntax/xyChart.md

@@ -6,12 +6,54 @@
 
 # XY Chart
 
-> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables.
+> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to display one or more datasets containing categories of data.
 
 > It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time.
 
 ## Example
 
+### bar chart displaying single dataset
+
+```mermaid-example
+xychart-beta
+    title "Sales Revenue"
+    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+    y-axis "Revenue (in $)" 4000 --> 11000
+    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+```
+
+```mermaid
+xychart-beta
+    title "Sales Revenue"
+    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+    y-axis "Revenue (in $)" 4000 --> 11000
+    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+```
+
+### bar chart displaying 3 datasets
+
+```mermaid-example
+      xychart-beta
+      title "Basic xychart with multiple datasets"
+      x-axis "Relevant categories" [category1, "category 2", category3, category4]
+      y-axis Animals 0 --> 160
+      bar "dogs" [40, 20, 40, 30]
+      bar "cats" [20, 40, 50, 30]
+      bar "birds" [30, 60, 50, 30]
+```
+
+```mermaid
+      xychart-beta
+      title "Basic xychart with multiple datasets"
+      x-axis "Relevant categories" [category1, "category 2", category3, category4]
+      y-axis Animals 0 --> 160
+      bar "dogs" [40, 20, 40, 30]
+      bar "cats" [20, 40, 50, 30]
+      bar "birds" [30, 60, 50, 30]
+```
+
+### combined bar/line chart displaying 2 datasets
+
 ```mermaid-example
 xychart-beta
     title "Sales Revenue"

eslint.config.js

@@ -1,222 +0,0 @@
-import cspell from '@cspell/eslint-plugin';
-import eslint from '@eslint/js';
-import cypress from 'eslint-plugin-cypress';
-import jsdoc from 'eslint-plugin-jsdoc';
-import json from 'eslint-plugin-json';
-import lodash from 'eslint-plugin-lodash';
-import markdown from 'eslint-plugin-markdown';
-import noOnlyTests from 'eslint-plugin-no-only-tests';
-import tsdoc from 'eslint-plugin-tsdoc';
-import unicorn from 'eslint-plugin-unicorn';
-import globals from 'globals';
-import tseslint from 'typescript-eslint';
-
-export default tseslint.config(
-  eslint.configs.recommended,
-  ...tseslint.configs.recommendedTypeChecked,
-  ...tseslint.configs.stylisticTypeChecked,
-  {
-    ignores: [
-      '**/dist/',
-      '**/node_modules/',
-      '.git/',
-      '**/generated/',
-      '**/coverage/',
-      'packages/mermaid/src/config.type.ts',
-    ],
-  },
-  {
-    languageOptions: {
-      parserOptions: {
-        project: [
-          './tsconfig.eslint.json',
-          './packages/*/tsconfig.json',
-          './packages/*/tsconfig.eslint.json',
-          './packages/mermaid/src/docs/tsconfig.json',
-        ],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-        ...globals.es2020,
-        ...globals.jest,
-        cy: 'readonly',
-        Cypress: 'readonly',
-      },
-    },
-  },
-  {
-    plugins: {
-      json,
-      '@cspell': cspell,
-      'no-only-tests': noOnlyTests,
-      lodash,
-      unicorn,
-      cypress,
-      markdown,
-      tsdoc,
-      jsdoc,
-    },
-    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': [
-        'error',
-        {
-          args: 'after-used',
-          argsIgnorePattern: '^_',
-          caughtErrors: 'all',
-          caughtErrorsIgnorePattern: '^_',
-          destructuredArrayIgnorePattern: '^_',
-          varsIgnorePattern: '^_',
-          ignoreRestSiblings: true,
-        },
-      ],
-      '@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,
-          },
-        },
-      ],
-      // START: These rules should be turned on once the codebase is cleaned up
-      '@typescript-eslint/no-unsafe-argument': 'off',
-      '@typescript-eslint/no-unsafe-assignment': 'off',
-      '@typescript-eslint/no-unsafe-call': 'off',
-      '@typescript-eslint/no-unsafe-member-access': 'off',
-      '@typescript-eslint/no-unsafe-return': 'off',
-      '@typescript-eslint/only-throw-error': 'warn',
-      '@typescript-eslint/prefer-nullish-coalescing': 'warn',
-      '@typescript-eslint/prefer-promise-reject-errors': 'warn',
-      // END
-      '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',
-    },
-  },
-  {
-    files: ['cypress/**', 'demos/**'],
-    rules: {
-      'no-console': 'off',
-    },
-  },
-  {
-    files: ['**/*.{js,jsx,mjs,cjs}'],
-    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}'],
-    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',
-    },
-    processor: 'markdown/markdown',
-  }
-);

package.json

@@ -4,7 +4,7 @@
   "version": "10.2.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@9.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a",
+  "packageManager": "pnpm@9.1.2+sha512.127dc83b9ea10c32be65d22a8efb4a65fb952e8fefbdfded39bdc3c97efc32d31b48b00420df2c1187ace28c921c902f0cb5a134a4d032b8b5295cbfa2c681e2",
   "keywords": [
     "diagram",
     "markdown",
@@ -25,8 +25,8 @@
     "dev:vite": "tsx .vite/server.ts",
     "dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev:vite",
     "release": "pnpm build",
-    "lint": "eslint --quiet --stats --cache --cache-strategy content . && pnpm lint:jison && prettier --cache --check .",
-    "lint:fix": "eslint --cache --cache-strategy content --fix . && prettier --write . && tsx scripts/fixCSpell.ts",
+    "lint": "cross-env NODE_OPTIONS=--max_old_space_size=8192 eslint --cache --cache-strategy content . && pnpm lint:jison && prettier --cache --check .",
+    "lint:fix": "cross-env NODE_OPTIONS=--max_old_space_size=8192 eslint --cache --cache-strategy content --fix . && prettier --write . && tsx scripts/fixCSpell.ts",
     "lint:jison": "tsx ./scripts/jison/lint.mts",
     "contributors": "tsx scripts/updateContributors.ts",
     "cypress": "cypress run",
@@ -61,13 +61,13 @@
     ]
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "^3.44.4",
+    "@applitools/eyes-cypress": "^3.42.3",
     "@argos-ci/cypress": "^2.0.5",
-    "@cspell/eslint-plugin": "^8.8.4",
+    "@cspell/eslint-plugin": "^8.6.0",
     "@cypress/code-coverage": "^3.12.30",
-    "@eslint/js": "^9.4.0",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/cors": "^2.8.17",
+    "@types/eslint": "^8.56.6",
     "@types/express": "^4.17.21",
     "@types/js-yaml": "^4.0.9",
     "@types/jsdom": "^21.1.6",
@@ -75,6 +75,8 @@
     "@types/mdast": "^4.0.3",
     "@types/node": "^20.11.30",
     "@types/rollup-plugin-visualizer": "^4.2.4",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
     "@vitest/coverage-v8": "^1.4.0",
     "@vitest/spy": "^1.4.0",
     "@vitest/ui": "^1.4.0",
@@ -84,23 +86,22 @@
     "cors": "^2.8.5",
     "cross-env": "^7.0.3",
     "cspell": "^8.6.0",
-    "cypress": "^13.11.0",
+    "cypress": "^13.7.1",
     "cypress-image-snapshot": "^4.0.1",
-    "esbuild": "^0.21.5",
-    "eslint": "^9.4.0",
+    "esbuild": "^0.20.2",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^3.3.0",
-    "eslint-plugin-html": "^8.1.1",
-    "eslint-plugin-jest": "^28.6.0",
-    "eslint-plugin-jsdoc": "^48.2.9",
-    "eslint-plugin-json": "^4.0.0",
-    "eslint-plugin-lodash": "^8.0.0",
-    "eslint-plugin-markdown": "^5.0.0",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-html": "^8.0.0",
+    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-jsdoc": "^48.2.1",
+    "eslint-plugin-json": "^3.1.0",
+    "eslint-plugin-lodash": "^7.4.0",
+    "eslint-plugin-markdown": "^4.0.1",
     "eslint-plugin-no-only-tests": "^3.1.0",
-    "eslint-plugin-tsdoc": "^0.3.0",
-    "eslint-plugin-unicorn": "^53.0.0",
+    "eslint-plugin-tsdoc": "^0.2.17",
+    "eslint-plugin-unicorn": "^51.0.1",
     "express": "^4.19.1",
-    "globals": "^15.4.0",
     "globby": "^14.0.1",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
@@ -119,8 +120,7 @@
     "rollup-plugin-visualizer": "^5.12.0",
     "start-server-and-test": "^2.0.3",
     "tsx": "^4.7.1",
-    "typescript": "~5.4.5",
-    "typescript-eslint": "^8.0.0-alpha.34",
+    "typescript": "^5.4.3",
     "vite": "^5.2.3",
     "vite-plugin-istanbul": "^6.0.0",
     "vitest": "^1.4.0"

packages/mermaid-example-diagram/src/mermaidUtils.ts

@@ -25,7 +25,7 @@ export const log: Record<keyof typeof LEVELS, typeof console.log> = {
   fatal: warning,
 };
 
-export let setLogLevel: (level: keyof typeof LEVELS | number) => void;
+export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
 export let getConfig: () => object;
 export let sanitizeText: (str: string) => string;
 export let commonDb: () => object;

packages/mermaid-example-diagram/tsconfig.eslint.json

@@ -1,11 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": ["./tsconfig.json"],
-  "compilerOptions": {
-    "noEmit": true
-  },
-  "include": [
-    "./src/**/*.spec.js",
-    "./src/**/*.spec.ts" // test files
-  ]
-}

packages/mermaid-flowchart-elk/src/flowRenderer-elk.js

@@ -64,6 +64,7 @@ export const addVertices = async function (vert, svgId, root, doc, diagObj, pare
       let vertexText = vertex.text !== undefined ? vertex.text : vertex.id;
 
       // We create a SVG label, either by delegating to addHtmlLabel or manually
+      let vertexNode;
       const labelData = { width: 0, height: 0 };
 
       const ports = [
@@ -187,6 +188,19 @@ export const addVertices = async function (vert, svgId, root, doc, diagObj, pare
         nodeEl = await insertNode(nodes, node, vertex.dir);
         boundingBox = nodeEl.node().getBBox();
       } else {
+        const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
+        // svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
+        // const rows = vertexText.split(common.lineBreakRegex);
+        // for (const row of rows) {
+        //   const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+        //   tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
+        //   tspan.setAttribute('dy', '1em');
+        //   tspan.setAttribute('x', '1');
+        //   tspan.textContent = row;
+        //   svgLabel.appendChild(tspan);
+        // }
+        // vertexNode = svgLabel;
+        // const bbox = vertexNode.getBBox();
         const { shapeSvg, bbox } = await labelHelper(nodes, node, undefined, true);
         labelData.width = bbox.width;
         labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
@@ -663,6 +677,7 @@ const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb, i
 /**
  * Recursive function that iterates over an array of nodes and inserts the children of each node.
  * It also recursively populates the inserts the children of the children and so on.
+ * @param {*} graph
  * @param nodeArray
  * @param parentLookupDb
  */

packages/mermaid-layout-elk/package.json

@@ -1,43 +0,0 @@
-{
-  "name": "@mermaid-js/layout-elk",
-  "version": "0.0.1",
-  "description": "ELK layout engine for mermaid",
-  "module": "dist/mermaid-layout-elk.core.mjs",
-  "types": "dist/packages/mermaid-layout-elk/src/index.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "import": "./dist/mermaid-layout-elk.core.mjs",
-      "types": "./dist/packages/mermaid-layout-elk/src/index.d.ts"
-    },
-    "./*": "./*"
-  },
-  "keywords": [
-    "diagram",
-    "markdown",
-    "elk",
-    "mermaid"
-  ],
-  "scripts": {
-    "prepublishOnly": "pnpm -w run build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mermaid-js/mermaid"
-  },
-  "contributors": [
-    "Knut Sveidqvist",
-    "Sidharth Vinod"
-  ],
-  "license": "MIT",
-  "dependencies": {
-    "elkjs": "^0.9.3",
-    "d3": "^7.9.0"
-  },
-  "peerDependencies": {
-    "mermaid": "workspace:^"
-  },
-  "files": [
-    "dist"
-  ]
-}

packages/mermaid-layout-elk/src/find-common-ancestor.ts

@@ -1,31 +0,0 @@
-export interface TreeData {
-  parentById: Record<string, string>;
-  childrenById: Record<string, string[]>;
-}
-
-export const findCommonAncestor = (id1: string, id2: string, treeData: TreeData) => {
-  const { parentById } = treeData;
-  const visited = new Set();
-  let currentId = id1;
-
-  // Edge case with self edges
-  if (id1 === id2) {
-    return parentById[id1] || 'root';
-  }
-
-  while (currentId) {
-    visited.add(currentId);
-    if (currentId === id2) {
-      return currentId;
-    }
-    currentId = parentById[currentId];
-  }
-  currentId = id2;
-  while (currentId) {
-    if (visited.has(currentId)) {
-      return currentId;
-    }
-    currentId = parentById[currentId];
-  }
-  return 'root';
-};

packages/mermaid-layout-elk/src/layouts.ts

@@ -1,17 +0,0 @@
-import type { LayoutLoaderDefinition } from 'mermaid';
-
-const loader = async () => await import(`./render.js`);
-const algos = ['elk.stress', 'elk.force', 'elk.mrtree', 'elk.sporeOverlap'];
-
-export const layouts: LayoutLoaderDefinition[] = [
-  {
-    name: 'elk',
-    loader,
-    algorithm: 'elk.layered',
-  },
-  ...algos.map((algo) => ({
-    name: algo,
-    loader,
-    algorithm: algo,
-  })),
-];

packages/mermaid-layout-elk/src/render.ts

@@ -1,599 +0,0 @@
-// @ts-nocheck File not ready to check types
-import { curveLinear } from 'd3';
-import ELK from 'elkjs/lib/elk.bundled.js';
-import mermaid from 'mermaid';
-import { findCommonAncestor } from './find-common-ancestor.js';
-
-const {
-  common,
-  getConfig,
-  insertCluster,
-  insertEdge,
-  insertEdgeLabel,
-  insertMarkers,
-  insertNode,
-  interpolateToCurve,
-  labelHelper,
-  log,
-  positionEdgeLabel,
-} = mermaid.internalHelpers;
-
-const nodeDb = {};
-const portPos = {};
-const clusterDb = {};
-
-export const addVertex = async (nodeEl, graph, nodeArr, node) => {
-  const labelData = { width: 0, height: 0 };
-  const ports = [
-    {
-      id: node.id + '-west',
-      layoutOptions: {
-        'port.side': 'WEST',
-      },
-    },
-    {
-      id: node.id + '-east',
-      layoutOptions: {
-        'port.side': 'EAST',
-      },
-    },
-    {
-      id: node.id + '-south',
-      layoutOptions: {
-        'port.side': 'SOUTH',
-      },
-    },
-    {
-      id: node.id + '-north',
-      layoutOptions: {
-        'port.side': 'NORTH',
-      },
-    },
-  ];
-
-  let boundingBox;
-  const child = {
-    ...node,
-    ports: node.shape === 'diamond' ? ports : [],
-  };
-  graph.children.push(child);
-  nodeDb[node.id] = child;
-
-  // Add the element to the DOM
-  if (!node.isGroup) {
-    const childNodeEl = await insertNode(nodeEl, node, node.dir);
-    boundingBox = childNodeEl.node().getBBox();
-    child.domId = childNodeEl;
-    child.width = boundingBox.width;
-    child.height = boundingBox.height;
-  } else {
-    // A subgraph
-    child.children = [];
-    await addVertices(nodeEl, nodeArr, child, node.id);
-
-    if (node.label) {
-      const { shapeSvg, bbox } = await labelHelper(nodeEl, node, undefined, true);
-      labelData.width = bbox.width;
-      labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
-      // Give some padding for elk
-      labelData.height = bbox.height - 2;
-      labelData.labelNode = shapeSvg.node();
-      // We need the label hight to be able to size the subgraph;
-      shapeSvg.remove();
-    } else {
-      // Subgraph without label
-      labelData.width = 0;
-      labelData.height = 0;
-    }
-    child.labelData = labelData;
-    child.domId = nodeEl;
-  }
-};
-
-export const addVertices = async function (nodeEl, nodeArr, graph, parentId) {
-  const siblings = nodeArr.filter((node) => node.parentId === parentId);
-  log.info('addVertices APA12', siblings, parentId);
-  // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
-  await Promise.all(
-    siblings.map(async (node) => {
-      await addVertex(nodeEl, graph, nodeArr, node);
-    })
-  );
-  return graph;
-};
-
-const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, depth) => {
-  nodeArray.forEach(function (node) {
-    if (node) {
-      nodeDb[node.id] = node;
-      nodeDb[node.id].offset = {
-        posX: node.x + relX,
-        posY: node.y + relY,
-        x: relX,
-        y: relY,
-        depth,
-        width: node.width,
-        height: node.height,
-      };
-      if (node.isGroup) {
-        log.debug('Id abc88 subgraph = ', node.id, node.x, node.y, node.labelData);
-        const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph');
-        // TODO use faster way of cloning
-        const clusterNode = JSON.parse(JSON.stringify(node));
-        clusterNode.x = node.offset.posX + node.width / 2;
-        clusterNode.y = node.offset.posY + node.height / 2;
-        insertCluster(subgraphEl, clusterNode);
-
-        log.info('Id (UGH)= ', node.shape, node.labels);
-      } else {
-        log.info(
-          'Id NODE = ',
-          node.id,
-          node.x,
-          node.y,
-          relX,
-          relY,
-          node.domId.node(),
-          `translate(${node.x + relX + node.width / 2}, ${node.y + relY + node.height / 2})`
-        );
-        node.domId.attr(
-          'transform',
-          `translate(${node.x + relX + node.width / 2}, ${node.y + relY + node.height / 2})`
-        );
-      }
-    }
-  });
-  nodeArray.forEach(function (node) {
-    if (node?.isGroup) {
-      drawNodes(relX + node.x, relY + node.y, node.children, svg, subgraphsEl, depth + 1);
-    }
-  });
-};
-
-const getNextPort = (node, edgeDirection, graphDirection) => {
-  log.info('getNextPort abc88', { node, edgeDirection, graphDirection });
-  if (!portPos[node]) {
-    switch (graphDirection) {
-      case 'TB':
-      case 'TD':
-        portPos[node] = {
-          inPosition: 'north',
-          outPosition: 'south',
-        };
-        break;
-      case 'BT':
-        portPos[node] = {
-          inPosition: 'south',
-          outPosition: 'north',
-        };
-        break;
-      case 'RL':
-        portPos[node] = {
-          inPosition: 'east',
-          outPosition: 'west',
-        };
-        break;
-      case 'LR':
-        portPos[node] = {
-          inPosition: 'west',
-          outPosition: 'east',
-        };
-        break;
-    }
-  }
-  const result = edgeDirection === 'in' ? portPos[node].inPosition : portPos[node].outPosition;
-
-  if (edgeDirection === 'in') {
-    portPos[node].inPosition = getNextPosition(
-      portPos[node].inPosition,
-      edgeDirection,
-      graphDirection
-    );
-  } else {
-    portPos[node].outPosition = getNextPosition(
-      portPos[node].outPosition,
-      edgeDirection,
-      graphDirection
-    );
-  }
-  return result;
-};
-
-const addSubGraphs = function (nodeArr) {
-  const parentLookupDb = { parentById: {}, childrenById: {} };
-  const subgraphs = nodeArr.filter((node) => node.isGroup);
-  log.info('Subgraphs - ', subgraphs);
-  subgraphs.forEach(function (subgraph) {
-    const children = nodeArr.filter((node) => node.parentId === subgraph.id);
-    children.forEach(function (node) {
-      parentLookupDb.parentById[node.id] = subgraph.id;
-      if (parentLookupDb.childrenById[subgraph.id] === undefined) {
-        parentLookupDb.childrenById[subgraph.id] = [];
-      }
-      parentLookupDb.childrenById[subgraph.id].push(node);
-    });
-  });
-
-  subgraphs.forEach(function (subgraph) {
-    const data = { id: subgraph.id };
-    if (parentLookupDb.parentById[subgraph.id] !== undefined) {
-      data.parent = parentLookupDb.parentById[subgraph.id];
-    }
-  });
-  return parentLookupDb;
-};
-
-const getEdgeStartEndPoint = (edge, dir) => {
-  let source = edge.start;
-  let target = edge.end;
-
-  // Save the original source and target
-  const sourceId = source;
-  const targetId = target;
-
-  const startNode = nodeDb[edge.start.id];
-  const endNode = nodeDb[edge.end.id];
-
-  if (!startNode || !endNode) {
-    return { source, target };
-  }
-
-  if (startNode.shape === 'diamond') {
-    source = `${source}-${getNextPort(source, 'out', dir)}`;
-  }
-
-  if (endNode.shape === 'diamond') {
-    target = `${target}-${getNextPort(target, 'in', dir)}`;
-  }
-
-  // Add the edge to the graph
-  return { source, target, sourceId, targetId };
-};
-
-const calcOffset = function (src, dest, parentLookupDb) {
-  const ancestor = findCommonAncestor(src, dest, parentLookupDb);
-  if (ancestor === undefined || ancestor === 'root') {
-    return { x: 0, y: 0 };
-  }
-
-  const ancestorOffset = nodeDb[ancestor].offset;
-  return { x: ancestorOffset.posX, y: ancestorOffset.posY };
-};
-
-/**
- * Add edges to graph based on parsed graph definition
- */
-export const addEdges = async function (dataForLayout, graph, svg) {
-  log.info('abc78 DAGA edges = ', dataForLayout);
-  const edges = dataForLayout.edges;
-  const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
-  const linkIdCnt = {};
-  const dir = dataForLayout.direction || 'DOWN';
-  let defaultStyle;
-  let defaultLabelStyle;
-
-  await Promise.all(
-    edges.map(async function (edge) {
-      // Identify Link
-      const linkIdBase = edge.id; // 'L-' + edge.start + '-' + edge.end;
-      // count the links from+to the same node to give unique id
-      if (linkIdCnt[linkIdBase] === undefined) {
-        linkIdCnt[linkIdBase] = 0;
-        log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
-      } else {
-        linkIdCnt[linkIdBase]++;
-        log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
-      }
-      const linkId = linkIdBase + '_' + linkIdCnt[linkIdBase];
-      edge.id = linkId;
-      log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]);
-      const linkNameStart = 'LS_' + edge.start;
-      const linkNameEnd = 'LE_' + edge.end;
-
-      const edgeData = { style: '', labelStyle: '' };
-      edgeData.minlen = edge.length || 1;
-      edge.text = edge.label;
-      // Set link type for rendering
-      if (edge.type === 'arrow_open') {
-        edgeData.arrowhead = 'none';
-      } else {
-        edgeData.arrowhead = 'normal';
-      }
-
-      // Check of arrow types, placed here in order not to break old rendering
-      edgeData.arrowTypeStart = 'arrow_open';
-      edgeData.arrowTypeEnd = 'arrow_open';
-
-      /* eslint-disable no-fallthrough */
-      switch (edge.type) {
-        case 'double_arrow_cross':
-          edgeData.arrowTypeStart = 'arrow_cross';
-        case 'arrow_cross':
-          edgeData.arrowTypeEnd = 'arrow_cross';
-          break;
-        case 'double_arrow_point':
-          edgeData.arrowTypeStart = 'arrow_point';
-        case 'arrow_point':
-          edgeData.arrowTypeEnd = 'arrow_point';
-          break;
-        case 'double_arrow_circle':
-          edgeData.arrowTypeStart = 'arrow_circle';
-        case 'arrow_circle':
-          edgeData.arrowTypeEnd = 'arrow_circle';
-          break;
-      }
-
-      let style = '';
-      let labelStyle = '';
-
-      switch (edge.stroke) {
-        case 'normal':
-          style = 'fill:none;';
-          if (defaultStyle !== undefined) {
-            style = defaultStyle;
-          }
-          if (defaultLabelStyle !== undefined) {
-            labelStyle = defaultLabelStyle;
-          }
-          edgeData.thickness = 'normal';
-          edgeData.pattern = 'solid';
-          break;
-        case 'dotted':
-          edgeData.thickness = 'normal';
-          edgeData.pattern = 'dotted';
-          edgeData.style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
-          break;
-        case 'thick':
-          edgeData.thickness = 'thick';
-          edgeData.pattern = 'solid';
-          edgeData.style = 'stroke-width: 3.5px;fill:none;';
-          break;
-      }
-      // if (edge.style !== undefined) {
-      //   const styles = getStylesFromArray(edge.style);
-      //   style = styles.style;
-      //   labelStyle = styles.labelStyle;
-      // }
-
-      edgeData.style = edgeData.style += style;
-      edgeData.labelStyle = edgeData.labelStyle += labelStyle;
-
-      const conf = getConfig();
-      if (edge.interpolate !== undefined) {
-        edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
-      } else if (edges.defaultInterpolate !== undefined) {
-        edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
-      } else {
-        edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
-      }
-
-      if (edge.text === undefined) {
-        if (edge.style !== undefined) {
-          edgeData.arrowheadStyle = 'fill: #333';
-        }
-      } else {
-        edgeData.arrowheadStyle = 'fill: #333';
-        edgeData.labelpos = 'c';
-      }
-
-      edgeData.labelType = edge.labelType;
-      edgeData.label = (edge?.text || '').replace(common.lineBreakRegex, '\n');
-
-      if (edge.style === undefined) {
-        edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';
-      }
-
-      edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
-
-      edgeData.id = linkId;
-      edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
-
-      const labelEl = await insertEdgeLabel(labelsEl, edgeData);
-
-      // calculate start and end points of the edge, note that the source and target
-      // can be modified for shapes that have ports
-      const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
-      log.debug('abc78 source and target', source, target);
-      // Add the edge to the graph
-      graph.edges.push({
-        id: 'e' + edge.start + edge.end,
-        ...edge,
-        sources: [source],
-        targets: [target],
-        sourceId,
-        targetId,
-        labelEl: labelEl,
-        labels: [
-          {
-            width: edgeData.width,
-            height: edgeData.height,
-            orgWidth: edgeData.width,
-            orgHeight: edgeData.height,
-            text: edgeData.label,
-            layoutOptions: {
-              'edgeLabels.inline': 'true',
-              'edgeLabels.placement': 'CENTER',
-            },
-          },
-        ],
-        edgeData,
-      });
-    })
-  );
-  return graph;
-};
-
-function dir2ElkDirection(dir) {
-  switch (dir) {
-    case 'LR':
-      return 'RIGHT';
-    case 'RL':
-      return 'LEFT';
-    case 'TB':
-      return 'DOWN';
-    case 'BT':
-      return 'UP';
-    default:
-      return 'DOWN';
-  }
-}
-
-function setIncludeChildrenPolicy(nodeId: string, ancestorId: string) {
-  const node = nodeDb[nodeId];
-
-  if (!node) {
-    return;
-  }
-  if (node?.layoutOptions === undefined) {
-    node.layoutOptions = {};
-  }
-  node.layoutOptions['elk.hierarchyHandling'] = 'INCLUDE_CHILDREN';
-  if (node.id !== ancestorId) {
-    setIncludeChildrenPolicy(node.parentId, ancestorId);
-  }
-}
-
-export const render = async (data4Layout, svg, element, algorithm) => {
-  const elk = new ELK();
-
-  // Add the arrowheads to the svg
-  insertMarkers(element, data4Layout.markers, data4Layout.type, data4Layout.diagramId);
-
-  // Setup the graph with the layout options and the data for the layout
-  let elkGraph = {
-    id: 'root',
-    layoutOptions: {
-      'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
-      'elk.algorithm': algorithm,
-      'nodePlacement.strategy': data4Layout.config['elk.nodePlacement.strategy'],
-      'elk.layered.mergeEdges': data4Layout.config['elk.mergeEdges'],
-      'elk.direction': 'DOWN',
-      'spacing.baseValue': 30,
-      // 'spacing.nodeNode': 40,
-      // 'spacing.nodeNodeBetweenLayers': 45,
-      // 'spacing.edgeNode': 40,
-      // 'spacing.edgeNodeBetweenLayers': 30,
-      // 'spacing.edgeEdge': 30,
-      // 'spacing.edgeEdgeBetweenLayers': 40,
-      // 'spacing.nodeSelfLoop': 50,
-    },
-    children: [],
-    edges: [],
-  };
-
-  log.info('Drawing flowchart using v4 renderer', elk);
-
-  // Set the direction of the graph based on the parsed information
-  const dir = data4Layout.direction || 'DOWN';
-  elkGraph.layoutOptions['elk.direction'] = dir2ElkDirection(dir);
-
-  // Create the lookup db for the subgraphs and their children to used when creating
-  // the tree structured graph
-  const parentLookupDb = addSubGraphs(data4Layout.nodes);
-
-  // Add elements in the svg to be used to hold the subgraphs container
-  // elements and the nodes
-  const subGraphsEl = svg.insert('g').attr('class', 'subgraphs');
-  const nodeEl = svg.insert('g').attr('class', 'nodes');
-
-  // Add the nodes to the graph, this will entail creating the actual nodes
-  // in order to get the size of the node. You can't get the size of a node
-  // that is not in the dom so we need to add it to the dom, get the size
-  // we will position the nodes when we get the layout from elkjs
-  elkGraph = await addVertices(nodeEl, data4Layout.nodes, elkGraph);
-  // Time for the edges, we start with adding an element in the node to hold the edges
-  const edgesEl = svg.insert('g').attr('class', 'edges edgePath');
-
-  // Add the edges to the elk graph, this will entail creating the actual edges
-  elkGraph = await addEdges(data4Layout, elkGraph, svg);
-
-  // Iterate through all nodes and add the top level nodes to the graph
-  const nodes = data4Layout.nodes;
-  nodes.forEach((n) => {
-    const node = nodeDb[n.id];
-
-    // Subgraph
-    if (parentLookupDb.childrenById[node.id] !== undefined) {
-      node.labels = [
-        {
-          text: node.labelText,
-          layoutOptions: {
-            'nodeLabels.placement': '[H_CENTER, V_TOP, INSIDE]',
-          },
-          width: node?.labelData?.width || 0,
-          height: node?.labelData?.height || 0,
-        },
-      ];
-      node.layoutOptions = {
-        'spacing.baseValue': 30,
-      };
-      if (node.dir) {
-        node.layoutOptions = {
-          ...node.layoutOptions,
-          'elk.direction': dir2ElkDirection(node.dir),
-          'elk.hierarchyHandling': 'SEPARATE_CHILDREN',
-        };
-      }
-      delete node.x;
-      delete node.y;
-      delete node.width;
-      delete node.height;
-    }
-  });
-  elkGraph.edges.forEach((edge) => {
-    const source = edge.sources[0];
-    const target = edge.targets[0];
-
-    if (nodeDb[source].parentId !== nodeDb[target].parentId) {
-      const ancestorId = findCommonAncestor(source, target, parentLookupDb);
-      // an edge that breaks a subgraph has been identified, set configuration accordingly
-      setIncludeChildrenPolicy(source, ancestorId);
-      setIncludeChildrenPolicy(target, ancestorId);
-    }
-  });
-
-  // log.info('before layout', JSON.stringify(elkGraph, null, 2));
-  const g = await elk.layout(elkGraph);
-  // log.info('after layout', JSON.stringify(g));
-
-  // debugger;
-  drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
-  g.edges?.map((edge) => {
-    // (elem, edge, clusterDb, diagramType, graph, id)
-    const startNode = nodeDb[edge.sources[0]];
-    const endNode = nodeDb[edge.targets[0]];
-    const sourceId = edge.start;
-    const targetId = edge.end;
-
-    const offset = calcOffset(sourceId, targetId, parentLookupDb);
-    log.info('APA12 offset', offset, sourceId, targetId, edge);
-    if (edge.sections) {
-      const src = edge.sections[0].startPoint;
-      const dest = edge.sections[0].endPoint;
-      const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : [];
-
-      const segPoints = segments.map((segment) => {
-        return { x: segment.x + offset.x, y: segment.y + offset.y };
-      });
-      edge.points = [
-        { x: src.x + offset.x, y: src.y + offset.y },
-        ...segPoints,
-        { x: dest.x + offset.x, y: dest.y + offset.y },
-      ];
-      const paths = insertEdge(
-        edgesEl,
-        edge,
-        clusterDb,
-        data4Layout.type,
-        startNode,
-        endNode,
-        data4Layout.diagramId
-      );
-      log.info('APA12 edge points after insert', JSON.stringify(edge.points));
-
-      edge.x = edge.labels[0].x + offset.x + edge.labels[0].width / 2;
-      edge.y = edge.labels[0].y + offset.y + edge.labels[0].height / 2;
-      positionEdgeLabel(edge, paths);
-    }
-  });
-};

packages/mermaid-layout-elk/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "outDir": "./dist",
-    "types": ["vitest/importMeta", "vitest/globals"]
-  },
-  "include": ["./src/**/*.ts"],
-  "typeRoots": ["./src/types"]
-}

packages/mermaid-zenuml/src/mermaidUtils.ts

@@ -26,7 +26,7 @@ export const log: Record<keyof typeof LEVELS, typeof console.log> = {
   fatal: warning,
 };
 
-export let setLogLevel: (level: keyof typeof LEVELS | number) => void;
+export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
 export let getConfig: () => MermaidConfig;
 export let sanitizeText: (str: string) => string;
 // eslint-disable @typescript-eslint/no-explicit-any

packages/mermaid-zenuml/src/zenumlRenderer.ts

@@ -9,7 +9,7 @@ function createTemporaryZenumlContainer(id: string) {
   container.id = `container-${id}`;
   container.style.display = 'flex';
   container.innerHTML = `<div id="zenUMLApp-${id}"></div>`;
-  const app = container.querySelector(`#zenUMLApp-${id}`)!;
+  const app = container.querySelector(`#zenUMLApp-${id}`) as HTMLElement;
   return { container, app };
 }
 

packages/mermaid/package.json

@@ -34,7 +34,7 @@
   "scripts": {
     "clean": "rimraf dist",
     "dev": "pnpm -w dev",
-    "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaid.ts && prettier --write ./src/docs/config/setup",
+    "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup",
     "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts",
     "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts --verify",
     "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && tsx scripts/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
@@ -77,11 +77,11 @@
     "dagre-d3-es": "7.0.10",
     "dayjs": "^1.11.10",
     "dompurify": "^3.0.11",
+    "elkjs": "^0.9.2",
     "katex": "^0.16.9",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
     "mdast-util-from-markdown": "^2.0.0",
-    "roughjs": "^4.6.6",
     "stylis": "^4.3.1",
     "ts-dedent": "^2.2.0",
     "uuid": "^9.0.1"
@@ -103,6 +103,8 @@
     "@types/prettier": "^3.0.0",
     "@types/stylis": "^4.2.5",
     "@types/uuid": "^9.0.8",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
     "ajv": "^8.12.0",
     "chokidar": "^3.6.0",
     "concurrently": "^8.2.2",
@@ -124,7 +126,7 @@
     "type-fest": "^4.13.1",
     "typedoc": "^0.25.12",
     "typedoc-plugin-markdown": "^3.17.1",
-    "typescript": "~5.4.3",
+    "typescript": "^5.4.3",
     "unist-util-flatmap": "^1.0.0",
     "unist-util-visit": "^5.0.0",
     "vitepress": "^1.0.1",

packages/mermaid/scripts/create-types-from-json-schema.mts

@@ -97,7 +97,7 @@ async function generateTypescript(mermaidConfigSchema: JSONSchemaType<MermaidCon
    * @returns The schema with `allOf` replaced with `extends`.
    */
   function replaceAllOfWithExtends(schema: JSONSchemaType<Record<string, any>>) {
-    if (schema.allOf) {
+    if (schema['allOf']) {
       const { allOf, ...schemaWithoutAllOf } = schema;
       return {
         ...schemaWithoutAllOf,

packages/mermaid/scripts/docs.mts

@@ -88,9 +88,9 @@ const WARN_DOCSDIR_DOESNT_MATCH = `Changed files were transformed in ${SOURCE_DO
 const prettierConfig = (await prettier.resolveConfig('.')) ?? {};
 // From https://github.com/vuejs/vitepress/blob/428eec3750d6b5648a77ac52d88128df0554d4d1/src/node/markdownToVue.ts#L20-L21
 const includesRE = /<!--\s*@include:\s*(.*?)\s*-->/g;
-const includedFiles = new Set<string>();
+const includedFiles: Set<string> = new Set();
 
-const filesTransformed = new Set<string>();
+const filesTransformed: Set<string> = new Set();
 
 const generateHeader = (file: string): string => {
   // path from file in docs/* to repo root, e.g ../ or ../../ */
@@ -181,10 +181,10 @@ export const transformToBlockQuote = (
 ) => {
   if (vitepress) {
     const vitepressType = type === 'note' ? 'info' : type;
-    return `::: ${vitepressType} ${customTitle ?? ''}\n${content}\n:::`;
+    return `::: ${vitepressType} ${customTitle || ''}\n${content}\n:::`;
   } else {
-    const icon = blockIcons[type] ?? '';
-    const title = `${icon}${customTitle ?? capitalize(type)}`;
+    const icon = blockIcons[type] || '';
+    const title = `${icon}${customTitle || capitalize(type)}`;
     return `> **${title}** \n> ${content.replace(/\n/g, '\n> ')}`;
   }
 };
@@ -201,7 +201,6 @@ const transformIncludeStatements = (file: string, text: string): string => {
       includedFiles.add(changeToFinalDocDir(includePath));
       return content;
     } catch (error) {
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
       throw new Error(`Failed to resolve include "${m1}" in "${file}": ${error}`);
     }
   });
@@ -242,7 +241,7 @@ export function transformMarkdownAst({
   addEditLink,
   removeYAML,
 }: TransformMarkdownAstOptions) {
-  return (tree: Root): Root => {
+  return (tree: Root, _file?: any): Root => {
     const astWithTransformedBlocks = flatmap(tree, (node: Code) => {
       if (node.type !== 'code' || !node.lang) {
         return [node]; // no transformation if this is not a code block
@@ -510,7 +509,6 @@ export const getGlobs = (globs: string[]): string[] => {
     globs.push(
       '!**/.vitepress/**',
       '!**/vite.config.ts',
-      '!**/tsconfig.json',
       '!src/docs/index.md',
       '!**/package.json',
       '!**/user-avatars/**'

packages/mermaid/src/Diagram.ts

@@ -6,7 +6,6 @@ import { encodeEntities } from './utils.js';
 import type { DetailedError } from './utils.js';
 import type { DiagramDefinition, DiagramMetadata } from './diagram-api/types.js';
 
-// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
 export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
 
 /**
@@ -20,7 +19,7 @@ export class Diagram {
     text = encodeEntities(text) + '\n';
     try {
       getDiagram(type);
-    } catch {
+    } catch (e) {
       const loader = getDiagramLoader(type);
       if (!loader) {
         throw new UnknownDiagramError(`Diagram ${type} not found.`);

packages/mermaid/src/accessibility.spec.ts

@@ -1,6 +1,6 @@
 import { MockedD3 } from './tests/MockedD3.js';
 import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
-import type { D3Element } from './types.js';
+import type { D3Element } from './mermaidAPI.js';
 
 describe('accessibility', () => {
   const fauxSvgNode: MockedD3 = new MockedD3();

packages/mermaid/src/accessibility.ts

@@ -5,7 +5,7 @@
  * @see https://www.w3.org/TR/wai-aria-1.1/
  * @see https://www.w3.org/TR/svg-aam-1.0/
  */
-import type { D3Element } from './types.js';
+import type { D3Element } from './mermaidAPI.js';
 
 /**
  * SVG element role:

packages/mermaid/src/config.spec.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import * as configApi from './config.js';
 import type { MermaidConfig } from './config.type.js';
 

packages/mermaid/src/config.ts

@@ -189,11 +189,8 @@ export const addDirective = (directive: MermaidConfig) => {
   sanitizeDirective(directive);
 
   // If the directive has a fontFamily, but no themeVariables, add the fontFamily to the themeVariables
-  if (directive.fontFamily && !directive.themeVariables?.fontFamily) {
-    directive.themeVariables = {
-      ...directive.themeVariables,
-      fontFamily: directive.fontFamily,
-    };
+  if (directive.fontFamily && (!directive.themeVariables || !directive.themeVariables.fontFamily)) {
+    directive.themeVariables = { fontFamily: directive.fontFamily };
   }
 
   directives.push(directive);

packages/mermaid/src/config.type.ts

@@ -64,21 +64,6 @@ export interface MermaidConfig {
   theme?: 'default' | 'forest' | 'dark' | 'neutral' | 'null';
   themeVariables?: any;
   themeCSS?: string;
-  /**
-   * Defines which main look to use for the diagram.
-   *
-   */
-  look?: 'classic' | 'handdrawn';
-  /**
-   * 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.
-   *
-   */
-  handdrawnSeed?: number;
-  /**
-   * Defines which layout algorithm to use for rendering the diagram.
-   *
-   */
-  layout?: string;
   /**
    * The maximum allowed size of the users text diagram
    */
@@ -88,16 +73,6 @@ export interface MermaidConfig {
    *
    */
   maxEdges?: number;
-  /**
-   * Elk specific option that allows egdes to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram.
-   *
-   */
-  'elk.mergeEdges'?: boolean;
-  /**
-   * Elk specific option affedcting how nodes are placed.
-   *
-   */
-  'elk.nodePlacement.strategy'?: 'SIMPLE' | 'NETWORK_SIMPLEX' | 'LINEAR_SEGMENTS' | 'BRANDES_KOEPF';
   darkMode?: boolean;
   htmlLabels?: boolean;
   /**
@@ -129,7 +104,10 @@ export interface MermaidConfig {
   arrowMarkerAbsolute?: boolean;
   /**
    * This option controls which `currentConfig` keys are considered secure and
-   * can only be changed via call to `mermaid.initialize`.
+   * can only be changed via call to `mermaidAPI.initialize`.
+   * Calls to `mermaidAPI.reinitialize` cannot make changes to the secure keys
+   * in the current `currentConfig`.
+   *
    * This prevents malicious graph directives from overriding a site's default security.
    *
    */
@@ -722,8 +700,6 @@ export interface StateDiagramConfig extends BaseDiagramConfig {
   textHeight?: number;
   titleShift?: number;
   noteMargin?: number;
-  nodeSpacing?: number;
-  rankSpacing?: number;
   forkWidth?: number;
   forkHeight?: number;
   miniPadding?: number;

packages/mermaid/src/dagre-wrapper/blockArrowHelper.ts

@@ -42,6 +42,9 @@ export const getArrowPoints = (
   // Padding to use, half of the node padding.
   const padding = node.padding / 2;
 
+  // Initialize an empty array to store points for the arrow.
+  const points = [];
+
   if (
     directions.has('right') &&
     directions.has('left') &&

packages/mermaid/src/dagre-wrapper/createLabel.js

@@ -25,10 +25,15 @@ function addHtmlLabel(node) {
 
   const label = node.label;
   const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
-  const span = div.append('span');
-  span.html(label);
-  applyStyle(span, node.labelStyle);
-  span.attr('class', labelClass);
+  div.html(
+    '<span class="' +
+      labelClass +
+      '" ' +
+      (node.labelStyle ? 'style="' + node.labelStyle + '"' : '') +
+      '>' +
+      label +
+      '</span>'
+  );
 
   applyStyle(div, node.labelStyle);
   div.style('display', 'inline-block');

packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/unbound-method */
 import type { Mocked } from 'vitest';
 import type { SVG } from '../diagram-api/types.js';
 import { addEdgeMarkers } from './edgeMarker.js';

packages/mermaid/src/dagre-wrapper/index.js

@@ -51,7 +51,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
         }
       }
       log.info('(Insert) Node XXX' + v + ': ' + JSON.stringify(graph.node(v)));
-      if (node?.clusterNode) {
+      if (node && node.clusterNode) {
         // const children = graph.children(v);
         log.info('Cluster identified', v, node.width, graph.node(v));
         // `node.graph.setGraph` applies the graph configurations such as nodeSpacing to subgraphs as without this the default values would be used
@@ -97,26 +97,25 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
   // Also figure out which edges point to/from clusters and adjust them accordingly
   // Edges from/to clusters really points to the first child in the cluster.
   // TODO: pick optimal child in the cluster to us as link anchor
-  graph.edges().forEach(async function (e) {
+  graph.edges().forEach(function (e) {
     const edge = graph.edge(e.v, e.w, e.name);
     log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
     log.info('Edge ' + e.v + ' -> ' + e.w + ': ', e, ' ', JSON.stringify(graph.edge(e)));
 
     // Check if link is either from or to a cluster
     log.info('Fix', clusterDb, 'ids:', e.v, e.w, 'Translating: ', clusterDb[e.v], clusterDb[e.w]);
-    await insertEdgeLabel(edgeLabels, edge);
+    insertEdgeLabel(edgeLabels, edge);
   });
 
   graph.edges().forEach(function (e) {
     log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
   });
-  log.info('Graph before layout:', JSON.stringify(graphlibJson.write(graph)));
   log.info('#############################################');
   log.info('###                Layout                 ###');
   log.info('#############################################');
   log.info(graph);
   dagreLayout(graph);
-  log.info('Graph after layout:', JSON.stringify(graphlibJson.write(graph)));
+  log.info('Graph after layout:', graphlibJson.write(graph));
   // Move the nodes to the correct place
   let diff = 0;
   const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
@@ -131,7 +130,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
       ' height: ',
       node.height
     );
-    if (node?.clusterNode) {
+    if (node && node.clusterNode) {
       // clusterDb[node.id].node = node;
       node.y += subGraphTitleTotalMargin;
       positionNode(node);

packages/mermaid/src/dagre-wrapper/intersect.js

@@ -0,0 +1,7 @@
+module.exports = {
+  node: require('./intersect-node'),
+  circle: require('./intersect-circle'),
+  ellipse: require('./intersect-ellipse'),
+  polygon: require('./intersect-polygon'),
+  rect: require('./intersect-rect'),
+};

packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js

@@ -399,7 +399,7 @@ export const extractor = (graph, depth) => {
 
       const graphSettings = graph.graph();
       let dir = graphSettings.rankdir === 'TB' ? 'LR' : 'TB';
-      if (clusterDb[node]?.clusterData?.dir) {
+      if (clusterDb[node] && clusterDb[node].clusterData && clusterDb[node].clusterData.dir) {
         dir = clusterDb[node].clusterData.dir;
         log.warn('Fixing dir', clusterDb[node].clusterData.dir, dir);
       }

packages/mermaid/src/dagre-wrapper/nodes.js

@@ -1,12 +1,12 @@
 import { select } from 'd3';
-import { getConfig } from '../diagram-api/diagramAPI.js';
-import { evaluate } from '../diagrams/common/common.js';
 import { log } from '../logger.js';
-import { getArrowPoints } from './blockArrowHelper.js';
-import createLabel from './createLabel.js';
+import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util.js';
+import { getConfig } from '../diagram-api/diagramAPI.js';
 import intersect from './intersect/index.js';
+import createLabel from './createLabel.js';
 import note from './shapes/note.js';
-import { insertPolygonShape, labelHelper, updateNodeBounds } from './shapes/util.js';
+import { evaluate } from '../diagrams/common/common.js';
+import { getArrowPoints } from './blockArrowHelper.js';
 
 const formatClass = (str) => {
   if (str) {
@@ -395,7 +395,6 @@ const rect = async (parent, node) => {
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
-  // console.log('Rect node:', node, 'bbox:', bbox, 'halfPadding:', halfPadding, 'node.padding:', node.padding);
   // const totalWidth = bbox.width + node.padding * 2;
   // const totalHeight = bbox.height + node.padding * 2;
   const totalWidth = node.positioned ? node.width : bbox.width + node.padding;
@@ -902,7 +901,7 @@ const class_box = (parent, node) => {
 
   const labelContainer = shapeSvg.insert('g').attr('class', 'label');
   let verticalPos = 0;
-  const hasInterface = node.classData.annotations?.[0];
+  const hasInterface = node.classData.annotations && node.classData.annotations[0];
 
   // 1. Create the labels
   const interfaceLabelText = node.classData.annotations[0]
@@ -1155,6 +1154,9 @@ export const insertNode = async (elem, node, dir) => {
   if (node.class) {
     el.attr('class', 'node default ' + node.class);
   }
+  // MC Special
+  newEl.attr('data-node', 'true');
+  newEl.attr('data-id', node.id);
 
   nodeElems[node.id] = newEl;
 

packages/mermaid/src/dagre-wrapper/patterns.js

@@ -0,0 +1,52 @@
+/** Setup arrow head and define the marker. The result is appended to the svg. */
+
+// import { log } from '../logger.js';
+
+// Only add the number of markers that the diagram needs
+const insertPatterns = (elem, patternArray, type, id) => {
+  patternArray.forEach((patternName) => {
+    patterns[patternName](elem, type, id);
+  });
+};
+
+{
+  /* <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  {' '}
+  <defs>
+    {' '}
+    <pattern id="circles-1" patternUnits="userSpaceOnUse" width="10" height="10">
+      {' '}
+      <image
+        xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSJ3aGl0ZSIgLz4KICA8Y2lyY2xlIGN4PSIxIiBjeT0iMSIgcj0iMSIgZmlsbD0iYmxhY2siLz4KPC9zdmc+"
+        x="0"
+        y="0"
+        width="10"
+        height="10"
+      >
+        {' '}
+      </image>{' '}
+    </pattern>{' '}
+  </defs>{' '}
+</svg>; */
+}
+
+const dots = (elem, type) => {
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', type + '-barbEnd')
+    .attr('refX', 19)
+    .attr('refY', 7)
+    .attr('markerWidth', 20)
+    .attr('markerHeight', 14)
+    .attr('markerUnits', 0)
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');
+};
+
+// TODO rename the class diagram markers to something shape descriptive and semantic free
+const patterns = {
+  dots,
+};
+export default insertPatterns;

packages/mermaid/src/dagre-wrapper/shapes/util.js

@@ -15,8 +15,6 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
     classes = _classes;
   }
 
-  // console.log('parentY', parent.node());
-
   // Add outer g element
   const shapeSvg = parent
     .insert('g')
@@ -35,7 +33,6 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
   }
 
   const textNode = label.node();
-  // console.log('parentX', parent, 'node',node,'labelText',labelText, textNode, node.labelType, 'label', label.node());
   let text;
   if (node.labelType === 'markdown') {
     // text = textNode;

packages/mermaid/src/defaultConfig.ts

@@ -23,7 +23,7 @@ const config: RequiredDeep<MermaidConfig> = {
   themeCSS: undefined,
 
   // add non-JSON default config values
-  themeVariables: theme.default.getThemeVariables(),
+  themeVariables: theme['default'].getThemeVariables(),
   sequence: {
     ...defaultConfigJson.sequence,
     messageFont: function () {
@@ -272,5 +272,5 @@ const keyify = (obj: any, prefix = ''): string[] =>
     return [...res, prefix + el];
   }, []);
 
-export const configKeys = new Set<string>(keyify(config, ''));
+export const configKeys: Set<string> = new Set(keyify(config, ''));
 export default config;

packages/mermaid/src/diagram-api/diagramAPI.spec.ts

@@ -29,7 +29,7 @@ describe('DiagramAPI', () => {
       `[UnknownDiagramError: No diagram type detected matching given configuration for text: loki diagram]`
     );
     const detector: DiagramDetector = (str: string) => {
-      return /loki/.exec(str) !== null;
+      return str.match('loki') !== null;
     };
     registerDiagram(
       'loki',

packages/mermaid/src/diagram-api/diagramAPI.ts

@@ -30,7 +30,9 @@ export const getCommonDb = () => {
 };
 
 const diagrams: Record<string, DiagramDefinition> = {};
-export type Detectors = Record<string, DiagramDetector>;
+export interface Detectors {
+  [key: string]: DiagramDetector;
+}
 
 /**
  * Registers the given diagram with Mermaid.

packages/mermaid/src/diagram-api/loadDiagram.ts

@@ -10,7 +10,7 @@ export const loadRegisteredDiagrams = async () => {
       if (loader) {
         try {
           getDiagram(key);
-        } catch {
+        } catch (error) {
           try {
             // Register diagram if it is not already registered
             const { diagram, id } = await loader();

packages/mermaid/src/diagram.spec.ts

@@ -30,12 +30,12 @@ const getDummyDiagram = (id: string, title?: string): Awaited<ReturnType<Diagram
 
 describe('diagram detection', () => {
   test('should detect inbuilt diagrams', async () => {
-    const graph = await Diagram.fromText('graph TD; A-->B');
+    const graph = (await Diagram.fromText('graph TD; A-->B')) as Diagram;
     expect(graph).toBeInstanceOf(Diagram);
     expect(graph.type).toBe('flowchart-v2');
-    const sequence = await Diagram.fromText(
+    const sequence = (await Diagram.fromText(
       'sequenceDiagram; Alice->>+John: Hello John, how are you?'
-    );
+    )) as Diagram;
     expect(sequence).toBeInstanceOf(Diagram);
     expect(sequence.type).toBe('sequence');
   });

packages/mermaid/src/diagrams/block/blockDB.ts

@@ -8,9 +8,9 @@ import { clear as commonClear } from '../common/commonDb.js';
 import type { Block, ClassDef } from './blockTypes.js';
 
 // Initialize the node database for simple lookups
-let blockDatabase = new Map<string, Block>();
+let blockDatabase: Map<string, Block> = new Map();
 let edgeList: Block[] = [];
-let edgeCount = new Map<string, number>();
+let edgeCount: Map<string, number> = new Map();
 
 const COLOR_KEYWORD = 'color';
 const FILL_KEYWORD = 'fill';
@@ -18,7 +18,7 @@ const BG_FILL = 'bgFill';
 const STYLECLASS_SEP = ',';
 const config = getConfig();
 
-let classes = new Map<string, ClassDef>();
+let classes: Map<string, ClassDef> = new Map();
 
 const sanitizeText = (txt: string) => common.sanitizeText(txt, config);
 
@@ -42,7 +42,7 @@ export const addStyleClass = function (id: string, styleAttributes = '') {
       const fixedAttrib = attrib.replace(/([^;]*);/, '$1').trim();
 
       // replace some style keywords
-      if (RegExp(COLOR_KEYWORD).exec(attrib)) {
+      if (attrib.match(COLOR_KEYWORD)) {
         const newStyle1 = fixedAttrib.replace(FILL_KEYWORD, BG_FILL);
         const newStyle2 = newStyle1.replace(COLOR_KEYWORD, FILL_KEYWORD);
         foundClass.textStyles.push(newStyle2);
@@ -89,7 +89,7 @@ export const setCssClass = function (itemIds: string, cssClassName: string) {
   });
 };
 
-const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
+const populateBlockDatabase = (_blockList: Block[] | Block[][], parent: Block): void => {
   const blockList = _blockList.flat();
   const children = [];
   for (const block of blockList) {
@@ -101,7 +101,7 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
       continue;
     }
     if (block.type === 'applyClass') {
-      setCssClass(block.id, block?.styleClass ?? '');
+      setCssClass(block.id, block?.styleClass || '');
       continue;
     }
     if (block.type === 'applyStyles') {
@@ -111,7 +111,7 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
       continue;
     }
     if (block.type === 'column-setting') {
-      parent.columns = block.columns ?? -1;
+      parent.columns = block.columns || -1;
     } else if (block.type === 'edge') {
       const count = (edgeCount.get(block.id) ?? 0) + 1;
       edgeCount.set(block.id, count);
@@ -145,7 +145,7 @@ const populateBlockDatabase = (_blockList: Block[], parent: Block): void => {
       }
       if (block.type === 'space') {
         // log.debug('abc95 space', block);
-        const w = block.width ?? 1;
+        const w = block.width || 1;
         for (let j = 0; j < w; j++) {
           const newBlock = clone(block);
           newBlock.id = newBlock.id + '-' + j;
@@ -168,7 +168,7 @@ const clear = (): void => {
   commonClear();
   rootBlock = { id: 'root', type: 'composite', children: [], columns: -1 } as Block;
   blockDatabase = new Map([['root', rootBlock]]);
-  blocks = [];
+  blocks = [] as Block[];
   classes = new Map();
 
   edgeList = [];

packages/mermaid/src/diagrams/block/blockRenderer.ts

@@ -1,6 +1,11 @@
-import { select as d3select } from 'd3';
+import {
+  scaleOrdinal as d3scaleOrdinal,
+  schemeTableau10 as d3schemeTableau10,
+  select as d3select,
+} from 'd3';
 import type { Diagram } from '../../Diagram.js';
 import * as configApi from '../../config.js';
+import type { MermaidConfig } from '../../config.type.js';
 import insertMarkers from '../../dagre-wrapper/markers.js';
 import { log } from '../../logger.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
@@ -70,7 +75,7 @@ export const draw = async function (
     const magicFactor = Math.max(1, Math.round(0.125 * (bounds2.width / bounds2.height)));
     const height = bounds2.height + magicFactor + 10;
     const width = bounds2.width + 10;
-    const { useMaxWidth } = conf!;
+    const { useMaxWidth } = conf as Exclude<MermaidConfig['block'], undefined>;
     configureSvgSize(svg, height, width, !!useMaxWidth);
     log.debug('Here Bounds', bounds, bounds2);
     svg.attr(
@@ -78,6 +83,9 @@ export const draw = async function (
       `${bounds2.x - 5} ${bounds2.y - 5} ${bounds2.width + 10} ${bounds2.height + 10}`
     );
   }
+
+  // Get color scheme for the graph
+  const colorScheme = d3scaleOrdinal(d3schemeTableau10);
 };
 
 export default {

packages/mermaid/src/diagrams/block/layout.ts

@@ -2,8 +2,7 @@ import type { BlockDB } from './blockDB.js';
 import type { Block } from './blockTypes.js';
 import { log } from '../../logger.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
-// TODO: This means the number we provide in diagram's config will never be used. Should fix.
-const padding = getConfig()?.block?.padding ?? 8;
+const padding = getConfig()?.block?.padding || 8;
 
 interface BlockPosition {
   px: number;
@@ -43,7 +42,7 @@ const getMaxChildSize = (block: Block) => {
   // find max width of children
   // log.debug('getMaxChildSize abc95 (start) parent:', block.id);
   for (const child of block.children) {
-    const { width, height, x, y } = child.size ?? { width: 0, height: 0, x: 0, y: 0 };
+    const { width, height, x, y } = child.size || { width: 0, height: 0, x: 0, y: 0 };
     log.debug(
       'getMaxChildSize abc95 child:',
       child.id,
@@ -61,7 +60,7 @@ const getMaxChildSize = (block: Block) => {
       continue;
     }
     if (width > maxWidth) {
-      maxWidth = width / (block.widthInColumns ?? 1);
+      maxWidth = width / (block.widthInColumns || 1);
     }
     if (height > maxHeight) {
       maxHeight = height;
@@ -105,10 +104,10 @@ function setBlockSizes(block: Block, db: BlockDB, siblingWidth = 0, siblingHeigh
     for (const child of block.children) {
       if (child.size) {
         log.debug(
-          `abc95 Setting size of children of ${block.id} id=${child.id} ${maxWidth} ${maxHeight} ${JSON.stringify(child.size)}`
+          `abc95 Setting size of children of ${block.id} id=${child.id} ${maxWidth} ${maxHeight} ${child.size}`
         );
         child.size.width =
-          maxWidth * (child.widthInColumns ?? 1) + padding * ((child.widthInColumns ?? 1) - 1);
+          maxWidth * (child.widthInColumns || 1) + padding * ((child.widthInColumns || 1) - 1);
         child.size.height = maxHeight;
         child.size.x = 0;
         child.size.y = 0;
@@ -122,10 +121,10 @@ function setBlockSizes(block: Block, db: BlockDB, siblingWidth = 0, siblingHeigh
       setBlockSizes(child, db, maxWidth, maxHeight);
     }
 
-    const columns = block.columns ?? -1;
+    const columns = block.columns || -1;
     let numItems = 0;
     for (const child of block.children) {
-      numItems += child.widthInColumns ?? 1;
+      numItems += child.widthInColumns || 1;
     }
 
     // The width and height in number blocks
@@ -134,6 +133,8 @@ function setBlockSizes(block: Block, db: BlockDB, siblingWidth = 0, siblingHeigh
       xSize = columns;
     }
 
+    const w = block.widthInColumns || 1;
+
     const ySize = Math.ceil(numItems / xSize);
 
     let width = xSize * (maxWidth + padding) + padding;
@@ -205,13 +206,13 @@ function layoutBlocks(block: Block, db: BlockDB) {
   log.debug(
     `abc85 layout blocks (=>layoutBlocks) ${block.id} x: ${block?.size?.x} y: ${block?.size?.y} width: ${block?.size?.width}`
   );
-  const columns = block.columns ?? -1;
+  const columns = block.columns || -1;
   log.debug('layoutBlocks columns abc95', block.id, '=>', columns, block);
   if (
     block.children && // find max width of children
     block.children.length > 0
   ) {
-    const width = block?.children[0]?.size?.width ?? 0;
+    const width = block?.children[0]?.size?.width || 0;
     const widthOfChildren = block.children.length * width + (block.children.length - 1) * padding;
 
     log.debug('widthOfChildren 88', widthOfChildren, 'posX');
@@ -250,7 +251,7 @@ function layoutBlocks(block: Block, db: BlockDB) {
           } ${halfWidth} padding=${padding} width=${width} halfWidth=${halfWidth} => x:${
             child.size.x
           } y:${child.size.y} ${child.widthInColumns} (width * (child?.w || 1)) / 2 ${
-            (width * (child?.widthInColumns ?? 1)) / 2
+            (width * (child?.widthInColumns || 1)) / 2
           }`
         );
 
@@ -264,13 +265,15 @@ function layoutBlocks(block: Block, db: BlockDB) {
             child.id
           }startingPosX${startingPosX}${padding}${halfWidth}=>x:${child.size.x}y:${child.size.y}${
             child.widthInColumns
-          }(width * (child?.w || 1)) / 2${(width * (child?.widthInColumns ?? 1)) / 2}`
+          }(width * (child?.w || 1)) / 2${(width * (child?.widthInColumns || 1)) / 2}`
         );
       }
+
+      // posY += height + padding;
       if (child.children) {
         layoutBlocks(child, db);
       }
-      columnPos += child?.widthInColumns ?? 1;
+      columnPos += child?.widthInColumns || 1;
       log.debug('abc88 columnsPos', child, columnPos);
     }
   }

packages/mermaid/src/diagrams/block/parser/block.spec.ts

@@ -1,6 +1,9 @@
 // @ts-ignore: jison doesn't export types
 import block from './block.jison';
 import db from '../blockDB.js';
+import { cleanupComments } from '../../../diagram-api/comments.js';
+import { prepareTextForParsing } from '../blockUtils.js';
+import { setConfig } from '../../../config.js';
 
 describe('Block diagram', function () {
   describe('when parsing an block diagram graph it should handle > ', function () {
@@ -10,7 +13,7 @@ describe('Block diagram', function () {
       block.parser.yy.getLogger = () => console;
     });
 
-    it('a diagram with a node', () => {
+    it('a diagram with a node', async () => {
       const str = `block-beta
           id
       `;
@@ -21,7 +24,7 @@ describe('Block diagram', function () {
       expect(blocks[0].id).toBe('id');
       expect(blocks[0].label).toBe('id');
     });
-    it('a node with a square shape and a label', () => {
+    it('a node with a square shape and a label', async () => {
       const str = `block-beta
           id["A label"]
           `;
@@ -33,7 +36,7 @@ describe('Block diagram', function () {
       expect(blocks[0].label).toBe('A label');
       expect(blocks[0].type).toBe('square');
     });
-    it('a diagram with multiple nodes', () => {
+    it('a diagram with multiple nodes', async () => {
       const str = `block-beta
           id1
           id2
@@ -49,7 +52,7 @@ describe('Block diagram', function () {
       expect(blocks[1].label).toBe('id2');
       expect(blocks[1].type).toBe('na');
     });
-    it('a diagram with multiple nodes', () => {
+    it('a diagram with multiple nodes', async () => {
       const str = `block-beta
           id1
           id2
@@ -70,7 +73,7 @@ describe('Block diagram', function () {
       expect(blocks[2].type).toBe('na');
     });
 
-    it('a node with a square shape and a label', () => {
+    it('a node with a square shape and a label', async () => {
       const str = `block-beta
           id["A label"]
           id2`;
@@ -85,7 +88,7 @@ describe('Block diagram', function () {
       expect(blocks[1].label).toBe('id2');
       expect(blocks[1].type).toBe('na');
     });
-    it('a diagram with multiple nodes with edges abc123', () => {
+    it('a diagram with multiple nodes with edges abc123', async () => {
       const str = `block-beta
           id1["first"]  -->   id2["second"]
       `;
@@ -99,7 +102,7 @@ describe('Block diagram', function () {
       expect(edges[0].end).toBe('id2');
       expect(edges[0].arrowTypeEnd).toBe('arrow_point');
     });
-    it('a diagram with multiple nodes with edges abc123', () => {
+    it('a diagram with multiple nodes with edges abc123', async () => {
       const str = `block-beta
           id1["first"]  -- "a label" -->   id2["second"]
       `;
@@ -114,7 +117,7 @@ describe('Block diagram', function () {
       expect(edges[0].arrowTypeEnd).toBe('arrow_point');
       expect(edges[0].label).toBe('a label');
     });
-    it('a diagram with column statements', () => {
+    it('a diagram with column statements', async () => {
       const str = `block-beta
           columns 2
           block1["Block 1"]
@@ -125,7 +128,7 @@ describe('Block diagram', function () {
       const blocks = db.getBlocks();
       expect(blocks.length).toBe(1);
     });
-    it('a diagram withput column statements', () => {
+    it('a diagram withput column statements', async () => {
       const str = `block-beta
           block1["Block 1"]
       `;
@@ -135,7 +138,7 @@ describe('Block diagram', function () {
       const blocks = db.getBlocks();
       expect(blocks.length).toBe(1);
     });
-    it('a diagram with auto column statements', () => {
+    it('a diagram with auto column statements', async () => {
       const str = `block-beta
           columns auto
           block1["Block 1"]
@@ -147,7 +150,7 @@ describe('Block diagram', function () {
       expect(blocks.length).toBe(1);
     });
 
-    it('blocks next to each other', () => {
+    it('blocks next to each other', async () => {
       const str = `block-beta
           columns 2
           block1["Block 1"]
@@ -161,7 +164,7 @@ describe('Block diagram', function () {
       expect(blocks.length).toBe(2);
     });
 
-    it('blocks on top of each other', () => {
+    it('blocks on top of each other', async () => {
       const str = `block-beta
           columns 1
           block1["Block 1"]
@@ -175,7 +178,7 @@ describe('Block diagram', function () {
       expect(blocks.length).toBe(2);
     });
 
-    it('compound blocks 2', () => {
+    it('compound blocks 2', async () => {
       const str = `block-beta
           block
             aBlock["ABlock"]
@@ -203,7 +206,7 @@ describe('Block diagram', function () {
       expect(bBlock.label).toBe('BBlock');
       expect(bBlock.type).toBe('square');
     });
-    it('compound blocks of compound blocks', () => {
+    it('compound blocks of compound blocks', async () => {
       const str = `block-beta
           block
             aBlock["ABlock"]
@@ -238,7 +241,7 @@ describe('Block diagram', function () {
       expect(bBlock.label).toBe('BBlock');
       expect(bBlock.type).toBe('square');
     });
-    it('compound blocks with title', () => {
+    it('compound blocks with title', async () => {
       const str = `block-beta
           block:compoundBlock["Compound block"]
             columns 1
@@ -263,7 +266,7 @@ describe('Block diagram', function () {
       expect(block2.label).toBe('Block 2');
       expect(block2.type).toBe('square');
     });
-    it('blocks mixed with compound blocks', () => {
+    it('blocks mixed with compound blocks', async () => {
       const str = `block-beta
           columns 1
           block1["Block 1"]
@@ -290,7 +293,7 @@ describe('Block diagram', function () {
       expect(block2.type).toBe('square');
     });
 
-    it('Arrow blocks', () => {
+    it('Arrow blocks', async () => {
       const str = `block-beta
         columns 3
         block1["Block 1"]
@@ -314,7 +317,7 @@ describe('Block diagram', function () {
       expect(blockArrow.type).toBe('block_arrow');
       expect(blockArrow.directions).toContain('right');
     });
-    it('Arrow blocks with multiple points', () => {
+    it('Arrow blocks with multiple points', async () => {
       const str = `block-beta
         columns 1
         A
@@ -337,7 +340,7 @@ describe('Block diagram', function () {
       expect(blockArrow.directions).toContain('down');
       expect(blockArrow.directions).not.toContain('right');
     });
-    it('blocks with different widths', () => {
+    it('blocks with different widths', async () => {
       const str = `block-beta
         columns 3
         one["One Slot"]
@@ -352,7 +355,7 @@ describe('Block diagram', function () {
       const two = blocks[1];
       expect(two.widthInColumns).toBe(2);
     });
-    it('empty blocks', () => {
+    it('empty blocks', async () => {
       const str = `block-beta
         columns 3
         space
@@ -371,7 +374,7 @@ describe('Block diagram', function () {
       expect(sp2.type).toBe('space');
       expect(middle.label).toBe('In the middle');
     });
-    it('classDef statements applied to a block', () => {
+    it('classDef statements applied to a block', async () => {
       const str = `block-beta
         classDef black color:#ffffff, fill:#000000;
 
@@ -389,7 +392,7 @@ describe('Block diagram', function () {
       expect(black.id).toBe('black');
       expect(black.styles[0]).toEqual('color:#ffffff');
     });
-    it('style statements applied to a block', () => {
+    it('style statements applied to a block', async () => {
       const str = `block-beta
 columns 1
     B["A wide one in the middle"]

packages/mermaid/src/diagrams/block/renderHelpers.ts

@@ -11,13 +11,14 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
 
   let classStr = 'default';
   if ((vertex?.classes?.length || 0) > 0) {
-    classStr = (vertex?.classes ?? []).join(' ');
+    classStr = (vertex?.classes || []).join(' ');
   }
   classStr = classStr + ' flowchart-label';
 
   // We create a SVG label, either by delegating to addHtmlLabel or manually
   let radius = 0;
   let shape = '';
+  let layoutOptions = {};
   let padding;
   // Set the shape based parameters
   switch (vertex.type) {
@@ -35,6 +36,9 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
       break;
     case 'diamond':
       shape = 'question';
+      layoutOptions = {
+        portConstraints: 'FIXED_SIDE',
+      };
       break;
     case 'hexagon':
       shape = 'hexagon';
@@ -85,12 +89,12 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
       shape = 'rect';
   }
 
-  const styles = getStylesFromArray(vertex?.styles ?? []);
+  const styles = getStylesFromArray(vertex?.styles || []);
 
   // Use vertex id as text in the box if no text is provided by the graph definition
   const vertexText = vertex.label;
 
-  const bounds = vertex.size ?? { width: 0, height: 0, x: 0, y: 0 };
+  const bounds = vertex.size || { width: 0, height: 0, x: 0, y: 0 };
   // Add the node
   const node = {
     labelStyle: styles.labelStyle,
@@ -109,7 +113,7 @@ function getNodeFromBlock(block: Block, db: BlockDB, positioned = false) {
     positioned,
     intersect: undefined,
     type: vertex.type,
-    padding: padding ?? getConfig()?.block?.padding ?? 0,
+    padding: padding ?? (getConfig()?.block?.padding || 0),
   };
   return node;
 }
@@ -138,7 +142,7 @@ export async function insertBlockPositioned(elem: any, block: Block, db: any) {
   // Add the element to the DOM to size it
   const obj = db.getBlock(node.id);
   if (obj.type !== 'space') {
-    await insertNode(elem, node);
+    const nodeEl = await insertNode(elem, node);
     block.intersect = node?.intersect;
     positionNode(node);
   }
@@ -214,7 +218,7 @@ export async function insertEdges(
           { x: end.x, y: end.y },
         ];
         // edge.points = points;
-        insertEdge(
+        await insertEdge(
           elem,
           { v: edge.start, w: edge.end, name: edge.id },
           {
@@ -239,7 +243,7 @@ export async function insertEdges(
             points,
             classes: 'edge-thickness-normal edge-pattern-solid flowchart-link LS-a1 LE-b1',
           });
-          positionEdgeLabel(
+          await positionEdgeLabel(
             { ...edge, x: points[1].x, y: points[1].y },
             {
               originalPath: points,

packages/mermaid/src/diagrams/c4/c4Renderer.js

@@ -258,21 +258,21 @@ export const drawC4ShapeArray = function (currentBounds, diagram, c4ShapeArray,
     c4ShapeLabelConf.fontSize = c4ShapeLabelConf.fontSize + 2;
     c4ShapeLabelConf.fontWeight = 'bold';
     calcC4ShapeTextWH('label', c4Shape, c4ShapeTextWrap, c4ShapeLabelConf, textLimitWidth);
-    c4Shape.label.Y = Y + 8;
-    Y = c4Shape.label.Y + c4Shape.label.height;
+    c4Shape['label'].Y = Y + 8;
+    Y = c4Shape['label'].Y + c4Shape['label'].height;
 
     if (c4Shape.type && c4Shape.type.text !== '') {
       c4Shape.type.text = '[' + c4Shape.type.text + ']';
       let c4ShapeTypeConf = c4ShapeFont(conf, c4Shape.typeC4Shape.text);
       calcC4ShapeTextWH('type', c4Shape, c4ShapeTextWrap, c4ShapeTypeConf, textLimitWidth);
-      c4Shape.type.Y = Y + 5;
-      Y = c4Shape.type.Y + c4Shape.type.height;
+      c4Shape['type'].Y = Y + 5;
+      Y = c4Shape['type'].Y + c4Shape['type'].height;
     } else if (c4Shape.techn && c4Shape.techn.text !== '') {
       c4Shape.techn.text = '[' + c4Shape.techn.text + ']';
       let c4ShapeTechnConf = c4ShapeFont(conf, c4Shape.techn.text);
       calcC4ShapeTextWH('techn', c4Shape, c4ShapeTextWrap, c4ShapeTechnConf, textLimitWidth);
-      c4Shape.techn.Y = Y + 5;
-      Y = c4Shape.techn.Y + c4Shape.techn.height;
+      c4Shape['techn'].Y = Y + 5;
+      Y = c4Shape['techn'].Y + c4Shape['techn'].height;
     }
 
     let rectHeight = Y;
@@ -281,11 +281,11 @@ export const drawC4ShapeArray = function (currentBounds, diagram, c4ShapeArray,
     if (c4Shape.descr && c4Shape.descr.text !== '') {
       let c4ShapeDescrConf = c4ShapeFont(conf, c4Shape.typeC4Shape.text);
       calcC4ShapeTextWH('descr', c4Shape, c4ShapeTextWrap, c4ShapeDescrConf, textLimitWidth);
-      c4Shape.descr.Y = Y + 20;
-      Y = c4Shape.descr.Y + c4Shape.descr.height;
+      c4Shape['descr'].Y = Y + 20;
+      Y = c4Shape['descr'].Y + c4Shape['descr'].height;
 
       rectWidth = Math.max(c4Shape.label.width, c4Shape.descr.width);
-      rectHeight = Y - c4Shape.descr.textLines * 5;
+      rectHeight = Y - c4Shape['descr'].textLines * 5;
     }
 
     rectWidth = rectWidth + conf.c4ShapePadding;
@@ -482,8 +482,8 @@ function drawInsideBoundary(
       currentBoundaryLabelConf,
       currentBounds.data.widthLimit
     );
-    currentBoundary.label.Y = Y + 8;
-    Y = currentBoundary.label.Y + currentBoundary.label.height;
+    currentBoundary['label'].Y = Y + 8;
+    Y = currentBoundary['label'].Y + currentBoundary['label'].height;
 
     if (currentBoundary.type && currentBoundary.type.text !== '') {
       currentBoundary.type.text = '[' + currentBoundary.type.text + ']';
@@ -495,8 +495,8 @@ function drawInsideBoundary(
         currentBoundaryTypeConf,
         currentBounds.data.widthLimit
       );
-      currentBoundary.type.Y = Y + 5;
-      Y = currentBoundary.type.Y + currentBoundary.type.height;
+      currentBoundary['type'].Y = Y + 5;
+      Y = currentBoundary['type'].Y + currentBoundary['type'].height;
     }
 
     if (currentBoundary.descr && currentBoundary.descr.text !== '') {
@@ -509,8 +509,8 @@ function drawInsideBoundary(
         currentBoundaryDescrConf,
         currentBounds.data.widthLimit
       );
-      currentBoundary.descr.Y = Y + 20;
-      Y = currentBoundary.descr.Y + currentBoundary.descr.height;
+      currentBoundary['descr'].Y = Y + 20;
+      Y = currentBoundary['descr'].Y + currentBoundary['descr'].height;
     }
 
     if (i == 0 || i % c4BoundaryInRow === 0) {

packages/mermaid/src/diagrams/class/classDb.ts

@@ -26,10 +26,10 @@ import type {
 const MERMAID_DOM_ID_PREFIX = 'classId-';
 
 let relations: ClassRelation[] = [];
-let classes = new Map<string, ClassNode>();
+let classes: Map<string, ClassNode> = new Map();
 let notes: ClassNote[] = [];
 let classCounter = 0;
-let namespaces = new Map<string, NamespaceNode>();
+let namespaces: Map<string, NamespaceNode> = new Map();
 let namespaceCounter = 0;
 
 let functions: any[] = [];
@@ -223,7 +223,7 @@ export const cleanupLabel = function (label: string) {
 export const setCssClass = function (ids: string, className: string) {
   ids.split(',').forEach(function (_id) {
     let id = _id;
-    if (/\d/.exec(_id[0])) {
+    if (_id[0].match(/\d/)) {
       id = MERMAID_DOM_ID_PREFIX + id;
     }
     const classNode = classes.get(id);
@@ -266,7 +266,7 @@ export const setLink = function (ids: string, linkStr: string, target: string) {
   const config = getConfig();
   ids.split(',').forEach(function (_id) {
     let id = _id;
-    if (/\d/.exec(_id[0])) {
+    if (_id[0].match(/\d/)) {
       id = MERMAID_DOM_ID_PREFIX + id;
     }
     const theClass = classes.get(id);
@@ -320,7 +320,7 @@ const setClickFunc = function (_domId: string, functionName: string, functionArg
         let item = argList[i].trim();
         /* Removes all double quotes at the start and end of an argument */
         /* This preserves all starting and ending whitespace inside */
-        if (item.startsWith('"') && item.endsWith('"')) {
+        if (item.charAt(0) === '"' && item.charAt(item.length - 1) === '"') {
           item = item.substr(1, item.length - 2);
         }
         argList[i] = item;

packages/mermaid/src/diagrams/class/classRenderer-v2.ts

@@ -343,7 +343,7 @@ export const draw = async function (text: string, id: string, _version: string,
   }
   const root =
     securityLevel === 'sandbox'
-      ? select(sandboxElement.nodes()[0]!.contentDocument.body)
+      ? select(sandboxElement!.nodes()[0]!.contentDocument.body)
       : select('body');
   const svg = root.select(`[id="${id}"]`);
 
@@ -363,7 +363,8 @@ export const draw = async function (text: string, id: string, _version: string,
 
   // Add label rects for non html labels
   if (!conf?.htmlLabels) {
-    const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0]!.contentDocument : document;
+    const doc =
+      securityLevel === 'sandbox' ? sandboxElement!.nodes()[0]!.contentDocument : document;
     const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
     for (const label of labels) {
       // Get dimensions of label

packages/mermaid/src/diagrams/class/classTypes.ts

@@ -77,7 +77,7 @@ export class ClassMember {
 
     if (this.memberType === 'method') {
       const methodRegEx = /([#+~-])?(.+)\((.*)\)([\s$*])?(.*)([$*])?/;
-      const match = methodRegEx.exec(input);
+      const match = input.match(methodRegEx);
       if (match) {
         const detectedVisibility = match[1] ? match[1].trim() : '';
 
@@ -92,7 +92,7 @@ export class ClassMember {
 
         if (potentialClassifier === '') {
           const lastChar = this.returnType.substring(this.returnType.length - 1);
-          if (/[$*]/.exec(lastChar)) {
+          if (lastChar.match(/[$*]/)) {
             potentialClassifier = lastChar;
             this.returnType = this.returnType.substring(0, this.returnType.length - 1);
           }
@@ -107,7 +107,7 @@ export class ClassMember {
         this.visibility = firstChar as Visibility;
       }
 
-      if (/[$*]/.exec(lastChar)) {
+      if (lastChar.match(/[$*]/)) {
         potentialClassifier = lastChar;
       }
 

packages/mermaid/src/diagrams/class/svgDraw.js

@@ -315,10 +315,10 @@ export const getClassTitleString = function (classDef) {
  * @param {SVGSVGElement} elem The element to draw it into
  * @param {{id: string; text: string; class: string;}} note
  * @param conf
- * @param _diagObj
+ * @param diagObj
  * @todo Add more information in the JSDOC here
  */
-export const drawNote = function (elem, note, conf, _diagObj) {
+export const drawNote = function (elem, note, conf, diagObj) {
   log.debug('Rendering note ', note, conf);
 
   const id = note.id;

packages/mermaid/src/diagrams/common/common.ts

@@ -34,13 +34,13 @@ function setupDompurifyHooks() {
 
   DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => {
     if (node.tagName === 'A' && node.hasAttribute('target')) {
-      node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') ?? '');
+      node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || '');
     }
   });
 
   DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => {
     if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
-      node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) ?? '');
+      node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || '');
       node.removeAttribute(TEMPORARY_ATTRIBUTE);
       if (node.getAttribute('target') === '_blank') {
         node.setAttribute('rel', 'noopener');
@@ -83,7 +83,6 @@ export const sanitizeText = (text: string, config: MermaidConfig): string => {
     return text;
   }
   if (config.dompurifyConfig) {
-    // eslint-disable-next-line @typescript-eslint/no-base-to-string
     text = DOMPurify.sanitize(sanitizeMore(text, config), config.dompurifyConfig).toString();
   } else {
     text = DOMPurify.sanitize(sanitizeMore(text, config), {