Merge branch 'develop' into sidv/biome

* develop:
  chore: update browsers list
  chore(deps): update all patch dependencies
  docs: Added demo diagram of bidirectional arrows for sequence diagrams
  fix(deps): update all patch dependencies

.build/common.ts

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

.build/jisonTransformer.ts

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

.build/types.ts

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

.cspell/code-terms.txt

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

.cspell/contributors.txt

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

.cspell/libraries.txt

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

.cspell/mermaid-terms.txt

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

.cspell/misc-terms.txt

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

.esbuild/build.ts

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

.esbuild/server.ts

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

.esbuild/util.ts

@@ -8,7 +8,7 @@ import { jisonPlugin } from './jisonPlugin.js';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
-export interface MermaidBuildOptions extends BuildOptions {
+export interface MermaidBuildOptions {
   minify: boolean;
   core: boolean;
   metafile: boolean;

.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',
+    'biome',
+  ],
+  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/workflows/lint.yml

@@ -37,9 +37,9 @@ jobs:
       - name: Run Linting
         shell: bash
         run: |
-          if ! pnpm run lint; then
+          if ! pnpm run lint:ci; then
               # print a nice error message on lint failure
-              ERROR_MESSAGE='Running `pnpm run lint` failed.'
+              ERROR_MESSAGE='Running `pnpm run lint:ci` failed.'
               ERROR_MESSAGE+=' Running `pnpm -w run lint:fix` may fix this issue. '
               ERROR_MESSAGE+=" If this error doesn't occur on your local machine,"
               ERROR_MESSAGE+=' make sure your packages are up-to-date by running `pnpm install`.'

.gitignore

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

.lintstagedrc.mjs

@@ -1,10 +1,6 @@
 export default {
   '!(docs/**/*)*.{ts,js,html,md,mts}': [
-    'eslint --cache --cache-strategy content --fix',
-    // don't cache prettier yet, since we use `prettier-plugin-jsdoc`,
-    // and prettier doesn't invalidate cache on plugin updates"
-    // https://prettier.io/docs/en/cli.html#--cache
-    'prettier --write',
+    'biome check --no-errors-on-unmatched --files-ignore-unknown=true --write',
   ],
   '.cspell/*.txt': ['tsx scripts/fixCSpell.ts'],
   '**/*.jison': ['pnpm -w run lint:jison'],

.prettierignore

@@ -1,20 +0,0 @@
-dist
-cypress/platform/xss3.html
-.cache
-.pnpm-store
-coverage
-# Autogenerated by PNPM
-pnpm-lock.yaml
-stats
-**/.vitepress/components.d.ts
-**/.vitepress/cache
-.nyc_output
-# Autogenerated by `pnpm run --filter mermaid types:build-config`
-packages/mermaid/src/config.type.ts
-# autogenereated by langium-cli
-generated/
-# Ignore the files creates in /demos/dev except for example.html
-demos/dev/**
-!/demos/dev/example.html
-# TODO: Lots of errors to fix
-cypress/platform/state-refactor.html

.prettierrc.json

@@ -1,8 +0,0 @@
-{
-  "endOfLine": "auto",
-  "printWidth": 100,
-  "singleQuote": true,
-  "useTabs": false,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}

.vite/build.ts

@@ -1,5 +1,4 @@
-import type { InlineConfig } from 'vite';
-import { build, type PluginOption } from 'vite';
+import { build, type InlineConfig, type PluginOption } from 'vite';
 import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
@@ -47,7 +46,6 @@ 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 = [
@@ -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/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();

biome.json

@@ -0,0 +1,229 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.8.2/schema.json",
+  "files": {
+    "ignore": [
+      "**/contributor-names.json",
+      "**/generated/",
+      "**/knsv*.html",
+      "**/local*.html",
+      "**/stats/",
+      "**/user-avatars/*",
+      "./.vscode/**",
+      "cypress/platform/current.html",
+      "cypress/platform/experimental.html",
+      "cypress/platform/xss3.html",
+      "cypress/screenshots/",
+      "cypress/snapshots/",
+      "demos/dev/**",
+      "packages/mermaid/src/config.type.ts"
+    ]
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 100,
+    "attributePosition": "auto"
+  },
+  "organizeImports": { "enabled": false },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": false,
+      "complexity": {
+        "noBannedTypes": "error",
+        "noExtraBooleanCast": "error",
+        "noMultipleSpacesInRegularExpressionLiterals": "error",
+        "noUselessCatch": "error",
+        "noUselessThisAlias": "error",
+        "noUselessTypeConstraint": "error",
+        "noWith": "error",
+        "useFlatMap": "error"
+      },
+      "correctness": {
+        "noConstAssign": "error",
+        "noConstantCondition": "error",
+        "noEmptyCharacterClassInRegex": "error",
+        "noEmptyPattern": "error",
+        "noGlobalObjectCalls": "error",
+        "noInnerDeclarations": "error",
+        "noInvalidConstructorSuper": "error",
+        "noNewSymbol": "error",
+        "noNonoctalDecimalEscape": "error",
+        "noPrecisionLoss": "error",
+        "noSelfAssign": "error",
+        "noSetterReturn": "error",
+        "noSwitchDeclarations": "error",
+        "noUndeclaredVariables": "error",
+        "noUnreachable": "error",
+        "noUnreachableSuper": "error",
+        "noUnsafeFinally": "error",
+        "noUnsafeOptionalChaining": "error",
+        "noUnusedLabels": "error",
+        "noUnusedVariables": "off",
+        "useArrayLiterals": "off",
+        "useIsNan": "error",
+        "useValidForDirection": "error",
+        "useYield": "error"
+      },
+      "style": {
+        "noNamespace": "error",
+        "useAsConstAssertion": "error",
+        "useBlockStatements": "error",
+        "useForOf": "error",
+        "useImportType": "error",
+        "useNamingConvention": {
+          "level": "off",
+          "options": { "strictCase": false }
+        }
+      },
+      "suspicious": {
+        "noAssignInExpressions": "warn",
+        "noAsyncPromiseExecutor": "error",
+        "noCatchAssign": "error",
+        "noClassAssign": "error",
+        "noCompareNegZero": "error",
+        "noConsoleLog": "off",
+        "noControlCharactersInRegex": "error",
+        "noDebugger": "error",
+        "noDuplicateCase": "error",
+        "noDuplicateClassMembers": "error",
+        "noDuplicateObjectKeys": "error",
+        "noDuplicateParameters": "error",
+        "noEmptyBlockStatements": "off",
+        "noExplicitAny": "off",
+        "noExtraNonNullAssertion": "error",
+        "noFallthroughSwitchClause": "error",
+        "noFunctionAssign": "error",
+        "noGlobalAssign": "error",
+        "noImportAssign": "error",
+        "noMisleadingCharacterClass": "error",
+        "noMisleadingInstantiator": "error",
+        "noPrototypeBuiltins": "off",
+        "noRedeclare": "error",
+        "noShadowRestrictedNames": "error",
+        "noUnsafeDeclarationMerging": "error",
+        "noUnsafeNegation": "error",
+        "useGetterReturn": "error",
+        "useIsArray": "error",
+        "useValidTypeof": "error"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingCommas": "es5",
+      "semicolons": "always",
+      "arrowParentheses": "always",
+      "bracketSpacing": true,
+      "bracketSameLine": false,
+      "quoteStyle": "single",
+      "attributePosition": "auto"
+    },
+    "globals": [
+      "it",
+      "describe",
+      "beforeEach",
+      "beforeAll",
+      "afterEach",
+      "cy",
+      "expect",
+      "context",
+      "Cypress"
+    ]
+  },
+  "overrides": [
+    {
+      "include": ["cypress/**", "demos/**", "**/scripts"],
+      "linter": { "rules": { "suspicious": { "noConsoleLog": "off" } } }
+    },
+    { "include": ["*.{js,jsx,mjs,cjs}"], "linter": { "rules": {} } },
+    { "include": ["*.{ts,tsx}"], "linter": { "rules": {} } },
+    {
+      "include": ["*.spec.{ts,js}", "cypress/**", "demos/**", "**/docs/**"],
+      "linter": {
+        "rules": {
+          "correctness": { "noUnusedVariables": "off" },
+          "style": {
+            "useNamingConvention": "off"
+          }
+        }
+      }
+    },
+    {
+      "include": ["*.spec.{ts,js}", "tests/**", "cypress/**/*.js"],
+      "linter": {
+        "rules": {
+          "style": {
+            "useNamingConvention": "off"
+          }
+        }
+      }
+    },
+    {
+      "include": ["*.html", "*.md", "**/*.md/*"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noUndeclaredVariables": "off",
+            "noUnusedVariables": "off"
+          },
+          "style": { "noVar": "error" }
+        }
+      }
+    },
+    { "include": ["*.md"] },
+    {
+      "include": ["**/*.md/**"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noUndeclaredVariables": "off",
+            "noUnusedVariables": "off"
+          }
+        }
+      }
+    },
+    {
+      "include": ["*.ts", "*.tsx", "*.mts", "*.cts"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noConstAssign": "off",
+            "noGlobalObjectCalls": "off",
+            "noInvalidConstructorSuper": "off",
+            "noNewSymbol": "off",
+            "noSetterReturn": "off",
+            "noUndeclaredVariables": "off",
+            "noUnreachable": "off",
+            "noUnreachableSuper": "off"
+          },
+          "style": {
+            "noArguments": "error",
+            "noVar": "error",
+            "useConst": "error"
+          },
+          "suspicious": {
+            "noDuplicateClassMembers": "off",
+            "noDuplicateObjectKeys": "off",
+            "noDuplicateParameters": "off",
+            "noFunctionAssign": "off",
+            "noImportAssign": "off",
+            "noRedeclare": "off",
+            "noUnsafeNegation": "off",
+            "useGetterReturn": "off"
+          }
+        }
+      }
+    }
+  ],
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  }
+}

