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

Version Packages

.build/common.ts

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

.build/jisonTransformer.ts

@@ -1,6 +1,7 @@
 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/jsonSchema.ts

@@ -25,6 +25,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'sankey',
   'block',
   'packet',
+  'architecture',
 ] as const;
 
 /**

.build/types.ts

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

.changeset/README.md

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

.changeset/config.json

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

.cspell/code-terms.txt

@@ -13,6 +13,7 @@ bqstring
 BQUOTE
 bramp
 BRKT
+brotli
 callbackargs
 callbackname
 classdef
@@ -27,6 +28,7 @@ controly
 CSSCLASS
 CYLINDEREND
 CYLINDERSTART
+DAGA
 datakey
 DEND
 descr
@@ -53,6 +55,7 @@ GENERICTYPE
 getBoundarys
 grammr
 graphtype
+halign
 iife
 interp
 introdcued
@@ -64,6 +67,7 @@ Kaufmann
 keyify
 LABELPOS
 LABELTYPE
+layoutstop
 lcov
 LEFTOF
 Lexa
@@ -89,6 +93,7 @@ reqs
 rewritelinks
 rgba
 RIGHTOF
+roughjs
 sankey
 sequencenumber
 shrc
@@ -108,13 +113,17 @@ strikethrough
 stringifying
 struct
 STYLECLASS
+STYLEDEF
 STYLEOPTS
 subcomponent
 subcomponents
+subconfig
 SUBROUTINEEND
 SUBROUTINESTART
 Subschemas
 substr
+SVGG
+SVGSVG
 TAGEND
 TAGSTART
 techn
@@ -125,11 +134,13 @@ titlevalue
 topbar
 TRAPEND
 TRAPSTART
+treemap
 ts-nocheck
 tsdoc
 typeof
 typestr
 unshift
+urlsafe
 verifymethod
 VERIFYMTHD
 WARN_DOCSDIR_DOESNT_MATCH

.cspell/contributors.txt

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

.cspell/libraries.txt

@@ -20,14 +20,17 @@ dagre-d3
 Deepdwn
 Docsify
 Docsy
+Doctave
 DokuWiki
 dompurify
 elkjs
+fcose
 fontawesome
 Foswiki
 Gitea
 graphlib
 Grav
+icones
 iconify
 Inkdrop
 jiti
@@ -54,13 +57,17 @@ presetAttributify
 pyplot
 redmine
 rehype
+roughjs
 rscratch
+shiki
+Slidev
 sparkline
 sphinxcontrib
 ssim
 stylis
 Swimm
 tsbuildinfo
+tseslint
 Tuleap
 Typora
 unocss

.cspell/mermaid-terms.txt

@@ -1,5 +1,6 @@
 Adamiecki
 arrowend
+Bendpoints
 bmatrix
 braintree
 catmull
@@ -9,6 +10,7 @@ elems
 gantt
 gitgraph
 gzipped
+handDrawn
 knsv
 Knut
 marginx
@@ -17,6 +19,7 @@ Markdownish
 mermaidjs
 mindmap
 mindmaps
+mrtree
 multigraph
 nodesep
 NOTEGROUP

.cspell/misc-terms.txt

@@ -1 +1,7 @@
+BRANDES
+circo
+handDrawn
+KOEPF
+neato
 newbranch
+validify

.esbuild/build.ts

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

.esbuild/jisonPlugin.ts

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

.esbuild/server.ts

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

.esbuild/util.ts

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

.eslintignore

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

.eslintrc.cjs

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

.github/pull_request_template.md

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

.github/release-drafter.yml

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

.github/workflows/autofix.yml

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

.github/workflows/build-docs.yml

@@ -8,6 +8,8 @@ on:
   pull_request:
   merge_group:
 
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
 permissions:
   contents: read
 
@@ -16,12 +18,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         with:
           cache: pnpm
           node-version-file: '.node-version'

.github/workflows/build.yml

@@ -1,49 +0,0 @@
-name: Build
-
-on:
-  push: {}
-  merge_group:
-  pull_request:
-    types:
-      - opened
-      - synchronize
-      - ready_for_review
-
-permissions:
-  contents: read
-
-jobs:
-  build-mermaid:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: pnpm/action-setup@v2
-        # uses version from "packageManager" field in package.json
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          cache: pnpm
-          node-version-file: '.node-version'
-
-      - name: Install Packages
-        run: |
-          pnpm install --frozen-lockfile
-        env:
-          CYPRESS_CACHE_FOLDER: .cache/Cypress
-
-      - name: Run Build
-        run: pnpm run build
-
-      - name: Upload Mermaid Build as Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: mermaid-build
-          path: packages/mermaid/dist
-
-      - name: Upload Mermaid Mindmap Build as Artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: mermaid-mindmap-build
-          path: packages/mermaid-mindmap/dist

.github/workflows/check-readme-in-sync.yml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
       - name: Check for difference in README.md and docs/README.md
         run: |

.github/workflows/checks.yml

@@ -1,26 +0,0 @@
-on:
-  push:
-  merge_group:
-  pull_request:
-    types:
-      - opened
-      - synchronize
-      - ready_for_review
-
-name: Static analysis on Test files
-
-jobs:
-  check-tests:
-    runs-on: ubuntu-latest
-    name: check tests
-    if: github.repository_owner == 'mermaid-js'
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - uses: testomatio/check-tests@stable
-        with:
-          framework: cypress
-          tests: './cypress/e2e/**/**.spec.js'
-          token: ${{ secrets.GITHUB_TOKEN }}
-          has-tests-label: true

.github/workflows/codeql.yml

@@ -11,6 +11,9 @@ on:
       - synchronize
       - ready_for_review
 
+permissions: # added using https://github.com/step-security/secure-repo
+  contents: read
+
 jobs:
   analyze:
     name: Analyze
@@ -29,11 +32,11 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5
         with:
           config-file: ./.github/codeql/codeql-config.yml
           languages: ${{ matrix.language }}
@@ -45,7 +48,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v3
+        uses: github/codeql-action/autobuild@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -59,4 +62,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5

.github/workflows/dependency-review.yml

@@ -15,6 +15,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout Repository'
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
       - name: 'Dependency Review'
-        uses: actions/dependency-review-action@v4
+        uses: actions/dependency-review-action@5a2ce3f5b92ee19cbb1541a4984c76d921601d7c # v4.3.4

.github/workflows/e2e-applitools.yml

@@ -11,6 +11,8 @@ on:
         default: master
         description: 'Parent branch to use for PRs'
 
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
 permissions:
   contents: read
 
@@ -30,13 +32,13 @@ jobs:
         run: |
           echo "::error,title=Not using Applitools::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
 
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         with:
           node-version-file: '.node-version'
 
@@ -52,7 +54,7 @@ jobs:
           APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
 
       - name: Cypress run
-        uses: cypress-io/github-action@v4
+        uses: cypress-io/github-action@d79d2d530a66e641eb4a5f227e13bc985c60b964 # v4.2.2
         id: cypress
         with:
           start: pnpm run dev

.github/workflows/e2e.yml

@@ -2,11 +2,15 @@ name: E2E
 
 on:
   push:
