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/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
@@ -112,7 +111,6 @@ STYLECLASS
 STYLEOPTS
 subcomponent
 subcomponents
-subconfig
 SUBROUTINEEND
 SUBROUTINESTART
 Subschemas
@@ -127,7 +125,6 @@ titlevalue
 topbar
 TRAPEND
 TRAPSTART
-treemap
 ts-nocheck
 tsdoc
 typeof

.cspell/contributors.txt

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

.cspell/libraries.txt

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

.cspell/misc-terms.txt

@@ -1,4 +1 @@
-BRANDES
-handdrawn
-KOEPF
 newbranch

.esbuild/build.ts

@@ -2,8 +2,7 @@ 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');
 
@@ -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

@@ -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.

.github/workflows/build-docs.yml

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

.github/workflows/build.yml

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

.github/workflows/e2e-applitools.yml

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

.github/workflows/e2e.yml

@@ -24,7 +24,6 @@ env:
       ) || 
       github.event.before
     }}
-  shouldRunParallel: ${{ secrets.CYPRESS_RECORD_KEY != '' && !(github.event_name == 'push' && github.ref == 'refs/heads/develop') }}
 jobs:
   cache:
     runs-on: ubuntu-latest
@@ -33,7 +32,7 @@ jobs:
       options: --user 1001
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
@@ -80,7 +79,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
@@ -117,7 +116,7 @@ jobs:
         id: cypress
         # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
         # Otherwise (e.g. if running from fork), we run on a single container only
-        if: ${{ env.shouldRunParallel == 'true' || ( matrix.containers == 1 ) }}
+        if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
         with:
           install: false
           start: pnpm run dev:coverage
@@ -125,14 +124,14 @@ jobs:
           browser: chrome
           # Disable recording if we don't have an API key
           # e.g. if this action was run from a fork
-          record: ${{ env.shouldRunParallel == 'true' }}
-          parallel: ${{ env.shouldRunParallel == 'true' }}
+          record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
+          parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true
           CYPRESS_COMMIT: ${{ github.sha }}
           ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
-          ARGOS_PARALLEL: ${{ env.shouldRunParallel == 'true' }}
+          ARGOS_PARALLEL: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
           ARGOS_PARALLEL_TOTAL: 4
           ARGOS_PARALLEL_INDEX: ${{ matrix.containers }}
 

.github/workflows/lint.yml

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

.github/workflows/publish-docs.yml

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

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

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

.github/workflows/release-publish.yml

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

.github/workflows/test.yml

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

.github/workflows/update-browserlist.yml

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

.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,7 +95,7 @@ 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);
@@ -124,9 +125,7 @@ export const verifyScreenshot = (name: string): void => {
     cy.log(`Closing eyes ${Cypress.spec.name}`);
     cy.eyesClose();
   } else if (useArgos) {
-    cy.argosScreenshot(name, {
-      threshold: 0.01,
-    });
+    cy.argosScreenshot(name);
   } else {
     cy.matchImageSnapshot(name);
   }

cypress/integration/rendering/packet.spec.ts

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

cypress/integration/rendering/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/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/viewer.js

@@ -132,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.Mermaid.md

@@ -1,340 +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:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
-
----
-
-### 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:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
-
----
-
-### 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:421](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L421)
-
----
-
-### 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:424](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L424)
-
----
-
-### 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:415](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L415)
-
----
-
-### 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:416](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L416)
-
----
-
-### parseError
-
-• `Optional` **parseError**: [`ParseErrorFunction`](../modules/mermaid.md#parseerrorfunction)
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:410](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L410)
-
----
-
-### 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:423](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L423)
-
----
-
-### 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:417](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L417)
-
----
-
-### 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:422](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L422)
-
----
-
-### 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:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
-
----
-
-### startOnLoad
-
-• **startOnLoad**: `boolean`
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:409](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L409)

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