cypress/helpers/util.ts

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

cypress/integration/rendering/appli.spec.js

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

cypress/integration/rendering/sequencediagram.spec.js

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

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

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

cypress/platform/bundle-test.js

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

cypress/platform/flowchart-refactor.html

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

cypress/platform/flowchart-sate.html

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

cypress/platform/knsv-4442.html

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

cypress/platform/knsv2.html

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

cypress/platform/knsv3.html

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

cypress/platform/viewer.js

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

docs/config/setup/README.md

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

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

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

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

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

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

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

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

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

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

@@ -1,407 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.Mermaid.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.Mermaid.md).
-
-# Interface: Mermaid
-
-[mermaid](../modules/mermaid.md).Mermaid
-
-## Properties
-
-### contentLoaded
-
-• **contentLoaded**: () => `void`
-
-#### Type declaration
-
-▸ (): `void`
-
-\##contentLoaded Callback function that is called when page is loaded. This functions fetches
-configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
-page.
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)
-
----
-
-### detectType
-
-• **detectType**: (`text`: `string`, `config?`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string`
-
-#### Type declaration
-
-▸ (`text`, `config?`): `string`
-
-Detects the type of the graph text.
-
-Takes into consideration the possible existence of an `%%init` directive
-
-##### Parameters
-
-| Name      | Type                                        | Description                                                                                                                                                         |
-| :-------- | :------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `text`    | `string`                                    | The text defining the graph. For example: `mermaid %%{initialize: {"startOnLoad": true, logLevel: "fatal" }}%% graph LR a-->b b-->c c-->d d-->e e-->f f-->g g-->h ` |
-| `config?` | [`MermaidConfig`](mermaid.MermaidConfig.md) | The mermaid config.                                                                                                                                                 |
-
-##### Returns
-
-`string`
-
-A graph definition key
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
-
----
-
-### init
-
-• **init**: (`config?`: [`MermaidConfig`](mermaid.MermaidConfig.md), `nodes?`: `string` | `HTMLElement` | `NodeListOf`<`HTMLElement`>, `callback?`: (`id`: `string`) => `unknown`) => `Promise`<`void`>
-
-**`Deprecated`**
-
-Use [initialize](mermaid.Mermaid.md#initialize) and [run](mermaid.Mermaid.md#run) instead.
-
-#### Type declaration
-
-▸ (`config?`, `nodes?`, `callback?`): `Promise`<`void`>
-
-##### Parameters
-
-| Name        | Type                                                     |
-| :---------- | :------------------------------------------------------- |
-| `config?`   | [`MermaidConfig`](mermaid.MermaidConfig.md)              |
-| `nodes?`    | `string` \| `HTMLElement` \| `NodeListOf`<`HTMLElement`> |
-| `callback?` | (`id`: `string`) => `unknown`                            |
-
-##### Returns
-
-`Promise`<`void`>
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
-
----
-
-### initialize
-
-• **initialize**: (`config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void`
-
-#### Type declaration
-
-▸ (`config`): `void`
-
-Used to set configurations for mermaid.
-This function should be called before the run function.
-
-##### Parameters
-
-| Name     | Type                                        | Description                       |
-| :------- | :------------------------------------------ | :-------------------------------- |
-| `config` | [`MermaidConfig`](mermaid.MermaidConfig.md) | Configuration object for mermaid. |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:429](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L429)
-
----
-
-### internalHelpers
-
-• **internalHelpers**: `Object`
-
-Internal helpers for mermaid
-
-**`Deprecated`**
-
-- This should not be used by external packages, as the definitions will change without notice.
-
-#### Type declaration
-
-| Name                         | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| :--------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `common`                     | { `evaluate`: (`val?`: `string` \| `boolean`) => `boolean` ; `getMax`: (...`values`: `number`\[]) => `number` ; `getMin`: (...`values`: `number`\[]) => `number` ; `getRows`: (`s?`: `string`) => `string`\[] ; `getUrl`: (`useAbsolute`: `boolean`) => `string` ; `hasBreaks`: (`text`: `string`) => `boolean` ; `lineBreakRegex`: `RegExp` ; `removeScript`: (`txt`: `string`) => `string` ; `sanitizeText`: (`text`: `string`, `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` ; `sanitizeTextOrArray`: (`a`: `string` \| `string`\[] \| `string`\[]\[], `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` \| `string`\[] ; `splitBreaks`: (`text`: `string`) => `string`\[] } |
-| `common.evaluate`            | (`val?`: `string` \| `boolean`) => `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| `common.getMax`              | (...`values`: `number`\[]) => `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `common.getMin`              | (...`values`: `number`\[]) => `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `common.getRows`             | (`s?`: `string`) => `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `common.getUrl`              | (`useAbsolute`: `boolean`) => `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `common.hasBreaks`           | (`text`: `string`) => `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `common.lineBreakRegex`      | `RegExp`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| `common.removeScript`        | (`txt`: `string`) => `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| `common.sanitizeText`        | (`text`: `string`, `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `common.sanitizeTextOrArray` | (`a`: `string` \| `string`\[] \| `string`\[]\[], `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` \| `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `common.splitBreaks`         | (`text`: `string`) => `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `getConfig`                  | () => [`MermaidConfig`](mermaid.MermaidConfig.md)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `insertCluster`              | (`elem`: `any`, `node`: `any`) => `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `insertEdge`                 | (`elem`: `any`, `edge`: `any`, `clusterDb`: `any`, `diagramType`: `any`, `startNode`: `any`, `endNode`: `any`, `id`: `any`) => { `originalPath`: `any` ; `updatedPath`: `any` }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `insertEdgeLabel`            | (`elem`: `any`, `edge`: `any`) => `Promise`<`any`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `insertMarkers`              | (`elem`: `any`, `markerArray`: `any`, `type`: `any`, `id`: `any`) => `void`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `insertNode`                 | (`elem`: `any`, `node`: `any`, `dir`: `any`) => `Promise`<`any`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| `interpolateToCurve`         | (`interpolate`: `undefined` \| `string`, `defaultCurve`: `CurveFactory`) => `CurveFactory`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `labelHelper`                | (`parent`: `any`, `node`: `any`, `_classes`: `any`) => `Promise`<{ `bbox`: `any` ; `halfPadding`: `number` ; `label`: `any` = labelEl; `shapeSvg`: `any` }>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `log`                        | `Record`<`LogLevel`, (...`data`: `any`\[]) => `void`(`message?`: `any`, ...`optionalParams`: `any`\[]) => `void`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `positionEdgeLabel`          | (`edge`: `any`, `paths`: `any`) => `void`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
-
----
-
-### mermaidAPI
-
-• **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.defaultConfig; `getConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.setConfig; `updateSiteConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.updateSiteConfig }>
-
-**`Deprecated`**
-
-Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)
-
----
-
-### parse
-
-• **parse**: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)>
-
-#### Type declaration
-
-▸ (`text`, `parseOptions`): `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>
-
-Parse the text and validate the syntax.
-
-##### Parameters
-
-| Name           | Type                                                                     | Description                     |
-| :------------- | :----------------------------------------------------------------------- | :------------------------------ |
-| `text`         | `string`                                                                 | The mermaid diagram definition. |
-| `parseOptions` | [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` } | Options for parsing.            |
-
-##### Returns
-
-`Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>
-
-An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
-
-**`See`**
-
-[ParseOptions](mermaid.ParseOptions.md)
-
-**`Throws`**
-
-Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
-
-▸ (`text`, `parseOptions?`): `Promise`<[`ParseResult`](mermaid.ParseResult.md)>
-
-##### Parameters
-
-| Name            | Type                                      |
-| :-------------- | :---------------------------------------- |
-| `text`          | `string`                                  |
-| `parseOptions?` | [`ParseOptions`](mermaid.ParseOptions.md) |
-
-##### Returns
-
-`Promise`<[`ParseResult`](mermaid.ParseResult.md)>
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420)
-
----
-
-### parseError
-
-• `Optional` **parseError**: [`ParseErrorFunction`](../modules/mermaid.md#parseerrorfunction)
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:414](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L414)
-
----
-
-### registerExternalDiagrams
-
-• **registerExternalDiagrams**: (`diagrams`: [`ExternalDiagramDefinition`](mermaid.ExternalDiagramDefinition.md)\[], `opts`: { `lazyLoad?`: `boolean` = true }) => `Promise`<`void`>
-
-#### Type declaration
-
-▸ (`diagrams`, `opts?`): `Promise`<`void`>
-
-Used to register external diagram types.
-
-##### Parameters
-
-| Name             | Type                                                                   | Default value | Description                                                                 |
-| :--------------- | :--------------------------------------------------------------------- | :------------ | :-------------------------------------------------------------------------- |
-| `diagrams`       | [`ExternalDiagramDefinition`](mermaid.ExternalDiagramDefinition.md)\[] | `undefined`   | Array of [ExternalDiagramDefinition](mermaid.ExternalDiagramDefinition.md). |
-| `opts`           | `Object`                                                               | `{}`          | If opts.lazyLoad is false, the diagrams will be loaded immediately.         |
-| `opts.lazyLoad?` | `boolean`                                                              | `true`        | -                                                                           |
-
-##### Returns
-
-`Promise`<`void`>
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:428](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L428)
-
----
-
-### registerLayoutLoaders
-
-• **registerLayoutLoaders**: (`loaders`: [`LayoutLoaderDefinition`](mermaid.LayoutLoaderDefinition.md)\[]) => `void`
-
-#### Type declaration
-
-▸ (`loaders`): `void`
-
-##### Parameters
-
-| Name      | Type                                                             |
-| :-------- | :--------------------------------------------------------------- |
-| `loaders` | [`LayoutLoaderDefinition`](mermaid.LayoutLoaderDefinition.md)\[] |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
-
----
-
-### render
-
-• **render**: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)>
-
-#### Type declaration
-
-▸ (`id`, `text`, `svgContainingElement?`): `Promise`<[`RenderResult`](mermaid.RenderResult.md)>
-
-##### Parameters
-
-| Name                    | Type      |
-| :---------------------- | :-------- |
-| `id`                    | `string`  |
-| `text`                  | `string`  |
-| `svgContainingElement?` | `Element` |
-
-##### Returns
-
-`Promise`<[`RenderResult`](mermaid.RenderResult.md)>
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:421](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L421)
-
----
-
-### run
-
-• **run**: (`options`: [`RunOptions`](mermaid.RunOptions.md)) => `Promise`<`void`>
-
-#### Type declaration
-
-▸ (`options?`): `Promise`<`void`>
-
-## run
-
-Function that goes through the document to find the chart definitions in there and render them.
-
-The function tags the processed attributes with the attribute data-processed and ignores found
-elements with the attribute already set. This way the init function can be triggered several
-times.
-
-```mermaid-example
-graph LR;
- a(Find elements)-->b{Processed}
- b-->|Yes|c(Leave element)
- b-->|No |d(Transform)
-```
-
-```mermaid
-graph LR;
- a(Find elements)-->b{Processed}
- b-->|Yes|c(Leave element)
- b-->|No |d(Transform)
-```
-
-Renders the mermaid diagrams
-
-##### Parameters
-
-| Name      | Type                                  | Description              |
-| :-------- | :------------------------------------ | :----------------------- |
-| `options` | [`RunOptions`](mermaid.RunOptions.md) | Optional runtime configs |
-
-##### Returns
-
-`Promise`<`void`>
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
-
----
-
-### setParseErrorHandler
-
-• **setParseErrorHandler**: (`parseErrorHandler`: (`err`: `any`, `hash`: `any`) => `void`) => `void`
-
-#### Type declaration
-
-▸ (`parseErrorHandler`): `void`
-
-## setParseErrorHandler Alternative to directly setting parseError using:
-
-```js
-mermaid.parseError = function (err, hash) {
-  forExampleDisplayErrorInGui(err); // do something with the error
-};
-```
-
-This is provided for environments where the mermaid object can't directly have a new member added
-to it (eg. dart interop wrapper). (Initially there is no parseError member of mermaid).
-
-##### Parameters
-
-| Name                | Type                                    | Description                |
-| :------------------ | :-------------------------------------- | :------------------------- |
-| `parseErrorHandler` | (`err`: `any`, `hash`: `any`) => `void` | New parseError() callback. |
-
-##### Returns
-
-`void`
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
-
----
-
-### startOnLoad
-
-• **startOnLoad**: `boolean`
-
-#### Defined in
-
-[packages/mermaid/src/mermaid.ts:413](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L413)

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

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

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

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

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

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

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

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

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

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

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

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

docs/config/setup/modules/config.md

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

docs/config/setup/modules/defaultConfig.md

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

docs/config/setup/modules/mermaid.md

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

docs/config/setup/modules/mermaidAPI.md

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

docs/config/theming.md

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

docs/config/usage.md

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

eslint.config.js

@@ -1,222 +0,0 @@
-import cspell from '@cspell/eslint-plugin';
-import eslint from '@eslint/js';
-import cypress from 'eslint-plugin-cypress';
-import jsdoc from 'eslint-plugin-jsdoc';
-import json from 'eslint-plugin-json';
-import lodash from 'eslint-plugin-lodash';
-import markdown from 'eslint-plugin-markdown';
-import noOnlyTests from 'eslint-plugin-no-only-tests';
-import tsdoc from 'eslint-plugin-tsdoc';
-import unicorn from 'eslint-plugin-unicorn';
-import globals from 'globals';
-import tseslint from 'typescript-eslint';
-
-export default tseslint.config(
-  eslint.configs.recommended,
-  ...tseslint.configs.recommendedTypeChecked,
-  ...tseslint.configs.stylisticTypeChecked,
-  {
-    ignores: [
-      '**/dist/',
-      '**/node_modules/',
-      '.git/',
-      '**/generated/',
-      '**/coverage/',
-      'packages/mermaid/src/config.type.ts',
-    ],
-  },
-  {
-    languageOptions: {
-      parserOptions: {
-        project: [
-          './tsconfig.eslint.json',
-          './packages/*/tsconfig.json',
-          './packages/*/tsconfig.eslint.json',
-          './packages/mermaid/src/docs/tsconfig.json',
-        ],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-        ...globals.es2020,
-        ...globals.jest,
-        cy: 'readonly',
-        Cypress: 'readonly',
-      },
-    },
-  },
-  {
-    plugins: {
-      json,
-      '@cspell': cspell,
-      'no-only-tests': noOnlyTests,
-      lodash,
-      unicorn,
-      cypress,
-      markdown,
-      tsdoc,
-      jsdoc,
-    },
-    rules: {
-      curly: 'error',
-      'no-console': 'error',
-      'no-prototype-builtins': 'off',
-      'no-unused-vars': 'off',
-      'cypress/no-async-tests': 'off',
-      '@typescript-eslint/consistent-type-imports': 'error',
-      '@typescript-eslint/no-explicit-any': 'warn',
-      '@typescript-eslint/no-floating-promises': 'error',
-      '@typescript-eslint/no-misused-promises': 'error',
-      '@typescript-eslint/no-unused-vars': [
-        'error',
-        {
-          args: 'after-used',
-          argsIgnorePattern: '^_',
-          caughtErrors: 'all',
-          caughtErrorsIgnorePattern: '^_',
-          destructuredArrayIgnorePattern: '^_',
-          varsIgnorePattern: '^_',
-          ignoreRestSiblings: true,
-        },
-      ],
-      '@typescript-eslint/consistent-type-definitions': 'error',
-      '@typescript-eslint/ban-ts-comment': [
-        'error',
-        {
-          'ts-expect-error': 'allow-with-description',
-          'ts-ignore': 'allow-with-description',
-          'ts-nocheck': 'allow-with-description',
-          'ts-check': 'allow-with-description',
-          minimumDescriptionLength: 10,
-        },
-      ],
-      '@typescript-eslint/naming-convention': [
-        'error',
-        {
-          selector: 'typeLike',
-          format: ['PascalCase'],
-          custom: {
-            regex: '^I[A-Z]',
-            match: false,
-          },
-        },
-      ],
-      // START: These rules should be turned on once the codebase is cleaned up
-      '@typescript-eslint/no-unsafe-argument': 'off',
-      '@typescript-eslint/no-unsafe-assignment': 'off',
-      '@typescript-eslint/no-unsafe-call': 'off',
-      '@typescript-eslint/no-unsafe-member-access': 'off',
-      '@typescript-eslint/no-unsafe-return': 'off',
-      '@typescript-eslint/only-throw-error': 'warn',
-      '@typescript-eslint/prefer-nullish-coalescing': 'warn',
-      '@typescript-eslint/prefer-promise-reject-errors': 'warn',
-      // END
-      'json/*': ['error', 'allowComments'],
-      '@cspell/spellchecker': [
-        'error',
-        {
-          checkIdentifiers: true,
-          checkStrings: true,
-          checkStringTemplates: true,
-        },
-      ],
-      'no-empty': [
-        'error',
-        {
-          allowEmptyCatch: true,
-        },
-      ],
-      'no-only-tests/no-only-tests': 'error',
-      'lodash/import-scope': ['error', 'method'],
-      'unicorn/better-regex': 'error',
-      'unicorn/no-abusive-eslint-disable': 'error',
-      'unicorn/no-array-push-push': 'error',
-      'unicorn/no-for-loop': 'error',
-      'unicorn/no-instanceof-array': 'error',
-      'unicorn/no-typeof-undefined': 'error',
-      'unicorn/no-unnecessary-await': 'error',
-      'unicorn/no-unsafe-regex': 'warn',
-      'unicorn/no-useless-promise-resolve-reject': 'error',
-      'unicorn/prefer-array-find': 'error',
-      'unicorn/prefer-array-flat-map': 'error',
-      'unicorn/prefer-array-index-of': 'error',
-      'unicorn/prefer-array-some': 'error',
-      'unicorn/prefer-default-parameters': 'error',
-      'unicorn/prefer-includes': 'error',
-      'unicorn/prefer-negative-index': 'error',
-      'unicorn/prefer-object-from-entries': 'error',
-      'unicorn/prefer-string-starts-ends-with': 'error',
-      'unicorn/prefer-string-trim-start-end': 'error',
-      'unicorn/string-content': 'error',
-      'unicorn/prefer-spread': 'error',
-      'unicorn/no-lonely-if': 'error',
-    },
-  },
-  {
-    files: ['cypress/**', 'demos/**'],
-    rules: {
-      'no-console': 'off',
-    },
-  },
-  {
-    files: ['**/*.{js,jsx,mjs,cjs}'],
-    rules: {
-      'jsdoc/check-indentation': 'off',
-      'jsdoc/check-alignment': 'off',
-      'jsdoc/check-line-alignment': 'off',
-      'jsdoc/multiline-blocks': 'off',
-      'jsdoc/newline-after-description': 'off',
-      'jsdoc/tag-lines': 'off',
-      'jsdoc/require-param-description': 'off',
-      'jsdoc/require-param-type': 'off',
-      'jsdoc/require-returns': 'off',
-      'jsdoc/require-returns-description': 'off',
-    },
-  },
-  {
-    files: ['**/*.{ts,tsx}'],
-    rules: {
-      'no-restricted-syntax': [
-        'error',
-        {
-          selector: 'TSEnumDeclaration',
-          message:
-            'Prefer using TypeScript union types over TypeScript enum, since TypeScript enums have a bunch of issues, see https://dev.to/dvddpl/whats-the-problem-with-typescript-enums-2okj',
-        },
-      ],
-      'tsdoc/syntax': 'error',
-    },
-  },
-  {
-    files: ['**/*.spec.{ts,js}', 'cypress/**', 'demos/**', '**/docs/**'],
-    rules: {
-      'jsdoc/require-jsdoc': 'off',
-      '@typescript-eslint/no-unused-vars': 'off',
-    },
-  },
-  {
-    files: ['**/*.spec.{ts,js}', 'tests/**', 'cypress/**/*.js'],
-    rules: {
-      '@cspell/spellchecker': [
-        'error',
-        {
-          checkIdentifiers: false,
-          checkStrings: false,
-          checkStringTemplates: false,
-        },
-      ],
-    },
-  },
-  {
-    files: ['*.html', '*.md', '**/*.md/*'],
-    rules: {
-      'no-var': 'error',
-      'no-undef': 'off',
-      '@typescript-eslint/no-unused-vars': 'off',
-      '@typescript-eslint/no-floating-promises': 'off',
-      '@typescript-eslint/no-misused-promises': 'off',
-    },
-    processor: 'markdown/markdown',
-  }
-);

package.json

@@ -25,8 +25,9 @@
     "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": "pnpm biome check && pnpm lint:jison",
+    "lint:fix": "pnpm biome check --write",
+    "lint:ci": "pnpm lint && cross-env NODE_OPTIONS=--max_old_space_size=16384 eslint --cache --cache-strategy content .",
     "lint:jison": "tsx ./scripts/jison/lint.mts",
     "contributors": "tsx scripts/updateContributors.ts",
     "cypress": "cypress run",
@@ -51,23 +52,18 @@
   "author": "Knut Sveidqvist",
   "license": "MIT",
   "standard": {
-    "ignore": [
-      "**/parser/*.js",
-      "dist/**/*.js",
-      "cypress/**/*.js"
-    ],
-    "globals": [
-      "page"
-    ]
+    "ignore": ["**/parser/*.js", "dist/**/*.js", "cypress/**/*.js"],
+    "globals": ["page"]
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "^3.44.4",
+    "@applitools/eyes-cypress": "^3.42.3",
     "@argos-ci/cypress": "^2.0.5",
-    "@cspell/eslint-plugin": "^8.8.4",
+    "@biomejs/biome": "1.8.2",
+    "@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 +71,8 @@
     "@types/mdast": "^4.0.3",
     "@types/node": "^20.11.30",
     "@types/rollup-plugin-visualizer": "^4.2.4",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
     "@vitest/coverage-v8": "^1.4.0",
     "@vitest/spy": "^1.4.0",
     "@vitest/ui": "^1.4.0",
@@ -84,23 +82,22 @@
     "cors": "^2.8.5",
     "cross-env": "^7.0.3",
     "cspell": "^8.6.0",
-    "cypress": "^13.11.0",
+    "cypress": "^13.7.1",
     "cypress-image-snapshot": "^4.0.1",
-    "esbuild": "^0.21.5",
-    "eslint": "^9.4.0",
-    "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",
+    "esbuild": "^0.20.2",
+    "eslint": "^8.57.0",
+    "eslint-config-biome": "^1.7.3",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-html": "^8.0.0",
+    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-jsdoc": "^48.2.1",
+    "eslint-plugin-json": "^3.1.0",
+    "eslint-plugin-lodash": "^7.4.0",
+    "eslint-plugin-markdown": "^4.0.1",
     "eslint-plugin-no-only-tests": "^3.1.0",
-    "eslint-plugin-tsdoc": "^0.3.0",
-    "eslint-plugin-unicorn": "^53.0.0",
+    "eslint-plugin-tsdoc": "^0.2.17",
+    "eslint-plugin-unicorn": "^51.0.1",
     "express": "^4.19.1",
-    "globals": "^15.4.0",
     "globby": "^14.0.1",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
@@ -119,8 +116,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/package.json

@@ -12,12 +12,7 @@
     },
     "./*": "./*"
   },
-  "keywords": [
-    "diagram",
-    "markdown",
-    "example",
-    "mermaid"
-  ],
+  "keywords": ["diagram", "markdown", "example", "mermaid"],
   "scripts": {
     "prepublishOnly": "pnpm -w run build"
   },
@@ -28,14 +23,8 @@
   "author": "Knut Sveidqvist",
   "license": "MIT",
   "standard": {
-    "ignore": [
-      "**/parser/*.js",
-      "dist/**/*.js",
-      "cypress/**/*.js"
-    ],
-    "globals": [
-      "page"
-    ]
+    "ignore": ["**/parser/*.js", "dist/**/*.js", "cypress/**/*.js"],
+    "globals": ["page"]
   },
   "dependencies": {
     "@braintree/sanitize-url": "^7.0.0",
@@ -47,11 +36,6 @@
     "mermaid": "workspace:*",
     "rimraf": "^5.0.5"
   },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": [
-    "**/*.css",
-    "**/*.scss"
-  ]
+  "files": ["dist"],
+  "sideEffects": ["**/*.css", "**/*.scss"]
 }

packages/mermaid-example-diagram/src/exampleDiagramRenderer.js

@@ -13,7 +13,7 @@ export const draw = (text, id, version) => {
   try {
     const conf = getConfig();
     log.debug('Rendering example diagram\n' + text, 'Conf: ');
-    const THEME_COLOR_LIMIT = getConfig().themeVariables.THEME_COLOR_LIMIT;
+    const themeColorLimit = getConfig().themeVariables.THEME_COLOR_LIMIT;
     const securityLevel = getConfig().securityLevel;
     // Handle root and Document for when rendering in sandbox mode
     let sandboxElement;
@@ -30,7 +30,7 @@ export const draw = (text, id, version) => {
     const g = svg.append('g');
 
     let i;
-    for (i = 0; i < THEME_COLOR_LIMIT; i++) {
+    for (i = 0; i < themeColorLimit; i++) {
       const section = g.append('g').attr('class', 'section-' + i);
       section
         .append('rect')

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/package.json

@@ -12,13 +12,7 @@
     },
     "./*": "./*"
   },
-  "keywords": [
-    "diagram",
-    "markdown",
-    "flowchart",
-    "elk",
-    "mermaid"
-  ],
+  "keywords": ["diagram", "markdown", "flowchart", "elk", "mermaid"],
   "scripts": {
     "prepublishOnly": "pnpm -w run build"
   },
@@ -39,7 +33,5 @@
     "mermaid": "workspace:^",
     "rimraf": "^5.0.5"
   },
-  "files": [
-    "dist"
-  ]
+  "files": ["dist"]
 }

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;
@@ -431,18 +445,20 @@ export const addEdges = function (edges, diagObj, graph, svg) {
     edgeData.arrowTypeStart = 'arrow_open';
     edgeData.arrowTypeEnd = 'arrow_open';
 
-    /* eslint-disable no-fallthrough */
     switch (edge.type) {
+      // biome-ignore lint/suspicious/noFallthroughSwitchClause: Expected fallthrough
       case 'double_arrow_cross':
         edgeData.arrowTypeStart = 'arrow_cross';
       case 'arrow_cross':
         edgeData.arrowTypeEnd = 'arrow_cross';
         break;
+      // biome-ignore lint/suspicious/noFallthroughSwitchClause: Expected fallthrough
       case 'double_arrow_point':
         edgeData.arrowTypeStart = 'arrow_point';
       case 'arrow_point':
         edgeData.arrowTypeEnd = 'arrow_point';
         break;
+      // biome-ignore lint/suspicious/noFallthroughSwitchClause: Expected fallthrough
       case 'double_arrow_circle':
         edgeData.arrowTypeStart = 'arrow_circle';
       case 'arrow_circle':
@@ -663,6 +679,7 @@ const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb, i
 /**
  * Recursive function that iterates over an array of nodes and inserts the children of each node.
  * It also recursively populates the inserts the children of the children and so on.
+ * @param {*} graph
  * @param nodeArray
  * @param parentLookupDb
  */

packages/mermaid-layout-elk/package.json

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

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

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

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

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

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

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

packages/mermaid-layout-elk/tsconfig.json

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

packages/mermaid-zenuml/package.json

@@ -12,12 +12,7 @@
     },
     "./*": "./*"
   },
-  "keywords": [
-    "diagram",
-    "markdown",
-    "zenuml",
-    "mermaid"
-  ],
+  "keywords": ["diagram", "markdown", "zenuml", "mermaid"],
   "scripts": {
     "clean": "rimraf dist",
     "prepublishOnly": "pnpm -w run build"
@@ -42,7 +37,5 @@
   "peerDependencies": {
     "mermaid": "workspace:>=10.0.0"
   },
-  "files": [
-    "dist"
-  ]
+  "files": ["dist"]
 }

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",
@@ -58,14 +58,8 @@
   "author": "Knut Sveidqvist",
   "license": "MIT",
   "standard": {
-    "ignore": [
-      "**/parser/*.js",
-      "dist/**/*.js",
-      "cypress/**/*.js"
-    ],
-    "globals": [
-      "page"
-    ]
+    "ignore": ["**/parser/*.js", "dist/**/*.js", "cypress/**/*.js"],
+    "globals": ["page"]
   },
   "dependencies": {
     "@braintree/sanitize-url": "^7.0.1",
@@ -77,11 +71,11 @@
     "dagre-d3-es": "7.0.10",
     "dayjs": "^1.11.10",
     "dompurify": "^3.0.11",
+    "elkjs": "^0.9.2",
     "katex": "^0.16.9",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
     "mdast-util-from-markdown": "^2.0.0",
-    "roughjs": "^4.6.6",
     "stylis": "^4.3.1",
     "ts-dedent": "^2.2.0",
     "uuid": "^9.0.1"
@@ -124,16 +118,13 @@
     "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",
     "vitepress-plugin-search": "1.0.4-alpha.22"
   },
-  "files": [
-    "dist/",
-    "README.md"
-  ],
+  "files": ["dist/", "README.md"],
   "sideEffects": false,
   "publishConfig": {
     "access": "public"

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

@@ -18,7 +18,7 @@ import { execFile } from 'node:child_process';
 import { readFile, writeFile } from 'node:fs/promises';
 import { join } from 'node:path';
 import { promisify } from 'node:util';
-import prettier from 'prettier';
+import { prettierConfig } from './prettier.js';
 
 // Workaround for wrong AJV types, see
 // https://github.com/ajv-validator/ajv/issues/2132#issuecomment-1290409907
@@ -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,
@@ -141,7 +141,7 @@ async function generateTypescript(mermaidConfigSchema: JSONSchemaType<MermaidCon
     {
       additionalProperties: false, // in JSON Schema 2019-09, these are called `unevaluatedProperties`
       unreachableDefinitions: true, // definition for FontConfig is unreachable
-      style: (await prettier.resolveConfig('.')) ?? {},
+      style: prettierConfig,
     }
   );
 

packages/mermaid/scripts/docs.mts

@@ -52,6 +52,7 @@ import mm from 'micromatch';
 // @ts-ignore No typescript declaration file
 import flatmap from 'unist-util-flatmap';
 import { visit } from 'unist-util-visit';
+import { prettierConfig } from './prettier.js';
 
 export const MERMAID_RELEASE_VERSION = JSON.parse(readFileSync('../mermaid/package.json', 'utf8'))
   .version as string;
@@ -85,12 +86,11 @@ const LOGMSG_COPIED = `, and copied to ${FINAL_DOCS_DIR}`;
 
 const WARN_DOCSDIR_DOESNT_MATCH = `Changed files were transformed in ${SOURCE_DOCS_DIR} but do not match the files in ${FINAL_DOCS_DIR}. Please run 'pnpm --filter mermaid run docs:build' after making changes to ${SOURCE_DOCS_DIR} to update the ${FINAL_DOCS_DIR} directory with the transformed files.`;
 
-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
@@ -368,26 +367,26 @@ async function transformJsonSchema(file: string) {
   });
 
   /** Location of the `schema.yaml` files */
-  const SCHEMA_INPUT_DIR = 'src/schemas/';
+  const schemaInputDir = 'src/schemas/';
   /**
    * Location to store the generated `schema.json` file for the website
    *
    * Because Vitepress doesn't handle bundling `.json` files properly, we need
    * to instead place it into a `public/` subdirectory.
    */
-  const SCHEMA_OUTPUT_DIR = 'src/docs/public/schemas/';
-  const VITEPRESS_PUBLIC_DIR = 'src/docs/public';
+  const schemaOutputDir = 'src/docs/public/schemas/';
+  const vitepressPublicDir = 'src/docs/public';
   /**
    * Location to store the generated Schema Markdown docs.
    * Links to JSON Schemas should automatically be rewritten to point to
    * `SCHEMA_OUTPUT_DIR`.
    */
-  const SCHEMA_MARKDOWN_OUTPUT_DIR = join('src', 'docs', 'config', 'schema-docs');
+  const schemaMarkdownOutputDir = join('src', 'docs', 'config', 'schema-docs');
 
   // write .schema.json files
   const jsonFileName = file
     .replace('.schema.yaml', '.schema.json')
-    .replace(SCHEMA_INPUT_DIR, SCHEMA_OUTPUT_DIR);
+    .replace(schemaInputDir, schemaOutputDir);
   copyTransformedContents(jsonFileName, !verifyOnly, JSON.stringify(jsonSchema, undefined, 2));
 
   const schemas = traverseSchemas([schemaLoader()(jsonFileName, jsonSchema)]);
@@ -415,7 +414,7 @@ async function transformJsonSchema(file: string) {
      * @returns New absolute Vitepress path to schema
      */
     rewritelinks: (origin: string) => {
-      return `/${relative(VITEPRESS_PUBLIC_DIR, origin)}`;
+      return `/${relative(vitepressPublicDir, origin)}`;
     },
   })(schemas);
 
@@ -459,7 +458,7 @@ async function transformJsonSchema(file: string) {
       parser: 'markdown',
       ...prettierConfig,
     });
-    const newFileName = join(SCHEMA_MARKDOWN_OUTPUT_DIR, `${name}.md`);
+    const newFileName = join(schemaMarkdownOutputDir, `${name}.md`);
     copyTransformedContents(newFileName, !verifyOnly, formatted);
   }
 }
@@ -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/scripts/docs.spec.ts

@@ -24,11 +24,11 @@ describe('docs.mts', () => {
 
       describe('is a code block', () => {
         const beforeCodeLine = 'test\n';
-        const diagram_text = 'graph\n A --> B\n';
+        const diagramText = 'graph\n A --> B\n';
 
         describe('language = "mermaid-nocode"', () => {
-          const lang_keyword = 'mermaid-nocode';
-          const contents = beforeCodeLine + '```' + lang_keyword + '\n' + diagram_text + '\n```\n';
+          const langKeyword = 'mermaid-nocode';
+          const contents = beforeCodeLine + '```' + langKeyword + '\n' + diagramText + '\n```\n';
 
           it('changes the language to "mermaid"', async () => {
             const result = (
@@ -37,17 +37,16 @@ describe('docs.mts', () => {
                 .process(contents)
             ).toString();
             expect(result).toEqual(
-              beforeCodeLine + '\n' + '```' + 'mermaid' + '\n' + diagram_text + '\n```\n'
+              beforeCodeLine + '\n' + '```' + 'mermaid' + '\n' + diagramText + '\n```\n'
             );
           });
         });
 
         describe('language = "mermaid" | "mmd" | "mermaid-example"', () => {
-          const mermaid_keywords = ['mermaid', 'mmd', 'mermaid-example'];
+          const mermaidKeywords = ['mermaid', 'mmd', 'mermaid-example'];
 
-          mermaid_keywords.forEach((lang_keyword) => {
-            const contents =
-              beforeCodeLine + '```' + lang_keyword + '\n' + diagram_text + '\n```\n';
+          mermaidKeywords.forEach((langKeyword) => {
+            const contents = beforeCodeLine + '```' + langKeyword + '\n' + diagramText + '\n```\n';
 
             it('changes the language to "mermaid-example" and adds a copy of the code block with language = "mermaid"', async () => {
               const result = (
@@ -59,10 +58,10 @@ describe('docs.mts', () => {
                 beforeCodeLine +
                   '\n' +
                   '```mermaid-example\n' +