-    branches-ignore:
-      - 'gh-readonly-queue/**'
+    branches:
+      - develop
+      - master
+      - release/**
   pull_request:
   merge_group:
 
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
 permissions:
   contents: read
 
@@ -24,6 +28,7 @@ env:
       ) || 
       github.event.before
     }}
+  shouldRunParallel: ${{ secrets.CYPRESS_RECORD_KEY != '' && !(github.event_name == 'push' && github.ref == 'refs/heads/develop') }}
 jobs:
   cache:
     runs-on: ubuntu-latest
@@ -31,15 +36,15 @@ jobs:
       image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
       options: --user 1001
     steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         with:
           node-version-file: '.node-version'
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache@v4
+        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
         with:
           save-always: true
           path: ./cypress/snapshots
@@ -48,13 +53,13 @@ jobs:
       # If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
       - name: Switch to base branch
         if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
         with:
           ref: ${{ env.targetHash }}
 
       - name: Install dependencies
         if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: cypress-io/github-action@v6
+        uses: cypress-io/github-action@df7484c5ba85def7eef30db301afa688187bc378 # v6.7.2
         with:
           # just perform install
           runTests: false
@@ -77,26 +82,26 @@ jobs:
       matrix:
         containers: [1, 2, 3, 4]
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         with:
           node-version-file: '.node-version'
 
       # These cached snapshots are downloaded, providing the reference snapshots.
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache/restore@v4
+        uses: actions/cache/restore@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
         with:
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
       - name: Install dependencies
-        uses: cypress-io/github-action@v6
+        uses: cypress-io/github-action@df7484c5ba85def7eef30db301afa688187bc378 # v6.7.2
         with:
           runTests: false
 
@@ -112,11 +117,11 @@ jobs:
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@v6
+        uses: cypress-io/github-action@df7484c5ba85def7eef30db301afa688187bc378 # v6.7.2
         id: cypress
         # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
         # Otherwise (e.g. if running from fork), we run on a single container only
-        if: ${{ ( env.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
+        if: ${{ env.shouldRunParallel == 'true' || ( matrix.containers == 1 ) }}
         with:
           install: false
           start: pnpm run dev:coverage
@@ -124,19 +129,19 @@ jobs:
           browser: chrome
           # Disable recording if we don't have an API key
           # e.g. if this action was run from a fork
-          record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
-          parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
+          record: ${{ env.shouldRunParallel == 'true' }}
+          parallel: ${{ env.shouldRunParallel == 'true' }}
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true
           CYPRESS_COMMIT: ${{ github.sha }}
           ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
-          ARGOS_PARALLEL: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
+          ARGOS_PARALLEL: ${{ env.shouldRunParallel == 'true' }}
           ARGOS_PARALLEL_TOTAL: 4
           ARGOS_PARALLEL_INDEX: ${{ matrix.containers }}
 
       - name: Upload Coverage to Codecov
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0
         # Run step only pushes to develop and pull_requests
         if: ${{ steps.cypress.conclusion == 'success' && (github.event_name == 'pull_request' || github.ref == 'refs/heads/develop')}}
         with:

.github/workflows/issue-triage.yml

@@ -4,11 +4,17 @@ on:
   issues:
     types: [opened]
 
+permissions: # added using https://github.com/step-security/secure-repo
+  contents: read
+
 jobs:
   triage:
+    permissions:
+      issues: write # for andymckay/labeler to label issues
+      pull-requests: write # for andymckay/labeler to label PRs
     runs-on: ubuntu-latest
     steps:
-      - uses: andymckay/labeler@1.0.4
+      - uses: andymckay/labeler@e6c4322d0397f3240f0e7e30a33b5c5df2d39e90 # 1.0.4
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
           add-labels: 'Status: Triage'

.github/workflows/link-checker.yml

@@ -19,6 +19,9 @@ on:
     # * is a special character in YAML so you have to quote this string
     - cron: '30 8 * * *'
 
+permissions: # added using https://github.com/step-security/secure-repo
+  contents: read
+
 jobs:
   link-checker:
     runs-on: ubuntu-latest
@@ -26,17 +29,17 @@ jobs:
       # lychee only uses the GITHUB_TOKEN to avoid rate-limiting
       contents: read
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
       - name: Restore lychee cache
-        uses: actions/cache@v4
+        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
         with:
           path: .lycheecache
           key: cache-lychee-${{ github.sha }}
           restore-keys: cache-lychee-
 
       - name: Link Checker
-        uses: lycheeverse/lychee-action@v1.9.3
+        uses: lycheeverse/lychee-action@c053181aa0c3d17606addfe97a9075a32723548a # v1.9.3
         with:
           args: >-
             --config .github/lychee.toml

.github/workflows/lint.yml

@@ -4,26 +4,32 @@ on:
   push:
   merge_group:
   pull_request:
-    types:
-      - opened
-      - synchronize
-      - ready_for_review
   workflow_dispatch:
 
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
 permissions:
   contents: write
 
 jobs:
+  docker-lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+
+      - uses: hadolint/hadolint-action@54c9adbab1582c2ef04b2016b760714a4bfde3cf # v3.1.0
+        with:
+          verbose: true
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -83,14 +89,9 @@ jobs:
         continue-on-error: ${{ github.event_name == 'push' }}
         run: pnpm run docs:verify
 
-      - name: Rebuild Docs
-        if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
-        working-directory: ./packages/mermaid
-        run: pnpm run docs:build
-
-      - name: Commit changes
-        uses: EndBug/add-and-commit@v9
-        if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
+      - uses: testomatio/check-tests@0ea638fcec1820cf2e7b9854fdbdd04128a55bd4 # stable
         with:
-          message: 'Update docs'
-          add: 'docs/*'
+          framework: cypress
+          tests: './cypress/e2e/**/**.spec.js'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          has-tests-label: true

.github/workflows/pr-labeler.yml

@@ -22,7 +22,7 @@ jobs:
       pull-requests: write # write permission is required to label PRs
     steps:
       - name: Label PR
-        uses: release-drafter/release-drafter@v6
+        uses: release-drafter/release-drafter@3f0f87098bd6b5c5b9a36d49c41d998ea58f9348 # v6.0.0
         with:
           config-name: pr-labeler.yml
           disable-autolabeler: false

.github/workflows/publish-docs.yml

@@ -23,12 +23,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -37,13 +37,13 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Setup Pages
-        uses: actions/configure-pages@v4
+        uses: actions/configure-pages@1f0c5cde4bc74cd7e1254d0cb4de8d49e9068c7d # v4.0.0
 
       - name: Run Build
         run: pnpm --filter mermaid run docs:build:vitepress
 
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
+        uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3.0.1
         with:
           path: packages/mermaid/src/vitepress/.vitepress/dist
 
@@ -56,4 +56,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4.0.5

.github/workflows/release-draft.yml

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

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

@@ -9,14 +9,14 @@ jobs:
   publish-preview:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
         with:
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -28,7 +28,7 @@ jobs:
           CYPRESS_CACHE_FOLDER: .cache/Cypress
 
       - name: Install Json
-        run: npm i json --global
+        run: npm i json@11.0.0 --global
 
       - name: Publish
         working-directory: ./packages/mermaid

.github/workflows/release-preview.yml

@@ -0,0 +1,42 @@
+name: Preview release
+
+on:
+  pull_request:
+    branches: [develop]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.number }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+  actions: write
+
+jobs:
+  preview:
+    if: ${{ github.repository_owner == 'mermaid-js' }}
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+      issues: write
+      pull-requests: write
+    name: Publish preview release
+    timeout-minutes: 5
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
+
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+        with:
+          cache: pnpm
+          node-version-file: '.node-version'
+
+      - name: Install Packages
+        run: pnpm install --frozen-lockfile
+
+      - name: Publish packages
+        run: pnpx pkg-pr-new publish --pnpm './packages/*'

.github/workflows/release-publish.yml

