Merge branch 'develop' into sidv/biome

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

.build/common.ts

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

.build/jisonTransformer.ts

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

.cspell/code-terms.txt

@@ -27,7 +27,6 @@ controly
 CSSCLASS
 CYLINDEREND
 CYLINDERSTART
-DAGA
 datakey
 DEND
 descr
@@ -90,7 +89,6 @@ reqs
 rewritelinks
 rgba
 RIGHTOF
-roughjs
 sankey
 sequencenumber
 shrc

.cspell/libraries.txt

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

.cspell/mermaid-terms.txt

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

.cspell/misc-terms.txt

@@ -1,4 +1 @@
-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: MermaidBuildOptions = { ...defaultOptions, entryName } as const;
-  const buildConfigs: MermaidBuildOptions[] = [
+  const commonOptions = { ...defaultOptions, entryName } as const;
+  const buildConfigs = [
     // 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 extends BuildOptions {
+export interface MermaidBuildOptions {
   minify: boolean;
   core: boolean;
   metafile: boolean;
@@ -56,7 +56,7 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
   const external: string[] = ['require', 'fs', 'path'];
   const { name, file, packageName } = packageOptions[entryName];
   const outFileName = getFileName(name, options);
-  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/
 

.lintstagedrc.mjs

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

.prettierignore

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

.prettierrc.json

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

.vite/build.ts

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

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

@@ -95,19 +95,8 @@ 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, '-');
 
-  if (useAppli) {
-    cy.log(`Opening eyes ${Cypress.spec.name} --- ${name}`);
-    cy.eyesOpen({
-      appName: 'Mermaid',
-      testName: name,
-      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');
@@ -116,11 +105,27 @@ export const openURLAndVerifyRendering = (
     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({
+      appName: 'Mermaid',
+      testName: name,
+      batchName: Cypress.spec.name,
+      batchId: batchId + Cypress.spec.name,
+    });
     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', () => {

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(

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

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

cypress/platform/flowchart-sate.html

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

cypress/platform/knsv-4442.html

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

cypress/platform/knsv2.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
@@ -14,45 +14,33 @@
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        /* background: #333; */
+        background: #333;
         font-family: 'Arial';
         /* font-size: 18px !important; */
       }
       h1 {
         color: grey;
       }
+      .mermaid {
+        border: 1px solid #ddd;
+        margin: 10px;
+      }
       .mermaid2 {
         display: none;
       }
       .mermaid svg {
         /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
+        /* background-color: #efefef; */
+        background-color: #333;
+        background-image: radial-gradient(#333 51%, transparent 91%),
+          radial-gradient(#333 51%, transparent 91%);
         background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
+        background-position: 0 0, 10px 10px;
+        background-repeat: repeat;
+        border: 2px solid rgb(131, 142, 205);
       }
       .malware {
         position: fixed;
@@ -70,202 +58,544 @@
         font-size: 72px;
       }
       /* tspan {
-              font-size: 6px !important;
-            } */
+        font-size: 6px !important;
+      } */
     </style>
   </head>
   <body>
-    <pre id="diagram" class="mermaid2">
-%%{
-  init: {
-  "theme":"base",
-  "fontFamily": "Kalam",
-  "themeVariables": {
-    "background": "#FFFFFF",
-    "primaryColor": "#7bdfa7",
-    "primaryTextColor": "#3c3c3b",
-    "secondaryColor": "#642470",
-    "secondaryTextColor": "#3c3c3b",
-    "tertiaryColor": "#1c736D",
-    "tertiaryTextColor": "#3c3c3b",
-    "noteBkgColor": "#9fd8ef",
-    "loopTextColor": "#636362",
-    "labelBoxBkgColor": "#642470",
-    "labelBoxBorderColor": "#642470",
-    "labelTextColor": "#d4d4d4",
-    "signalTextColor": "#636362",
-    "signalColor": "#642470"
-  }
-  }
-}%%
-sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    Alice->>+John: John, can you hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    John-->>-Alice: I feel great!
-      </pre
-    >
-    <pre id="diagram" class="mermaid2">
-%%{
-  init: {
-    "theme":"base",
-  "fontFamily": "Forth Bold",
-  "themeVariables": {
-    "background": "#FFFFFF",
-    "primaryColor": "#7bdfa7",
-    "primaryTextColor": "#3c3c3b",
-    "secondaryColor": "#642470",
-    "secondaryTextColor": "#3c3c3b",
-    "tertiaryColor": "#1c736D",
-    "tertiaryTextColor": "#3c3c3b",
-    "noteBkgColor": "#9fd8ef",
-    "loopTextColor": "#636362",
-    "labelBoxBkgColor": "#642470",
-    "labelBoxBorderColor": "#642470",
-    "labelTextColor": "#d4d4d4",
-    "signalTextColor": "#636362",
-    "signalColor": "#642470"
-  }
-  }
-}%%
-sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    Alice->>+John: John, can you hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    John-->>-Alice: I feel great!
-      </pre
-    >
-
-    <pre id="diagram" class="mermaid2">
-      %%{init: {"layout": "elk", "mergeEdges": true} }%%
-stateDiagram
-      A --> B
-      </pre
-    >
     <pre id="diagram" class="mermaid">
-      %%{init: {"layout": "elk", "mergeEdges": true} }%%
-flowchart
-      A --> B(This is B)
-      </pre
-    >
-    <pre id="diagram" class="mermaid2">
-      %%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "NETWORK_SIMPLEX"} }%%
-stateDiagram
-  State T0 {
-    direction LR
-    A --> B
-  }
-  State T1 {
-    [*] --> NumLockOff
-    NumLockOff --> NumLockOn : EvNumLockPressed
-    NumLockOn --> NumLockOff : EvNumLockPressed
-  }
-      </pre
-    >
-    <pre id="diagram" class="mermaid2">
-      %%{init: {"layout": "dagre", "mergeEdges": true} }%%
-stateDiagram
-  direction TB
-  State T1 {
-    T11
-  }
-      </pre
-    >
-    <pre id="diagram" class="mermaid2">
-      %%{init: {"layout": "dagre", "mergeEdges": true} }%%
-stateDiagram
-State T1 {
-    T21
-    --
-    T22
-    }
-      </pre
-    >
-    <pre id="diagram" class="mermaid2">
-      %%{init: {"layout": "elk", "mergeEdges": true} }%%
-stateDiagram
-  direction TB
-  State T1 {
-    T11
-  }
-      </pre
-    >
-    <pre id="diagram" class="mermaid2">
-      %%{init: {"layout": "elk", "mergeEdges": true} }%%
-stateDiagram
-State T1 {
-    T21
-    --
-    T22
-    }
-      </pre
-    >
-    <pre id="diagram" class="mermaid2">
-      %%{init: {"layout": "elk", "mergeEdges": true} }%%
-stateDiagram
-  [*] --> T1
-  T1 --> T2
-  T1 --> T3
-  T1 --> T4
-      </pre
-    >
-    <pre id="diagram" class="mermaid2">
-      %%{init: {"layout": "elk"} }%%
-stateDiagram
-  [*] --> T1
-  T1 --> T2
-  T2 --> T3
-  T3 --> T1
-  T1 --> T3
-      </pre
-    >
-    <pre id="diagram" class="mermaid2">
-stateDiagram
-  State1: The state with a note
-  note right of State1
-      Important information! You can write
-      notes.
-  end note
-      </pre
-    >
-    <pre id="diagram" class="mermaid2">
-stateDiagram-v2
-    direction LR
-    [*] --> Active
+      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
 
-    state Active {
-      direction BT
-        [*] --> Inner
-        Inner --> NumLockOn : EvNumLockPressed
-    }
-    %% Outer --> Inner
-      </pre
+    </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
     >
+    <pre id="diagram" class="mermaid2">
+flowchart LR
+    A[A text that needs to be wrapped wraps to another line]
+    B[A text that needs to be<br/>wrapped wraps to another line]
+    C["`A text that needs to be wrapped to another line`"]</pre>
+    <pre id="diagram" class="mermaid2">
+flowchart LR
+    C["`A text
+        that needs
+        to be wrapped
+        in another
+        way`"]
+  </pre
+    >
+    <pre id="diagram" class="mermaid2">
+      classDiagram-v2
+        note "I love this diagram!\nDo you love it?"
+    </pre>
+    <pre id="diagram" class="mermaid2">
+    stateDiagram-v2
+    State1: The state with a note with minus - and plus + in it
+    note left of State1
+      Important information! You can write
+      notes with . and  in them.
+    end note    </pre
+    >
+    <pre id="diagram" class="mermaid2">
+mindmap
+root
+  Child3(A node with an icon and with a long text that wraps to keep the node size in check)
+</pre
+    >
+    <pre id="diagram" class="mermaid2">
+      %%{init: {"theme": "forest"} }%%
+mindmap
+    id1[**Start2**<br/>end]
+      id2[**Start2**<br />end]
+      %% Another comment
+      id3[**Start2**<br>end] %% Comment
+      id4[**Start2**<br >end<br    >the very end]
+    </pre>
+    <pre id="diagram" class="mermaid2">
+mindmap
+    id1["`**Start2**
+    second line 😎 with long text that is wrapping to the next line`"]
+      id2["`Child **with bold** text`"]
+      id3["`Children of which some
+      is using *italic type of* text`"]
+      id4[Child]
+      id5["`Child
+      Row
+      and another
+      `"]
+    </pre>
+    <pre id="diagram" class="mermaid2">
+mindmap
+    id1("`**Root**`"]
+      id2["`A formatted text... with **bold** and *italics*`"]
+      id3[Regular labels works as usual]
+      id4["`Emojis and unicode works too: 🤓
+      शान्तिः سلام  和平 `"]
+
+    </pre>
+    <pre id="diagram" class="mermaid2">
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd["`**AMD** Latte GPU`"]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+    <pre id="diagram" class="mermaid2">
+%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd["`**AMD** Latte GPU`"]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+
+    <br />
+    <pre id="diagram" class="mermaid2">
+flowchart TB
+  %% I could not figure out how to use double quotes in labels in Mermaid
+  subgraph ibm[IBM Espresso CPU]
+    core0[IBM PowerPC Broadway Core 0]
+    core1[IBM PowerPC Broadway Core 1]
+    core2[IBM PowerPC Broadway Core 2]
+
+    rom[16 KB ROM]
+
+    core0 --- core2
+
+    rom --> core2
+  end
+
+  subgraph amd[AMD Latte GPU]
+    mem[Memory & I/O Bridge]
+    dram[DRAM Controller]
+    edram[32 MB EDRAM MEM1]
+    rom[512 B SEEPROM]
+
+    sata[SATA IF]
+    exi[EXI]
+
+    subgraph gx[GX]
+      sram[3 MB 1T-SRAM]
+    end
+
+    radeon[AMD Radeon R7xx GX2]
+
+    mem --- gx
+    mem --- radeon
+
+    rom --- mem
+
+    mem --- sata
+    mem --- exi
+
+    dram --- sata
+    dram --- exi
+  end
+
+  ddr3[2 GB DDR3 RAM MEM2]
+
+  mem --- ddr3
+  dram --- ddr3
+  edram --- ddr3
+
+  core1 --- mem
+
+  exi --- rtc
+  rtc{{rtc}}
+</pre
+    >
+    <br />
+    &nbsp;
+    <pre id="diagram" class="mermaid2">
+      flowchart LR
+  B1 --be be--x B2
+  B1 --bo bo--o B3
+  subgraph Ugge
+      B2
+      B3
+      subgraph inner
+          B4
+          B5
+      end
+      subgraph inner2
+        subgraph deeper
+          C4
+          C5
+        end
+        C6
+      end
+
+      B4 --> C4
+
+      B3 -- X --> B4
+      B2 --> inner
+
+      C4 --> C5
+  end
+
+  subgraph outer
+      B6
+  end
+  B6 --> B5
+  </pre
+    >
+    <pre id="diagram" class="mermaid2">
+sequenceDiagram
+    Customer->>+Stripe: Makes a payment request
+    Stripe->>+Bank: Forwards the payment request to the bank
+    Bank->>+Customer: Asks for authorization
+    Customer->>+Bank: Provides authorization
+    Bank->>+Stripe: Sends a response with payment details
+    Stripe->>+Merchant: Sends a notification of payment receipt
+    Merchant->>+Stripe: Confirms the payment
+    Stripe->>+Customer: Sends a confirmation of payment
+    Customer->>+Merchant: Receives goods or services
+        </pre
+    >
+    <pre id="diagram" class="mermaid2">
+mindmap
+  root((mindmap))
+    Origins
+      Long history
+      ::icon(fa fa-book)
+      Popularisation
+        British popular psychology author Tony Buzan
+    Research
+      On effectiveness<br/>and features
+      On Automatic creation
+        Uses
+            Creative techniques
+            Strategic planning
+            Argument mapping
+    Tools
+      Pen and paper
+      Mermaid
+    </pre>
+    <br />
+    <pre id="diagram" class="mermaid2">
+  example-diagram
+    </pre>
+
+    <!-- <div id="cy"></div> -->
+    <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
+    <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
+    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
+    <!-- <script src="./mermaid.js"></script> -->
 
     <script type="module">
+      // import mindmap from '../../packages/mermaid-mindmap/src/detector';
+      // import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
       import mermaid from './mermaid.esm.mjs';
-      import { layouts } from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
+      // await mermaid.registerExternalDiagrams([example]);
       mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
+        // console.error('Mermaid error: ', err);
       };
+      // mermaid.initialize({
+      //   // theme: 'forest',
+      //   startOnLoad: true,
+      //   logLevel: 0,
+      //   flowchart: {
+      //     // defaultRenderer: 'elk',
+      //     useMaxWidth: false,
+      //     // htmlLabels: false,
+      //     htmlLabels: true,
+      //   },
+      //   // htmlLabels: false,
+      //   gantt: {
+      //     useMaxWidth: false,
+      //   },
+      //   useMaxWidth: false,
+      // });
       mermaid.initialize({
-        theme: 'base',
-        handdrawnSeed: 12,
-        look: 'handdrawn',
-        'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        layout: 'elk',
-        flowchart: { titleTopMargin: 10 },
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        fontFamily: 'courier',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        fontSize: 12,
+        theme: 'dark',
+        startOnLoad: true,
         logLevel: 0,
       });
       function callback() {

cypress/platform/knsv3.html

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

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

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
 
@@ -155,7 +155,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L222)
+[mermaidAPI.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L223)
 
 ---
 
@@ -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)
 
 ---
 
@@ -203,7 +203,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L199)
+[mermaidAPI.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L200)
 
 ---
 
@@ -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,7 +252,6 @@ 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
 

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@9.1.2+sha512.127dc83b9ea10c32be65d22a8efb4a65fb952e8fefbdfded39bdc3c97efc32d31b48b00420df2c1187ace28c921c902f0cb5a134a4d032b8b5295cbfa2c681e2",
+  "packageManager": "pnpm@9.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a",
   "keywords": [
     "diagram",
     "markdown",
@@ -25,8 +25,9 @@
     "dev:vite": "tsx .vite/server.ts",
     "dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev:vite",
     "release": "pnpm build",
-    "lint": "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=16384 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",
@@ -89,7 +86,7 @@
     "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",
@@ -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

@@ -445,18 +445,20 @@ export const addEdges = function (edges, diagObj, graph, svg) {
     edgeData.arrowTypeStart = 'arrow_open';
     edgeData.arrowTypeEnd = 'arrow_open';
 
-    /* eslint-disable no-fallthrough */
     switch (edge.type) {
+      // biome-ignore lint/suspicious/noFallthroughSwitchClause: Expected fallthrough
       case 'double_arrow_cross':
         edgeData.arrowTypeStart = 'arrow_cross';
       case 'arrow_cross':
         edgeData.arrowTypeEnd = 'arrow_cross';
         break;
+      // biome-ignore lint/suspicious/noFallthroughSwitchClause: Expected fallthrough
       case 'double_arrow_point':
         edgeData.arrowTypeStart = 'arrow_point';
       case 'arrow_point':
         edgeData.arrowTypeEnd = 'arrow_point';
         break;
+      // biome-ignore lint/suspicious/noFallthroughSwitchClause: Expected fallthrough
       case 'double_arrow_circle':
         edgeData.arrowTypeStart = 'arrow_circle';
       case 'arrow_circle':

packages/mermaid-layout-elk/package.json

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

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

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

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

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

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

@@ -1,588 +0,0 @@
-// @ts-nocheck File not ready to check types
-import { curveLinear } from 'd3';
-import ELK from 'elkjs/lib/elk.bundled.js';
-import mermaid from 'mermaid';
-import { findCommonAncestor } from './find-common-ancestor.js';
-import config from '../../mermaid/src/defaultConfig';
-
-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 {
-    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;
-      labelData.height = bbox.height - 8;
-      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 DAGA', 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;
-        const cluster = 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) {
-      case 'double_arrow_cross':
-        edgeData.arrowTypeStart = 'arrow_cross';
-      case 'arrow_cross':
-        edgeData.arrowTypeEnd = 'arrow_cross';
-        break;
-      case 'double_arrow_point':
-        edgeData.arrowTypeStart = 'arrow_point';
-      case 'arrow_point':
-        edgeData.arrowTypeEnd = 'arrow_point';
-        break;
-      case 'double_arrow_circle':
-        edgeData.arrowTypeStart = 'arrow_circle';
-      case 'arrow_circle':
-        edgeData.arrowTypeEnd = 'arrow_circle';
-        break;
-    }
-
-    let style = '';
-    let labelStyle = '';
-
-    switch (edge.stroke) {
-      case 'normal':
-        style = 'fill:none;';
-        if (defaultStyle !== undefined) {
-          style = defaultStyle;
-        }
-        if (defaultLabelStyle !== undefined) {
-          labelStyle = defaultLabelStyle;
-        }
-        edgeData.thickness = 'normal';
-        edgeData.pattern = 'solid';
-        break;
-      case 'dotted':
-        edgeData.thickness = 'normal';
-        edgeData.pattern = 'dotted';
-        edgeData.style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
-        break;
-      case 'thick':
-        edgeData.thickness = 'thick';
-        edgeData.pattern = 'solid';
-        edgeData.style = 'stroke-width: 3.5px;fill:none;';
-        break;
-    }
-    // if (edge.style !== undefined) {
-    //   const styles = getStylesFromArray(edge.style);
-    //   style = styles.style;
-    //   labelStyle = styles.labelStyle;
-    // }
-
-    edgeData.style = edgeData.style += style;
-    edgeData.labelStyle = edgeData.labelStyle += labelStyle;
-
-    const conf = getConfig();
-    if (edge.interpolate !== undefined) {
-      edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
-    } else if (edges.defaultInterpolate !== undefined) {
-      edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
-    } else {
-      edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
-    }
-
-    if (edge.text === undefined) {
-      if (edge.style !== undefined) {
-        edgeData.arrowheadStyle = 'fill: #333';
-      }
-    } else {
-      edgeData.arrowheadStyle = 'fill: #333';
-      edgeData.labelpos = 'c';
-    }
-
-    edgeData.labelType = edge.labelType;
-    edgeData.label = (edge?.text || '').replace(common.lineBreakRegex, '\n');
-
-    if (edge.style === undefined) {
-      edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';
-    }
-
-    edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
-
-    edgeData.id = linkId;
-    edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
-
-    const labelEl = 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.mergeEdges,
-      'elk.direction': 'DOWN',
-      'spacing.baseValue': 30,
-    },
-    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) {
-      log.trace('Subgraph XCX', node.id, node);
-      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.trace('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)
-    edge.start = nodeDb[edge.sources[0]];
-    edge.end = nodeDb[edge.targets[0]];
-    const sourceId = edge.start.id;
-    const targetId = edge.end.id;
-
-    const offset = calcOffset(sourceId, targetId, parentLookupDb);
-
-    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,
-        g,
-        data4Layout.diagramId
-      );
-
-      edge.x = edge.labels[0].x + offset.x + edge.labels[0].width / 2;
-      edge.y = edge.labels[0].y + offset.y + edge.labels[0].height / 2;
-      positionEdgeLabel(edge, paths);
-    }
-  });
-};

packages/mermaid-layout-elk/tsconfig.json

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

packages/mermaid-zenuml/package.json

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

packages/mermaid/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

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

packages/mermaid/scripts/docs.mts

@@ -52,6 +52,7 @@ import mm from 'micromatch';
 // @ts-ignore No typescript declaration file
 import flatmap from 'unist-util-flatmap';
 import { visit } from 'unist-util-visit';
+import { prettierConfig } from './prettier.js';
 
 export const MERMAID_RELEASE_VERSION = JSON.parse(readFileSync('../mermaid/package.json', 'utf8'))
   .version as string;
@@ -85,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,10 +190,7 @@ 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 = {
-      ...directive.themeVariables,
-      fontFamily: directive.fontFamily,
-    };
+    directive.themeVariables = { fontFamily: directive.fontFamily };
   }
 
   directives.push(directive);

packages/mermaid/src/config.type.ts

@@ -64,21 +64,6 @@ export interface MermaidConfig {
   theme?: 'default' | 'forest' | 'dark' | 'neutral' | 'null';
   themeVariables?: any;
   themeCSS?: string;
-  /**
-   * Defines which main look to use for the diagram.
-   *
-   */
-  look?: 'classic' | 'handdrawn' | 'slick';
-  /**
-   * Defines the seed to be used when using handdrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
-   *
-   */
-  handdrawnSeed?: number;
-  /**
-   * Defines which layout algorithm to use for rendering the diagram.
-   *
-   */
-  layout?: string;
   /**
    * The maximum allowed size of the users text diagram
    */
@@ -88,16 +73,6 @@ export interface MermaidConfig {
    *
    */
   maxEdges?: number;
-  /**
-   * Elk specific option that allows edge egdes to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram.
-   *
-   */
-  'elk.mergeEdges'?: boolean;
-  /**
-   * Elk specific option affedcting how nodes are placed.
-   *
-   */
-  'elk.nodePlacement.strategy'?: 'SIMPLE' | 'NETWORK_SIMPLEX' | 'LINEAR_SEGMENTS' | 'BRANDES_KOEPF';
   darkMode?: boolean;
   htmlLabels?: boolean;
   /**

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

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

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

packages/mermaid/src/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/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/svgDraw.js

@@ -78,28 +78,28 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) {
   x = labelPosition.x;
   y = labelPosition.y;
 
-  let p1_card_x, p1_card_y;
-  let p2_card_x, p2_card_y;
+  let p1CardX, p1CardY;
+  let p2CardX, p2CardY;
 
   if (l % 2 !== 0 && l > 1) {
-    let cardinality_1_point = utils.calcCardinalityPosition(
+    let cardinality1Point = utils.calcCardinalityPosition(
       relation.relation.type1 !== 'none',
       path.points,
       path.points[0]
     );
-    let cardinality_2_point = utils.calcCardinalityPosition(
+    let cardinality2Point = utils.calcCardinalityPosition(
       relation.relation.type2 !== 'none',
       path.points,
       path.points[l - 1]
     );
 
-    log.debug('cardinality_1_point ' + JSON.stringify(cardinality_1_point));
-    log.debug('cardinality_2_point ' + JSON.stringify(cardinality_2_point));
+    log.debug('cardinality_1_point ' + JSON.stringify(cardinality1Point));
+    log.debug('cardinality_2_point ' + JSON.stringify(cardinality2Point));
 
-    p1_card_x = cardinality_1_point.x;
-    p1_card_y = cardinality_1_point.y;
-    p2_card_x = cardinality_2_point.x;
-    p2_card_y = cardinality_2_point.y;
+    p1CardX = cardinality1Point.x;
+    p1CardY = cardinality1Point.y;
+    p2CardX = cardinality2Point.x;
+    p2CardY = cardinality2Point.y;
   }
 
   if (relation.title !== undefined) {
@@ -129,8 +129,8 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) {
     const g = elem.append('g').attr('class', 'cardinality');
     g.append('text')
       .attr('class', 'type1')
-      .attr('x', p1_card_x)
-      .attr('y', p1_card_y)
+      .attr('x', p1CardX)
+      .attr('y', p1CardY)
       .attr('fill', 'black')
       .attr('font-size', '6')
       .text(relation.relationTitle1);
@@ -139,8 +139,8 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) {
     const g = elem.append('g').attr('class', 'cardinality');
     g.append('text')
       .attr('class', 'type2')
-      .attr('x', p2_card_x)
-      .attr('y', p2_card_y)
+      .attr('x', p2CardX)
+      .attr('y', p2CardY)
       .attr('fill', 'black')
       .attr('font-size', '6')
       .text(relation.relationTitle2);

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

@@ -30,18 +30,18 @@ const setupDompurifyHooksIfNotSetup = (() => {
 })();
 
 function setupDompurifyHooks() {
-  const TEMPORARY_ATTRIBUTE = 'data-temp-href-target';
+  const temporaryAttribute = 'data-temp-href-target';
 
   DOMPurify.addHook('beforeSanitizeAttributes', (node: Element) => {
     if (node.tagName === 'A' && node.hasAttribute('target')) {
-      node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute('target') || '');
+      node.setAttribute(temporaryAttribute, node.getAttribute('target') || '');
     }
   });
 
   DOMPurify.addHook('afterSanitizeAttributes', (node: Element) => {
-    if (node.tagName === 'A' && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
-      node.setAttribute('target', node.getAttribute(TEMPORARY_ATTRIBUTE) || '');
-      node.removeAttribute(TEMPORARY_ATTRIBUTE);
+    if (node.tagName === 'A' && node.hasAttribute(temporaryAttribute)) {
+      node.setAttribute('target', node.getAttribute(temporaryAttribute) || '');
+      node.removeAttribute(temporaryAttribute);
       if (node.getAttribute('target') === '_blank') {
         node.setAttribute('rel', 'noopener');
       }

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

@@ -53,7 +53,7 @@ function hexagon(parent, bbox, node) {
  * @param bbox
  * @param node
  */
-function rect_left_inv_arrow(parent, bbox, node) {
+function rectLeftInvArrow(parent, bbox, node) {
   const w = bbox.width;
   const h = bbox.height;
   const points = [
@@ -75,7 +75,7 @@ function rect_left_inv_arrow(parent, bbox, node) {
  * @param bbox
  * @param node
  */
-function lean_right(parent, bbox, node) {
+function leanRight(parent, bbox, node) {
   const w = bbox.width;
   const h = bbox.height;
   const points = [
@@ -96,7 +96,7 @@ function lean_right(parent, bbox, node) {
  * @param bbox
  * @param node
  */
-function lean_left(parent, bbox, node) {
+function leanLeft(parent, bbox, node) {
   const w = bbox.width;
   const h = bbox.height;
   const points = [
@@ -138,7 +138,7 @@ function trapezoid(parent, bbox, node) {
  * @param bbox
  * @param node
  */
-function inv_trapezoid(parent, bbox, node) {
+function invTrapezoid(parent, bbox, node) {
   const w = bbox.width;
   const h = bbox.height;
   const points = [
@@ -159,7 +159,7 @@ function inv_trapezoid(parent, bbox, node) {
  * @param bbox
  * @param node
  */
-function rect_right_inv_arrow(parent, bbox, node) {
+function rectRightInvArrow(parent, bbox, node) {
   const w = bbox.width;
   const h = bbox.height;
   const points = [
@@ -308,22 +308,22 @@ export function addToRender(render) {
   render.shapes().cylinder = cylinder;
 
   // Add custom shape for box with inverted arrow on left side
-  render.shapes().rect_left_inv_arrow = rect_left_inv_arrow;
+  render.shapes().rect_left_inv_arrow = rectLeftInvArrow;
 
   // Add custom shape for box with inverted arrow on left side
-  render.shapes().lean_right = lean_right;
+  render.shapes().lean_right = leanRight;
 
   // Add custom shape for box with inverted arrow on left side
-  render.shapes().lean_left = lean_left;
+  render.shapes().lean_left = leanLeft;
 
   // Add custom shape for box with inverted arrow on left side
   render.shapes().trapezoid = trapezoid;
 
   // Add custom shape for box with inverted arrow on left side
-  render.shapes().inv_trapezoid = inv_trapezoid;
+  render.shapes().inv_trapezoid = invTrapezoid;
 
   // Add custom shape for box with inverted arrow on right side
-  render.shapes().rect_right_inv_arrow = rect_right_inv_arrow;
+  render.shapes().rect_right_inv_arrow = rectRightInvArrow;
 }
 
 /** @param addShape */
@@ -335,22 +335,22 @@ export function addToRenderV2(addShape) {
   addShape({ cylinder });
 
   // Add custom shape for box with inverted arrow on left side
-  addShape({ rect_left_inv_arrow });
+  addShape({ rect_left_inv_arrow: rectLeftInvArrow });
 
   // Add custom shape for box with inverted arrow on left side
-  addShape({ lean_right });
+  addShape({ lean_right: leanRight });
 
   // Add custom shape for box with inverted arrow on left side
-  addShape({ lean_left });
+  addShape({ lean_left: leanLeft });
 
   // Add custom shape for box with inverted arrow on left side
   addShape({ trapezoid });
 
   // Add custom shape for box with inverted arrow on left side
-  addShape({ inv_trapezoid });
+  addShape({ inv_trapezoid: invTrapezoid });
 
   // Add custom shape for box with inverted arrow on right side
-  addShape({ rect_right_inv_arrow });
+  addShape({ rect_right_inv_arrow: rectRightInvArrow });
 }
 
 /**

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

@@ -2,7 +2,6 @@ import { select } from 'd3';
 import utils from '../../utils.js';
 import { getConfig, defaultConfig } from '../../diagram-api/diagramAPI.js';
 import common from '../common/common.js';
-import type { LayoutData, LayoutMethod, Node, Edge } from '../../rendering-util/types.js';
 import { log } from '../../logger.js';
 import {
   setAccTitle,
@@ -756,55 +755,11 @@ export const lex = {
   firstGraph,
 };
 
-const getTypeFromVertex = (vertex: FlowVertex) => {
-  if (vertex.type === 'square') {
-    return 'squareRect';
-  }
-  if (vertex.type === 'round') {
-    return 'roundedRect';
-  }
-
-  return vertex.type || 'squareRect';
-};
-
-export const getData = () => {
-  const config = getConfig();
-  const nodes: Node[] = [];
-  const edges: Edge[] = [];
-
-  // extract(getRootDocV2());
-  // const diagramStates = getStates();
-  const useRough = config.look === 'handdrawn';
-  const n = getVertices();
-  n.forEach((vertex) => {
-    const node: Node = {
-      id: vertex.id,
-      label: vertex.text,
-      labelStyle: '',
-      padding: config.flowchart?.padding || 8,
-      cssStyles: vertex.styles.join(' '),
-      cssClasses: vertex.classes.join(' '),
-      shape: getTypeFromVertex(vertex),
-      dir: vertex.dir,
-      domId: vertex.domId,
-      type: undefined,
-      isGroup: false,
-      useRough,
-    };
-    nodes.push(node);
-  });
-
-  //const useRough = config.look === 'handdrawn';
-
-  return { nodes, edges, other: {}, config };
-};
-
 export default {
   defaultConfig: () => defaultConfig.flowchart,
   setAccTitle,
   getAccTitle,
   getAccDescription,
-  getData,
   setAccDescription,
   addVertex,
   lookUpDomId,

packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts

@@ -1,8 +1,7 @@
 // @ts-ignore: JISON doesn't support types
 import flowParser from './parser/flow.jison';
 import flowDb from './flowDb.js';
-// import flowRendererV2 from './flowRenderer-v2.js';
-import flowRendererV3 from './flowRenderer-v3-unified.js';
+import flowRendererV2 from './flowRenderer-v2.js';
 import flowStyles from './styles.js';
 import type { MermaidConfig } from '../../config.type.js';
 import { setConfig } from '../../diagram-api/diagramAPI.js';
@@ -10,8 +9,7 @@ import { setConfig } from '../../diagram-api/diagramAPI.js';
 export const diagram = {
   parser: flowParser,
   db: flowDb,
-  // renderer: flowRendererV2,
-  renderer: flowRendererV3,
+  renderer: flowRendererV2,
   styles: flowStyles,
   init: (cnf: MermaidConfig) => {
     if (!cnf.flowchart) {
@@ -20,7 +18,7 @@ export const diagram = {
     cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
     // flowchart-v2 uses dagre-wrapper, which doesn't have access to flowchart cnf
     setConfig({ flowchart: { arrowMarkerAbsolute: cnf.arrowMarkerAbsolute } });
-    flowRendererV3.setConf(cnf.flowchart);
+    flowRendererV2.setConf(cnf.flowchart);
     flowDb.clear();
     flowDb.setGen('gen-2');
   },

packages/mermaid/src/diagrams/flowchart/flowDiagram-v3-unified.ts

@@ -1,25 +0,0 @@
-// @ts-ignore: JISON doesn't support types
-import flowParser from './parser/flow.jison';
-import flowDb from './flowDb.js';
-import flowRendererV2 from './flowRenderer-v2.js';
-import flowStyles from './styles.js';
-import type { MermaidConfig } from '../../config.type.js';
-import { setConfig } from '../../diagram-api/diagramAPI.js';
-
-export const diagram = {
-  parser: flowParser,
-  db: flowDb,
-  renderer: flowRendererV2,
-  styles: flowStyles,
-  init: (cnf: MermaidConfig) => {
-    if (!cnf.flowchart) {
-      cnf.flowchart = {};
-    }
-    cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-    // flowchart-v2 uses dagre-wrapper, which doesn't have access to flowchart cnf
-    setConfig({ flowchart: { arrowMarkerAbsolute: cnf.arrowMarkerAbsolute } });
-    flowRendererV2.setConf(cnf.flowchart);
-    flowDb.clear();
-    flowDb.setGen('gen-2');
-  },
-};

packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js

@@ -29,8 +29,6 @@ export const setConf = function (cnf) {
  */
 export const addVertices = async function (vert, g, svgId, root, doc, diagObj) {
   const svg = root.select(`[id="${svgId}"]`);
-  // console.log('SVG:', svg, svg.node(), 'root:', root, root.node());
-
   const keys = vert.keys();
 
   // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
@@ -246,18 +244,20 @@ export const addEdges = async function (edges, g, diagObj) {
     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':
@@ -427,9 +427,9 @@ export const draw = async function (text, id, _version, diagObj) {
 
     selectAll('cluster').append('text');
 
-    for (let j = 0; j < subG.nodes.length; j++) {
-      log.info('Setting up subgraphs', subG.nodes[j], subG.id);
-      g.setParent(subG.nodes[j], subG.id);
+    for (const node of subG.nodes) {
+      log.info('Setting up subgraphs', node, subG.id);
+      g.setParent(node, subG.id);
     }
   }
   await addVertices(vert, g, id, root, doc, diagObj);

packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts

@@ -1,81 +0,0 @@
-import { log } from '../../logger.js';
-import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
-import type { LayoutData, LayoutMethod } from '../../rendering-util/types.js';
-import { getConfig } from '../../diagram-api/diagramAPI.js';
-import { render } from '../../rendering-util/render.js';
-import { getDiagramElements } from '../../rendering-util/insertElementsForSize.js';
-import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
-import { getDirection } from './flowDb.js';
-
-import utils from '../../utils.js';
-
-// Configuration
-const conf: Record<string, any> = {};
-
-export const setConf = function (cnf: Record<string, any>) {
-  const keys = Object.keys(cnf);
-  for (const key of keys) {
-    conf[key] = cnf[key];
-  }
-};
-
-export const getClasses = function (
-  text: string,
-  diagramObj: any
-): Record<string, DiagramStyleClassDef> {
-  // diagramObj.db.extract(diagramObj.db.getRootDocV2());
-  return diagramObj.db.getClasses();
-};
-
-export const draw = async function (text: string, id: string, _version: string, diag: any) {
-  log.info('REF0:');
-  log.info('Drawing state diagram (v2)', id);
-  const { securityLevel, state: conf, layout } = getConfig();
-
-  const DIR = getDirection();
-
-  // The getData method provided in all supported diagrams is used to extract the data from the parsed structure
-  // into the Layout data format
-  console.log('Before getData: ');
-  const data4Layout = diag.db.getData() as LayoutData;
-  console.log('Data: ', data4Layout);
-  // Create the root SVG - the element is the div containing the SVG element
-  const { element, svg } = getDiagramElements(id, securityLevel);
-
-  // // For some diagrams this call is not needed, but in the state diagram it is
-  // await insertElementsForSize(element, data4Layout);
-
-  // console.log('data4Layout:', data4Layout);
-
-  // // Now we have layout data with real sizes, we can perform the layout
-  // const data4Rendering = doLayout(data4Layout, id, _version, 'dagre-wrapper');
-
-  // // The performRender method provided in all supported diagrams is used to render the data
-  // performRender(data4Rendering);
-
-  data4Layout.type = diag.type;
-  // data4Layout.layoutAlgorithm = 'dagre-wrapper';
-  // data4Layout.layoutAlgorithm = 'elk';
-  data4Layout.layoutAlgorithm = layout;
-  data4Layout.direction = DIR;
-  data4Layout.nodeSpacing = conf?.nodeSpacing || 50;
-  data4Layout.rankSpacing = conf?.rankSpacing || 50;
-  data4Layout.markers = ['barb'];
-  data4Layout.diagramId = id;
-  console.log('REF1:', data4Layout);
-  await render(data4Layout, svg, element);
-  const padding = 8;
-  utils.insertTitle(
-    element,
-    'statediagramTitleText',
-    conf?.titleTopMargin || 0,
-    diag.db.getDiagramTitle()
-  );
-  setupViewPortForSVG(svg, padding, 'flowchart', conf?.useMaxWidth || false);
-};
-
-export default {
-  setConf,
-  getClasses,
-  draw,
-};

packages/mermaid/src/diagrams/flowchart/flowRenderer.js

@@ -339,14 +339,14 @@ export const draw = async function (text, id, _version, diagObj) {
 
     selectAll('cluster').append('text');
 
-    for (let j = 0; j < subG.nodes.length; j++) {
+    for (const subGNode of subG.nodes) {
       log.warn(
         'Setting subgraph',
-        subG.nodes[j],
-        diagObj.db.lookUpDomId(subG.nodes[j]),
+        subGNode,
+        diagObj.db.lookUpDomId(subGNode),
         diagObj.db.lookUpDomId(subG.id)
       );
-      g.setParent(diagObj.db.lookUpDomId(subG.nodes[j]), diagObj.db.lookUpDomId(subG.id));
+      g.setParent(diagObj.db.lookUpDomId(subGNode), diagObj.db.lookUpDomId(subG.id));
     }
   }
   await addVertices(vert, g, id, root, doc, diagObj);
@@ -429,8 +429,8 @@ export const draw = async function (text, id, _version, diagObj) {
       te.attr('transform', `translate(${xPos + _width / 2}, ${yPos + 14})`);
       te.attr('id', id + 'Text');
 
-      for (let j = 0; j < subG.classes.length; j++) {
-        clusterEl[0].classList.add(subG.classes[j]);
+      for (const subGClass of subG.classes) {
+        clusterEl[0].classList.add(subGClass);
       }
     }
   }

packages/mermaid/src/diagrams/flowchart/parser/flow-text.spec.js

@@ -591,7 +591,7 @@ describe('[Text] when parsing', () => {
 
   it('should throw error for escaping quotes in text state', function () {
     //prettier-ignore
-    const str = 'graph TD; A[This is a \"()\" in text];'; //eslint-disable-line no-useless-escape
+    const str = 'graph TD; A[This is a "()" in text];'; //eslint-disable-line no-useless-escape
 
     expect(() => flow.parser.parse(str)).toThrowError("got 'STR'");
   });

packages/mermaid/src/diagrams/gantt/ganttRenderer.js

@@ -724,6 +724,7 @@ export const draw = function (text, id, version, diagObj) {
       .attr('x', 10)
       .attr('y', function (d, i) {
         if (i > 0) {
+          // biome-ignore lint/correctness/noUnreachable: <explanation>
           for (let j = 0; j < i; j++) {
             prevGap += numOccurrences[i - 1][1];
             return (d[1] * theGap) / 2 + prevGap * theGap + theTopPad;

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

@@ -157,30 +157,40 @@ describe('when parsing a gantt diagram it', function () {
     ${'crit'}                | ${false}  | ${false} | ${true}  | ${false}
     ${'active'}              | ${false}  | ${false} | ${false} | ${true}
     ${'crit,milestone,done'} | ${true}   | ${true}  | ${true}  | ${false}
-  `)('should handle a task with tags $tags', ({ tags, milestone, done, crit, active }) => {
-    const str =
-      'gantt\n' +
-      'dateFormat YYYY-MM-DD\n' +
-      'title Adding gantt diagram functionality to mermaid\n' +
-      'section Documentation\n' +
-      'test task:' +
-      tags +
-      ', 2014-01-01, 2014-01-04';
+  `)(
+    'should handle a task with tags $tags',
+    ({
+      tags,
+      // Do not remove, these are used in eval.
+      milestone,
+      done,
+      crit,
+      active,
+    }) => {
+      const str =
+        'gantt\n' +
+        'dateFormat YYYY-MM-DD\n' +
+        'title Adding gantt diagram functionality to mermaid\n' +
+        'section Documentation\n' +
+        'test task:' +
+        tags +
+        ', 2014-01-01, 2014-01-04';
 
-    const allowedTags = ['active', 'done', 'crit', 'milestone'];
+      const allowedTags = ['active', 'done', 'crit', 'milestone'];
 
-    expect(parserFnConstructor(str)).not.toThrow();
+      expect(parserFnConstructor(str)).not.toThrow();
 
-    const tasks = parser.yy.getTasks();
+      const tasks = parser.yy.getTasks();
 
-    allowedTags.forEach(function (t) {
-      if (eval(t)) {
-        expect(tasks[0][t]).toBeTruthy();
-      } else {
-        expect(tasks[0][t]).toBeFalsy();
-      }
-    });
-  });
+      allowedTags.forEach(function (t) {
+        if (eval(t)) {
+          expect(tasks[0][t]).toBeTruthy();
+        } else {
+          expect(tasks[0][t]).toBeFalsy();
+        }
+      });
+    }
+  );
   it('should parse callback specifier with no args', function () {
     spyOn(ganttDb, 'setClickEvent');
     const str =
@@ -207,7 +217,6 @@ describe('when parsing a gantt diagram it', function () {
       'click cl2 call ganttTestClick("test0", test1, test2)\n';
 
     expect(parserFnConstructor(str)).not.toThrow();
-    const args = '"test1", "test2", "test3"';
     expect(ganttDb.setClickEvent).toHaveBeenCalledWith(
       'cl2',
       'ganttTestClick',

packages/mermaid/src/diagrams/git/gitGraphAst.js

@@ -147,9 +147,9 @@ export const branch = function (name, order) {
   }
 };
 
-export const merge = function (otherBranch, custom_id, override_type, custom_tag) {
+export const merge = function (otherBranch, customId, overrideType, customTag) {
   otherBranch = common.sanitizeText(otherBranch, getConfig());
-  custom_id = common.sanitizeText(custom_id, getConfig());
+  customId = common.sanitizeText(customId, getConfig());
 
   const currentCommit = commits.get(branches.get(curBranch));
   const otherCommit = commits.get(branches.get(otherBranch));
@@ -209,19 +209,19 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag
       expected: ['branch abc'],
     };
     throw error;
-  } else if (custom_id && commits.has(custom_id)) {
+  } else if (customId && commits.has(customId)) {
     let error = new Error(
       'Incorrect usage of "merge". Commit with id:' +
-        custom_id +
+        customId +
         ' already exists, use different custom Id'
     );
     error.hash = {
-      text: 'merge ' + otherBranch + custom_id + override_type + custom_tag,
-      token: 'merge ' + otherBranch + custom_id + override_type + custom_tag,
+      text: 'merge ' + otherBranch + customId + overrideType + customTag,
+      token: 'merge ' + otherBranch + customId + overrideType + customTag,
       line: '1',
       loc: { first_line: 1, last_line: 1, first_column: 1, last_column: 1 },
       expected: [
-        'merge ' + otherBranch + ' ' + custom_id + '_UNIQUE ' + override_type + ' ' + custom_tag,
+        'merge ' + otherBranch + ' ' + customId + '_UNIQUE ' + overrideType + ' ' + customTag,
       ],
     };
 
@@ -237,15 +237,15 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag
   // } else {
   // create merge commit
   const commit = {
-    id: custom_id ? custom_id : seq + '-' + getId(),
+    id: customId ? customId : seq + '-' + getId(),
     message: 'merged branch ' + otherBranch + ' into ' + curBranch,
     seq: seq++,
     parents: [head == null ? null : head.id, branches.get(otherBranch)],
     branch: curBranch,
     type: commitType.MERGE,
-    customType: override_type,
-    customId: custom_id ? true : false,
-    tag: custom_tag ? custom_tag : '',
+    customType: overrideType,
+    customId: customId ? true : false,
+    tag: customTag ? customTag : '',
   };
   head = commit;
   commits.set(commit.id, commit);

packages/mermaid/src/diagrams/git/gitGraphRenderer.js

@@ -405,11 +405,11 @@ const drawCommits = (svg, commits, modifyGraph) => {
             text.attr('transform', 'rotate(' + -45 + ', ' + x + ', ' + y + ')');
             labelBkg.attr('transform', 'rotate(' + -45 + ', ' + x + ', ' + y + ')');
           } else {
-            let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5;
-            let r_y = 10 + (bbox.width / 25) * 8.5;
+            let rX = -7.5 - ((bbox.width + 10) / 25) * 9.5;
+            let rY = 10 + (bbox.width / 25) * 8.5;
             wrapper.attr(
               'transform',
-              'translate(' + r_x + ', ' + r_y + ') rotate(' + -45 + ', ' + pos + ', ' + y + ')'
+              'translate(' + rX + ', ' + rY + ') rotate(' + -45 + ', ' + pos + ', ' + y + ')'
             );
           }
         }

packages/mermaid/src/diagrams/pie/pieRenderer.ts

@@ -40,9 +40,9 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
   const db = diagObj.db as PieDB;
   const globalConfig: MermaidConfig = getConfig();
   const pieConfig: Required<PieDiagramConfig> = cleanAndMerge(db.getConfig(), globalConfig.pie);
-  const MARGIN = 40;
-  const LEGEND_RECT_SIZE = 18;
-  const LEGEND_SPACING = 4;
+  const margin = 40;
+  const legendRectSize = 18;
+  const legendSpacing = 4;
   const height = 450;
   const pieWidth: number = height;
   const svg: SVG = selectSvgElement(id);
@@ -54,7 +54,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
   outerStrokeWidth ??= 2;
 
   const textPosition: number = pieConfig.textPosition;
-  const radius: number = Math.min(pieWidth, height) / 2 - MARGIN;
+  const radius: number = Math.min(pieWidth, height) / 2 - margin;
   // Shape helper to build arcs:
   const arcGenerator: d3.Arc<unknown, d3.PieArcDatum<D3Section>> = arc<d3.PieArcDatum<D3Section>>()
     .innerRadius(0)
@@ -139,25 +139,25 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
     .append('g')
     .attr('class', 'legend')
     .attr('transform', (_datum, index: number): string => {
-      const height = LEGEND_RECT_SIZE + LEGEND_SPACING;
+      const height = legendRectSize + legendSpacing;
       const offset = (height * color.domain().length) / 2;
-      const horizontal = 12 * LEGEND_RECT_SIZE;
+      const horizontal = 12 * legendRectSize;
       const vertical = index * height - offset;
       return 'translate(' + horizontal + ',' + vertical + ')';
     });
 
   legend
     .append('rect')
-    .attr('width', LEGEND_RECT_SIZE)
-    .attr('height', LEGEND_RECT_SIZE)
+    .attr('width', legendRectSize)
+    .attr('height', legendRectSize)
     .style('fill', color)
     .style('stroke', color);
 
   legend
     .data(arcs)
     .append('text')
-    .attr('x', LEGEND_RECT_SIZE + LEGEND_SPACING)
-    .attr('y', LEGEND_RECT_SIZE - LEGEND_SPACING)
+    .attr('x', legendRectSize + legendSpacing)
+    .attr('y', legendRectSize - legendSpacing)
     .text((datum: d3.PieArcDatum<D3Section>): string => {
       const { label, value } = datum.data;
       if (db.getShowData()) {
@@ -173,7 +173,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
       .map((node) => (node as Element)?.getBoundingClientRect().width ?? 0)
   );
 
-  const totalWidth = pieWidth + MARGIN + LEGEND_RECT_SIZE + LEGEND_SPACING + longestTextWidth;
+  const totalWidth = pieWidth + margin + legendRectSize + legendSpacing + longestTextWidth;
 
   // Set viewBox
   svg.attr('viewBox', `0 0 ${totalWidth} ${height}`);

packages/mermaid/src/diagrams/sankey/sankeyDB.ts

@@ -45,13 +45,13 @@ class SankeyNode {
   constructor(public ID: string) {}
 }
 
-const findOrCreateNode = (ID: string): SankeyNode => {
-  ID = common.sanitizeText(ID, getConfig());
+const findOrCreateNode = (id: string): SankeyNode => {
+  id = common.sanitizeText(id, getConfig());
 
-  let node = nodesMap.get(ID);
+  let node = nodesMap.get(id);
   if (node === undefined) {
-    node = new SankeyNode(ID);
-    nodesMap.set(ID, node);
+    node = new SankeyNode(id);
+    nodesMap.set(id, node);
     nodes.push(node);
   }
   return node;

packages/mermaid/src/diagrams/sequence/parser/sequenceDiagram.jison

@@ -33,7 +33,7 @@
 "actor"                                                   		{ this.begin('ID'); return 'participant_actor'; }
 "create"                                                        return 'create';
 "destroy"                                                       { this.begin('ID'); return 'destroy'; }
-<ID>[^\->:\n,;]+?([\-]*[^\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$)     { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
+<ID>[^\<->\->:\n,;]+?([\-]*[^\<->\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$)     { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
 <ALIAS>"as"                                                     { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
 <ALIAS>(?:)                                                     { this.popState(); this.popState(); return 'NEWLINE'; }
 "loop"                                                          { this.begin('LINE'); return 'loop'; }
@@ -73,9 +73,11 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 "off"															return 'off';
 ","                                                             return ',';
 ";"                                                             return 'NEWLINE';
-[^\+\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)))[\-]*[^\+\->:\n,;]+)*             { yytext = yytext.trim(); return 'ACTOR'; }
+[^\+\<->\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)))[\-]*[^\+\<->\->:\n,;]+)*             { yytext = yytext.trim(); return 'ACTOR'; }
 "->>"                                                           return 'SOLID_ARROW';
+"<<->>"                                                           return 'BIDIRECTIONAL_SOLID_ARROW';
 "-->>"                                                          return 'DOTTED_ARROW';
+"<<-->>"                                                          return 'BIDIRECTIONAL_DOTTED_ARROW';
 "->"                                                            return 'SOLID_OPEN_ARROW';
 "-->"                                                           return 'DOTTED_OPEN_ARROW';
 \-[x]                                                           return 'SOLID_CROSS';
@@ -310,7 +312,9 @@ signaltype
 	: SOLID_OPEN_ARROW  { $$ = yy.LINETYPE.SOLID_OPEN; }
 	| DOTTED_OPEN_ARROW { $$ = yy.LINETYPE.DOTTED_OPEN; }
 	| SOLID_ARROW       { $$ = yy.LINETYPE.SOLID; }
+  | BIDIRECTIONAL_SOLID_ARROW       { $$ = yy.LINETYPE.BIDIRECTIONAL_SOLID; }
 	| DOTTED_ARROW      { $$ = yy.LINETYPE.DOTTED; }
+	| BIDIRECTIONAL_DOTTED_ARROW      { $$ = yy.LINETYPE.BIDIRECTIONAL_DOTTED; }
 	| SOLID_CROSS       { $$ = yy.LINETYPE.SOLID_CROSS; }
 	| DOTTED_CROSS      { $$ = yy.LINETYPE.DOTTED_CROSS; }
 	| SOLID_POINT { $$ = yy.LINETYPE.SOLID_POINT; }

packages/mermaid/src/diagrams/sequence/sequenceDb.ts

@@ -328,6 +328,8 @@ export const LINETYPE = {
   BREAK_START: 30,
   BREAK_END: 31,
   PAR_OVER_START: 32,
+  BIDIRECTIONAL_SOLID: 33,
+  BIDIRECTIONAL_DOTTED: 34,
 };
 
 export const ARROWTYPE = {

packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js

@@ -516,6 +516,36 @@ Alice->>Bob:Hello Bob, how are you?`;
     expect(messages.length).toBe(1);
     expect(messages[0].type).toBe(diagram.db.LINETYPE.DOTTED);
   });
+  it('should handle bidirectional arrow messages', async () => {
+    const str = `
+sequenceDiagram
+Alice<<->>Bob:Hello Bob, how are you?`;
+
+    await mermaidAPI.parse(str);
+    const actors = diagram.db.getActors();
+    expect(actors.get('Alice').description).toBe('Alice');
+    expect(actors.get('Bob').description).toBe('Bob');
+
+    const messages = diagram.db.getMessages();
+
+    expect(messages.length).toBe(1);
+    expect(messages[0].type).toBe(diagram.db.LINETYPE.BIDIRECTIONAL_SOLID);
+  });
+  it('should handle bidirectional dotted arrow messages', async () => {
+    const str = `
+    sequenceDiagram
+    Alice<<-->>Bob:Hello Bob, how are you?`;
+
+    await mermaidAPI.parse(str);
+    const actors = diagram.db.getActors();
+    expect(actors.get('Alice').description).toBe('Alice');
+    expect(actors.get('Bob').description).toBe('Bob');
+
+    const messages = diagram.db.getMessages();
+
+    expect(messages.length).toBe(1);
+    expect(messages[0].type).toBe(diagram.db.LINETYPE.BIDIRECTIONAL_DOTTED);
+  });
   it('should handle actor activation', async () => {
     const str = `
 sequenceDiagram

packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts

@@ -436,7 +436,8 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
     type === diagObj.db.LINETYPE.DOTTED ||
     type === diagObj.db.LINETYPE.DOTTED_CROSS ||
     type === diagObj.db.LINETYPE.DOTTED_POINT ||
-    type === diagObj.db.LINETYPE.DOTTED_OPEN
+    type === diagObj.db.LINETYPE.DOTTED_OPEN ||
+    type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED
   ) {
     line.style('stroke-dasharray', '3, 3');
     line.attr('class', 'messageLine1');
@@ -462,6 +463,13 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
   if (type === diagObj.db.LINETYPE.SOLID || type === diagObj.db.LINETYPE.DOTTED) {
     line.attr('marker-end', 'url(' + url + '#arrowhead)');
   }
+  if (
+    type === diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID ||
+    type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED
+  ) {
+    line.attr('marker-start', 'url(' + url + '#arrowhead)');
+    line.attr('marker-end', 'url(' + url + '#arrowhead)');
+  }
   if (type === diagObj.db.LINETYPE.SOLID_POINT || type === diagObj.db.LINETYPE.DOTTED_POINT) {
     line.attr('marker-end', 'url(' + url + '#filled-head)');
   }
@@ -1036,6 +1044,8 @@ export const draw = async function (_text: string, id: string, _version: string,
         diagObj.db.LINETYPE.DOTTED_CROSS,
         diagObj.db.LINETYPE.SOLID_POINT,
         diagObj.db.LINETYPE.DOTTED_POINT,
+        diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID,
+        diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED,
       ].includes(msg.type)
     ) {
       sequenceIndex = sequenceIndex + sequenceIndexStep;
@@ -1416,6 +1426,8 @@ const buildMessageModel = function (msg, actors, diagObj) {
       diagObj.db.LINETYPE.DOTTED_CROSS,
       diagObj.db.LINETYPE.SOLID_POINT,
       diagObj.db.LINETYPE.DOTTED_POINT,
+      diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID,
+      diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED,
     ].includes(msg.type)
   ) {
     return {};
@@ -1423,7 +1435,7 @@ const buildMessageModel = function (msg, actors, diagObj) {
   const [fromLeft, fromRight] = activationBounds(msg.from, actors);
   const [toLeft, toRight] = activationBounds(msg.to, actors);
   const isArrowToRight = fromLeft <= toLeft;
-  const startx = isArrowToRight ? fromRight : fromLeft;
+  let startx = isArrowToRight ? fromRight : fromLeft;
   let stopx = isArrowToRight ? toLeft : toRight;
 
   // As the line width is considered, the left and right values will be off by 2.
@@ -1462,6 +1474,17 @@ const buildMessageModel = function (msg, actors, diagObj) {
     if (![diagObj.db.LINETYPE.SOLID_OPEN, diagObj.db.LINETYPE.DOTTED_OPEN].includes(msg.type)) {
       stopx += adjustValue(3);
     }
+
+    /**
+     * Shorten start position of bidirectional arrow to accommodate for second arrowhead
+     */
+    if (
+      [diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID, diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED].includes(
+        msg.type
+      )
+    ) {
+      startx -= adjustValue(3);
+    }
   }
 
   const allBounds = [fromLeft, fromRight, toLeft, toRight];

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

@@ -49,11 +49,11 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe
   rectElem.attr('height', rectData.height);
   rectElem.attr('rx', rectData.rx);
   rectElem.attr('ry', rectData.ry);
+  let linkY = 20;
   if (links != null) {
-    var linkY = 20;
     for (let key in links) {
-      var linkElem = g.append('a');
-      var sanitizedLink = sanitizeUrl(links[key]);
+      const linkElem = g.append('a');
+      const sanitizedLink = sanitizeUrl(links[key]);
       linkElem.attr('xlink:href', sanitizedLink);
       linkElem.attr('target', '_blank');
 
@@ -415,11 +415,11 @@ const drawActorTypeActor = async function (elem, actor, conf, isFooter) {
   const center = actor.x + actor.width / 2;
   const centerY = actorY + 80;
 
-  elem.lower();
+  const line = elem.append('g').lower();
 
   if (!isFooter) {
     actorCnt++;
-    elem
+    line
       .append('line')
       .attr('id', 'actor' + actorCnt)
       .attr('x1', center)
@@ -735,7 +735,7 @@ export const insertArrowHead = function (elem) {
     .attr('markerUnits', 'userSpaceOnUse')
     .attr('markerWidth', 12)
     .attr('markerHeight', 12)
-    .attr('orient', 'auto')
+    .attr('orient', 'auto-start-reverse')
     .append('path')
     .attr('d', 'M -1 0 L 10 5 L 0 10 z'); // this is actual shape for arrowhead
 };