-                  diagram_text +
+                  diagramText +
                   '\n```\n' +
                   '\n```mermaid\n' +
-                  diagram_text +
+                  diagramText +
                   '\n```\n'
               );
             });
@@ -70,9 +69,9 @@ describe('docs.mts', () => {
         });
 
         it('calls transformToBlockQuote with the node information', async () => {
-          const lang_keyword = 'note';
+          const langKeyword = 'note';
           const contents =
-            beforeCodeLine + '```' + lang_keyword + '\n' + 'This is the text\n' + '```\n';
+            beforeCodeLine + '```' + langKeyword + '\n' + 'This is the text\n' + '```\n';
 
           const result = (
             await remarkBuilder().use(transformMarkdownAst, { originalFilename }).process(contents)

packages/mermaid/scripts/prettier.ts

@@ -0,0 +1,8 @@
+export const prettierConfig = {
+  endOfLine: 'auto',
+  printWidth: 100,
+  singleQuote: true,
+  useTabs: false,
+  tabWidth: 2,
+  trailingComma: 'es5',
+} as const;

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';
 
@@ -7,32 +8,32 @@ describe('when working with site config', () => {
     configApi.setSiteConfig({});
   });
   it('should set site config and config properly', () => {
-    const config_0 = { fontFamily: 'foo-font', fontSize: 150 };
-    configApi.setSiteConfig(config_0);
-    const config_1 = configApi.getSiteConfig();
-    const config_2 = configApi.getConfig();
-    expect(config_1.fontFamily).toEqual(config_0.fontFamily);
-    expect(config_1.fontSize).toEqual(config_0.fontSize);
-    expect(config_1).toEqual(config_2);
+    const config0 = { fontFamily: 'foo-font', fontSize: 150 };
+    configApi.setSiteConfig(config0);
+    const config1 = configApi.getSiteConfig();
+    const config2 = configApi.getConfig();
+    expect(config1.fontFamily).toEqual(config0.fontFamily);
+    expect(config1.fontSize).toEqual(config0.fontSize);
+    expect(config1).toEqual(config2);
   });
   it('should respect secure keys when applying directives', () => {
-    const config_0: MermaidConfig = {
+    const config0: MermaidConfig = {
       fontFamily: 'foo-font',
       securityLevel: 'strict', // can't be changed
       fontSize: 12345, // can't be changed
       secure: [...configApi.defaultConfig.secure!, 'fontSize'],
     };
-    configApi.setSiteConfig(config_0);
+    configApi.setSiteConfig(config0);
     const directive: MermaidConfig = {
       fontFamily: 'baf',
       // fontSize and securityLevel shouldn't be changed
       fontSize: 54321,
       securityLevel: 'loose',
     };
-    const cfg: MermaidConfig = configApi.updateCurrentConfig(config_0, [directive]);
+    const cfg: MermaidConfig = configApi.updateCurrentConfig(config0, [directive]);
     expect(cfg.fontFamily).toEqual(directive.fontFamily);
-    expect(cfg.fontSize).toBe(config_0.fontSize);
-    expect(cfg.securityLevel).toBe(config_0.securityLevel);
+    expect(cfg.fontSize).toBe(config0.fontSize);
+    expect(cfg.securityLevel).toBe(config0.securityLevel);
   });
   it('should allow setting partial options', () => {
     const defaultConfig = configApi.getConfig();
@@ -51,30 +52,30 @@ describe('when working with site config', () => {
     );
   });
   it('should set reset config properly', () => {
-    const config_0 = { fontFamily: 'foo-font', fontSize: 150 };
-    configApi.setSiteConfig(config_0);
-    const config_1 = { fontFamily: 'baf' };
-    configApi.setConfig(config_1);
-    const config_2 = configApi.getConfig();
-    expect(config_2.fontFamily).toEqual(config_1.fontFamily);
+    const config0 = { fontFamily: 'foo-font', fontSize: 150 };
+    configApi.setSiteConfig(config0);
+    const config1 = { fontFamily: 'baf' };
+    configApi.setConfig(config1);
+    const config2 = configApi.getConfig();
+    expect(config2.fontFamily).toEqual(config1.fontFamily);
     configApi.reset();
-    const config_3 = configApi.getConfig();
-    expect(config_3.fontFamily).toEqual(config_0.fontFamily);
-    const config_4 = configApi.getSiteConfig();
-    expect(config_4.fontFamily).toEqual(config_0.fontFamily);
+    const config3 = configApi.getConfig();
+    expect(config3.fontFamily).toEqual(config0.fontFamily);
+    const config4 = configApi.getSiteConfig();
+    expect(config4.fontFamily).toEqual(config0.fontFamily);
   });
   it('should set global reset config properly', () => {
-    const config_0 = { fontFamily: 'foo-font', fontSize: 150 };
-    configApi.setSiteConfig(config_0);
-    const config_1 = configApi.getSiteConfig();
-    expect(config_1.fontFamily).toEqual(config_0.fontFamily);
-    const config_2 = configApi.getConfig();
-    expect(config_2.fontFamily).toEqual(config_0.fontFamily);
+    const config0 = { fontFamily: 'foo-font', fontSize: 150 };
+    configApi.setSiteConfig(config0);
+    const config1 = configApi.getSiteConfig();
+    expect(config1.fontFamily).toEqual(config0.fontFamily);
+    const config2 = configApi.getConfig();
+    expect(config2.fontFamily).toEqual(config0.fontFamily);
     configApi.setConfig({ altFontFamily: 'bar-font' });
-    const config_3 = configApi.getConfig();
-    expect(config_3.altFontFamily).toEqual('bar-font');
+    const config3 = configApi.getConfig();
+    expect(config3.altFontFamily).toEqual('bar-font');
     configApi.reset();
-    const config_4 = configApi.getConfig();
-    expect(config_4.altFontFamily).toBeUndefined();
+    const config4 = configApi.getConfig();
+    expect(config4.altFontFamily).toBeUndefined();
   });
 });

packages/mermaid/src/config.ts

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

packages/mermaid/src/config.type.ts

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

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

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

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

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

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

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

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

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

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

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

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

@@ -13,13 +13,13 @@ export default intersectPolygon;
  * @param point
  */
 function intersectPolygon(node, polyPoints, point) {
-  var x1 = node.x;
-  var y1 = node.y;
+  let x1 = node.x;
+  let y1 = node.y;
 
-  var intersections = [];
+  let intersections = [];
 
-  var minX = Number.POSITIVE_INFINITY;
-  var minY = Number.POSITIVE_INFINITY;
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
   if (typeof polyPoints.forEach === 'function') {
     polyPoints.forEach(function (entry) {
       minX = Math.min(minX, entry.x);
@@ -30,13 +30,13 @@ function intersectPolygon(node, polyPoints, point) {
     minY = Math.min(minY, polyPoints.y);
   }
 
-  var left = x1 - node.width / 2 - minX;
-  var top = y1 - node.height / 2 - minY;
+  let left = x1 - node.width / 2 - minX;
+  let top = y1 - node.height / 2 - minY;
 
-  for (var i = 0; i < polyPoints.length; i++) {
-    var p1 = polyPoints[i];
-    var p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];
-    var intersect = intersectLine(
+  for (let i = 0; i < polyPoints.length; i++) {
+    let p1 = polyPoints[i];
+    let p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];
+    let intersect = intersectLine(
       node,
       point,
       { x: left + p1.x, y: top + p1.y },
@@ -55,13 +55,13 @@ function intersectPolygon(node, polyPoints, point) {
   if (intersections.length > 1) {
     // More intersections, find the one nearest to edge end point
     intersections.sort(function (p, q) {
-      var pdx = p.x - point.x;
-      var pdy = p.y - point.y;
-      var distp = Math.sqrt(pdx * pdx + pdy * pdy);
+      let pdx = p.x - point.x;
+      let pdy = p.y - point.y;
+      let distp = Math.sqrt(pdx * pdx + pdy * pdy);
 
-      var qdx = q.x - point.x;
-      var qdy = q.y - point.y;
-      var distq = Math.sqrt(qdx * qdx + qdy * qdy);
+      let qdx = q.x - point.x;
+      let qdy = q.y - point.y;
+      let distq = Math.sqrt(qdx * qdx + qdy * qdy);
 
       return distp < distq ? -1 : distp === distq ? 0 : 1;
     });

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

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

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

@@ -1,12 +1,12 @@
 import { select } from 'd3';
-import { getConfig } from '../diagram-api/diagramAPI.js';
-import { evaluate } from '../diagrams/common/common.js';
 import { log } from '../logger.js';
-import { getArrowPoints } from './blockArrowHelper.js';
-import createLabel from './createLabel.js';
+import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util.js';
+import { getConfig } from '../diagram-api/diagramAPI.js';
 import intersect from './intersect/index.js';
+import createLabel from './createLabel.js';
 import note from './shapes/note.js';
-import { insertPolygonShape, labelHelper, updateNodeBounds } from './shapes/util.js';
+import { evaluate } from '../diagrams/common/common.js';
+import { getArrowPoints } from './blockArrowHelper.js';
 
 const formatClass = (str) => {
   if (str) {
@@ -119,7 +119,7 @@ const hexagon = async (parent, node) => {
   return shapeSvg;
 };
 
-const block_arrow = async (parent, node) => {
+const blockArrow = async (parent, node) => {
   const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
 
   const f = 2;
@@ -140,7 +140,7 @@ const block_arrow = async (parent, node) => {
   return shapeSvg;
 };
 
-const rect_left_inv_arrow = async (parent, node) => {
+const rectLeftInvArrow = async (parent, node) => {
   const { shapeSvg, bbox } = await labelHelper(
     parent,
     node,
@@ -171,7 +171,7 @@ const rect_left_inv_arrow = async (parent, node) => {
   return shapeSvg;
 };
 
-const lean_right = async (parent, node) => {
+const leanRight = async (parent, node) => {
   const { shapeSvg, bbox } = await labelHelper(parent, node, getClassesFromNode(node), true);
 
   const w = bbox.width + node.padding;
@@ -194,7 +194,7 @@ const lean_right = async (parent, node) => {
   return shapeSvg;
 };
 
-const lean_left = async (parent, node) => {
+const leanLeft = async (parent, node) => {
   const { shapeSvg, bbox } = await labelHelper(
     parent,
     node,
@@ -250,7 +250,7 @@ const trapezoid = async (parent, node) => {
   return shapeSvg;
 };
 
-const inv_trapezoid = async (parent, node) => {
+const invTrapezoid = async (parent, node) => {
   const { shapeSvg, bbox } = await labelHelper(
     parent,
     node,
@@ -278,7 +278,7 @@ const inv_trapezoid = async (parent, node) => {
   return shapeSvg;
 };
 
-const rect_right_inv_arrow = async (parent, node) => {
+const rectRightInvArrow = async (parent, node) => {
   const { shapeSvg, bbox } = await labelHelper(
     parent,
     node,
@@ -395,7 +395,6 @@ const rect = async (parent, node) => {
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
-  // console.log('Rect node:', node, 'bbox:', bbox, 'halfPadding:', halfPadding, 'node.padding:', node.padding);
   // const totalWidth = bbox.width + node.padding * 2;
   // const totalHeight = bbox.height + node.padding * 2;
   const totalWidth = node.positioned ? node.width : bbox.width + node.padding;
@@ -876,7 +875,7 @@ const end = (parent, node) => {
   return shapeSvg;
 };
 
-const class_box = (parent, node) => {
+const classBox = (parent, node) => {
   const halfPadding = node.padding / 2;
   const rowPadding = 4;
   const lineHeight = 8;
@@ -902,7 +901,7 @@ const class_box = (parent, node) => {
 
   const labelContainer = shapeSvg.insert('g').attr('class', 'label');
   let verticalPos = 0;
-  const hasInterface = node.classData.annotations?.[0];
+  const hasInterface = node.classData.annotations && node.classData.annotations[0];
 
   // 1. Create the labels
   const interfaceLabelText = node.classData.annotations[0]
@@ -1112,13 +1111,13 @@ const shapes = {
   doublecircle,
   stadium,
   hexagon,
-  block_arrow,
-  rect_left_inv_arrow,
-  lean_right,
-  lean_left,
+  block_arrow: blockArrow,
+  rect_left_inv_arrow: rectLeftInvArrow,
+  lean_right: leanRight,
+  lean_left: leanLeft,
   trapezoid,
-  inv_trapezoid,
-  rect_right_inv_arrow,
+  inv_trapezoid: invTrapezoid,
+  rect_right_inv_arrow: rectRightInvArrow,
   cylinder,
   start,
   end,
@@ -1126,7 +1125,7 @@ const shapes = {
   subroutine,
   fork: forkJoin,
   join: forkJoin,
-  class_box,
+  class_box: classBox,
 };
 
 let nodeElems = {};
@@ -1155,6 +1154,9 @@ export const insertNode = async (elem, node, dir) => {
   if (node.class) {
     el.attr('class', 'node default ' + node.class);
   }
+  // MC Special
+  newEl.attr('data-node', 'true');
+  newEl.attr('data-id', node.id);
 
   nodeElems[node.id] = newEl;
 

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

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

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

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

packages/mermaid/src/defaultConfig.ts

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

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

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

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

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

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

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

packages/mermaid/src/diagram.spec.ts

@@ -30,12 +30,12 @@ const getDummyDiagram = (id: string, title?: string): Awaited<ReturnType<Diagram
 
 describe('diagram detection', () => {
   test('should detect inbuilt diagrams', async () => {
-    const graph = await Diagram.fromText('graph TD; A-->B');
+    const graph = (await Diagram.fromText('graph TD; A-->B')) as Diagram;
     expect(graph).toBeInstanceOf(Diagram);
     expect(graph.type).toBe('flowchart-v2');
-    const sequence = await Diagram.fromText(
+    const sequence = (await Diagram.fromText(
       'sequenceDiagram; Alice->>+John: Hello John, how are you?'
-    );
+    )) as Diagram;
     expect(sequence).toBeInstanceOf(Diagram);
     expect(sequence.type).toBe('sequence');
   });
@@ -70,8 +70,9 @@ describe('diagram detection', () => {
       --------------^
       Expecting 'AMP', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'NODE_STRING', 'BRKT', 'MINUS', 'MULT', 'UNICODE_TEXT', got 'EOF']
     `);
-    await expect(Diagram.fromText('sequenceDiagram; A-->B')).rejects
-      .toThrowErrorMatchingInlineSnapshot(`
+    await expect(
+      Diagram.fromText('sequenceDiagram; A-->B')
+    ).rejects.toThrowErrorMatchingInlineSnapshot(`
       [Error: Parse error on line 1:
       ...quenceDiagram; A-->B
       -----------------------^

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

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

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

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

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

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

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

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

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

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

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

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

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

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