@@ -1,47 +0,0 @@
-name: Publish release
-
-on:
-  release:
-    types: [published]
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: fregante/setup-git-user@v2
-
-      - uses: pnpm/action-setup@v2
-        # uses version from "packageManager" field in package.json
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          cache: pnpm
-          node-version-file: '.node-version'
-
-      - name: Install Packages
-        run: |
-          pnpm install --frozen-lockfile
-          npm i json --global
-        env:
-          CYPRESS_CACHE_FOLDER: .cache/Cypress
-
-      - name: Prepare release
-        run: |
-          VERSION=${GITHUB_REF:10}
-          echo "Preparing release $VERSION"
-          git checkout -t origin/release/$VERSION
-          npm version --no-git-tag-version --allow-same-version $VERSION
-          git add package.json
-          git commit -nm "Bump version $VERSION"
-          git checkout -t origin/master
-          git merge -m "Release $VERSION" --no-ff release/$VERSION
-          git push --no-verify
-
-      - name: Publish
-        run: |
-          npm set //registry.npmjs.org/:_authToken $NPM_TOKEN
-          npm publish
-        env:
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/release.yml

@@ -0,0 +1,46 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - master
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+permissions: # added using https://github.com/step-security/secure-repo
+  contents: read
+
+jobs:
+  release:
+    if: github.repository == 'mermaid-js/mermaid'
+    permissions:
+      contents: write # to create release (changesets/action)
+      id-token: write # OpenID Connect token needed for provenance
+      pull-requests: write # to create pull request (changesets/action)
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
+
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+        with:
+          cache: pnpm
+          node-version-file: '.node-version'
+
+      - name: Install Packages
+        run: pnpm install --frozen-lockfile
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@aba318e9165b45b7948c60273e0b72fce0a64eb9 # v1.4.7
+        with:
+          version: pnpm changeset:version
+          publish: pnpm changeset:publish
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_CONFIG_PROVENANCE: true

.github/workflows/scorecard.yml

@@ -0,0 +1,37 @@
+name: Scorecard supply-chain security
+on:
+  branch_protection_rule:
+  push:
+    branches:
+      - develop
+  schedule:
+    - cron: 29 15 * * 0
+permissions: read-all
+jobs:
+  analysis:
+    name: Scorecard analysis
+    permissions:
+      id-token: write
+      security-events: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+        with:
+          persist-credentials: false
+      - name: Run analysis
+        uses: ossf/scorecard-action@0864cf19026789058feabb7e87baa5f140aac736 # v2.3.1
+        with:
+          results_file: results.sarif
+          results_format: sarif
+          publish_results: true
+      - name: Upload artifact
+        uses: actions/upload-artifact@97a0fba1372883ab732affbe8f94b823f91727db # v3.pre.node20
+        with:
+          name: SARIF file
+          path: results.sarif
+          retention-days: 5
+      - name: Upload to code-scanning
+        uses: github/codeql-action/upload-sarif@f0f3afee809481da311ca3a6ff1ff51d81dbeb24 # v3.26.4
+        with:
+          sarif_file: results.sarif

.github/workflows/test.yml

@@ -9,13 +9,13 @@ jobs:
   unit-test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -38,8 +38,12 @@ jobs:
         run: |
           pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts --coverage
 
+      - name: Verify out-of-tree build with TypeScript
+        run: |
+          pnpm test:check:tsc
+
       - name: Upload Coverage to Codecov
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0
         # Run step only pushes to develop and pull_requests
         if: ${{ github.event_name == 'pull_request' || github.ref == 'refs/heads/develop' }}
         with:

.github/workflows/unlock-reopened-issues.yml

@@ -8,6 +8,6 @@ jobs:
   triage:
     runs-on: ubuntu-latest
     steps:
-      - uses: Dunning-Kruger/unlock-issues@v1
+      - uses: Dunning-Kruger/unlock-issues@b06b7f7e5c3f2eaa1c6d5d89f40930e4d6d9699e # v1
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'

.github/workflows/update-browserlist.yml

@@ -8,18 +8,18 @@ jobs:
   update-browser-list:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
       - run: npx update-browserslist-db@latest
       - name: Commit changes
-        uses: EndBug/add-and-commit@v9
+        uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9.1.4
         with:
           author_name: ${{ github.actor }}
           author_email: ${{ github.actor }}@users.noreply.github.com
           message: 'chore: update browsers list'
           push: false
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v6
+        uses: peter-evans/create-pull-request@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6.1.0
         with:
           branch: update-browserslist
           title: Update Browserslist

.gitignore

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

.hadolint.yaml

@@ -0,0 +1,2 @@
+ignored:
+  - DL3002 # TODO: Last USER should not be root

.husky/pre-commit

@@ -1,4 +1,2 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
+#!/usr/bin/env sh
 NODE_OPTIONS="--max_old_space_size=8192" pnpm run pre-commit

.prettierignore

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

.vite/build.ts

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

.vite/jsonSchemaPlugin.ts

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

.vite/server.ts

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

Dockerfile

@@ -1,2 +1,13 @@
-FROM node:20.12.2-alpine3.19 AS base
-RUN wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.shrc" SHELL="$(which sh)" sh -
+FROM node:20.12.2-alpine3.19@sha256:7a91aa397f2e2dfbfcdad2e2d72599f374e0b0172be1d86eeb73f1d33f36a4b2
+
+USER 0:0
+
+RUN corepack enable \
+    && corepack enable pnpm
+
+RUN apk add --no-cache git~=2.43.4 \
+    && git config --add --system safe.directory /mermaid
+
+ENV NODE_OPTIONS="--max_old_space_size=8192"
+
+EXPOSE 9000 3333

README.md