@@ -1,467 +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:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L85)
-
----
-
-### 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:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L104)
-
----
-
-### block
-
-• `Optional` **block**: `BlockDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:162](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L162)
-
----
-
-### c4
-
-• `Optional` **c4**: `C4DiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:159](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L159)
-
----
-
-### class
-
-• `Optional` **class**: `ClassDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:150](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L150)
-
----
-
-### darkMode
-
-• `Optional` **darkMode**: `boolean`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L76)
-
----
-
-### 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:144](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L144)
-
----
-
-### 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:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L137)
-
----
-
-### dompurifyConfig
-
-• `Optional` **dompurifyConfig**: `Config`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)
-
----
-
-### er
-
-• `Optional` **er**: `ErDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L152)
-
----
-
-### flowchart
-
-• `Optional` **flowchart**: `FlowchartDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L145)
-
----
-
-### 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:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L84)
-
----
-
-### fontSize
-
-• `Optional` **fontSize**: `number`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:165](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L165)
-
----
-
-### 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:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L126)
-
----
-
-### gantt
-
-• `Optional` **gantt**: `GanttDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L147)
-
----
-
-### gitGraph
-
-• `Optional` **gitGraph**: `GitGraphDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:158](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L158)
-
----
-
-### htmlLabels
-
-• `Optional` **htmlLabels**: `boolean`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L77)
-
----
-
-### journey
-
-• `Optional` **journey**: `JourneyDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L148)
-
----
-
-### 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:119](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L119)
-
----
-
-### 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:90](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L90)
-
----
-
-### markdownAutoWrap
-
-• `Optional` **markdownAutoWrap**: `boolean`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:166](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L166)
-
----
-
-### 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:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L75)
-
----
-
-### maxTextSize
-
-• `Optional` **maxTextSize**: `number`
-
-The maximum allowed size of the users text diagram
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L70)
-
----
-
-### mindmap
-
-• `Optional` **mindmap**: `MindmapDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:157](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L157)
-
----
-
-### packet
-
-• `Optional` **packet**: `PacketDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:161](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L161)
-
----
-
-### pie
-
-• `Optional` **pie**: `PieDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L153)
-
----
-
-### quadrantChart
-
-• `Optional` **quadrantChart**: `QuadrantChartConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L154)
-
----
-
-### requirement
-
-• `Optional` **requirement**: `RequirementDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L156)
-
----
-
-### sankey
-
-• `Optional` **sankey**: `SankeyDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:160](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L160)
-
----
-
-### 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:111](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L111)
-
----
-
-### securityLevel
-
-• `Optional` **securityLevel**: `"strict"` | `"loose"` | `"antiscript"` | `"sandbox"`
-
-Level of trust for parsed diagram
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L94)
-
----
-
-### sequence
-
-• `Optional` **sequence**: `SequenceDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L146)
-
----
-
-### startOnLoad
-
-• `Optional` **startOnLoad**: `boolean`
-
-Dictates whether mermaid starts on Page load
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L98)
-
----
-
-### state
-
-• `Optional` **state**: `StateDiagramConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L151)
-
----
-
-### 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:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L172)
-
----
-
-### 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:149](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L149)
-
----
-
-### wrap
-
-• `Optional` **wrap**: `boolean`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:164](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L164)
-
----
-
-### xyChart
-
-• `Optional` **xyChart**: `XYChartConfig`
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L155)

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:39](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L39)
-
----
-
-### 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:43](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L43)
-
----
-
-### querySelector
-
-• `Optional` **querySelector**: `string`
-
-The query selector to use when finding elements to render. Default: `".mermaid"`.
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:35](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L35)
-
----
-
-### 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:47](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L47)

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:218](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L218)
+[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,57 +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)
-- [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:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)

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/ecosystem/integrations-community.md

