chore: Fix biome errors

* sidv/biome: (63 commits)
  chore: Remove redundant eslint comments
  chore: Add `eslint-config-biome`
  chore: update browsers list
  chore(deps): update all patch dependencies
  docs: Added demo diagram of bidirectional arrows for sequence diagrams
  Format on pre-commit
  fix(deps): update all patch dependencies
  chore: Update drupal regex
  chore: Update pnpm
  chore: Fix gantt test
  chore: Fix shape names
  chore: remove comments in json
  chore: Add eslint-disable
  chore: Add eslint-disable
  Fix prettier formatting on generation.
  chore: Add .eslintignore
  chore: Enable eslint in CI
  chore: Add biome renovate config
  chore: Remove unused deps
  chore: Update lint scripts
  ...

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

.cspell/code-terms.txt

@@ -27,6 +27,7 @@ controly
 CSSCLASS
 CYLINDEREND
 CYLINDERSTART
+DAGA
 datakey
 DEND
 descr
@@ -89,6 +90,7 @@ reqs
 rewritelinks
 rgba
 RIGHTOF
+roughjs
 sankey
 sequencenumber
 shrc
@@ -108,6 +110,7 @@ strikethrough
 stringifying
 struct
 STYLECLASS
+STYLEDEF
 STYLEOPTS
 subcomponent
 subcomponents

.cspell/libraries.txt

@@ -54,6 +54,7 @@ presetAttributify
 pyplot
 redmine
 rehype
+roughjs
 rscratch
 sparkline
 sphinxcontrib

.cspell/mermaid-terms.txt

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

.cspell/misc-terms.txt

@@ -1 +1,4 @@
+circo
+handdrawnSeed
+neato
 newbranch

.esbuild/build.ts

@@ -2,13 +2,13 @@ import { build } from 'esbuild';
 import { mkdir, writeFile } from 'node:fs/promises';
 import { packageOptions } from '../.build/common.js';
 import { generateLangium } from '../.build/generateLangium.js';