@@ -35,7 +35,8 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
 [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
 [![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
 [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
-[![Covered by Argos Visual Testing](https://argos-ci.com/badge.svg)](https://argos-ci.com)
+[![Covered by Argos Visual Testing](https://argos-ci.com/badge.svg)](https://argos-ci.com?utm_source=mermaid&utm_campaign=oss)
+[![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/mermaid-js/mermaid/badge)](https://securityscorecards.dev/viewer/?uri=github.com/mermaid-js/mermaid)
 
 <img src="./img/header.png" alt="" />
 
@@ -82,6 +83,10 @@ You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-
 
 For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](https://mermaid.js.org/intro/getting-started.html), [Usage](https://mermaid.js.org/config/usage.html) and [Tutorials](https://mermaid.js.org/ecosystem/tutorials.html).
 
+Our PR Visual Regression Testing is powered by [Argos](https://argos-ci.com/?utm_source=mermaid&utm_campaign=oss) with their generous Open Source plan. It makes the process of reviewing PRs with visual changes a breeze.
+
+[![Covered by Argos Visual Testing](https://argos-ci.com/badge-large.svg)](https://argos-ci.com?utm_source=mermaid&utm_campaign=oss)
+
 In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
 
 <a href="https://applitools.com/">

cypress/helpers/util.ts

@@ -35,7 +35,7 @@ export const mermaidUrl = (
   };
   const objStr: string = JSON.stringify(codeObject);
   let url = `http://localhost:9000/e2e.html?graph=${utf8ToB64(objStr)}`;
-  if (api) {
+  if (api && typeof graphStr === 'string') {
     url = `http://localhost:9000/xss.html?graph=${graphStr}`;
   }
 
@@ -54,16 +54,15 @@ export const imgSnapshotTest = (
 ): void => {
   const options: CypressMermaidConfig = {
     ..._options,
-    fontFamily: _options.fontFamily || 'courier',
+    fontFamily: _options.fontFamily ?? 'courier',
     // @ts-ignore TODO: Fix type of fontSize
-    fontSize: _options.fontSize || '16px',
+    fontSize: _options.fontSize ?? '16px',
     sequence: {
-      ...(_options.sequence || {}),
+      ...(_options.sequence ?? {}),
       actorFontFamily: 'courier',
-      noteFontFamily:
-        _options.sequence && _options.sequence.noteFontFamily
-          ? _options.sequence.noteFontFamily
-          : 'courier',
+      noteFontFamily: _options.sequence?.noteFontFamily
+        ? _options.sequence.noteFontFamily
+        : 'courier',
       messageFontFamily: 'courier',
     },
   };
@@ -74,7 +73,7 @@ export const imgSnapshotTest = (
 
 export const urlSnapshotTest = (
   url: string,
-  options: CypressMermaidConfig,
+  options: CypressMermaidConfig = {},
   _api = false,
   validation?: any
 ): void => {
@@ -95,7 +94,7 @@ export const openURLAndVerifyRendering = (
   options: CypressMermaidConfig,
   validation?: any
 ): void => {
-  const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
+  const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   cy.visit(url);
   cy.window().should('have.property', 'rendered', true);
@@ -125,7 +124,9 @@ export const verifyScreenshot = (name: string): void => {
     cy.log(`Closing eyes ${Cypress.spec.name}`);
     cy.eyesClose();
   } else if (useArgos) {
-    cy.argosScreenshot(name);
+    cy.argosScreenshot(name, {
+      threshold: 0.01,
+    });
   } else {
     cy.matchImageSnapshot(name);
   }

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

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

cypress/integration/rendering/appli.spec.js

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

cypress/integration/rendering/architecture.spec.ts

@@ -0,0 +1,180 @@
+import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts';
+
+describe.skip('architecture diagram', () => {
+  it('should render a simple architecture diagram with groups', () => {
+    imgSnapshotTest(
+      `architecture-beta
+                group api(cloud)[API]
+
+                service db(database)[Database] in api
+                service disk1(disk)[Storage] in api
+                service disk2(disk)[Storage] in api
+                service server(server)[Server] in api
+                service gateway(internet)[Gateway] 
+
+                db L--R server
+                disk1 T--B server
+                disk2 T--B db
+                server T--B gateway
+            `
+    );
+  });
+  it('should render an architecture diagram with groups within groups', () => {
+    imgSnapshotTest(
+      `architecture-beta
+                group api[API]
+                group public[Public API] in api
+                group private[Private API] in api
+        
+                service serv1(server)[Server] in public
+        
+                service serv2(server)[Server] in private
+                service db(database)[Database] in private
+        
+                service gateway(internet)[Gateway] in api
+        
+                serv1 B--T serv2
+                serv2 L--R db
+                serv1 L--R gateway
+            `
+    );
+  });
+  it('should render an architecture diagram with the fallback icon', () => {
+    imgSnapshotTest(
+      `architecture-beta
+                service unknown(iconnamedoesntexist)[Unknown Icon]
+            `
+    );
+  });
+  it('should render an architecture diagram with split directioning', () => {
+    imgSnapshotTest(
+      `architecture-beta
+                service db(database)[Database]
+                service s3(disk)[Storage]
+                service serv1(server)[Server 1]
+                service serv2(server)[Server 2]
+                service disk(disk)[Disk]
+        
+                db L--R s3
+                serv1 L--T s3
+                serv2 L--B s3
+                serv1 T--B disk
+            `
+    );
+  });
+  it('should render an architecture diagram with directional arrows', () => {
+    imgSnapshotTest(
+      `architecture-beta
+                service servC(server)[Server 1]
+                service servL(server)[Server 2]
+                service servR(server)[Server 3]
+                service servT(server)[Server 4]
+                service servB(server)[Server 5]
+        
+                servC (L--R) servL
+                servC (R--L) servR
+                servC (T--B) servT
+                servC (B--T) servB
+        
+                servL (T--L) servT
+                servL (B--L) servB
+                servR (T--R) servT
+                servR (B--R) servB
+            `
+    );
+  });
+  it('should render an architecture diagram with group edges', () => {
+    imgSnapshotTest(
+      `architecture-beta
+                group left_group(cloud)[Left]
+                group right_group(cloud)[Right]
+                group top_group(cloud)[Top]
+                group bottom_group(cloud)[Bottom]
+                group center_group(cloud)[Center]
+        
+                service left_disk(disk)[Disk] in left_group
+                service right_disk(disk)[Disk] in right_group
+                service top_disk(disk)[Disk] in top_group
+                service bottom_disk(disk)[Disk] in bottom_group
+                service center_disk(disk)[Disk] in center_group
+        
+                left_disk{group} (R--L) center_disk{group}
+                right_disk{group} (L--R) center_disk{group}
+                top_disk{group} (B--T) center_disk{group}
+                bottom_disk{group} (T--B) center_disk{group}
+            `
+    );
+  });
+  it('should render an architecture diagram with edge labels', () => {
+    imgSnapshotTest(
+      `architecture-beta
+                service servC(server)[Server 1]
+                service servL(server)[Server 2]
+                service servR(server)[Server 3]
+                service servT(server)[Server 4]
+                service servB(server)[Server 5]
+        
+                servC L-[Label]-R servL
+                servC R-[Label]-L servR
+                servC T-[Label]-B servT
+                servC B-[Label]-T servB
+        
+                servL T-[Label]-L servT
+                servL B-[Label]-L servB
+                servR T-[Label]-R servT
+                servR B-[Label]-R servB
+            `
+    );
+  });
+  it('should render an architecture diagram with simple junction edges', () => {
+    imgSnapshotTest(
+      `architecture-beta
+                service left_disk(disk)[Disk]
+                service top_disk(disk)[Disk]
+                service bottom_disk(disk)[Disk]
+                service top_gateway(internet)[Gateway]
+                service bottom_gateway(internet)[Gateway]
+                junction juncC
+                junction juncR
+        
+                left_disk R--L juncC
+                top_disk B--T juncC
+                bottom_disk T--B juncC
+                juncC R--L juncR
+                top_gateway B--T juncR
+                bottom_gateway T--B juncR
+            `
+    );
+  });
+  it('should render an architecture diagram with complex junction edges', () => {
+    imgSnapshotTest(
+      `architecture-beta
+                group left
+                group right
+                service left_disk(disk)[Disk] in left
+                service top_disk(disk)[Disk] in left
+                service bottom_disk(disk)[Disk] in left
+                service top_gateway(internet)[Gateway] in right
+                service bottom_gateway(internet)[Gateway] in right
+                junction juncC in left
+                junction juncR in right
+        
+                left_disk R--L juncC
+                top_disk B--T juncC
+                bottom_disk T--B juncC
+        
+        
+                top_gateway (B--T juncR
+                bottom_gateway (T--B juncR
+        
+                juncC{group} R--L) juncR{group}
+            `
+    );
+  });
+});
+
+describe('architecture - external', () => {
+  it('should allow adding external icons', () => {
+    urlSnapshotTest('http://localhost:9000/architecture-external.html');
+  });
+});

cypress/integration/rendering/block.spec.js

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

cypress/integration/rendering/c4.spec.js

@@ -1,7 +1,7 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('C4 diagram', () => {
-  it('should render a simple C4Context diagram', () => {
+  it('C4.1 should render a simple C4Context diagram', () => {
     imgSnapshotTest(
       `
       C4Context
@@ -31,7 +31,7 @@ describe('C4 diagram', () => {
       {}
     );
   });
-  it('should render a simple C4Container diagram', () => {
+  it('C4.2 should render a simple C4Container diagram', () => {
     imgSnapshotTest(
       `
       C4Container
@@ -50,7 +50,7 @@ describe('C4 diagram', () => {
       {}
     );
   });
-  it('should render a simple C4Component diagram', () => {
+  it('C4.3 should render a simple C4Component diagram', () => {
     imgSnapshotTest(
       `
       C4Component
@@ -68,7 +68,7 @@ describe('C4 diagram', () => {
       {}
     );
   });
-  it('should render a simple C4Dynamic diagram', () => {
+  it('C4.4 should render a simple C4Dynamic diagram', () => {
     imgSnapshotTest(
       `
       C4Dynamic
@@ -91,7 +91,7 @@ describe('C4 diagram', () => {
       {}
     );
   });
-  it('should render a simple C4Deployment diagram', () => {
+  it('C4.5 should render a simple C4Deployment diagram', () => {
     imgSnapshotTest(
       `
       C4Deployment

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

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

cypress/integration/rendering/erDiagram.spec.js

@@ -321,4 +321,37 @@ ORDER ||--|{ LINE-ITEM : contains
       { logLevel: 1 }
     );
   });
+
+  it('should render relationship labels with line breaks', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+      p[Person] {
+          string firstName
+          string lastName
+      }
+      a["Customer Account"] {
+          string email
+      }
+
+      b["Customer Account Secondary"] {
+        string email
+      }
+      
+      c["Customer Account Tertiary"] {
+        string email
+      }
+      
+      d["Customer Account Nth"] {
+        string email
+      }
+
+      p ||--o| a : "has<br />one"
+      p ||--o| b : "has<br />one<br />two"
+      p ||--o| c : "has<br />one<br/>two<br />three"
+      p ||--o| d : "has<br />one<br />two<br/>three<br />...<br/>Nth"
+      `,
+      { logLevel: 1 }
+    );
+  });
 });

cypress/integration/rendering/errorDiagram.spec.js

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

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

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

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

@@ -99,7 +99,7 @@ describe('Flowchart v2', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.be.within(290 * 0.95 - 1, 290 * 1.05);
+      expect(maxWidthValue).to.be.within(417 * 0.95, 417 * 1.05);
     });
   });
   it('8: should render a flowchart when useMaxWidth is false', () => {
@@ -118,7 +118,7 @@ describe('Flowchart v2', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      expect(width).to.be.within(290 * 0.95 - 1, 290 * 1.05);
+      expect(width).to.be.within(417 * 0.95, 417 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -786,7 +786,7 @@ A ~~~ B
       `---
       title: Subgraph nodeSpacing and rankSpacing example
       config:
-        flowchart: 
+        flowchart:
           nodeSpacing: 250
           rankSpacing: 250
       ---
@@ -1047,7 +1047,32 @@ end
           A --lb3--> TOP --lb4--> B
           B1 --lb5--> B2
         `,
-        { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
+        {
+          flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } },
+        }
+      );
+    });
+    it('Should render self-loops', () => {
+      imgSnapshotTest(
+        `flowchart
+          A --> A
+          subgraph B
+            B1 --> B1
+          end
+          subgraph C
+            subgraph C1
+              C2 --> C2
+              subgraph D
+                D1 --> D1
+              end
+              D --> D
+            end
+            C1 --> C1
+          end
+        `,
+        {
+          flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } },
+        }
       );
     });
   });

cypress/integration/rendering/flowchart.spec.js

@@ -733,7 +733,7 @@ describe('Graph', () => {
   });
   it('38: should render a flowchart when useMaxWidth is true (default)', () => {
     renderGraph(
-      `graph TD
+      `flowchart TD
       A[Christmas] -->|Get money| B(Go shopping)
       B --> C{Let me think}
       C -->|One| D[Laptop]
@@ -751,7 +751,7 @@ describe('Graph', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.be.within(300 * 0.9, 300 * 1.1);
+      expect(maxWidthValue).to.be.within(446 * 0.9, 446 * 1.1);
     });
   });
   it('39: should render a flowchart when useMaxWidth is false', () => {
@@ -770,7 +770,7 @@ describe('Graph', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±10%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      expect(width).to.be.within(300 * 0.9, 300 * 1.1);
+      expect(width).to.be.within(446 * 0.9, 446 * 1.1);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -905,13 +905,16 @@ graph TD
   it('67: should be able to style default node independently', () => {
     imgSnapshotTest(
       `
-    flowchart TD
+      flowchart TD
       classDef default fill:#a34
       hello --> default
 
       style default stroke:#000,stroke-width:4px
     `,
-      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+      {
+        flowchart: { htmlLabels: true },
+        securityLevel: 'loose',
+      }
     );
   });
 });

cypress/integration/rendering/gitGraph.spec.js

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

cypress/integration/rendering/packet.spec.ts

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

cypress/integration/rendering/sequencediagram.spec.js

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

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

@@ -542,6 +542,43 @@ 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(
@@ -551,6 +588,20 @@ title: simple state diagram
 stateDiagram-v2
 [*] --> State1
 State1 --> [*]
+`,
+      {}
+    );
+  });
+  it('should align dividers correctly', () => {
+    imgSnapshotTest(
+      `stateDiagram-v2
+  state s2 {
+      s3
+      --
+      s4
+      --
+      55
+  }
 `,
       {}
     );

cypress/platform/architecture-external.html

@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Architecture Mermaid Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h2>External Icons Demo</h2>
+    <pre class="mermaid">
+    architecture-beta
+      service s3(logos:aws-s3)[Cloud Store]
+      service ec2(logos:aws-ec2)[Server]
+      service api(logos:aws-api-gateway)[Api Gateway]
+      service fa(fa:image)[Font Awesome Icon]
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({
+        startOnLoad: false,
+        logLevel: 0,
+      });
+      mermaid.registerIconPacks([
+        {
+          name: 'logos',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
+        },
+        {
+          name: 'fa',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
+              res.json()
+            ),
+        },
+      ]);
+      await mermaid.run();
+      if (window.Cypress) {
+        window.rendered = true;
+      }
+    </script>
+  </body>
+</html>

cypress/platform/bundle-test.js

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

cypress/platform/flowchart-refactor.html

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

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

@@ -0,0 +1,433 @@
+<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/6.5.2/css/font-awesome.min.css"
+      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"
@@ -14,34 +14,50 @@
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        background: #333;
+        /* background: #333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
       }
+
       h1 {
         color: grey;
       }
-      .mermaid {
-        border: 1px solid #ddd;
-        margin: 10px;
-      }
+
       .mermaid2 {
         display: none;
       }
+
       .mermaid svg {
         /* font-size: 18px !important; */
-        /* background-color: #efefef; */
-        background-color: #333;
-        background-image: radial-gradient(#333 51%, transparent 91%),
-          radial-gradient(#333 51%, transparent 91%);
+
+        /* 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;
-        border: 2px solid rgb(131, 142, 205);
+        background-position:
+          0 0,
+          10px 10px;
+        background-repeat: repeat; */
       }
+
       .malware {
         position: fixed;
         bottom: 0;
@@ -57,546 +73,208 @@
         font-family: monospace;
         font-size: 72px;
       }
+      pre {
+        width: 100%;
+      }
       /* tspan {
-        font-size: 6px !important;
-      } */
+              font-size: 6px !important;
+            } */
     </style>
   </head>
+
   <body>
     <pre id="diagram" 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
+---
+  title: hello2
+  config:
+    look: handDrawn
+    layout: elk
+    elk:
+        <!-- nodePlacementStrategy: INTERACTIVE -->
+        <!-- mergeEdges: true -->
+---
+stateDiagram-v2
+    direction LR
+    accTitle: An idealized Open Source supply-chain graph
 
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-  block:e:4
-    columns 2
-      f
-      g
-      h
-  end
+    %%
+    state "🟦 Importer" as author_importer
+    state "🟥 Supplier, Owner" as author_owner
+    state "🟨🟥 Maintainer, Author\n🟨 Custodian" as author
+    state "🟩 Distributor" as repository_distributor
+    state "🟦 Importer" as language_importer
+    state "🟦🟨 Packager" as language_packager
+    state "🟦🟨 OSS Steward" as language_steward
+    state "🟨 Curator" as language_curator
+    state "🟩 Distributor" as language_distributor
+    state "🟦 Contributor" as contributor
+    state "🟦 Importer" as package_importer
+    state "🟨 Patcher" as package_patcher
+    state "🟨🟦 Builder\n🟨🟦 Packager\n🟨🟦 Containerizer" as package_packager
+    state "🟨 Curator" as package_curator
+    state "🟩 Distributor" as package_distributor
+    state "🟦 Importer" as integrator_importer
+    state "🟥 Supplier, Manufacturer, Owner" as integrator_owner
+    state "🟦🟨🟥 Integrator, Developer" as integrator_developer
+    state "🟩🟨 SBOM Redactor\n🟩 Publisher" as integrator_publisher
+    state "🟦🟨 Builder" as integrator_builder
+    state "🟨 Deployer" as deployer
+    state "🟦 Vuln. Checker" as integrator_checker
+    state "🟩🟨 SBOM Redactor" as redactor
+    state "🟦 Consumer\n🟦  User" as consumer
+    state "🟦 Auditor" as auditor_internal
+    state "🟦 Auditor" as auditor_external
 
-    </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
+    %%
+    classDef createsSBOM stroke:red,stroke-width:3px;
+    classDef updatesSBOM stroke:yellow,stroke-width:3px;
+    classDef assemblesSBOM stroke:yellow,stroke-width:3px;
+    classDef distributesSBOM stroke:green,stroke-width:3px;
+    classDef verifiesSBOM stroke:#07f,stroke-width:3px;
 
-    </pre>
-    <pre id="diagram" class="mermaid2">
-flowchart LR
-  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
+    %%
+    class author_importer verifiesSBOM
+    class author_owner createsSBOM
+    class manufacturer_owner createsSBOM
+    class author assemblesSBOM
+    class package_importer verifiesSBOM
+    class package_patcher updatesSBOM
+    class package_packager assemblesSBOM
+    class package_curator distributesSBOM
+    class package_distributor distributesSBOM
+    class language_importer verifiesSBOM
+    class language_packager assemblesSBOM
+    class language_steward updatesSBOM
+    class language_curator distributesSBOM
+    class language_distributor distributesSBOM
+    class repository_distributor distributesSBOM
+    class integrator_importer verifiesSBOM
+    class integrator_owner createsSBOM
+    class integrator_developer assemblesSBOM
+    class integrator_publisher distributesSBOM
+    class integrator_builder assemblesSBOM
+    class integrator_checker verifiesSBOM
+    class deployer assemblesSBOM
+    class redactor distributesSBOM
+    class auditor_internal verifiesSBOM
+    class auditor_external verifiesSBOM
 
-    </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
+    state "Maintainer Environment" as environment_maintainer {
+        [*] --> author_importer
+        [*] --> author
+        author_importer --> author
+        author_owner --> author
+        author       --> language_packager
+    }
 
-      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>
+    [*] --> environment_maintainer
 
-    <pre id="diagram" class="mermaid2">
-flowchart
-      B
-      style B fill:#f9F,stroke:#333,stroke-width:4px
-    </pre>
+    state "Language Ecosystem" as ecosystem_lang {
+        [*] --> language_importer
+        [*] --> language_steward
+        [*] --> language_curator
+        [*] --> language_distributor
+        language_importer --> language_distributor
+        language_importer --> language_curator
+        language_steward --> language_curator
+        language_curator --> language_distributor
+    }
 
-    <pre id="diagram" class="mermaid2">
-      flowchart LR
-      a1 -- apa --> b1
-    </pre>
+    language_packager --> ecosystem_lang
+    ecosystem_lang    --> ecosystem_lang
 
-    <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: 🤓
-      शान्तिः سلام  和平 `"]
+    state "Public Collaboration Ecosystem" as ecosystem_repo {
+        [*] --> repository_distributor
+    }
 
-    </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]
+    author         --> ecosystem_repo
+    ecosystem_repo --> author
 
-    rom[16 KB ROM]
+    repository_distributor --> contributor
+    contributor            --> repository_distributor
 
-    core0 --- core2
+    state "Package Ecosystem" as ecosystem_package {
+        [*] --> package_importer
+        [*] --> package_packager
+        [*] --> package_patcher
+        package_importer --> package_patcher
+        package_importer --> package_packager
+        package_patcher  --> package_packager
+        package_packager --> package_curator
+        package_packager --> package_distributor
+        package_curator  --> package_distributor
+    }
 
-    rom --> core2
-  end
+    repository_distributor --> ecosystem_package
+    language_distributor   --> ecosystem_package
+    ecosystem_package      --> ecosystem_package
 
-  subgraph amd["`**AMD** Latte GPU`"]
-    mem[Memory & I/O Bridge]
-    dram[DRAM Controller]
-    edram[32 MB EDRAM MEM1]
-    rom[512 B SEEPROM]
+    state "Integrator Environment" as environment_integrator {
+        [*] --> integrator_developer
+        [*] --> integrator_importer
+        integrator_importer  --> integrator_developer
+        integrator_owner     --> integrator_developer
+        integrator_builder   --> integrator_publisher
+        integrator_developer --> integrator_checker
+        integrator_checker   --> integrator_developer
+        auditor_internal     --> integrator_developer
+        integrator_developer --> integrator_builder
+        integrator_developer --> auditor_internal
+    }
 
-    sata[SATA IF]
-    exi[EXI]
+    repository_distributor --> environment_integrator
+    language_distributor   --> environment_integrator
+    package_distributor    --> environment_integrator
 
-    subgraph gx[GX]
-      sram[3 MB 1T-SRAM]
-    end
+    state "Production Environment" as environment_prod {
+        [*] --> deployer
+        deployer --> redactor
+    }
 
-    radeon[AMD Radeon R7xx GX2]
+    integrator_publisher --> [*]
+    integrator_developer --> environment_prod
+    integrator_builder   --> environment_prod
+    integrator_publisher --> environment_prod
 
-    mem --- gx
-    mem --- radeon
+    deployer --> auditor_external
+    deployer --> consumer
+    redactor --> consumer
 
-    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> -->
+      </pre>
 
     <script type="module">
-      // import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      // import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
       import mermaid from './mermaid.esm.mjs';
-      // await mermaid.registerExternalDiagrams([example]);
+      import layouts from './mermaid-layout-elk.esm.mjs';
+      mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {
-        // console.error('Mermaid error: ', err);
+        console.error('Mermaid error: ', err);
+      };
+      window.callback = function () {
+        alert('A callback was triggered');
       };
-      // mermaid.initialize({
-      //   // theme: 'forest',
-      //   startOnLoad: true,
-      //   logLevel: 0,
-      //   flowchart: {
-      //     // defaultRenderer: 'elk',
-      //     useMaxWidth: false,
-      //     // htmlLabels: false,
-      //     htmlLabels: true,
-      //   },
-      //   // htmlLabels: false,
-      //   gantt: {
-      //     useMaxWidth: false,
-      //   },
-      //   useMaxWidth: false,
-      // });
       mermaid.initialize({
-        theme: 'dark',
-        startOnLoad: true,
-        logLevel: 0,
+        // 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,
+        logLevel: 3,
+        securityLevel: 'loose',
       });
       function callback() {
         alert('It worked');
@@ -605,10 +283,6 @@ mindmap
         console.error('In parse error:');
         console.error(err);
       };
-      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
-      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
     </script>
   </body>
 </html>

cypress/platform/knsv3.html

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

cypress/platform/viewer.js

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

demos/architecture.html

@@ -0,0 +1,256 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Architecture Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>Architecture diagram demo</h1>
+    <h2>Simple diagram with groups</h2>
+    <pre class="mermaid">
+      architecture-beta
+        group api(cloud)[API]
+
+        service db(database)[Database] in api
+        service disk1(disk)[Storage] in api
+        service disk2(disk)[Storage] in api
+        service server(server)[Server] in api
+        service gateway(internet)[Gateway] 
+
+        db:L -- R:server
+        disk1:T -- B:server
+        disk2:T -- B:db
+        server:T -- B:gateway
+    </pre>
+    <hr />
+
+    <h2>Groups within groups</h2>
+    <pre class="mermaid">
+      architecture-beta
+        group api[API]
+        group public[Public API] in api
+        group private[Private API] in api
+
+
+        service serv1(server)[Server] in public
+
+
+        service serv2(server)[Server] in private
+        service db(database)[Database] in private
+
+        service gateway(internet)[Gateway] in api
+
+        serv1:B -- T:serv2
+
+        serv2:L -- R:db
+
+        serv1:L -- R:gateway
+    </pre>
+    <hr />
+
+    <h2>Default icon (?) from unknown icon name</h2>
+    <pre class="mermaid">
+      architecture-beta
+        service unknown(iconnamedoesntexist)[Unknown Icon]
+    </pre>
+    <hr />
+
+    <h2>Split Direction</h2>
+    <pre class="mermaid">
+      architecture-beta
+        service db(database)[Database]
+        service s3(disk)[Storage]
+        service serv1(server)[Server 1]
+        service serv2(server)[Server 2]
+        service disk(disk)[Disk]
+
+        db:L -- R:s3
+        serv1:L -- T:s3
+        serv2:L -- B:s3
+        serv1:T -- B:disk
+    </pre>
+    <hr />
+
+    <h2>Arrow Tests</h2>
+    <pre class="mermaid">
+      architecture-beta
+        service servC(server)[Server 1]
+        service servL(server)[Server 2]
+        service servR(server)[Server 3]
+        service servT(server)[Server 4]
+        service servB(server)[Server 5]
+
+        servC:L <--> R:servL
+        servC:R <--> L:servR
+        servC:T <--> B:servT
+        servC:B <--> T:servB
+
+        servL:T <--> L:servT
+        servL:B <--> L:servB
+        servR:T <--> R:servT
+        servR:B <--> R:servB
+    </pre>
+    <pre class="mermaid">
+      architecture-beta
+        service servC(server)[Server 1]
+        service servL(server)[Server 2]
+        service servR(server)[Server 3]
+        service servT(server)[Server 4]
+        service servB(server)[Server 5]
+
+        servC:L <--> R:servL
+        servC:R <--> L:servR
+        servC:T <--> B:servT
+        servC:B <--> T:servB
+
+        servT:L <--> T:servL
+        servB:L <--> B:servL
+        servT:R <--> T:servR
+        servB:R <--> B:servR
+    </pre>
+    <hr />
+
+    <h2>Group Edges</h2>
+    <pre class="mermaid">
+      architecture-beta
+        group left_group(cloud)[Left]
+        group right_group(cloud)[Right]
+        group top_group(cloud)[Top]
+        group bottom_group(cloud)[Bottom]
+        group center_group(cloud)[Center]
+
+        service left_disk(disk)[Disk] in left_group
+        service right_disk(disk)[Disk] in right_group
+        service top_disk(disk)[Disk] in top_group
+        service bottom_disk(disk)[Disk] in bottom_group
+        service center_disk(disk)[Disk] in center_group
+
+        left_disk{group}:R <--> L:center_disk{group}
+        right_disk{group}:L <--> R:center_disk{group}
+        top_disk{group}:B <--> T:center_disk{group}
+        bottom_disk{group}:T <--> B:center_disk{group}
+  </pre
+    >
+    <hr />
+
+    <h2>Edge Label Test</h2>
+    <pre class="mermaid">
+      architecture-beta
+        service servC(server)[Server 1]
+        service servL(server)[Server 2]
+        service servR(server)[Server 3]
+        service servT(server)[Server 4]
+        service servB(server)[Server 5]
+
+        servC:L -[Label]- R:servL
+        servC:R -[Label]- L:servR
+        servC:T -[Label]- B:servT
+        servC:B -[Label]- T:servB
+
+        servL:T -[Label]- L:servT
+        servL:B -[Label]- L:servB
+        servR:T -[Label]- R:servT
+        servR:B -[Label]- R:servB
+    </pre>
+    <pre class="mermaid">
+      architecture-beta
+        service servC(server)[Server 1]
+        service servL(server)[Server 2]
+        service servR(server)[Server 3]
+        service servT(server)[Server 4]
+        service servB(server)[Server 5]
+
+        servC:L -[Label that is Long]- R:servL
+        servC:R -[Label that is Long]- L:servR
+        servC:T -[Label that is Long]- B:servT
+        servC:B -[Label that is Long]- T:servB
+
+        servL:T -[Label that is Long]- L:servT
+        servL:B -[Label that is Long]- L:servB
+        servR:T -[Label that is Long]- R:servT
+        servR:B -[Label that is Long]- R:servB
+    </pre>
+
+    <hr />
+    <h2>Junction Demo</h2>
+    <pre class="mermaid">
+      architecture-beta
+        service left_disk(disk)[Disk]
+        service top_disk(disk)[Disk]
+        service bottom_disk(disk)[Disk]
+        service top_gateway(internet)[Gateway]
+        service bottom_gateway(internet)[Gateway]
+        junction juncC
+        junction juncR
+
+        left_disk:R -- L:juncC
+        top_disk:B -- T:juncC
+        bottom_disk:T -- B:juncC
+        juncC:R -- L:juncR
+        top_gateway:B -- T:juncR
+        bottom_gateway:T -- B:juncR
+    </pre>
+    <hr />
+
+    <h2>Junction Demo Groups</h2>
+    <pre class="mermaid">
+      architecture-beta
+        group left
+        group right
+        service left_disk(disk)[Disk] in left
+        service top_disk(disk)[Disk] in left
+        service bottom_disk(disk)[Disk] in left
+        service top_gateway(internet)[Gateway] in right
+        service bottom_gateway(internet)[Gateway] in right
+        junction juncC in left
+        junction juncR in right
+
+        left_disk:R -- L:juncC
+        top_disk:B -- T:juncC
+        bottom_disk:T -- B:juncC
+
+
+        top_gateway:B <-- T:juncR
+        bottom_gateway:T <-- B:juncR
+
+        juncC{group}:R --> L:juncR{group}
+    </pre>
+    <hr />
+
+    <h2>External Icons Demo</h2>
+    <pre class="mermaid">
+    architecture-beta
+      service s3(logos:aws-s3)[Cloud Store]
+      service ec2(logos:aws-ec2)[Server]
+      service api(logos:aws-api-gateway)[Api Gateway]
+      service fa(fa:image)[Font Awesome Icon]
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.registerIconPacks([
+        {
+          name: 'logos',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
+        },
+        {
+          name: 'fa',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
+              res.json()
+            ),
+        },
+      ]);
+    </script>
+  </body>
+</html>

demos/er.html

@@ -125,6 +125,35 @@
     </pre>
     <hr />
 
+    <pre class="mermaid">
+    erDiagram
+      p[Person] {
+          string firstName
+          string lastName
+      }
+      a["Customer Account"] {
+          string email
+      }
+
+      b["Customer Account Secondary"] {
+        string email
+      }
+      
+      c["Customer Account Tertiary"] {
+        string email
+      }
+      
+      d["Customer Account Nth"] {
+        string email
+      }
+
+      p ||--o| a : "has<br />one"
+      p ||--o| b : "has<br />one<br />two"
+      p ||--o| c : "has<br />one<br />two<br />three"
+      p ||--o| d : "has<br />one<br />two<br />three<br />...<br />Nth"
+    </pre>
+    <hr />
+
     <pre class="mermaid">
     erDiagram
       _customer_order {

demos/index.html

@@ -88,6 +88,9 @@
       <li>
         <h2><a href="./block.html">Layered Blocks</a></h2>
       </li>
+      <li>
+        <h2><a href="./architecture.html">Architecture</a></h2>
+      </li>
     </ul>
   </body>
 </html>

demos/sequence.html

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

docker-compose.yml

@@ -7,9 +7,6 @@ services:
     tty: true
     working_dir: /mermaid
     mem_limit: '8G'
-    entrypoint: ./docker-entrypoint.sh
-    environment:
-      - NODE_OPTIONS=--max_old_space_size=8192
     volumes:
       - ./:/mermaid
       - root_cache:/root/.cache

docker-entrypoint.sh

@@ -1,3 +0,0 @@
-#!/bin/sh
-source /root/.shrc
-exec "$@"

docs/community/contributing.md

@@ -370,9 +370,9 @@ If the users have no way to know that things have changed, then you haven't real
 Likewise, if users don't know that there is a new feature that you've implemented, it will forever remain unknown and unused.
 
 The documentation has to be updated for users to know that things have been changed and added!
-If you are adding a new feature, add `(v10.8.0+)` in the title or description. It will be replaced automatically with the current version number when the release happens.
+If you are adding a new feature, add `(v<MERMAID_RELEASE_VERSION>+)` in the title or description. It will be replaced automatically with the current version number when the release happens.
 
-eg: `# Feature Name (v10.8.0+)`
+eg: `# Feature Name (v<MERMAID_RELEASE_VERSION>+)`
 
 We know it can sometimes be hard to code _and_ write user documentation.
 

docs/config/setup/README.md

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,388 @@
+> **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:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
+
+---
+
+### 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:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
+
+---
+
+### 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:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
+
+---
+
+### 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:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
+
+---
+
+### mermaidAPI
+
+• **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.defaultConfig; `getConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`userOptions`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.setConfig; `updateSiteConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.updateSiteConfig }>
+
+**`Deprecated`**
+
+Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
+
+---
+
+### 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:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
+
+---
+
+### parseError
+
+• `Optional` **parseError**: [`ParseErrorFunction`](../modules/mermaid.md#parseerrorfunction)
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420)
+
+---
+
+### 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:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
+
+---
+
+### registerIconPacks
+
+• **registerIconPacks**: (`iconLoaders`: `IconLoader`\[]) => `void`
+
+#### Type declaration
+
+▸ (`iconLoaders`): `void`
+
+##### Parameters
+
+| Name          | Type            |
+| :------------ | :-------------- |
+| `iconLoaders` | `IconLoader`\[] |
+
+##### Returns
+
+`void`
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439)
+
+---
+
+### 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:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
+
+---
+
+### 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:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
+
+---
+
+### 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:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
+
+---
+
+### 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:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
+
+---
+
+### startOnLoad
+
+• **startOnLoad**: `boolean`
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)

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

@@ -0,0 +1,531 @@
+> **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:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L122)
+
+---
+
+### architecture
+
+• `Optional` **architecture**: `ArchitectureDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)
+
+---
+
+### 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:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)
+
+---
+
+### block
+
+• `Optional` **block**: `BlockDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
+
+---
+
+### c4
+
+• `Optional` **c4**: `C4DiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
+
+---
+
+### class
+
+• `Optional` **class**: `ClassDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)
+
+---
+
+### darkMode
+
+• `Optional` **darkMode**: `boolean`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L113)
+
+---
+
+### 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:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181)
+
+---
+
+### 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:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)
+
+---
+
+### dompurifyConfig
+
+• `Optional` **dompurifyConfig**: `Config`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
+
+---
+
+### elk
+
+• `Optional` **elk**: `Object`
+
+#### Type declaration
+
+| Name                     | Type                                                                                          | Description                                                                                                                                               |
+| :----------------------- | :-------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `cycleBreakingStrategy?` | `"GREEDY"` \| `"DEPTH_FIRST"` \| `"INTERACTIVE"` \| `"MODEL_ORDER"` \| `"GREEDY_MODEL_ORDER"` | This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops.                                            |
+| `mergeEdges?`            | `boolean`                                                                                     | Elk specific option that allows edges to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram. |
+| `nodePlacementStrategy?` | `"SIMPLE"` \| `"NETWORK_SIMPLEX"` \| `"LINEAR_SEGMENTS"` \| `"BRANDES_KOEPF"`                 | Elk specific option affecting how nodes are placed.                                                                                                       |
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L91)
+
+---
+
+### er
+
+• `Optional` **er**: `ErDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)
+
+---
+
+### flowchart
+
+• `Optional` **flowchart**: `FlowchartDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)
+
+---
+
+### 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:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L121)
+
+---
+
+### fontSize
+
+• `Optional` **fontSize**: `number`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
+
+---
+
+### 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:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)
+
+---
+
+### gantt
+
+• `Optional` **gantt**: `GanttDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
+
+---
+
+### gitGraph
+
+• `Optional` **gitGraph**: `GitGraphDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
+
+---
+
+### 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:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L114)
+
+---
+
+### journey
+
+• `Optional` **journey**: `JourneyDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)
+
+---
+
+### 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:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L156)
+
+---
+
+### 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:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L127)
+
+---
+
+### 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:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
+
+---
+
+### 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:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)
+
+---
+
+### packet
+
+• `Optional` **packet**: `PacketDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
+
+---
+
+### pie
+
+• `Optional` **pie**: `PieDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)
+
+---
+
+### quadrantChart
+
+• `Optional` **quadrantChart**: `QuadrantChartConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
+
+---
+
+### requirement
+
+• `Optional` **requirement**: `RequirementDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
+
+---
+
+### sankey
+
+• `Optional` **sankey**: `SankeyDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
+
+---
+
+### 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:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L148)
+
+---
+
+### securityLevel
+
+• `Optional` **securityLevel**: `"strict"` | `"loose"` | `"antiscript"` | `"sandbox"`
+
+Level of trust for parsed diagram
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
+
+---
+
+### sequence
+
+• `Optional` **sequence**: `SequenceDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)
+
+---
+
+### startOnLoad
+
+• `Optional` **startOnLoad**: `boolean`
+
+Dictates whether mermaid starts on Page load
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L135)
+
+---
+
+### state
+
+• `Optional` **state**: `StateDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)
+
+---
+
+### 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:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210)
+
+---
+
+### theme
+
+• `Optional` **theme**: `"default"` | `"base"` | `"dark"` | `"forest"` | `"neutral"` | `"null"`
+
+Theme, the CSS style sheet.
+You may also use `themeCSS` to override this value.
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L64)
+
+---
+
+### themeCSS
+
+• `Optional` **themeCSS**: `string`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:66](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L66)
+
+---
+
+### themeVariables
+
+• `Optional` **themeVariables**: `any`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:65](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L65)
+
+---
+
+### timeline
+
+• `Optional` **timeline**: `TimelineDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)
+
+---
+
+### wrap
+
+• `Optional` **wrap**: `boolean`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
+
+---
+
+### xyChart
+
+• `Optional` **xyChart**: `XYChartConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)

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

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

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

@@ -0,0 +1,33 @@
+> **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
+
+### config
+
+• **config**: [`MermaidConfig`](mermaid.MermaidConfig.md)
+
+The config passed as YAML frontmatter or directives
+
+#### Defined in
+
+[packages/mermaid/src/types.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L56)
+
+---
+
+### diagramType
+
+• **diagramType**: `string`
+
+The diagram type, e.g. 'flowchart', 'sequence', etc.
+
+#### Defined in
+
+[packages/mermaid/src/types.ts:52](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L52)

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

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

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

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

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

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

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

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

docs/config/setup/modules/config.md

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

docs/config/setup/modules/defaultConfig.md

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