@@ -42,8 +42,6 @@ To add an integration to this list, see the [Integrations - create page](./integ
   - [CloudScript.io Mermaid Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
 - [Azure Devops](https://learn.microsoft.com/en-us/azure/devops/project/wiki/markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
 - [Deepdwn](https://billiam.itch.io/deepdwn) ✅
-- [Doctave](https://www.doctave.com/) ✅
-  - [Mermaid in Markdown code blocks](https://docs.doctave.com/components/mermaid) ✅
 - [GitBook](https://gitbook.com)
   - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
   - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)

docs/syntax/stateDiagram.md

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

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,221 +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-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",
@@ -62,12 +62,12 @@
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.42.3",
-    "@argos-ci/cypress": "^2.1.0",
-    "@cspell/eslint-plugin": "^8.8.4",
+    "@argos-ci/cypress": "^2.0.5",
+    "@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",
@@ -86,21 +88,20 @@
     "cspell": "^8.6.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": "^54.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;

packages/mermaid-zenuml/package.json

@@ -34,7 +34,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@zenuml/core": "^3.23.27"
+    "@zenuml/core": "^3.19.2"
   },
   "devDependencies": {
     "mermaid": "workspace:^"

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",
@@ -81,7 +81,7 @@
     "katex": "^0.16.9",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
-    "marked": "^13.0.2",
+    "mdast-util-from-markdown": "^2.0.0",
     "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,7 +189,7 @@ 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) {
+  if (directive.fontFamily && (!directive.themeVariables || !directive.themeVariables.fontFamily)) {
     directive.themeVariables = { fontFamily: directive.fontFamily };
   }
 

packages/mermaid/src/config.type.ts

@@ -104,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.
    *
    */

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
@@ -130,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

@@ -901,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]

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

@@ -104,7 +104,6 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
     bbox = div.getBoundingClientRect();
     dv.attr('width', bbox.width);
     dv.attr('height', bbox.height);
-    dv.style('height', bbox.height + 'px');
   }
 
   // Center the label

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[] = [];
@@ -113,7 +113,6 @@ export const clear = function () {
   functions.push(setupToolTips);
   namespaces = new Map();
   namespaceCounter = 0;
-  direction = 'TB';
   commonClear();
 };
 
@@ -224,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);
@@ -267,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);
@@ -321,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/classDiagram.spec.ts

@@ -444,17 +444,6 @@ class C13["With Città foreign language"]
         ]
       `);
     });
-
-    it('should revert direction to default once direction is removed', () => {
-      parser.parse(`classDiagram
-          direction RL
-          class A`);
-      expect(classDb.getDirection()).toBe('RL');
-      classDb.clear();
-      parser.parse(`classDiagram
-          class B`);
-      expect(classDb.getDirection()).toBe('TB');
-    });
   });
 
   describe('when parsing class defined in brackets', function () {

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), {

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

@@ -24,12 +24,8 @@ export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElemen
   if (rectData.name) {
     rectElement.attr('name', rectData.name);
   }
-  if (rectData.rx) {
-    rectElement.attr('rx', rectData.rx);
-  }
-  if (rectData.ry) {
-    rectElement.attr('ry', rectData.ry);
-  }
+  rectData.rx !== undefined && rectElement.attr('rx', rectData.rx);
+  rectData.ry !== undefined && rectElement.attr('ry', rectData.ry);
 
   if (rectData.attrs !== undefined) {
     for (const attrKey in rectData.attrs) {
@@ -37,9 +33,7 @@ export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElemen
     }
   }
 
-  if (rectData.class) {
-    rectElement.attr('class', rectData.class);
-  }
+  rectData.class !== undefined && rectElement.attr('class', rectData.class);
 
   return rectElement;
 };
@@ -73,9 +67,7 @@ export const drawText = (element: SVG | Group, textData: TextData): D3TextElemen
   textElem.attr('class', 'legend');
 
   textElem.style('text-anchor', textData.anchor);
-  if (textData.class) {
-    textElem.attr('class', textData.class);
-  }
+  textData.class !== undefined && textElem.attr('class', textData.class);
 
   const tspan: D3TSpanElement = textElem.append('tspan');
   tspan.attr('x', textData.x + textData.textMargin * 2);

packages/mermaid/src/diagrams/er/erDb.js

@@ -26,16 +26,12 @@ const Identification = {
   NON_IDENTIFYING: 'NON_IDENTIFYING',
   IDENTIFYING: 'IDENTIFYING',
 };
-/**
- * Add entity
- * @param {string} name - The name of the entity
- * @param {string | undefined} alias - The alias of the entity
- */
+
 const addEntity = function (name, alias = undefined) {
   if (!entities.has(name)) {
-    entities.set(name, { attributes: [], alias });
+    entities.set(name, { attributes: [], alias: alias });
     log.info('Added new entity :', name);
-  } else if (!entities.get(name).alias && alias) {
+  } else if (entities.has(name) && !entities.get(name).alias && alias) {
     entities.get(name).alias = alias;
     log.info(`Add alias '${alias}' to entity '${name}'`);
   }

packages/mermaid/src/diagrams/flowchart/flowChartShapes.spec.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
 import { addToRender } from './flowChartShapes.js';
 
 describe('flowchart shapes', function () {

packages/mermaid/src/diagrams/flowchart/flowDb.ts

@@ -17,12 +17,12 @@ import type { FlowVertex, FlowClass, FlowSubGraph, FlowText, FlowEdge, FlowLink
 const MERMAID_DOM_ID_PREFIX = 'flowchart-';
 let vertexCounter = 0;
 let config = getConfig();
-let vertices = new Map<string, FlowVertex>();
+let vertices: Map<string, FlowVertex> = new Map();
 let edges: FlowEdge[] & { defaultInterpolate?: string; defaultStyle?: string[] } = [];
-let classes = new Map<string, FlowClass>();
+let classes: Map<string, FlowClass> = new Map();
 let subGraphs: FlowSubGraph[] = [];
-let subGraphLookup = new Map<string, FlowSubGraph>();
-let tooltips = new Map<string, string>();
+let subGraphLookup: Map<string, FlowSubGraph> = new Map();
+let tooltips: Map<string, string> = new Map();
 let subCount = 0;
 let firstGraphFlag = true;
 let direction: string;
@@ -84,7 +84,7 @@ export const addVertex = function (
     txt = sanitizeText(textObj.text.trim());
     vertex.labelType = textObj.type;
     // strip quotes if string starts and ends with a quote
-    if (txt.startsWith('"') && txt.endsWith('"')) {
+    if (txt[0] === '"' && txt[txt.length - 1] === '"') {
       txt = txt.substring(1, txt.length - 1);
     }
     vertex.text = txt;
@@ -132,7 +132,7 @@ export const addSingleLink = function (_start: string, _end: string, type: any)
     edge.text = sanitizeText(linkTextObj.text.trim());
 
     // strip quotes if string starts and ends with a quote
-    if (edge.text.startsWith('"') && edge.text.endsWith('"')) {
+    if (edge.text[0] === '"' && edge.text[edge.text.length - 1] === '"') {
       edge.text = edge.text.substring(1, edge.text.length - 1);
     }
     edge.labelType = linkTextObj.type;
@@ -218,7 +218,7 @@ export const addClass = function (ids: string, style: string[]) {
 
     if (style !== undefined && style !== null) {
       style.forEach(function (s) {
-        if (/color/.exec(s)) {
+        if (s.match('color')) {
           const newStyle = s.replace('fill', 'bgFill').replace('color', 'fill');
           classNode.textStyles.push(newStyle);
         }
@@ -234,16 +234,16 @@ export const addClass = function (ids: string, style: string[]) {
  */
 export const setDirection = function (dir: string) {
   direction = dir;
-  if (/.*</.exec(direction)) {
+  if (direction.match(/.*</)) {
     direction = 'RL';
   }
-  if (/.*\^/.exec(direction)) {
+  if (direction.match(/.*\^/)) {
     direction = 'BT';
   }
-  if (/.*>/.exec(direction)) {
+  if (direction.match(/.*>/)) {
     direction = 'LR';
   }
-  if (/.*v/.exec(direction)) {
+  if (direction.match(/.*v/)) {
     direction = 'TB';
   }
   if (direction === 'TD') {
@@ -297,7 +297,7 @@ const setClickFun = function (id: string, functionName: string, functionArgs: st
       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;
@@ -469,7 +469,7 @@ export const addSubGraph = function (
 ) {
   let id: string | undefined = _id.text.trim();
   let title = _title.text;
-  if (_id === _title && /\s/.exec(_title.text)) {
+  if (_id === _title && _title.text.match(/\s/)) {
     id = undefined;
   }
 
@@ -503,7 +503,7 @@ export const addSubGraph = function (
     }
   }
 
-  id = id ?? 'subGraph' + subCount;
+  id = id || 'subGraph' + subCount;
   title = title || '';
   title = sanitizeText(title);
   subCount = subCount + 1;
@@ -651,21 +651,21 @@ const destructEndLink = (_str: string) => {
   switch (str.slice(-1)) {
     case 'x':
       type = 'arrow_cross';
-      if (str.startsWith('x')) {
+      if (str[0] === 'x') {
         type = 'double_' + type;
         line = line.slice(1);
       }
       break;
     case '>':
       type = 'arrow_point';
-      if (str.startsWith('<')) {
+      if (str[0] === '<') {
         type = 'double_' + type;
         line = line.slice(1);
       }
       break;
     case 'o':
       type = 'arrow_circle';
-      if (str.startsWith('o')) {
+      if (str[0] === 'o') {
         type = 'double_' + type;
         line = line.slice(1);
       }
@@ -675,11 +675,11 @@ const destructEndLink = (_str: string) => {
   let stroke = 'normal';
   let length = line.length - 1;
 
-  if (line.startsWith('=')) {
+  if (line[0] === '=') {
     stroke = 'thick';
   }
 
-  if (line.startsWith('~')) {
+  if (line[0] === '~') {
     stroke = 'invisible';
   }