-import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js';
+import { type MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js';
 
 const shouldVisualize = process.argv.includes('--visualize');
 
 const buildPackage = async (entryName: keyof typeof packageOptions) => {
-  const commonOptions = { ...defaultOptions, entryName } as const;
-  const buildConfigs = [
+  const commonOptions: MermaidBuildOptions = { ...defaultOptions, entryName } as const;
+  const buildConfigs: MermaidBuildOptions[] = [
     // package.mjs
     { ...commonOptions },
     // package.min.mjs

.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/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}`,

.eslintrc.cjs

@@ -25,7 +25,7 @@ module.exports = {
     'plugin:json/recommended',
     'plugin:markdown/recommended-legacy',
     'plugin:@cspell/recommended',
-    'prettier',
+    'biome',
   ],
   plugins: [
     '@typescript-eslint',

.github/lychee.toml

@@ -41,7 +41,10 @@ exclude = [
 "https://bundlephobia.com",
 
 # Chrome webstore migration issue. Temporary
-"https://chromewebstore.google.com"
+"https://chromewebstore.google.com",
+
+# Drupal 403
+"https://(www.)?drupal.org"
 ]
 
 # Exclude all private IPs from checking.

.github/workflows/e2e.yml

@@ -1,9 +1,3 @@
-# We use github cache to save snapshots between runs.
-# For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
-# If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
-# These are then downloaded before running the E2E, providing the reference snapshots.
-# If there are any errors, the diff image is uploaded to artifacts, and the user is notified.
-
 name: E2E
 
 on:
@@ -72,16 +66,6 @@ jobs:
           mkdir -p cypress/snapshots/stats/base
           mv stats cypress/snapshots/stats/base
 
-      - name: Cypress run
-        uses: cypress-io/github-action@v6
-        id: cypress-snapshot-gen
-        if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        with:
-          install: false
-          start: pnpm run dev
-          wait-on: 'http://localhost:9000'
-          browser: chrome
-
   e2e:
     runs-on: ubuntu-latest
     container:
@@ -146,6 +130,10 @@ jobs:
           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_TOTAL: 4
+          ARGOS_PARALLEL_INDEX: ${{ matrix.containers }}
 
       - name: Upload Coverage to Codecov
         uses: codecov/codecov-action@v4
@@ -158,55 +146,3 @@ jobs:
           fail_ci_if_error: false
           verbose: true
           token: 6845cc80-77ee-4e17-85a1-026cd95e0766
-
-      # We upload the artifacts into numbered archives to prevent overwriting
-      - name: Upload Artifacts
-        uses: actions/upload-artifact@v4
-        if: ${{ always() }}
-        with:
-          name: snapshots-${{ matrix.containers }}
-          retention-days: 1
-          path: ./cypress/snapshots
-
-  combineArtifacts:
-    needs: e2e
-    runs-on: ubuntu-latest
-    if: ${{ always() }}
-    steps:
-      # Download all snapshot artifacts and merge them into a single folder
-      - name: Download All Artifacts
-        uses: actions/download-artifact@v4
-        with:
-          path: snapshots
-          pattern: snapshots-*
-          merge-multiple: true
-
-      # For successful push events, we save the snapshots cache
-      - name: Save snapshots cache
-        id: cache-upload
-        if: ${{ github.event_name == 'push' && needs.e2e.result != 'failure' }}
-        uses: actions/cache/save@v4
-        with:
-          path: ./snapshots
-          key: ${{ runner.os }}-snapshots-${{ github.event.after }}
-
-      - name: Flatten images to a folder
-        if: ${{ needs.e2e.result == 'failure'  }}
-        run: |
-          mkdir errors
-          cd snapshots
-          find . -mindepth 2 -type d -name "*__diff_output__*" -exec sh -c 'mv "$0"/*.png ../errors/' {} \;
-
-      - name: Upload Error snapshots
-        if: ${{ needs.e2e.result == 'failure' }}
-        uses: actions/upload-artifact@v4
-        id: upload-artifacts
-        with:
-          name: error-snapshots
-          retention-days: 10
-          path: errors/
-
-      - name: Notify Users
-        if: ${{ needs.e2e.result == 'failure' }}
-        run: |
-          echo "::error title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"

.github/workflows/lint.yml

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

.gitignore

@@ -35,7 +35,7 @@ cypress/snapshots/
 .tsbuildinfo
 tsconfig.tsbuildinfo
 
-knsv*.html
+#knsv*.html
 local*.html
 stats/
 
@@ -48,6 +48,7 @@ demos/dev/**
 !/demos/dev/example.html
 !/demos/dev/reload.js
 tsx-0/**
+vite.config.ts.timestamp-*
 
 # autogenereated by langium-cli
-generated/
+generated/

.lintstagedrc.mjs

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

.prettierignore

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

.prettierrc.json

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

.vite/build.ts

@@ -1,4 +1,4 @@
-import { build, InlineConfig, type PluginOption } from 'vite';
+import { build, type InlineConfig, type PluginOption } from 'vite';
 import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
@@ -48,7 +48,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
   const external: (string | RegExp)[] = ['require', 'fs', 'path'];
   console.log(entryName, packageOptions[entryName]);
   const { name, file, packageName } = packageOptions[entryName];
-  let output: OutputOptions = [
+  const output: OutputOptions = [
     {
       name,
       format: 'esm',

.vite/jsonSchemaPlugin.ts

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

FUNDING.json

@@ -0,0 +1,7 @@
+{
+  "drips": {
+    "ethereum": {
+      "ownedBy": "0x0831DDFe60d009d9448CC976157b539089aB821E"
+    }
+  }
+}

README.md

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

biome.json

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

cypress.config.ts

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

cypress/helpers/util.ts

@@ -55,6 +55,7 @@ export const imgSnapshotTest = (
   const options: CypressMermaidConfig = {
     ..._options,
     fontFamily: _options.fontFamily || 'courier',
+    // @ts-ignore TODO: Fix type of fontSize
     fontSize: _options.fontSize || '16px',
     sequence: {
       ...(_options.sequence || {}),
@@ -94,9 +95,23 @@ export const openURLAndVerifyRendering = (
   options: CypressMermaidConfig,
   validation?: any
 ): void => {
-  const useAppli: boolean = Cypress.env('useAppli');
   const name: string = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
+  cy.visit(url);
+  // cy.window().should('have.property', 'rendered', true);
+  cy.get('svg').should('be.visible');
+
+  if (validation) {
+    cy.get('svg').should(validation);
+  }
+
+  verifyScreenshot(name);
+};
+
+export const verifyScreenshot = (name: string): void => {
+  const useAppli: boolean = Cypress.env('useAppli');
+  const useArgos: boolean = Cypress.env('useArgos');
+
   if (useAppli) {
     cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`);
     cy.eyesOpen({
@@ -105,21 +120,12 @@ export const openURLAndVerifyRendering = (
       batchName: Cypress.spec.name,
       batchId: batchId + Cypress.spec.name,
     });
-  }
-
-  cy.visit(url);
-  cy.window().should('have.property', 'rendered', true);
-  cy.get('svg').should('be.visible');
-
-  if (validation) {
-    cy.get('svg').should(validation);
-  }
-
-  if (useAppli) {
     cy.log(`Check eyes ${Cypress.spec.name}`);
     cy.eyesCheckWindow('Click!');
     cy.log(`Closing eyes ${Cypress.spec.name}`);
     cy.eyesClose();
+  } else if (useArgos) {
+    cy.argosScreenshot(name);
   } else {
     cy.matchImageSnapshot(name);
   }

cypress/integration/other/configuration.spec.js

@@ -1,4 +1,4 @@
-import { renderGraph } from '../../helpers/util.ts';
+import { renderGraph, verifyScreenshot } from '../../helpers/util.ts';
 describe('Configuration', () => {
   describe('arrowMarkerAbsolute', () => {
     it('should handle default value false of arrowMarkerAbsolute', () => {
@@ -119,8 +119,7 @@ describe('Configuration', () => {
       const url = 'http://localhost:9000/regression/issue-1874.html';
       cy.visit(url);
       cy.window().should('have.property', 'rendered', true);
-      cy.get('svg').should('be.visible');
-      cy.matchImageSnapshot(
+      verifyScreenshot(
         'configuration.spec-should-not-taint-initial-configuration-when-using-multiple-directives'
       );
     });
@@ -145,7 +144,7 @@ describe('Configuration', () => {
           // none of the diagrams should be error diagrams
           expect($svg).to.not.contain('Syntax error');
         });
-      cy.matchImageSnapshot(
+      verifyScreenshot(
         'configuration.spec-should-not-render-error-diagram-if-suppressErrorRendering-is-set'
       );
     });
@@ -162,7 +161,7 @@ describe('Configuration', () => {
           // some of the diagrams should be error diagrams
           expect($svg).to.contain('Syntax error');
         });
-      cy.matchImageSnapshot(
+      verifyScreenshot(
         'configuration.spec-should-render-error-diagram-if-suppressErrorRendering-is-not-set'
       );
     });

cypress/integration/other/xss.spec.js

@@ -10,7 +10,6 @@ describe('XSS', () => {
     cy.wait(1000).then(() => {
       cy.get('.mermaid').should('exist');
     });
-    cy.get('svg');
   });
 
   it('should not allow tags in the css', () => {
@@ -137,4 +136,9 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
+  it('should sanitize backticks block diagram labels properly', () => {
+    cy.visit('http://localhost:9000/xss25.html');
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
 });

cypress/integration/rendering/c4.spec.js

@@ -30,7 +30,6 @@ describe('C4 diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render a simple C4Container diagram', () => {
     imgSnapshotTest(
@@ -50,7 +49,6 @@ describe('C4 diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render a simple C4Component diagram', () => {
     imgSnapshotTest(
@@ -69,7 +67,6 @@ describe('C4 diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render a simple C4Dynamic diagram', () => {
     imgSnapshotTest(
@@ -93,7 +90,6 @@ describe('C4 diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render a simple C4Deployment diagram', () => {
     imgSnapshotTest(
@@ -117,6 +113,5 @@ describe('C4 diagram', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 });

cypress/integration/rendering/classDiagram.spec.js

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

cypress/integration/rendering/erDiagram.spec.js

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

cypress/integration/rendering/quadrantChart.spec.js

@@ -8,7 +8,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render a complete quadrant chart', () => {
     imgSnapshotTest(
@@ -30,7 +29,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render without points', () => {
     imgSnapshotTest(
@@ -46,7 +44,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should able to render y-axix on right side', () => {
     imgSnapshotTest(
@@ -63,7 +60,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should able to render x-axix on bottom', () => {
     imgSnapshotTest(
@@ -80,7 +76,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should able to render x-axix on bottom and y-axis on right', () => {
     imgSnapshotTest(
@@ -97,7 +92,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render without title', () => {
     imgSnapshotTest(
@@ -112,7 +106,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should use all the config', () => {
     imgSnapshotTest(
@@ -135,7 +128,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should use all the theme variable', () => {
     imgSnapshotTest(
@@ -158,7 +150,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render x-axis labels in the center, if x-axis has two labels', () => {
     imgSnapshotTest(
@@ -180,7 +171,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render y-axis labels in the center, if y-axis has two labels', () => {
     imgSnapshotTest(
@@ -202,7 +192,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
   it('should render both axes labels on the left and bottom, if both axes have only one label', () => {
     imgSnapshotTest(
@@ -224,7 +213,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('it should render data points with styles', () => {
@@ -249,7 +237,6 @@ describe('Quadrant Chart', () => {
       `,
       {}
     );
-    cy.get('svg');
   });
 
   it('it should render data points with styles + classes', () => {

cypress/integration/rendering/requirement.spec.js

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

cypress/integration/rendering/sequencediagram.spec.js

@@ -1,4 +1,4 @@
-/// <reference types="Cypress" />
+// <reference types="Cypress" />
 
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
@@ -68,6 +68,19 @@ context('Sequence diagram', () => {
       { sequence: { actorFontFamily: 'courier' } }
     );
   });
+  it('should render bidirectional arrows', () => {
+    imgSnapshotTest(
+      `
+      sequenceDiagram
+      Alice<<->>John: Hello John, how are you?
+      Alice<<-->>John: Hi Alice, I can hear you!
+      John<<->>Alice: This also works the other way
+      John<<-->>Alice: Yes
+      Alice->John: Test
+      John->>Alice: Still works
+      `
+    );
+  });
   it('should handle different line breaks', () => {
     imgSnapshotTest(
       `
@@ -464,6 +477,18 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should render notes over actors and participant', () => {
+      imgSnapshotTest(
+        `
+        sequenceDiagram
+        actor Alice
+        participant Charlie
+        note over Alice: some note
+        note over Charlie: other note
+      `,
+        {}
+      );
+    });
     it('should render long messages from an actor to the left to one to the right', () => {
       imgSnapshotTest(
         `

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

@@ -8,7 +8,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 1, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a simple state diagrams', () => {
     imgSnapshotTest(
@@ -20,7 +19,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a long descriptions instead of id when available', () => {
     imgSnapshotTest(
@@ -32,7 +30,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a long descriptions with additional descriptions', () => {
     imgSnapshotTest(
@@ -44,7 +41,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a single state with short descriptions', () => {
     imgSnapshotTest(
@@ -55,7 +51,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a transition descriptions with new lines', () => {
     imgSnapshotTest(
@@ -69,7 +64,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a state with a note', () => {
     imgSnapshotTest(
@@ -83,7 +77,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a state with on the left side when so specified', () => {
     imgSnapshotTest(
@@ -97,7 +90,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a state with a note together with another state', () => {
     imgSnapshotTest(
@@ -113,7 +105,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a note with multiple lines in it', () => {
     imgSnapshotTest(
@@ -156,7 +147,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a simple state diagrams 2', () => {
     imgSnapshotTest(
@@ -169,7 +159,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a simple state diagrams with labels', () => {
     imgSnapshotTest(
@@ -185,7 +174,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render state descriptions', () => {
     imgSnapshotTest(
@@ -198,7 +186,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render composite states', () => {
     imgSnapshotTest(
@@ -217,7 +204,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render multiple composite states', () => {
     imgSnapshotTest(
@@ -287,7 +273,6 @@ describe('State diagram', () => {
     `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render concurrency states', () => {
     imgSnapshotTest(
@@ -311,7 +296,6 @@ describe('State diagram', () => {
     `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('v2 should render a state with states in it', () => {
     imgSnapshotTest(
@@ -558,6 +542,29 @@ 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('1433: should render a simple state diagram with a title', () => {
     imgSnapshotTest(

cypress/integration/rendering/stateDiagram.spec.js

@@ -10,7 +10,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a long descriptions instead of id when available', () => {
     imgSnapshotTest(
@@ -22,7 +21,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a long descriptions with additional descriptions', () => {
     imgSnapshotTest(
@@ -34,7 +32,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a single state with short descriptions', () => {
     imgSnapshotTest(
@@ -45,7 +42,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a transition descriptions with new lines', () => {
     imgSnapshotTest(
@@ -59,7 +55,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a state with a note', () => {
     imgSnapshotTest(
@@ -73,7 +68,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a state with on the left side when so specified', () => {
     imgSnapshotTest(
@@ -87,7 +81,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a state with a note together with another state', () => {
     imgSnapshotTest(
@@ -103,7 +96,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a note with multiple lines in it', () => {
     imgSnapshotTest(
@@ -146,7 +138,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a simple state diagrams 2', () => {
     imgSnapshotTest(
@@ -159,7 +150,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a simple state diagrams with labels', () => {
     imgSnapshotTest(
@@ -175,7 +165,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render state descriptions', () => {
     imgSnapshotTest(
@@ -188,7 +177,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render composite states', () => {
     imgSnapshotTest(
@@ -207,7 +195,6 @@ describe('State diagram', () => {
       `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render multiple composit states', () => {
     imgSnapshotTest(
@@ -277,7 +264,6 @@ describe('State diagram', () => {
     `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render concurrency states', () => {
     imgSnapshotTest(
@@ -301,7 +287,6 @@ describe('State diagram', () => {
     `,
       { logLevel: 0, fontFamily: 'courier' }
     );
-    cy.get('svg');
   });
   it('should render a state with states in it', () => {
     imgSnapshotTest(

cypress/integration/rendering/theme.spec.js

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

cypress/integration/rendering/xyChart.spec.js

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

cypress/platform/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,33 +14,45 @@
       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;
@@ -58,545 +70,82 @@
         font-size: 72px;
       }
       /* 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
-
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-  block:e:4
-    columns 2
-      f
-      g
-      h
-  end
-
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-  columns 4
-  a b c d
-  block:e:4
-    columns 2
-      f
-      g
-      h
-  end
-  i:4
-
-    </pre>
-    <pre id="diagram" class="mermaid2">
-flowchart LR
-  X-- "y" -->z
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-columns 5
-   A space B
-   A --x B
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-columns 3
-  a["A wide one"] b:2 c:2 d
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  block:e
-      f
-  end
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  columns 3
-  a:3
-  block:e:3
-      f
-  end
-  g
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  columns 3
-  a:3
-  block:e:3
-      f
-      g
-  end
-  h
-  i
-  j
-
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-columns 3
-  a b:2
-  block:e:3
-      f
-  end
-  g h i
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-columns 3
-  a b c
-  e:3
-  f g h
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-columns 1
-  db(("DB"))
-  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
-  block:ID
-    A
-    B["A wide one in the middle"]
-    C
-  end
-  space
-  D
-  ID --> D
-  C --> D
-  style B fill:#f9F,stroke:#333,stroke-width:4px
-    </pre>
-    <pre id="diagram" class="mermaid">
-block-beta
-  columns 5
-  A1:3
-  A2:1
-  A3
-  B1 B2 B3:3
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-  block
-    D
-    E
-  end
-  db("This is the text in the box")
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-
-      block
-        D
-      end
-      A["A: I am a wide one"]
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-    A["square"]
-    B("rounded")
-    C(("circle"))
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-    A>"rect_left_inv_arrow"]
-    B{"diamond"}
-    C{{"hexagon"}}
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-    A(["stadium"])
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-    %% A[["subroutine"]]
-    %% B[("cylinder")]
-    C>"surprise"]
-    </pre>
-    <pre id="diagram" class="mermaid2">
-block-beta
-    A[/"lean right"/]
-    B[\"lean left"\]
-    C[/"trapezoid"\]
-    D[\"trapezoid"/]
-    </pre>
-
-    <pre id="diagram" class="mermaid2">
 flowchart
-      B
-      style B fill:#f9F,stroke:#333,stroke-width:4px
-    </pre>
-
-    <pre id="diagram" class="mermaid2">
-      flowchart LR
-      a1 -- apa --> b1
-    </pre>
-
-    <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
+   a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
+        a_a --> c --> d_d --> c_c
+        classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
+        class a_a apa;
+        click a_a "http://www.aftonbladet.se" "bookmark"
+        click c_c callback "new tooltip"
+      </pre
     >
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram2" class="mermaid">
 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?"
+    id1(Start)-->id2(Stop)
+    style id1 fill:#f9f,stroke:#333,stroke-width:4px
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+
+      
     </pre>
-    <pre id="diagram" class="mermaid2">
-    stateDiagram-v2
-    State1: The state with a note with minus - and plus + in it
-    note left of State1
-      Important information! You can write
-      notes with . and  in them.
-    end note    </pre
-    >
-    <pre id="diagram" class="mermaid2">
-mindmap
-root
-  Child3(A node with an icon and with a long text that wraps to keep the node size in check)
-</pre
-    >
-    <pre id="diagram" class="mermaid2">
-      %%{init: {"theme": "forest"} }%%
-mindmap
-    id1[**Start2**<br/>end]
-      id2[**Start2**<br />end]
-      %% Another comment
-      id3[**Start2**<br>end] %% Comment
-      id4[**Start2**<br >end<br    >the very end]
-    </pre>
-    <pre id="diagram" class="mermaid2">
-mindmap
-    id1["`**Start2**
-    second line 😎 with long text that is wrapping to the next line`"]
-      id2["`Child **with bold** text`"]
-      id3["`Children of which some
-      is using *italic type of* text`"]
-      id4[Child]
-      id5["`Child
-      Row
-      and another
-      `"]
-    </pre>
-    <pre id="diagram" class="mermaid2">
-mindmap
-    id1("`**Root**`"]
-      id2["`A formatted text... with **bold** and *italics*`"]
-      id3[Regular labels works as usual]
-      id4["`Emojis and unicode works too: 🤓
-      शान्तिः سلام  和平 `"]
 
-    </pre>
-    <pre id="diagram" class="mermaid2">
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-flowchart TB
-  %% I could not figure out how to use double quotes in labels in Mermaid
-  subgraph ibm[IBM Espresso CPU]
-    core0[IBM PowerPC Broadway Core 0]
-    core1[IBM PowerPC Broadway Core 1]
-    core2[IBM PowerPC Broadway Core 2]
-
-    rom[16 KB ROM]
-
-    core0 --- core2
-
-    rom --> core2
-  end
-
-  subgraph amd["`**AMD** Latte GPU`"]
-    mem[Memory & I/O Bridge]
-    dram[DRAM Controller]
-    edram[32 MB EDRAM MEM1]
-    rom[512 B SEEPROM]
-
-    sata[SATA IF]
-    exi[EXI]
-
-    subgraph gx[GX]
-      sram[3 MB 1T-SRAM]
-    end
-
-    radeon[AMD Radeon R7xx GX2]
-
-    mem --- gx
-    mem --- radeon
-
-    rom --- mem
-
-    mem --- sata
-    mem --- exi
-
-    dram --- sata
-    dram --- exi
-  end
-
-  ddr3[2 GB DDR3 RAM MEM2]
-
-  mem --- ddr3
-  dram --- ddr3
-  edram --- ddr3
-
-  core1 --- mem
-
-  exi --- rtc
-  rtc{{rtc}}
-</pre
-    >
-    <pre id="diagram" class="mermaid2">
-%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
-flowchart TB
-  %% I could not figure out how to use double quotes in labels in Mermaid
-  subgraph ibm[IBM Espresso CPU]
-    core0[IBM PowerPC Broadway Core 0]
-    core1[IBM PowerPC Broadway Core 1]
-    core2[IBM PowerPC Broadway Core 2]
-
-    rom[16 KB ROM]
-
-    core0 --- core2
-
-    rom --> core2
-  end
-
-  subgraph amd["`**AMD** Latte GPU`"]
-    mem[Memory & I/O Bridge]
-    dram[DRAM Controller]
-    edram[32 MB EDRAM MEM1]
-    rom[512 B SEEPROM]
-
-    sata[SATA IF]
-    exi[EXI]
-
-    subgraph gx[GX]
-      sram[3 MB 1T-SRAM]
-    end
-
-    radeon[AMD Radeon R7xx GX2]
-
-    mem --- gx
-    mem --- radeon
-
-    rom --- mem
-
-    mem --- sata
-    mem --- exi
-
-    dram --- sata
-    dram --- exi
-  end
-
-  ddr3[2 GB DDR3 RAM MEM2]
-
-  mem --- ddr3
-  dram --- ddr3
-  edram --- ddr3
-
-  core1 --- mem
-
-  exi --- rtc
-  rtc{{rtc}}
-</pre
-    >
-
-    <br />
-    <pre id="diagram" class="mermaid2">
-flowchart TB
-  %% I could not figure out how to use double quotes in labels in Mermaid
-  subgraph ibm[IBM Espresso CPU]
-    core0[IBM PowerPC Broadway Core 0]
-    core1[IBM PowerPC Broadway Core 1]
-    core2[IBM PowerPC Broadway Core 2]
-
-    rom[16 KB ROM]
-
-    core0 --- core2
-
-    rom --> core2
-  end
-
-  subgraph amd[AMD Latte GPU]
-    mem[Memory & I/O Bridge]
-    dram[DRAM Controller]
-    edram[32 MB EDRAM MEM1]
-    rom[512 B SEEPROM]
-
-    sata[SATA IF]
-    exi[EXI]
-
-    subgraph gx[GX]
-      sram[3 MB 1T-SRAM]
-    end
-
-    radeon[AMD Radeon R7xx GX2]
-
-    mem --- gx
-    mem --- radeon
-
-    rom --- mem
-
-    mem --- sata
-    mem --- exi
-
-    dram --- sata
-    dram --- exi
-  end
-
-  ddr3[2 GB DDR3 RAM MEM2]
-
-  mem --- ddr3
-  dram --- ddr3
-  edram --- ddr3
-
-  core1 --- mem
-
-  exi --- rtc
-  rtc{{rtc}}
-</pre
-    >
-    <br />
-    &nbsp;
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram3" class="mermaid">
       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
+    A:::foo & B:::bar --> C:::foobar
+    classDef foo stroke:#f00
+    classDef bar stroke:#0f0
+    classDef ash color:red
+    class C ash
+    style C stroke:#00f, fill:black
 
-      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 id="diagram4" class="mermaid">
+      stateDiagram
+    A:::foo 
+    B:::bar --> C:::foobar
+    classDef foo stroke:#f00
+    classDef bar stroke:#0f0
+    style C stroke:#00f, fill:black, color:white
+
+    </pre>
 
     <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,
+        // 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: 0,
+        securityLevel: 'loose',
       });
       function callback() {
         alert('It worked');
@@ -605,10 +154,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,5 +1,5 @@
 import mermaid from './mermaid.esm.mjs';
-import flowchartELK from './mermaid-flowchart-elk.esm.mjs';
+// import flowchartELK from './mermaid-flowchart-elk.esm.mjs';
 import externalExample from './mermaid-example-diagram.esm.mjs';
 import zenUml from './mermaid-zenuml.esm.mjs';
 
@@ -9,6 +9,7 @@ function b64ToUtf8(str) {
 
 // Adds a rendered flag to window when rendering is done, so cypress can wait for it.
 function markRendered() {
+  console.log('Done rendering');
   if (window.Cypress) {
     window.rendered = true;
   }
@@ -46,7 +47,8 @@ const contentLoaded = async function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    await mermaid.registerExternalDiagrams([externalExample, zenUml, flowchartELK]);
+    // await mermaid.registerExternalDiagrams([externalExample, zenUml, flowchartELK]);
+    await mermaid.registerExternalDiagrams([externalExample, zenUml]);
     mermaid.initialize(graphObj.mermaid);
     await mermaid.run();
   }

cypress/platform/xss25.html

@@ -0,0 +1,108 @@
+<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://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; */
+      }
+      .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;
+      }
+    </style>
+    <script>
+      function xssAttack() {
+        const div = document.createElement('div');
+        div.id = 'the-malware';
+        div.className = 'malware';
+        div.innerHTML = 'XSS Succeeded';
+        document.getElementsByTagName('body')[0].appendChild(div);
+        throw new Error('XSS Succeeded');
+      }
+    </script>
+  </head>
+  <body>
+    <div>Security check</div>
+    <div class="flex">
+      <div id="diagram" class="mermaid"></div>
+      <div id="res" class=""></div>
+    </div>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'forest',
+        arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        state: {
+          defaultRenderer: 'dagre-wrapper',
+        },
+        flowchart: {
+          // defaultRenderer: 'dagre-wrapper',
+          nodeSpacing: 10,
+          curve: 'cardinal',
+          htmlLabels: true,
+        },
+        htmlLabels: false,
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorFontFamily: 'courier', actorMargin: 50, showSequenceNumbers: false },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        // fontFamily: '"times", sans-serif',
+        // fontFamily: 'courier',
+        fontSize: 18,
+        curve: 'basis',
+        securityLevel: 'strict',
+        startOnLoad: false,
+        secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
+        // themeVariables: {relationLabelColor: 'red'}
+      });
+      function callback() {
+        alert('It worked');
+      }
+
+      let diagram = 'block-beta\n';
+      diagram += '`A-- "X<img src=x on';
+      diagram += 'error=xssAttack()>" -->B';
+
+      console.log(diagram);
+      // document.querySelector('#diagram').innerHTML = diagram;
+      const { svg } = await mermaid.render('diagram', diagram);
+      document.querySelector('#res').innerHTML = svg;
+    </script>
+  </body>
+</html>

cypress/support/e2e.js

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

cypress/tsconfig.json

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

demos/sequence.html

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

docker-compose.yml

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

docs/community/contributing.md

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

docs/config/math.md

@@ -84,3 +84,13 @@ Example with legacy mode enabled (the latest version of KaTeX's stylesheet can b
   </body>
 </html>
 ```
+
+## Handling Rendering Differences
+
+Due to differences between default fonts across operating systems and browser's MathML implementations, inconsistent results can be seen across platforms. If having consistent results are important, or the most optimal rendered results are desired, `forceLegacyMathML` can be enabled in the config.
+
+This option will always use KaTeX's stylesheet instead of only when MathML is not supported (as with `legacyMathML`). Note that only `forceLegacyMathML` needs to be set.
+
+If including KaTeX's stylesheet is not a concern, enabling this option is recommended to avoid scenarios where no MathML implementation within a browser provides the desired output (as seen below).
+
+![Image showing differences between Browsers](img/mathMLDifferences.png)

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

@@ -19,4 +19,4 @@ The `parseError` function will not be called.
 
 #### Defined in
 
-[mermaidAPI.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L64)
+[mermaidAPI.ts:65](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L65)

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

@@ -18,4 +18,4 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
 
 #### Defined in
 
-[mermaidAPI.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L71)
+[mermaidAPI.ts:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L72)

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

@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 #### Defined in
 
-[mermaidAPI.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L94)
+[mermaidAPI.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L95)
 
 ---
 
@@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
 
 #### Defined in
 
-[mermaidAPI.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L84)
+[mermaidAPI.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L85)
 
 ---
 
@@ -63,4 +63,4 @@ The svg code for the rendered graph.
 
 #### Defined in
 
-[mermaidAPI.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L80)
+[mermaidAPI.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L81)

docs/config/setup/modules/config.md

@@ -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)
+[config.ts:221](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L221)
 
 ---
 

docs/config/setup/modules/mermaidAPI.md

@@ -26,7 +26,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 #### Defined in
 
-[mermaidAPI.ts:74](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L74)
+[mermaidAPI.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L75)
 
 ## Variables
 
@@ -98,7 +98,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:635](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L635)
+[mermaidAPI.ts:634](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L634)
 
 ## Functions
 
@@ -129,7 +129,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:277](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L277)
+[mermaidAPI.ts:276](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L276)
 
 ---
 
@@ -167,10 +167,10 @@ Create the user styles
 
 #### Parameters
 
-| Name        | Type                                                                | Description                                                                                                               |
-| :---------- | :------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------ |
-| `config`    | `MermaidConfig`                                                     | configuration that has style and theme settings to use                                                                    |
-| `classDefs` | `undefined` \| `null` \| `Record`<`string`, `DiagramStyleClassDef`> | the classDefs in the diagram text. Might be null if none were defined. Usually is the result of a call to getClasses(...) |
+| Name        | Type                                                             | Description                                                                                                               |
+| :---------- | :--------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------ |
+| `config`    | `MermaidConfig`                                                  | configuration that has style and theme settings to use                                                                    |
+| `classDefs` | `undefined` \| `null` \| `Map`<`string`, `DiagramStyleClassDef`> | the classDefs in the diagram text. Might be null if none were defined. Usually is the result of a call to getClasses(...) |
 
 #### Returns
 
@@ -180,7 +180,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L153)
+[mermaidAPI.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L154)
 
 ---
 
@@ -190,12 +190,12 @@ the string with all the user styles
 
 #### Parameters
 
-| Name        | Type                                                      |
-| :---------- | :-------------------------------------------------------- |
-| `config`    | `MermaidConfig`                                           |
-| `graphType` | `string`                                                  |
-| `classDefs` | `undefined` \| `Record`<`string`, `DiagramStyleClassDef`> |
-| `svgId`     | `string`                                                  |
+| Name        | Type                                                   |
+| :---------- | :----------------------------------------------------- |
+| `config`    | `MermaidConfig`                                        |
+| `graphType` | `string`                                               |
+| `classDefs` | `undefined` \| `Map`<`string`, `DiagramStyleClassDef`> |
+| `svgId`     | `string`                                               |
 
 #### Returns
 
@@ -230,7 +230,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L138)
+[mermaidAPI.ts:139](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L139)
 
 ---
 
@@ -252,11 +252,10 @@ Put the svgCode into an iFrame. Return the iFrame code
 `string`
 
 - the code with the iFrame that now contains the svgCode
-  TODO replace btoa(). Replace with buf.toString('base64')?
 
 #### Defined in
 
-[mermaidAPI.ts:254](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L254)
+[mermaidAPI.ts:253](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L253)
 
 ---
 
@@ -281,4 +280,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:327](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L327)
+[mermaidAPI.ts:326](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L326)

docs/ecosystem/integrations-community.md

@@ -240,6 +240,8 @@ Communication tools and platforms
 
 ### Other
 
+- [Astro](https://astro.build/)
+  - [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/)
 - [Bisheng](https://www.npmjs.com/package/bisheng)
   - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
 - [Blazorade Mermaid: Render Mermaid diagrams in Blazor applications](https://github.com/Blazorade/Blazorade-Mermaid/wiki)
@@ -249,6 +251,7 @@ Communication tools and platforms
 - [Jekyll](https://jekyllrb.com/)
   - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
   - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
+- [MarkChart: Preview Mermaid diagrams on macOS](https://markchart.app/)
 - [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
 - [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io) ✅

docs/ecosystem/mermaid-chart.md

@@ -6,6 +6,10 @@
 
 # Mermaid Chart
 
+The Future of Diagramming & Visual Collaboration
+
+Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
+
 <br />
 
 <a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
@@ -18,22 +22,26 @@
 
 - **Editor** - A web based editor for creating and editing Mermaid diagrams.
 
-- **Presentation** - A presentation mode for viewing Mermaid diagrams in a slideshow format.
+- **Visual Editor** - The Visual Editor enables users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
 
-- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro plan).
+- **AI Chat** - Use our embedded AI Chat to generate diagrams from natural language descriptions.
 
 - **Plugins** - A plugin system for extending the functionality of Mermaid.
 
-  Plugins are available for:
+  Official Mermaid Chart plugins:
 
-  - [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt)
+  - [Mermaid Chart GPT](https://chat.openai.com/g/g-1IRFKwq4G-mermaid-chart)
+  - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)
   - [JetBrains IDE](https://plugins.jetbrains.com/plugin/23043-mermaid-chart)
   - [Microsoft PowerPoint and Word](https://appsource.microsoft.com/en-us/product/office/WA200006214?tab=Overview)
-  - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)
 
-- **AI diagramming** - A feature for generating Mermaid diagrams from text using AI (Pro plan).
+  Visit our [Plugins](https://www.mermaidchart.com/plugins) page for more information.
 
-- **More** - To learn more, visit our [Product](https://www.mermaidchart.com/product) page.
+- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro and Enterprise plans).
+
+- **Comments** - Enhance collaboration by adding comments to diagrams.
+
+- **Presentations** - A presentation mode for viewing Mermaid diagrams in a slideshow format.
 
 ## Plans
 
@@ -43,11 +51,9 @@
 
 - **Enterprise** - A paid plan for enterprise use that includes all Pro features, and more.
 
-## Access
+To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
 
-Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
-
-Mermaid Chart is currently offering a 14-day free trial of our newly-launched Pro tier. To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
+Mermaid Chart is currently offering a 14-day free trial on our Pro and Enterprise tiers. Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
 
 ## Mermaid JS contributions
 

docs/intro/getting-started.md

@@ -157,7 +157,7 @@ For a list of Mermaid Plugins and Integrations, visit the [Integrations page](..
 
 Mermaid Chart plugins are available for:
 
-- [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt)
+- [ChatGPT](https://docs.mermaidchart.com/plugins/mermaid-chart-gpt)
 - [JetBrains IDE](https://docs.mermaidchart.com/plugins/jetbrains-ide)
 - [Microsoft PowerPoint](https://docs.mermaidchart.com/plugins/microsoft-powerpoint)
 - [Microsoft Word](https://docs.mermaidchart.com/plugins/microsoft-word)

docs/news/blog.md

@@ -6,6 +6,18 @@
 
 # Blog
 
+## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)
+
+7 May 2024 · 5 mins
+
+How to Choose the Right Documentation Software. Reliable and efficient documentation software is crucial in the fast-paced world of software development.
+
+## [AI in software diagramming: What trends will define the future?](https://www.mermaidchart.com/blog/posts/ai-in-software-diagramming/)
+
+24 April 2024 · 5 mins
+
+Artificial intelligence (AI) tools are changing the way developers work.
+
 ## [Mermaid Chart Unveils Visual Editor for Sequence Diagrams](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams/)
 
 8 April 2024 · 5 mins

docs/syntax/flowchart.md

@@ -881,7 +881,7 @@ Examples of tooltip usage below:
 
 ```html
 <script>
-  const callback = function () {
+  window.callback = function () {
     alert('A callback was triggered');
   };
 </script>
@@ -913,7 +913,7 @@ flowchart LR
 
 > **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
 
-?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/Ogglas/2o73vdez/7).
+?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/yk4h7qou/2/).
 
 Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
 
@@ -957,7 +957,7 @@ Beginner's tip—a full example using interactive links in a html context:
   </pre>
 
   <script>
-    const callback = function () {
+    window.callback = function () {
       alert('A callback was triggered');
     };
     const config = {

docs/syntax/sequenceDiagram.md

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

package.json

@@ -4,7 +4,7 @@
   "version": "10.2.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@8.15.7",
+  "packageManager": "pnpm@9.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a",
   "keywords": [
     "diagram",
     "markdown",
@@ -19,14 +19,15 @@
     "build:esbuild": "pnpm run -r clean && tsx .esbuild/build.ts",
     "build:mermaid": "pnpm build:esbuild --mermaid",
     "build:viz": "pnpm build:esbuild --visualize",
-    "build:types": "tsx .build/types.ts",
+    "build:types": "pnpm --filter mermaid types:build-config && tsx .build/types.ts",
     "build:types:watch": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly --watch",
     "dev": "tsx .esbuild/server.ts",
     "dev:vite": "tsx .vite/server.ts",
     "dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev:vite",
     "release": "pnpm build",
-    "lint": "cross-env NODE_OPTIONS=--max_old_space_size=8192 eslint --cache --cache-strategy content . && pnpm lint:jison && prettier --cache --check .",
-    "lint:fix": "cross-env NODE_OPTIONS=--max_old_space_size=8192 eslint --cache --cache-strategy content --fix . && prettier --write . && tsx scripts/fixCSpell.ts",
+    "lint": "pnpm biome check && pnpm lint:jison",
+    "lint:fix": "pnpm biome check --write",
+    "lint:ci": "pnpm lint && cross-env NODE_OPTIONS=--max_old_space_size=48192 eslint --cache --cache-strategy content .",
     "lint:jison": "tsx ./scripts/jison/lint.mts",
     "contributors": "tsx scripts/updateContributors.ts",
     "cypress": "cypress run",
@@ -51,17 +52,13 @@
   "author": "Knut Sveidqvist",
   "license": "MIT",
   "standard": {
-    "ignore": [
-      "**/parser/*.js",
-      "dist/**/*.js",
-      "cypress/**/*.js"
-    ],
-    "globals": [
-      "page"
-    ]
+    "ignore": ["**/parser/*.js", "dist/**/*.js", "cypress/**/*.js"],
+    "globals": ["page"]
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.42.3",
+    "@argos-ci/cypress": "^2.0.5",
+    "@biomejs/biome": "1.8.2",
     "@cspell/eslint-plugin": "^8.6.0",
     "@cypress/code-coverage": "^3.12.30",
     "@rollup/plugin-typescript": "^11.1.6",
@@ -85,11 +82,11 @@
     "cors": "^2.8.5",
     "cross-env": "^7.0.3",
     "cspell": "^8.6.0",
-    "cypress": "^13.7.1",
+    "cypress": "^13.11.0",
     "cypress-image-snapshot": "^4.0.1",
     "esbuild": "^0.20.2",
     "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-biome": "^1.7.3",
     "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-html": "^8.0.0",
     "eslint-plugin-jest": "^27.9.0",
@@ -107,7 +104,7 @@
     "jison": "^0.4.18",
     "js-yaml": "^4.1.0",
     "jsdom": "^24.0.0",
-    "langium-cli": "3.0.1",
+    "langium-cli": "3.0.3",
     "lint-staged": "^15.2.2",
     "markdown-table": "^3.0.3",
     "nyc": "^15.1.0",
@@ -126,10 +123,5 @@
   },
   "nyc": {
     "report-dir": "coverage/cypress"
-  },
-  "pnpm": {
-    "patchedDependencies": {
-      "cytoscape@3.28.1": "patches/cytoscape@3.28.1.patch"
-    }
   }
 }

packages/mermaid-example-diagram/package.json

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

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

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

packages/mermaid-flowchart-elk/package.json

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

packages/mermaid-flowchart-elk/src/detector.spec.ts

@@ -39,6 +39,26 @@ describe('flowchart-elk detector', () => {
     ).toBe(true);
   });
 
+  // The error from the issue was reproduced with mindmap, so this is just an example
+  // what matters is the keyword somewhere inside graph definition
+  it('should check only the beginning of the line in search of keywords', () => {
+    expect(
+      detector('mindmap ["Descendant node in flowchart"]', {
+        flowchart: {
+          defaultRenderer: 'elk',
+        },
+      })
+    ).toBe(false);
+
+    expect(
+      detector('mindmap ["Descendant node in graph"]', {
+        flowchart: {
+          defaultRenderer: 'elk',
+        },
+      })
+    ).toBe(false);
+  });
+
   it('should detect flowchart-elk', () => {
     expect(detector('flowchart-elk')).toBe(true);
   });

packages/mermaid-flowchart-elk/src/detector.ts

@@ -11,7 +11,7 @@ const detector: DiagramDetector = (txt, config): boolean => {
     // If diagram explicitly states flowchart-elk
     /^\s*flowchart-elk/.test(txt) ||
     // If a flowchart/graph diagram has their default renderer set to elk
-    (/^\s*flowchart|graph/.test(txt) && config?.flowchart?.defaultRenderer === 'elk')
+    (/^\s*(flowchart|graph)/.test(txt) && config?.flowchart?.defaultRenderer === 'elk')
   ) {
     return true;
   }

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

@@ -41,12 +41,12 @@ let nodeDb = {};
 export const addVertices = async function (vert, svgId, root, doc, diagObj, parentLookupDb, graph) {
   const svg = root.select(`[id="${svgId}"]`);
   const nodes = svg.insert('g').attr('class', 'nodes');
-  const keys = Object.keys(vert);
+  const keys = [...vert.keys()];
 
   // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
   await Promise.all(
     keys.map(async function (id) {
-      const vertex = vert[id];
+      const vertex = vert.get(id);
 
       /**
        * Variable for storing the classes for the vertex
@@ -64,7 +64,6 @@ export const addVertices = async function (vert, svgId, root, doc, diagObj, pare
       let vertexText = vertex.text !== undefined ? vertex.text : vertex.id;
 
       // We create a SVG label, either by delegating to addHtmlLabel or manually
-      let vertexNode;
       const labelData = { width: 0, height: 0 };
 
       const ports = [
@@ -188,7 +187,7 @@ export const addVertices = async function (vert, svgId, root, doc, diagObj, pare
         nodeEl = await insertNode(nodes, node, vertex.dir);
         boundingBox = nodeEl.node().getBBox();
       } else {
-        const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
+        doc.createElementNS('http://www.w3.org/2000/svg', 'text');
         // svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));
         // const rows = vertexText.split(common.lineBreakRegex);
         // for (const row of rows) {
@@ -445,18 +444,20 @@ export const addEdges = function (edges, diagObj, graph, svg) {
     edgeData.arrowTypeStart = 'arrow_open';
     edgeData.arrowTypeEnd = 'arrow_open';
 
-    /* eslint-disable no-fallthrough */
     switch (edge.type) {
+      // biome-ignore lint/suspicious/noFallthroughSwitchClause: Expected fallthrough
       case 'double_arrow_cross':
         edgeData.arrowTypeStart = 'arrow_cross';
       case 'arrow_cross':
         edgeData.arrowTypeEnd = 'arrow_cross';
         break;
+      // biome-ignore lint/suspicious/noFallthroughSwitchClause: Expected fallthrough
       case 'double_arrow_point':
         edgeData.arrowTypeStart = 'arrow_point';
       case 'arrow_point':
         edgeData.arrowTypeEnd = 'arrow_point';
         break;
+      // biome-ignore lint/suspicious/noFallthroughSwitchClause: Expected fallthrough
       case 'double_arrow_circle':
         edgeData.arrowTypeStart = 'arrow_circle';
       case 'arrow_circle':
@@ -595,7 +596,7 @@ const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAb
  *
  * @param text
  * @param diagObj
- * @returns {Record<string, import('../../mermaid/src/diagram-api/types.js').DiagramStyleClassDef>} ClassDef styles
+ * @returns {Map<string, import('../../mermaid/src/diagram-api/types.js').DiagramStyleClassDef>} ClassDef styles
  */
 export const getClasses = function (text, diagObj) {
   log.info('Extracting classes');
@@ -677,7 +678,6 @@ const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb, i
 /**
  * Recursive function that iterates over an array of nodes and inserts the children of each node.
  * It also recursively populates the inserts the children of the children and so on.
- * @param {*} graph
  * @param nodeArray
  * @param parentLookupDb
  */

packages/mermaid-layout-elk/package.json

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

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

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

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

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

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

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

packages/mermaid-layout-elk/tsconfig.json

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

packages/mermaid-zenuml/package.json

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

packages/mermaid/package.json

@@ -58,37 +58,31 @@
   "author": "Knut Sveidqvist",
   "license": "MIT",
   "standard": {
-    "ignore": [
-      "**/parser/*.js",
-      "dist/**/*.js",
-      "cypress/**/*.js"
-    ],
-    "globals": [
-      "page"
-    ]
+    "ignore": ["**/parser/*.js", "dist/**/*.js", "cypress/**/*.js"],
+    "globals": ["page"]
   },
   "dependencies": {
     "@braintree/sanitize-url": "^7.0.1",
     "@mermaid-js/parser": "workspace:^",
-    "cytoscape": "^3.28.1",
+    "cytoscape": "^3.29.2",
     "cytoscape-cose-bilkent": "^4.1.0",
     "d3": "^7.9.0",
     "d3-sankey": "^0.12.3",
     "dagre-d3-es": "7.0.10",
     "dayjs": "^1.11.10",
     "dompurify": "^3.0.11",
-    "elkjs": "^0.9.2",
     "katex": "^0.16.9",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
     "mdast-util-from-markdown": "^2.0.0",
+    "roughjs": "^4.6.6",
     "stylis": "^4.3.1",
     "ts-dedent": "^2.2.0",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@adobe/jsonschema2md": "^8.0.0",
-    "@types/cytoscape": "^3.19.16",
+    "@types/cytoscape": "^3.21.4",
     "@types/d3": "^7.4.3",
     "@types/d3-sankey": "^0.12.4",
     "@types/d3-scale": "^4.0.8",
@@ -103,8 +97,6 @@
     "@types/prettier": "^3.0.0",
     "@types/stylis": "^4.2.5",
     "@types/uuid": "^9.0.8",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
     "ajv": "^8.12.0",
     "chokidar": "^3.6.0",
     "concurrently": "^8.2.2",
@@ -132,10 +124,7 @@
     "vitepress": "^1.0.1",
     "vitepress-plugin-search": "1.0.4-alpha.22"
   },
-  "files": [
-    "dist/",
-    "README.md"
-  ],
+  "files": ["dist/", "README.md"],
   "sideEffects": false,
   "publishConfig": {
     "access": "public"

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

@@ -10,17 +10,15 @@
 
 /* eslint-disable no-console */
 
-import { readFile, writeFile } from 'node:fs/promises';
-import { join } from 'node:path';
+import _Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js';
+import { JSON_SCHEMA, load } from 'js-yaml';
+import { compile, type JSONSchema } from 'json-schema-to-typescript';
 import assert from 'node:assert';
 import { execFile } from 'node:child_process';
+import { readFile, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
 import { promisify } from 'node:util';
-
-import { load, JSON_SCHEMA } from 'js-yaml';
-import { compile, type JSONSchema } from 'json-schema-to-typescript';
-import prettier from 'prettier';
-
-import _Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js';
+import { prettierConfig } from './prettier.js';
 
 // Workaround for wrong AJV types, see
 // https://github.com/ajv-validator/ajv/issues/2132#issuecomment-1290409907
@@ -34,28 +32,6 @@ const verifyOnly = process.argv.includes('--verify');
 /** If `true`, automatically `git add` any changes (i.e. during `pnpm run pre-commit`)*/
 const git = process.argv.includes('--git');
 
-/**
- * All of the keys in the mermaid config that have a mermaid diagram config.
- */
-const MERMAID_CONFIG_DIAGRAM_KEYS = [
-  'flowchart',
-  'sequence',
-  'gantt',
-  'journey',
-  'class',
-  'state',
-  'er',
-  'pie',
-  'quadrantChart',
-  'xyChart',
-  'requirement',
-  'mindmap',
-  'timeline',
-  'gitGraph',
-  'c4',
-  'sankey',
-];
-
 /**
  * Loads the MermaidConfig JSON schema YAML file.
  *
@@ -148,53 +124,9 @@ async function generateTypescript(mermaidConfigSchema: JSONSchemaType<MermaidCon
     return { ...schema, required: [] };
   }
 
-  /**
-   * This is a temporary hack to control the order the types are generated in.
-   *
-   * By default, json-schema-to-typescript outputs the $defs in the order they
-   * are used, then any unused schemas at the end.
-   *
-   * **The only purpose of this function is to make the `git diff` simpler**
-   * **We should remove this later to simplify the code**
-   *
-   * @todo TODO: Remove this function in a future PR.
-   * @param schema - The input schema.
-   * @returns The schema with all `$ref`s removed.
-   */
-  function unrefSubschemas(schema: JSONSchemaType<Record<string, any>>) {
-    return {
-      ...schema,
-      properties: Object.fromEntries(
-        Object.entries(schema.properties).map(([key, propertySchema]) => {
-          if (MERMAID_CONFIG_DIAGRAM_KEYS.includes(key)) {
-            const { $ref, ...propertySchemaWithoutRef } = propertySchema as JSONSchemaType<unknown>;
-            if ($ref === undefined) {
-              throw Error(
-                `subSchema ${key} is in MERMAID_CONFIG_DIAGRAM_KEYS but does not have a $ref field`
-              );
-            }
-            const [
-              _root, // eslint-disable-line @typescript-eslint/no-unused-vars
-              _defs, // eslint-disable-line @typescript-eslint/no-unused-vars
-              defName,
-            ] = $ref.split('/');
-            return [
-              key,
-              {
-                ...propertySchemaWithoutRef,
-                tsType: defName,
-              },
-            ];
-          }
-          return [key, propertySchema];
-        })
-      ),
-    };
-  }
-
   assert.ok(mermaidConfigSchema.$defs);
   const modifiedSchema = {
-    ...unrefSubschemas(removeRequired(mermaidConfigSchema)),
+    ...removeRequired(mermaidConfigSchema),
 
     $defs: Object.fromEntries(
       Object.entries(mermaidConfigSchema.$defs).map(([key, subSchema]) => {
@@ -209,7 +141,7 @@ async function generateTypescript(mermaidConfigSchema: JSONSchemaType<MermaidCon
     {
       additionalProperties: false, // in JSON Schema 2019-09, these are called `unevaluatedProperties`
       unreachableDefinitions: true, // definition for FontConfig is unreachable
-      style: (await prettier.resolveConfig('.')) ?? {},
+      style: prettierConfig,
     }
   );
 

packages/mermaid/scripts/docs.mts

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

packages/mermaid/scripts/docs.spec.ts

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

packages/mermaid/scripts/prettier.ts

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

packages/mermaid/src/config.spec.ts

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

packages/mermaid/src/config.ts

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

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

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

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

@@ -110,12 +110,13 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
   graph.edges().forEach(function (e) {
     log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
   });
+  log.info('Graph before layout:', JSON.stringify(graphlibJson.write(graph)));
   log.info('#############################################');
   log.info('###                Layout                 ###');
   log.info('#############################################');
   log.info(graph);
   dagreLayout(graph);
-  log.info('Graph after layout:', graphlibJson.write(graph));
+  log.info('Graph after layout:', JSON.stringify(graphlibJson.write(graph)));
   // Move the nodes to the correct place
   let diff = 0;
   const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);

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

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

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

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

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

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

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

@@ -70,7 +70,7 @@ export interface DiagramRenderer {
   getClasses?: (
     text: string,
     diagram: Pick<DiagramDefinition, 'db'>
-  ) => Record<string, DiagramStyleClassDef>;
+  ) => Map<string, DiagramStyleClassDef>;
 }
 
 export interface DiagramDefinition {

packages/mermaid/src/diagram.spec.ts

@@ -70,8 +70,9 @@ describe('diagram detection', () => {
       --------------^
       Expecting 'AMP', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'NODE_STRING', 'BRKT', 'MINUS', 'MULT', 'UNICODE_TEXT', got 'EOF']
     `);
-    await expect(Diagram.fromText('sequenceDiagram; A-->B')).rejects
-      .toThrowErrorMatchingInlineSnapshot(`
+    await expect(
+      Diagram.fromText('sequenceDiagram; A-->B')
+    ).rejects.toThrowErrorMatchingInlineSnapshot(`
       [Error: Parse error on line 1:
       ...quenceDiagram; A-->B
       -----------------------^

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

@@ -1,21 +1,26 @@
 import clone from 'lodash-es/clone.js';
 import * as configApi from '../../config.js';
+import { getConfig } from '../../diagram-api/diagramAPI.js';
 import type { DiagramDB } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
+import common from '../common/common.js';
 import { clear as commonClear } from '../common/commonDb.js';
 import type { Block, ClassDef } from './blockTypes.js';
 
 // Initialize the node database for simple lookups
-let blockDatabase: Record<string, Block> = {};
+let blockDatabase: Map<string, Block> = new Map();
 let edgeList: Block[] = [];
-let edgeCount: Record<string, number> = {};
+let edgeCount: Map<string, number> = new Map();
 
 const COLOR_KEYWORD = 'color';
 const FILL_KEYWORD = 'fill';
 const BG_FILL = 'bgFill';
 const STYLECLASS_SEP = ',';
+const config = getConfig();
 
-let classes = {} as Record<string, ClassDef>;
+let classes: Map<string, ClassDef> = new Map();
+
+const sanitizeText = (txt: string) => common.sanitizeText(txt, config);
 
 /**
  * Called when the parser comes across a (style) class definition
@@ -26,10 +31,11 @@ let classes = {} as Record<string, ClassDef>;
  */
 export const addStyleClass = function (id: string, styleAttributes = '') {
   // create a new style class object with this id
-  if (classes[id] === undefined) {
-    classes[id] = { id: id, styles: [], textStyles: [] }; // This is a classDef
+  let foundClass = classes.get(id);
+  if (!foundClass) {
+    foundClass = { id: id, styles: [], textStyles: [] };
+    classes.set(id, foundClass); // This is a classDef
   }
-  const foundClass = classes[id];
   if (styleAttributes !== undefined && styleAttributes !== null) {
     styleAttributes.split(STYLECLASS_SEP).forEach((attrib) => {
       // remove any trailing ;
@@ -54,7 +60,7 @@ export const addStyleClass = function (id: string, styleAttributes = '') {
  * @param styles - the string with 1 or more style attributes (each separated by a comma)
  */
 export const addStyle2Node = function (id: string, styles = '') {
-  const foundBlock = blockDatabase[id];
+  const foundBlock = blockDatabase.get(id)!;
   if (styles !== undefined && styles !== null) {
     foundBlock.styles = styles.split(STYLECLASS_SEP);
   }
@@ -70,11 +76,11 @@ export const addStyle2Node = function (id: string, styles = '') {
  */
 export const setCssClass = function (itemIds: string, cssClassName: string) {
   itemIds.split(',').forEach(function (id: string) {
-    let foundBlock = blockDatabase[id];
+    let foundBlock = blockDatabase.get(id);
     if (foundBlock === undefined) {
       const trimmedId = id.trim();
-      blockDatabase[trimmedId] = { id: trimmedId, type: 'na', children: [] } as Block;
-      foundBlock = blockDatabase[trimmedId];
+      foundBlock = { id: trimmedId, type: 'na', children: [] } as Block;
+      blockDatabase.set(trimmedId, foundBlock);
     }
     if (!foundBlock.classes) {
       foundBlock.classes = [];
@@ -87,6 +93,9 @@ const populateBlockDatabase = (_blockList: Block[] | Block[][], parent: Block):
   const blockList = _blockList.flat();
   const children = [];
   for (const block of blockList) {
+    if (block.label) {
+      block.label = sanitizeText(block.label);
+    }
     if (block.type === 'classDef') {
       addStyleClass(block.id, block.css);
       continue;
@@ -104,12 +113,9 @@ const populateBlockDatabase = (_blockList: Block[] | Block[][], parent: Block):
     if (block.type === 'column-setting') {
       parent.columns = block.columns || -1;
     } else if (block.type === 'edge') {
-      if (edgeCount[block.id]) {
-        edgeCount[block.id]++;
-      } else {
-        edgeCount[block.id] = 1;
-      }
-      block.id = edgeCount[block.id] + '-' + block.id;
+      const count = (edgeCount.get(block.id) ?? 0) + 1;
+      edgeCount.set(block.id, count);
+      block.id = count + '-' + block.id;
       edgeList.push(block);
     } else {
       if (!block.label) {
@@ -120,16 +126,17 @@ const populateBlockDatabase = (_blockList: Block[] | Block[][], parent: Block):
           block.label = block.id;
         }
       }
-      const newBlock = !blockDatabase[block.id];
-      if (newBlock) {
-        blockDatabase[block.id] = block;
+      const existingBlock = blockDatabase.get(block.id);
+
+      if (existingBlock === undefined) {
+        blockDatabase.set(block.id, block);
       } else {
         // Add newer relevant data to aggregated node
         if (block.type !== 'na') {
-          blockDatabase[block.id].type = block.type;
+          existingBlock.type = block.type;
         }
         if (block.label !== block.id) {
-          blockDatabase[block.id].label = block.label;
+          existingBlock.label = block.label;
         }
       }
 
@@ -142,10 +149,10 @@ const populateBlockDatabase = (_blockList: Block[] | Block[][], parent: Block):
         for (let j = 0; j < w; j++) {
           const newBlock = clone(block);
           newBlock.id = newBlock.id + '-' + j;
-          blockDatabase[newBlock.id] = newBlock;
+          blockDatabase.set(newBlock.id, newBlock);
           children.push(newBlock);
         }
-      } else if (newBlock) {
+      } else if (existingBlock === undefined) {
         children.push(block);
       }
     }
@@ -160,12 +167,12 @@ const clear = (): void => {
   log.debug('Clear called');
   commonClear();
   rootBlock = { id: 'root', type: 'composite', children: [], columns: -1 } as Block;
-  blockDatabase = { root: rootBlock };
+  blockDatabase = new Map([['root', rootBlock]]);
   blocks = [] as Block[];
-  classes = {} as Record<string, ClassDef>;
+  classes = new Map();
 
   edgeList = [];
-  edgeCount = {};
+  edgeCount = new Map();
 };
 
 export function typeStr2Type(typeStr: string) {
@@ -241,7 +248,7 @@ const setHierarchy = (block: Block[]): void => {
 };
 
 const getColumns = (blockId: string): number => {
-  const block = blockDatabase[blockId];
+  const block = blockDatabase.get(blockId);
   if (!block) {
     return -1;
   }
@@ -259,7 +266,7 @@ const getColumns = (blockId: string): number => {
  * @returns
  */
 const getBlocksFlat = () => {
-  return [...Object.values(blockDatabase)];
+  return [...blockDatabase.values()];
 };
 /**
  * Returns the hierarchy of blocks
@@ -273,11 +280,11 @@ const getEdges = () => {
   return edgeList;
 };
 const getBlock = (id: string) => {
-  return blockDatabase[id];
+  return blockDatabase.get(id);
 };
 
 const setBlock = (block: Block) => {
-  blockDatabase[block.id] = block;
+  blockDatabase.set(block.id, block);
 };
 
 const getLogger = () => console;

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

@@ -85,7 +85,7 @@ export const draw = async function (
   }
 
   // Get color scheme for the graph
-  const colorScheme = d3scaleOrdinal(d3schemeTableau10);
+  // const colorScheme = d3scaleOrdinal(d3schemeTableau10);
 };
 
 export default {

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

@@ -388,7 +388,7 @@ describe('Block diagram', function () {
       const mc = blocks[0];
       expect(mc.classes).toContain('black');
       const classes = db.getClasses();
-      const black = classes.black;
+      const black = classes.get('black')!;
       expect(black.id).toBe('black');
       expect(black.styles[0]).toEqual('color:#ffffff');
     });
@@ -406,4 +406,21 @@ columns 1
       expect(B.styles).toContain('fill:#f9F');
     });
   });
+
+  describe('prototype properties', function () {
+    function validateProperty(prop: string) {
+      expect(() => block.parse(`block-beta\n${prop}`)).not.toThrow();
+      expect(() =>
+        block.parse(`block-beta\nA; classDef ${prop} color:#ffffff,fill:#000000; class A ${prop}`)
+      ).not.toThrow();
+    }
+
+    it('should work with a __proto__ property', function () {
+      validateProperty('__proto__');
+    });
+
+    it('should work with a constructor property', function () {
+      validateProperty('constructor');
+    });
+  });
 });

packages/mermaid/src/diagrams/c4/parser/c4Diagram.jison

@@ -256,7 +256,7 @@ boundaryStartStatement
 
 boundaryStart
     : ENTERPRISE_BOUNDARY attributes {$2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
-    | SYSTEM_BOUNDARY attributes {$2.splice(2, 0, 'ENTERPRISE'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
+    | SYSTEM_BOUNDARY attributes {$2.splice(2, 0, 'SYSTEM'); yy.addPersonOrSystemBoundary(...$2); $$=$2;}
     | BOUNDARY attributes {yy.addPersonOrSystemBoundary(...$2); $$=$2;}
     | CONTAINER_BOUNDARY attributes {$2.splice(2, 0, 'CONTAINER'); yy.addContainerBoundary(...$2); $$=$2;}
     | NODE attributes {yy.addDeploymentNode('node', ...$2); $$=$2;}

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

@@ -26,10 +26,10 @@ import type {
 const MERMAID_DOM_ID_PREFIX = 'classId-';
 
 let relations: ClassRelation[] = [];
-let classes: ClassMap = {};
+let classes: Map<string, ClassNode> = new Map();
 let notes: ClassNote[] = [];
 let classCounter = 0;
-let namespaces: NamespaceMap = {};
+let namespaces: Map<string, NamespaceNode> = new Map();
 let namespaceCounter = 0;
 
 let functions: any[] = [];
@@ -57,7 +57,7 @@ export const setClassLabel = function (_id: string, label: string) {
   }
 
   const { className } = splitClassNameAndType(id);
-  classes[className].label = label;
+  classes.get(className)!.label = label;
 };
 
 /**
@@ -70,13 +70,13 @@ export const addClass = function (_id: string) {
   const id = common.sanitizeText(_id, getConfig());
   const { className, type } = splitClassNameAndType(id);
   // Only add class if not exists
-  if (Object.hasOwn(classes, className)) {
+  if (classes.has(className)) {
     return;
   }
   // alert('Adding class: ' + className);
   const name = common.sanitizeText(className, getConfig());
   // alert('Adding class after: ' + name);
-  classes[name] = {
+  classes.set(name, {
     id: name,
     type: type,
     label: name,
@@ -86,7 +86,7 @@ export const addClass = function (_id: string) {
     annotations: [],
     styles: [],
     domId: MERMAID_DOM_ID_PREFIX + name + '-' + classCounter,
-  } as ClassNode;
+  } as ClassNode);
 
   classCounter++;
 };
@@ -99,25 +99,25 @@ export const addClass = function (_id: string) {
  */
 export const lookUpDomId = function (_id: string): string {
   const id = common.sanitizeText(_id, getConfig());
-  if (id in classes) {
-    return classes[id].domId;
+  if (classes.has(id)) {
+    return classes.get(id)!.domId;
   }
   throw new Error('Class not found: ' + id);
 };
 
 export const clear = function () {
   relations = [];
-  classes = {};
+  classes = new Map();
   notes = [];
   functions = [];
   functions.push(setupToolTips);
-  namespaces = {};
+  namespaces = new Map();
   namespaceCounter = 0;
   commonClear();
 };
 
 export const getClass = function (id: string): ClassNode {
-  return classes[id];
+  return classes.get(id)!;
 };
 
 export const getClasses = function (): ClassMap {
@@ -157,7 +157,7 @@ export const addRelation = function (relation: ClassRelation) {
  */
 export const addAnnotation = function (className: string, annotation: string) {
   const validatedClassName = splitClassNameAndType(className).className;
-  classes[validatedClassName].annotations.push(annotation);
+  classes.get(validatedClassName)!.annotations.push(annotation);
 };
 
 /**
@@ -173,7 +173,7 @@ export const addMember = function (className: string, member: string) {
   addClass(className);
 
   const validatedClassName = splitClassNameAndType(className).className;
-  const theClass = classes[validatedClassName];
+  const theClass = classes.get(validatedClassName)!;
 
   if (typeof member === 'string') {
     // Member can contain white spaces, we trim them out
@@ -226,8 +226,9 @@ export const setCssClass = function (ids: string, className: string) {
     if (_id[0].match(/\d/)) {
       id = MERMAID_DOM_ID_PREFIX + id;
     }
-    if (classes[id] !== undefined) {
-      classes[id].cssClasses.push(className);
+    const classNode = classes.get(id);
+    if (classNode) {
+      classNode.cssClasses.push(className);
     }
   });
 };
@@ -241,17 +242,17 @@ export const setCssClass = function (ids: string, className: string) {
 const setTooltip = function (ids: string, tooltip?: string) {
   ids.split(',').forEach(function (id) {
     if (tooltip !== undefined) {
-      classes[id].tooltip = sanitizeText(tooltip);
+      classes.get(id)!.tooltip = sanitizeText(tooltip);
     }
   });
 };
 
 export const getTooltip = function (id: string, namespace?: string) {
-  if (namespace) {
-    return namespaces[namespace].classes[id].tooltip;
+  if (namespace && namespaces.has(namespace)) {
+    return namespaces.get(namespace)!.classes.get(id)!.tooltip;
   }
 
-  return classes[id].tooltip;
+  return classes.get(id)!.tooltip;
 };
 
 /**
@@ -268,14 +269,15 @@ export const setLink = function (ids: string, linkStr: string, target: string) {
     if (_id[0].match(/\d/)) {
       id = MERMAID_DOM_ID_PREFIX + id;
     }
-    if (classes[id] !== undefined) {
-      classes[id].link = utils.formatUrl(linkStr, config);
+    const theClass = classes.get(id);
+    if (theClass) {
+      theClass.link = utils.formatUrl(linkStr, config);
       if (config.securityLevel === 'sandbox') {
-        classes[id].linkTarget = '_top';
+        theClass.linkTarget = '_top';
       } else if (typeof target === 'string') {
-        classes[id].linkTarget = sanitizeText(target);
+        theClass.linkTarget = sanitizeText(target);
       } else {
-        classes[id].linkTarget = '_blank';
+        theClass.linkTarget = '_blank';
       }
     }
   });
@@ -292,7 +294,7 @@ export const setLink = function (ids: string, linkStr: string, target: string) {
 export const setClickEvent = function (ids: string, functionName: string, functionArgs: string) {
   ids.split(',').forEach(function (id) {
     setClickFunc(id, functionName, functionArgs);
-    classes[id].haveCallback = true;
+    classes.get(id)!.haveCallback = true;
   });
   setCssClass(ids, 'clickable');
 };
@@ -308,7 +310,7 @@ const setClickFunc = function (_domId: string, functionName: string, functionArg
   }
 
   const id = domId;
-  if (classes[id] !== undefined) {
+  if (classes.has(id)) {
     const elemId = lookUpDomId(id);
     let argList: string[] = [];
     if (typeof functionArgs === 'string') {
@@ -417,22 +419,22 @@ const setDirection = (dir: string) => {
  * @public
  */
 export const addNamespace = function (id: string) {
-  if (namespaces[id] !== undefined) {
+  if (namespaces.has(id)) {
     return;
   }
 
-  namespaces[id] = {
+  namespaces.set(id, {
     id: id,
-    classes: {},
+    classes: new Map(),
     children: {},
     domId: MERMAID_DOM_ID_PREFIX + id + '-' + namespaceCounter,
-  } as NamespaceNode;
+  } as NamespaceNode);
 
   namespaceCounter++;
 };
 
 const getNamespace = function (name: string): NamespaceNode {
-  return namespaces[name];
+  return namespaces.get(name)!;
 };
 
 const getNamespaces = function (): NamespaceMap {
@@ -447,18 +449,18 @@ const getNamespaces = function (): NamespaceMap {
  * @public
  */
 export const addClassesToNamespace = function (id: string, classNames: string[]) {
-  if (namespaces[id] === undefined) {
+  if (!namespaces.has(id)) {
     return;
   }
   for (const name of classNames) {
     const { className } = splitClassNameAndType(name);
-    classes[className].parent = id;
-    namespaces[id].classes[className] = classes[className];
+    classes.get(className)!.parent = id;
+    namespaces.get(id)!.classes.set(className, classes.get(className)!);
   }
 };
 
 export const setCssStyle = function (id: string, styles: string[]) {
-  const thisClass = classes[id];
+  const thisClass = classes.get(id);
   if (!styles || !thisClass) {
     return;
   }

packages/mermaid/src/diagrams/class/classDiagram.spec.ts

@@ -2,6 +2,7 @@
 import { parser } from './parser/classDiagram.jison';
 import classDb from './classDb.js';
 import { vi, describe, it, expect } from 'vitest';
+import type { ClassMap, NamespaceNode } from './classTypes.js';
 const spyOn = vi.spyOn;
 
 const staticCssStyle = 'text-decoration:underline;';
@@ -392,8 +393,8 @@ class C13["With Città foreign language"]
           Student "1" --o "1" IdCard : carries
           Student "1" --o "1" Bike : rides`);
 
-      expect(Object.keys(classDb.getClasses()).length).toBe(3);
-      expect(classDb.getClasses().Student).toMatchInlineSnapshot(`
+      expect(classDb.getClasses().size).toBe(3);
+      expect(classDb.getClasses().get('Student')).toMatchInlineSnapshot(`
         {
           "annotations": [],
           "cssClasses": [],
@@ -1539,12 +1540,12 @@ class Class2
 }`;
       parser.parse(str);
 
-      const testNamespace = parser.yy.getNamespace('Namespace1');
-      const testClasses = parser.yy.getClasses();
-      expect(Object.keys(testNamespace.classes).length).toBe(2);
+      const testNamespace: NamespaceNode = parser.yy.getNamespace('Namespace1');
+      const testClasses: ClassMap = parser.yy.getClasses();
+      expect(testNamespace.classes.size).toBe(2);
       expect(Object.keys(testNamespace.children).length).toBe(0);
-      expect(testNamespace.classes['Class1'].id).toBe('Class1');
-      expect(Object.keys(testClasses).length).toBe(2);
+      expect(testNamespace.classes.get('Class1')?.id).toBe('Class1');
+      expect(testClasses.size).toBe(2);
     });
 
     it('should add relations between classes of different namespaces', function () {
@@ -1573,25 +1574,25 @@ class Class2
       const testNamespaceB = parser.yy.getNamespace('B');
       const testClasses = parser.yy.getClasses();
       const testRelations = parser.yy.getRelations();
-      expect(Object.keys(testNamespaceA.classes).length).toBe(2);
-      expect(testNamespaceA.classes['A1'].members[0].getDisplayDetails().displayText).toBe(
+      expect(testNamespaceA.classes.size).toBe(2);
+      expect(testNamespaceA.classes.get('A1').members[0].getDisplayDetails().displayText).toBe(
         '+foo : string'
       );
-      expect(testNamespaceA.classes['A2'].members[0].getDisplayDetails().displayText).toBe(
+      expect(testNamespaceA.classes.get('A2').members[0].getDisplayDetails().displayText).toBe(
         '+bar : int'
       );
-      expect(Object.keys(testNamespaceB.classes).length).toBe(2);
-      expect(testNamespaceB.classes['B1'].members[0].getDisplayDetails().displayText).toBe(
+      expect(testNamespaceB.classes.size).toBe(2);
+      expect(testNamespaceB.classes.get('B1').members[0].getDisplayDetails().displayText).toBe(
         '+foo : bool'
       );
-      expect(testNamespaceB.classes['B2'].members[0].getDisplayDetails().displayText).toBe(
+      expect(testNamespaceB.classes.get('B2').members[0].getDisplayDetails().displayText).toBe(
         '+bar : float'
       );
-      expect(Object.keys(testClasses).length).toBe(4);
-      expect(testClasses['A1'].parent).toBe('A');
-      expect(testClasses['A2'].parent).toBe('A');
-      expect(testClasses['B1'].parent).toBe('B');
-      expect(testClasses['B2'].parent).toBe('B');
+      expect(testClasses.size).toBe(4);
+      expect(testClasses.get('A1').parent).toBe('A');
+      expect(testClasses.get('A2').parent).toBe('A');
+      expect(testClasses.get('B1').parent).toBe('B');
+      expect(testClasses.get('B2').parent).toBe('B');
       expect(testRelations[0].id1).toBe('A1');
       expect(testRelations[0].id2).toBe('B1');
       expect(testRelations[1].id1).toBe('A2');

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

@@ -4,7 +4,7 @@ import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { log } from '../../logger.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { render } from '../../dagre-wrapper/index.js';
-import utils from '../../utils.js';
+import utils, { getEdgeId } from '../../utils.js';
 import { interpolateToCurve, getStylesFromArray } from '../../utils.js';
 import { setupGraphViewbox } from '../../setupGraphViewbox.js';
 import common from '../common/common.js';
@@ -44,14 +44,11 @@ export const addNamespaces = function (
   _id: string,
   diagObj: any
 ) {
-  const keys = Object.keys(namespaces);
-  log.info('keys:', keys);
+  log.info('keys:', [...namespaces.keys()]);
   log.info(namespaces);
 
   // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
-  keys.forEach(function (id) {
-    const vertex = namespaces[id];
-
+  namespaces.forEach(function (vertex) {
     // parent node must be one of [rect, roundedWithTitle, noteGroup, divider]
     const shape = 'rect';
 
@@ -89,16 +86,13 @@ export const addClasses = function (
   diagObj: any,
   parent?: string
 ) {
-  const keys = Object.keys(classes);
-  log.info('keys:', keys);
+  log.info('keys:', [...classes.keys()]);
   log.info(classes);
 
   // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
-  keys
-    .filter((id) => classes[id].parent == parent)
-    .forEach(function (id) {
-      const vertex = classes[id];
-
+  [...classes.values()]
+    .filter((vertex) => vertex.parent === parent)
+    .forEach(function (vertex) {
       /**
        * Variable for storing the classes for the vertex
        */
@@ -187,7 +181,7 @@ export const addNotes = function (
     g.setNode(vertex.id, node);
     log.info('setNode', node);
 
-    if (!vertex.class || !(vertex.class in classes)) {
+    if (!vertex.class || !classes.has(vertex.class)) {
       return;
     }
     const edgeId = startEdgeId + i;
@@ -231,7 +225,10 @@ export const addRelations = function (relations: ClassRelation[], g: graphlib.Gr
       //Set relationship style and line type
       classes: 'relation',
       pattern: edge.relation.lineType == 1 ? 'dashed' : 'solid',
-      id: `id_${edge.id1}_${edge.id2}_${cnt}`,
+      id: getEdgeId(edge.id1, edge.id2, {
+        prefix: 'id',
+        counter: cnt,
+      }),
       // Set link type for rendering
       arrowhead: edge.type === 'arrow_open' ? 'none' : 'normal',
       //Set edge extra labels
@@ -346,7 +343,7 @@ export const draw = async function (text: string, id: string, _version: string,
   }
   const root =
     securityLevel === 'sandbox'
-      ? select(sandboxElement.nodes()[0].contentDocument.body)
+      ? select(sandboxElement!.nodes()[0]!.contentDocument.body)
       : select('body');
   const svg = root.select(`[id="${id}"]`);
 
@@ -366,7 +363,8 @@ export const draw = async function (text: string, id: string, _version: string,
 
   // Add label rects for non html labels
   if (!conf?.htmlLabels) {
-    const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
+    const doc =
+      securityLevel === 'sandbox' ? sandboxElement!.nodes()[0]!.contentDocument : document;
     const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
     for (const label of labels) {
       // Get dimensions of label

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

@@ -175,10 +175,10 @@ export const draw = function (text, id, _version, diagObj) {
   });
 
   const classes = diagObj.db.getClasses();
-  const keys = Object.keys(classes);
+  const keys = [...classes.keys()];
 
   for (const key of keys) {
-    const classDef = classes[key];
+    const classDef = classes.get(key);
     const node = svgDraw.drawClass(diagram, classDef, conf, diagObj);
     idCache[node.id] = node;
 
@@ -216,7 +216,7 @@ export const draw = function (text, id, _version, diagObj) {
     // metadata about the node. In this case we're going to add labels to each of
     // our nodes.
     g.setNode(node.id, node);
-    if (note.class && note.class in classes) {
+    if (note.class && classes.has(note.class)) {
       g.setEdge(
         note.id,
         getGraphId(note.class),

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

@@ -161,5 +161,5 @@ export interface NamespaceNode {
   children: NamespaceMap;
 }
 
-export type ClassMap = Record<string, ClassNode>;
-export type NamespaceMap = Record<string, NamespaceNode>;
+export type ClassMap = Map<string, ClassNode>;
+export type NamespaceMap = Map<string, NamespaceNode>;

packages/mermaid/src/diagrams/class/parser/class.spec.js

@@ -0,0 +1,16 @@
+import { parser } from './classDiagram.jison';
+import classDb from '../classDb.js';
+
+describe('class diagram', function () {
+  beforeEach(function () {
+    parser.yy = classDb;
+    parser.yy.clear();
+  });
+
+  describe('prototype properties', function () {
+    it.each(['__proto__', 'constructor'])('should work with a %s property', function (prop) {
+      expect(() => parser.parse(`classDiagram\nclass ${prop}`)).not.toThrow();
+      expect(() => parser.parse(`classDiagram\nnamespace ${prop} {\n\tclass A\n}`)).not.toThrow();
+    });
+  });
+});