Revert "Fix Requirement overflow"

.build/common.ts

@@ -1,9 +1,3 @@
-export interface PackageOptions {
-  name: string;
-  packageName: string;
-  file: string;
-}
-
 /**
  * Shared common options for both ESBuild and Vite
  */
@@ -33,14 +27,4 @@ export const packageOptions = {
     packageName: 'mermaid-layout-elk',
     file: 'layouts.ts',
   },
-  'mermaid-layout-tidy-tree': {
-    name: 'mermaid-layout-tidy-tree',
-    packageName: 'mermaid-layout-tidy-tree',
-    file: 'index.ts',
-  },
-  examples: {
-    name: 'mermaid-examples',
-    packageName: 'examples',
-    file: 'index.ts',
-  },
-} as const satisfies Record<string, PackageOptions>;
+} as const;

.build/jsonSchema.ts

@@ -19,15 +19,12 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'xyChart',
   'requirement',
   'mindmap',
-  'kanban',
   'timeline',
   'gitGraph',
   'c4',
   'sankey',
   'block',
   'packet',
-  'architecture',
-  'radar',
 ] as const;
 
 /**

.build/types.ts

@@ -10,16 +10,13 @@ const buildType = (packageName: string) => {
       console.log(out.toString());
     }
   } catch (e) {
+    console.error(e);
     if (e.stdout.length > 0) {
       console.error(e.stdout.toString());
     }
     if (e.stderr.length > 0) {
       console.error(e.stderr.toString());
     }
-    // Exit the build process if we are in CI
-    if (process.env.CI) {
-      throw new Error(`Failed to build types for ${packageName}`);
-    }
   }
 };
 

.changeset/README.md

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

.changeset/clean-wolves-turn.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Render newlines as spaces in class diagrams

.changeset/config.json

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

.changeset/crazy-loops-matter.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Handle arrows correctly when auto number is enabled

.changeset/hungry-baths-glow.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-feat: Added support for new participant types (`actor`, `boundary`, `control`, `entity`, `database`, `collections`, `queue`) in `sequenceDiagram`.

.changeset/hungry-guests-drive.md

@@ -1,7 +0,0 @@
----
-'mermaid': minor
-'@mermaid-js/layout-tidy-tree': minor
-'@mermaid-js/layout-elk': minor
----
-
-feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes

.changeset/revert-marked-dependency.md

@@ -1,9 +0,0 @@
----
-'mermaid': patch
----
-
-chore: revert marked dependency from ^15.0.7 to ^16.0.0
-
-- Reverted marked package version to ^16.0.0 for better compatibility
-- This is a dependency update that maintains API compatibility
-- All tests pass with the updated version

.cspell/code-terms.txt

@@ -26,7 +26,6 @@ concat
 controlx
 controly
 CSSCLASS
-curv
 CYLINDEREND
 CYLINDERSTART
 DAGA
@@ -47,16 +46,15 @@ edgesep
 EMPTYSTR
 enddate
 ERDIAGRAM
-eslint
 flatmap
 forwardable
 frontmatter
 funs
 gantt
 GENERICTYPE
+getBoundarys
 grammr
 graphtype
-halign
 iife
 interp
 introdcued
@@ -68,7 +66,6 @@ Kaufmann
 keyify
 LABELPOS
 LABELTYPE
-layoutstop
 lcov
 LEFTOF
 Lexa
@@ -88,7 +85,6 @@ NODIR
 NSTR
 outdir
 Qcontrolx
-QSTR
 reinit
 rels
 reqs
@@ -124,8 +120,6 @@ SUBROUTINEEND
 SUBROUTINESTART
 Subschemas
 substr
-SVGG
-SVGSVG
 TAGEND
 TAGSTART
 techn
@@ -142,7 +136,6 @@ tsdoc
 typeof
 typestr
 unshift
-urlsafe
 verifymethod
 VERIFYMTHD
 WARN_DOCSDIR_DOESNT_MATCH

.cspell/contributors.txt

@@ -2,11 +2,8 @@
 Ashish Jain
 cpettitt
 Dong Cai
-fourcube
-knsv
-Knut Sveidqvist
 Nikolay Rozhkov
 Peng Xiao
 Per Brolin
-Sidharth Vinod
 subhash-halder
+Vinod Sidharth

.cspell/cspell.config.yaml

@@ -28,9 +28,6 @@ dictionaryDefinitions:
   - name: suggestions
     words:
       - none
-      - disp
-      - subproc
-      - tria
     suggestWords:
       - seperator:separator
       - vertice:vertex

.cspell/libraries.txt

@@ -24,15 +24,11 @@ Doctave
 DokuWiki
 dompurify
 elkjs
-fcose
 fontawesome
-Fonticons
-Forgejo
 Foswiki
 Gitea
 graphlib
 Grav
-icones
 iconify
 Inkdrop
 jiti
@@ -62,7 +58,6 @@ rehype
 roughjs
 rscratch
 shiki
-Slidev
 sparkline
 sphinxcontrib
 ssim

.cspell/mermaid-terms.txt

@@ -1,23 +1,20 @@
 Adamiecki
 arrowend
-Bendpoints
 bmatrix
 braintree
 catmull
 compositTitleSize
-cose
-curv
 doublecircle
 elems
 gantt
 gitgraph
 gzipped
 handDrawn
-kanban
+knsv
+Knut
 marginx
 marginy
 Markdownish
-mermaidchart
 mermaidjs
 mindmap
 mindmaps
@@ -26,7 +23,6 @@ multigraph
 nodesep
 NOTEGROUP
 Pinterest
-procs
 rankdir
 ranksep
 rect
@@ -35,6 +31,7 @@ sandboxed
 siebling
 statediagram
 substate
+Sveidqvist
 unfixable
 Viewbox
 viewports

.cspell/misc-terms.txt

@@ -1,8 +1,6 @@
 BRANDES
-Buzan
 circo
 handDrawn
 KOEPF
 neato
 newbranch
-validify

.esbuild/build.ts

@@ -1,5 +1,5 @@
 import { build } from 'esbuild';
-import { cp, mkdir, readFile, rename, writeFile } from 'node:fs/promises';
+import { mkdir, writeFile } from 'node:fs/promises';
 import { packageOptions } from '../.build/common.js';
 import { generateLangium } from '../.build/generateLangium.js';
 import type { MermaidBuildOptions } from './util.js';
@@ -8,10 +8,7 @@ import { defaultOptions, getBuildConfig } from './util.js';
 const shouldVisualize = process.argv.includes('--visualize');
 
 const buildPackage = async (entryName: keyof typeof packageOptions) => {
-  const commonOptions: MermaidBuildOptions = {
-    ...defaultOptions,
-    options: packageOptions[entryName],
-  } as const;
+  const commonOptions: MermaidBuildOptions = { ...defaultOptions, entryName } as const;
   const buildConfigs: MermaidBuildOptions[] = [
     // package.mjs
     { ...commonOptions },
@@ -31,27 +28,6 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
       // mermaid.js
       { ...iifeOptions },
       // mermaid.min.js
-      { ...iifeOptions, minify: true, metafile: shouldVisualize },
-      // mermaid.tiny.min.js
-      {
-        ...iifeOptions,
-        minify: true,
-        includeLargeFeatures: false,
-        metafile: shouldVisualize,
-        sourcemap: false,
-      }
-    );
-  }
-  if (entryName === 'mermaid-zenuml') {
-    const iifeOptions: MermaidBuildOptions = {
-      ...commonOptions,
-      format: 'iife',
-      globalName: 'mermaid-zenuml',
-    };
-    buildConfigs.push(
-      // mermaid-zenuml.js
-      { ...iifeOptions },
-      // mermaid-zenuml.min.js
       { ...iifeOptions, minify: true, metafile: shouldVisualize }
     );
   }
@@ -64,7 +40,7 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
         continue;
       }
       const fileName = Object.keys(metafile.outputs)
-        .find((file) => !file.includes('chunks') && file.endsWith('js'))!
+        .find((file) => !file.includes('chunks') && file.endsWith('js'))
         .replace('dist/', '');
       // Upload metafile into https://esbuild.github.io/analyze/
       await writeFile(`stats/${fileName}.meta.json`, JSON.stringify(metafile));
@@ -78,21 +54,6 @@ const handler = (e) => {
   process.exit(1);
 };
 
-const buildTinyMermaid = async () => {
-  await mkdir('./packages/tiny/dist', { recursive: true });
-  await rename(
-    './packages/mermaid/dist/mermaid.tiny.min.js',
-    './packages/tiny/dist/mermaid.tiny.js'
-  );
-  // Copy version from mermaid's package.json to tiny's package.json
-  const mermaidPkg = JSON.parse(await readFile('./packages/mermaid/package.json', 'utf8'));
-  const tinyPkg = JSON.parse(await readFile('./packages/tiny/package.json', 'utf8'));
-  tinyPkg.version = mermaidPkg.version;
-
-  await writeFile('./packages/tiny/package.json', JSON.stringify(tinyPkg, null, 2) + '\n');
-  await cp('./packages/mermaid/CHANGELOG.md', './packages/tiny/CHANGELOG.md');
-};
-
 const main = async () => {
   await generateLangium();
   await mkdir('stats', { recursive: true });
@@ -101,7 +62,6 @@ const main = async () => {
   for (const pkg of packageNames) {
     await buildPackage(pkg).catch(handler);
   }
-  await buildTinyMermaid();
 };
 
 void main();

.esbuild/server.ts

@@ -9,18 +9,13 @@ import { generateLangium } from '../.build/generateLangium.js';
 import { defaultOptions, getBuildConfig } from './util.js';
 
 const configs = Object.values(packageOptions).map(({ packageName }) =>
-  getBuildConfig({
-    ...defaultOptions,
-    minify: false,
-    core: false,
-    options: packageOptions[packageName],
-  })
+  getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: packageName })
 );
 const mermaidIIFEConfig = getBuildConfig({
   ...defaultOptions,
   minify: false,
   core: false,
-  options: packageOptions.mermaid,
+  entryName: 'mermaid',
   format: 'iife',
 });
 configs.push(mermaidIIFEConfig);

.esbuild/util.ts

@@ -3,7 +3,7 @@ import { fileURLToPath } from 'url';
 import type { BuildOptions } from 'esbuild';
 import { readFileSync } from 'fs';
 import jsonSchemaPlugin from './jsonSchemaPlugin.js';
-import type { PackageOptions } from '../.build/common.js';
+import { packageOptions } from '../.build/common.js';
 import { jisonPlugin } from './jisonPlugin.js';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
@@ -13,16 +13,14 @@ export interface MermaidBuildOptions extends BuildOptions {
   core: boolean;
   metafile: boolean;
   format: 'esm' | 'iife';
-  options: PackageOptions;
-  includeLargeFeatures: boolean;
+  entryName: keyof typeof packageOptions;
 }
 
-export const defaultOptions: Omit<MermaidBuildOptions, 'entryName' | 'options'> = {
+export const defaultOptions: Omit<MermaidBuildOptions, 'entryName'> = {
   minify: false,
   metafile: false,
   core: false,
   format: 'esm',
-  includeLargeFeatures: true,
 } as const;
 
 const buildOptions = (override: BuildOptions): BuildOptions => {
@@ -41,18 +39,12 @@ const buildOptions = (override: BuildOptions): BuildOptions => {
   };
 };
 
-const getFileName = (
-  fileName: string,
-  { core, format, minify, includeLargeFeatures }: MermaidBuildOptions
-) => {
+const getFileName = (fileName: string, { core, format, minify }: MermaidBuildOptions) => {
   if (core) {
     fileName += '.core';
   } else if (format === 'esm') {
     fileName += '.esm';
   }
-  if (!includeLargeFeatures) {
-    fileName += '.tiny';
-  }
   if (minify) {
     fileName += '.min';
   }
@@ -60,29 +52,20 @@ const getFileName = (
 };
 
 export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
-  const {
-    core,
-    format,
-    options: { name, file, packageName },
-    globalName = 'mermaid',
-    includeLargeFeatures,
-    ...rest
-  } = options;
-
+  const { core, entryName, metafile, format, minify } = options;
   const external: string[] = ['require', 'fs', 'path'];
+  const { name, file, packageName } = packageOptions[entryName];
   const outFileName = getFileName(name, options);
   const output: BuildOptions = buildOptions({
-    ...rest,
     absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
     entryPoints: {
       [outFileName]: `src/${file}`,
     },
-    globalName,
+    metafile,
+    minify,
     logLevel: 'info',
     chunkNames: `chunks/${outFileName}/[name]-[hash]`,
     define: {
-      // This needs to be stringified for esbuild
-      includeLargeFeatures: `${includeLargeFeatures}`,
       'import.meta.vitest': 'undefined',
     },
   });
@@ -101,12 +84,11 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
   if (format === 'iife') {
     output.format = 'iife';
     output.splitting = false;
-    const originalGlobalName = output.globalName ?? 'mermaid';
-    output.globalName = `__esbuild_esm_mermaid_nm[${JSON.stringify(originalGlobalName)}]`;
+    output.globalName = '__esbuild_esm_mermaid';
     // Workaround for removing the .default access in esbuild IIFE.
     // https://github.com/mermaid-js/mermaid/pull/4109#discussion_r1292317396
     output.footer = {
-      js: `globalThis[${JSON.stringify(originalGlobalName)}] = globalThis.${output.globalName}.default;`,
+      js: 'globalThis.mermaid = globalThis.__esbuild_esm_mermaid.default;',
     };
     output.outExtension = { '.js': '.js' };
   } else {

.github/ISSUE_TEMPLATE/config.yml

@@ -4,7 +4,7 @@ contact_links:
     url: https://github.com/mermaid-js/mermaid/discussions
     about: Ask the Community questions or share your own graphs in our discussions.
   - name: Discord
-    url: https://discord.gg/sKeNQX4Wtj
+    url: https://discord.gg/AgrbSrBer3
     about: Join our Community on Discord for Help and a casual chat.
   - name: Documentation
     url: https://mermaid.js.org

.github/ISSUE_TEMPLATE/theme_proposal.yml

@@ -29,7 +29,7 @@ body:
       label: Colors
       description: |-
         A detailed list of the different colour values to use.
-        See the [list of currently used variable names](https://mermaid-js.github.io/mermaid/#/theming?id=theme-variables-reference-table)
+        A list of currently used variable names can be found [here](https://mermaid-js.github.io/mermaid/#/theming?id=theme-variables-reference-table)
       placeholder: |-
         - background: #f4f4f4
         - primaryColor: #fff4dd

.github/lychee.toml

@@ -44,23 +44,7 @@ exclude = [
 "https://chromewebstore.google.com",
 
 # Drupal 403
-"https://(www.)?drupal.org",
-
-# Phbpp 403
-"https://(www.)?phpbb.com",
-
-# Swimm returns 404, even though the link is valid
-"https://docs.swimm.io",
-
-# Certificate Error
-"https://noteshub.app",
-
-# Timeout
-"https://huehive.co",
-"https://foswiki.org",
-"https://www.gnu.org",
-"https://redmine.org",
-"https://mermaid-preview.com"
+"https://(www.)?drupal.org"
 ]
 
 # Exclude all private IPs from checking.

.github/pull_request_template.md

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

.github/release-drafter.yml

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

.github/stale.yml

@@ -15,5 +15,5 @@ markComment: >
   If you are still interested in this issue and it is still relevant you can comment to revive it.
 # Comment to post when closing a stale issue. Set to `false` to disable
 closeComment: >
-  This issue has been automatically closed due to a lack of activity. 
+  This issue has been been automatically closed due to a lack of activity. 
   This is done to maintain a clean list of issues that the community is interested in developing.

.github/workflows/autofix.yml

@@ -2,24 +2,20 @@ name: autofix.ci # needed to securely identify the workflow
 
 on:
   pull_request:
-    branches-ignore:
-      - 'renovate/**'
 permissions:
   contents: read
 
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
 jobs:
   autofix:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -42,4 +38,4 @@ jobs:
         working-directory: ./packages/mermaid
         run: pnpm run docs:build
 
-      - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 # main
+      - uses: autofix-ci/action@ff86a557419858bb967097bfc916833f5647fa8c

.github/workflows/build-docs.yml

@@ -8,8 +8,6 @@ on:
   pull_request:
   merge_group:
 
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
 permissions:
   contents: read
 
@@ -18,12 +16,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: pnpm/action-setup@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version-file: '.node-version'

.github/workflows/build.yml

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

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

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

.github/workflows/checks.yml

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

.github/workflows/codeql.yml

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

.github/workflows/dependency-review.yml

@@ -15,6 +15,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout Repository'
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@v4
       - name: 'Dependency Review'
-        uses: actions/dependency-review-action@3b139cfc5fae8b618d3eae3675e383bb1769c019 # v4.5.0
+        uses: actions/dependency-review-action@v4

.github/workflows/e2e-applitools.yml

@@ -11,8 +11,6 @@ on:
         default: master
         description: 'Parent branch to use for PRs'
 
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
 permissions:
   contents: read
 
@@ -23,37 +21,38 @@ env:
 jobs:
   e2e-applitools:
     runs-on: ubuntu-latest
+    container:
+      image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
+      options: --user 1001
     steps:
       - if: ${{ ! env.USE_APPLI }}
         name: Warn if not using Applitools
         run: |
           echo "::error,title=Not using Applitools::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
 
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.node-version'
 
       - if: ${{ env.USE_APPLI }}
         name: Notify applitools of new batch
         # Copied from docs https://applitools.com/docs/topics/integrations/github-integration-ci-setup.html
+        run: curl -L -d '' -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"
         env:
           # e.g. mermaid-js/mermaid/my-branch
           APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
           APPLITOOLS_PARENT_BRANCH: ${{ github.event.inputs.parent_branch }}
           APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
           APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
-        uses: wei/curl@012398a392d02480afa2720780031f8621d5f94c
-        with:
-          args: -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"
 
       - name: Cypress run
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@v4
         id: cypress
         with:
           start: pnpm run dev

.github/workflows/e2e-timings.yml

@@ -1,70 +0,0 @@
-name: E2E - Generate Timings
-
-on:
-  # run this workflow every night at 3am
-  schedule:
-    - cron: '28 3 * * *'
-  # or when the user triggers it from GitHub Actions page
-  workflow_dispatch:
-
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
-permissions:
-  contents: write
-  pull-requests: write
-
-jobs:
-  timings:
-    runs-on: ubuntu-latest
-    container:
-      image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
-      options: --user 1001
-    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
-      - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
-        with:
-          node-version-file: '.node-version'
-      - name: Install dependencies
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
-        with:
-          runTests: false
-
-      - name: Cypress run
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
-        id: cypress
-        with:
-          install: false
-          start: pnpm run dev:coverage
-          wait-on: 'http://localhost:9000'
-          browser: chrome
-          publish-summary: false
-        env:
-          VITEST_COVERAGE: true
-          CYPRESS_COMMIT: ${{ github.sha }}
-          SPLIT: 1
-          SPLIT_INDEX: 0
-          SPLIT_FILE: 'cypress/timings.json'
-
-      - name: Compare timings
-        id: compare
-        run: |
-          OUTPUT=$(pnpm tsx scripts/compare-timings.ts)
-          echo "$OUTPUT" >> $GITHUB_STEP_SUMMARY
-
-          echo "output<<EOF" >> $GITHUB_OUTPUT
-          echo "$OUTPUT" >> $GITHUB_OUTPUT
-          echo "EOF" >> $GITHUB_OUTPUT
-
-      - name: Commit and create pull request
-        uses: peter-evans/create-pull-request@18e469570b1cf0dfc11d60ec121099f8ff3e617a
-        with:
-          add-paths: |
-            cypress/timings.json
-          commit-message: 'chore: update E2E timings'
-          branch: update-timings
-          title: Update E2E Timings
-          body: ${{ steps.compare.outputs.output }}
-          delete-branch: true
-          sign-commits: true

.github/workflows/e2e.yml

@@ -2,15 +2,11 @@ name: E2E
 
 on:
   push:
-    branches:
-      - develop
-      - master
-      - release/**
+    branches-ignore:
+      - 'gh-readonly-queue/**'
   pull_request:
   merge_group:
 
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
 permissions:
   contents: read
 
@@ -28,8 +24,7 @@ env:
       ) || 
       github.event.before
     }}
-  RUN_VISUAL_TEST: >-
-    ${{ github.repository == 'mermaid-js/mermaid' && (github.event_name != 'pull_request' || !startsWith(github.head_ref, 'renovate/')) }}
+  shouldRunParallel: ${{ secrets.CYPRESS_RECORD_KEY != '' && !(github.event_name == 'push' && github.ref == 'refs/heads/develop') }}
 jobs:
   cache:
     runs-on: ubuntu-latest
@@ -37,29 +32,30 @@ jobs:
       image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
       options: --user 1001
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.node-version'
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
+        uses: actions/cache@v4
         with:
+          save-always: true
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
       # If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
       - name: Switch to base branch
         if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@v4
         with:
           ref: ${{ env.targetHash }}
 
       - name: Install dependencies
         if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@v6
         with:
           # just perform install
           runTests: false
@@ -80,28 +76,28 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        containers: [1, 2, 3, 4, 5]
+        containers: [1, 2, 3, 4]
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.node-version'
 
       # These cached snapshots are downloaded, providing the reference snapshots.
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache/restore@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
+        uses: actions/cache/restore@v4
         with:
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
       - name: Install dependencies
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@v6
         with:
           runTests: false
 
@@ -117,8 +113,11 @@ jobs:
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@v6
         id: cypress
+        # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
+        # Otherwise (e.g. if running from fork), we run on a single container only
+        if: ${{ env.shouldRunParallel == 'true' || ( matrix.containers == 1 ) }}
         with:
           install: false
           start: pnpm run dev:coverage
@@ -126,20 +125,19 @@ jobs:
           browser: chrome
           # Disable recording if we don't have an API key
           # e.g. if this action was run from a fork
-          record: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.CYPRESS_RECORD_KEY != '' }}
+          record: ${{ env.shouldRunParallel == 'true' }}
+          parallel: ${{ env.shouldRunParallel == 'true' }}
         env:
-          ARGOS_PARALLEL: ${{ env.RUN_VISUAL_TEST == 'true' }}
-          ARGOS_PARALLEL_TOTAL: ${{ env.RUN_VISUAL_TEST == 'true' && strategy.job-total || 1 }}
-          ARGOS_PARALLEL_INDEX: ${{ env.RUN_VISUAL_TEST == 'true' && matrix.containers || 1 }}
-          CYPRESS_COMMIT: ${{ github.sha }}
-          CYPRESS_RECORD_KEY: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.CYPRESS_RECORD_KEY || ''}}
-          SPLIT: ${{ strategy.job-total }}
-          SPLIT_INDEX: ${{ strategy.job-index }}
-          SPLIT_FILE: 'cypress/timings.json'
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true
+          CYPRESS_COMMIT: ${{ github.sha }}
+          ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
+          ARGOS_PARALLEL: ${{ env.shouldRunParallel == 'true' }}
+          ARGOS_PARALLEL_TOTAL: 4
+          ARGOS_PARALLEL_INDEX: ${{ matrix.containers }}
 
       - name: Upload Coverage to Codecov
-        uses: codecov/codecov-action@13ce06bfc6bbe3ecf90edbbf1bc32fe5978ca1d3 # v5.3.1
+        uses: codecov/codecov-action@v4
         # Run step only pushes to develop and pull_requests
         if: ${{ steps.cypress.conclusion == 'success' && (github.event_name == 'pull_request' || github.ref == 'refs/heads/develop')}}
         with:

.github/workflows/issue-triage.yml

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

.github/workflows/link-checker.yml

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

.github/workflows/lint.yml

@@ -4,32 +4,26 @@ on:
   push:
   merge_group:
   pull_request:
+    types:
+      - opened
+      - synchronize
+      - ready_for_review
   workflow_dispatch:
 
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
 permissions:
   contents: write
 
 jobs:
-  docker-lint:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-
-      - uses: hadolint/hadolint-action@54c9adbab1582c2ef04b2016b760714a4bfde3cf # v3.1.0
-        with:
-          verbose: true
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: pnpm/action-setup@v4
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -88,10 +82,3 @@ jobs:
         working-directory: ./packages/mermaid
         continue-on-error: ${{ github.event_name == 'push' }}
         run: pnpm run docs:verify
-
-      - uses: testomatio/check-tests@0ea638fcec1820cf2e7b9854fdbdd04128a55bd4 # stable
-        with:
-          framework: cypress
-          tests: './cypress/e2e/**/**.spec.js'
-          token: ${{ secrets.GITHUB_TOKEN }}
-          has-tests-label: true

.github/workflows/pr-labeler.yml

@@ -22,36 +22,10 @@ jobs:
       pull-requests: write # write permission is required to label PRs
     steps:
       - name: Label PR
-        uses: release-drafter/release-drafter@b1476f6e6eb133afa41ed8589daba6dc69b4d3f5 # v6.1.0
+        uses: release-drafter/release-drafter@v6
         with:
           config-name: pr-labeler.yml
           disable-autolabeler: false
           disable-releaser: true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Add "Sponsored by MermaidChart" label
-        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const prNumber = context.payload.pull_request.number;
-            const { data: commits } = await github.rest.pulls.listCommits({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              pull_number: prNumber,
-            });
-
-            const isSponsored = commits.every(
-              (c) => c.commit.author.email?.endsWith('@mermaidchart.com')
-            );
-
-            if (isSponsored) {
-              console.log('PR is sponsored. Adding label.');
-              await github.rest.issues.addLabels({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: prNumber,
-                labels: ['Sponsored by MermaidChart'],
-              });
-            }

.github/workflows/publish-docs.yml

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

.github/workflows/release-draft.yml

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

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

@@ -9,14 +9,14 @@ jobs:
   publish-preview:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: pnpm/action-setup@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -28,7 +28,7 @@ jobs:
           CYPRESS_CACHE_FOLDER: .cache/Cypress
 
       - name: Install Json
-        run: npm i json@11.0.0 --global
+        run: npm i json --global
 
       - name: Publish
         working-directory: ./packages/mermaid

.github/workflows/release-preview.yml

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

.github/workflows/release-publish.yml

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

.github/workflows/release.yml

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

.github/workflows/scorecard.yml

@@ -1,37 +0,0 @@
-name: Scorecard supply-chain security
-on:
-  branch_protection_rule:
-  push:
-    branches:
-      - develop
-  schedule:
-    - cron: 29 15 * * 0
-permissions: read-all
-jobs:
-  analysis:
-    name: Scorecard analysis
-    permissions:
-      id-token: write
-      security-events: write
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-        with:
-          persist-credentials: false
-      - name: Run analysis
-        uses: ossf/scorecard-action@f49aabe0b5af0936a0987cfb85d86b75731b0186 # v2.4.1
-        with:
-          results_file: results.sarif
-          results_format: sarif
-          publish_results: true
-      - name: Upload artifact
-        uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1
-        with:
-          name: SARIF file
-          path: results.sarif
-          retention-days: 5
-      - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
-        with:
-          sarif_file: results.sarif

.github/workflows/test.yml

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

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

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

.github/workflows/update-browserlist.yml

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

.github/workflows/validate-lockfile.yml

@@ -1,70 +0,0 @@
-name: Validate pnpm-lock.yaml
-
-on:
-  pull_request:
-    paths:
-      - 'pnpm-lock.yaml'
-      - '**/package.json'
-      - '.github/workflows/validate-lockfile.yml'
-
-jobs:
-  validate-lockfile:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
-
-      - name: Validate pnpm-lock.yaml entries
-        id: validate # give this step an ID so we can reference its outputs
-        run: |
-          issues=()
-
-          # 1) No tarball references
-          if grep -qF 'tarball:' pnpm-lock.yaml; then
-            issues+=("• Tarball references found (forbidden)")
-          fi
-
-          # 2) No unwanted vitepress paths
-          if grep -qF 'packages/mermaid/src/vitepress' pnpm-lock.yaml; then
-            issues+=("• Disallowed path 'packages/mermaid/src/vitepress' present. Run \`rm -rf packages/mermaid/src/vitepress && pnpm install\` to regenerate.")
-          fi
-
-          # 3) Lockfile only changes when package.json changes
-          git diff --name-only ${{ github.event.pull_request.base.sha }} ${{ github.sha }} > changed.txt
-          if grep -q '^pnpm-lock.yaml$' changed.txt && ! grep -q 'package.json' changed.txt; then
-            issues+=("• pnpm-lock.yaml changed without any package.json modification")
-          fi
-
-          # If any issues, output them and fail
-          if [ ${#issues[@]} -gt 0 ]; then
-            # Use the new GITHUB_OUTPUT approach to set a multiline output
-            {
-              echo "errors<<EOF"
-              printf '%s\n' "${issues[@]}"
-              echo "EOF"
-            } >> $GITHUB_OUTPUT
-            exit 1
-          fi
-
-      - name: Comment on PR if validation failed
-        if: failure()
-        uses: peter-evans/create-or-update-comment@v4
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          issue-number: ${{ github.event.pull_request.number }}
-          body: |
-            The following issue(s) were detected:
-            ${{ steps.validate.outputs.errors }}
-
-            Please address these and push an update.
-
-            _Posted automatically by GitHub Actions_

.gitignore

@@ -4,7 +4,6 @@ node_modules/
 coverage/
 .idea/
 .pnpm-store/
-.instructions/
 
 dist
 v8-compile-cache-0

.hadolint.yaml

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

.husky/pre-commit

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

.node-version

@@ -1 +1 @@
-22.14.0
+20.12.2

.vite/build.ts

@@ -94,10 +94,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       }),
       ...visualizerOptions(packageName, core),
     ],
-    define: {
-      // Needs to be string
-      includeLargeFeatures: 'true',
-    },
   };
 
   if (watch && config.build) {

CHANGELOG.md

@@ -1 +0,0 @@
-./packages/mermaid/CHANGELOG.md

COMPONENT_EXAMPLES.md

@@ -1,488 +0,0 @@
-# Mermaid Key Components: Code Examples
-
-This document provides concrete code examples demonstrating how Mermaid's key components work together.
-
-## Diagram Type Examples
-
-### Flowchart Diagram Structure
-
-```typescript
-// packages/mermaid/src/diagrams/flowchart/flowDiagram.ts
-export const diagram = {
-  parser: flowParser, // JISON parser for flowchart syntax
-  get db() {
-    // Database for managing diagram state
-    return new FlowDB();
-  },
-  renderer, // SVG renderer function
-  styles: flowStyles, // CSS styles specific to flowcharts
-  init: (cnf: MermaidConfig) => {
-    if (!cnf.flowchart) {
-      cnf.flowchart = {};
-    }
-    // Configuration initialization
-    cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-  },
-};
-```
-
-### Sequence Diagram Structure
-
-```typescript
-// packages/mermaid/src/diagrams/sequence/sequenceDiagram.ts
-export const diagram: DiagramDefinition = {
-  parser, // JISON parser for sequence syntax
-  get db() {
-    return new SequenceDB(); // Manages participants, messages, loops
-  },
-  renderer, // Draws actors, lifelines, messages
-  styles, // Sequence-specific styling
-  init: (cnf: MermaidConfig) => {
-    if (!cnf.sequence) {
-      cnf.sequence = {};
-    }
-    if (cnf.wrap) {
-      cnf.sequence.wrap = cnf.wrap;
-    }
-  },
-};
-```
-
-## Core API Examples
-
-### Main API Usage Pattern
-
-```typescript
-// packages/mermaid/src/mermaidAPI.ts
-
-/**
- * Parse and validate diagram syntax
- */
-async function parse(text: string, parseOptions?: ParseOptions): Promise<ParseResult> {
-  addDiagrams(); // Load all diagram types
-  const { code, config } = processAndSetConfigs(text);
-  const diagram = await getDiagramFromText(code);
-  return { diagramType: diagram.type, config };
-}
-
-/**
- * Render diagram to SVG
- */
-async function render(
-  id: string,
-  text: string,
-  svgContainingElement?: Element
-): Promise<RenderResult> {
-  const { diagramType, config } = await parse(text, { suppressErrors: true });
-
-  // Create diagram instance
-  const diagram = new Diagram(text, {}, diagramType);
-
-  // Render to SVG
-  const svgCode = await diagram.renderer.draw(text, id, diagram);
-
-  return {
-    diagramType,
-    svg: svgCode,
-    bindFunctions: diagram.db.bindFunctions,
-  };
-}
-```
-
-### Diagram Detection Example
-
-```typescript
-// packages/mermaid/src/diagram-api/detectType.ts
-
-export const detectors: Record<string, DiagramDetector> = {
-  flowchart: {
-    detector: (text: string) => /^\s*graph|flowchart/.test(text),
-    loader: async () => {
-      const { diagram } = await import('../diagrams/flowchart/flowDiagram.js');
-      return { id: 'flowchart', diagram };
-    },
-  },
-  sequence: {
-    detector: (text: string) => /^\s*sequenceDiagram/.test(text),
-    loader: async () => {
-      const { diagram } = await import('../diagrams/sequence/sequenceDiagram.js');
-      return { id: 'sequence', diagram };
-    },
-  },
-};
-
-export const detectType = function (text: string, config?: MermaidConfig): string {
-  for (const [diagramType, { detector }] of Object.entries(detectors)) {
-    if (detector(text, config)) {
-      return diagramType;
-    }
-  }
-  throw new UnknownDiagramError(`No diagram type detected for text: ${text}`);
-};
-```
-
-## Rendering System Examples
-
-### Layout Algorithm Integration
-
-```typescript
-// packages/mermaid/src/rendering-util/render.ts
-
-interface LayoutAlgorithm {
-  render(
-    layoutData: LayoutData,
-    svg: SVG,
-    helpers: InternalHelpers,
-    options?: RenderOptions
-  ): Promise<void>;
-}
-
-const layoutAlgorithms: Record<string, LayoutLoaderDefinition> = {};
-
-export const registerLayoutLoaders = (loaders: LayoutLoaderDefinition[]) => {
-  for (const loader of loaders) {
-    layoutAlgorithms[loader.name] = loader;
-  }
-};
-
-// Default layout loaders
-const registerDefaultLayoutLoaders = () => {
-  registerLayoutLoaders([
-    {
-      name: 'dagre',
-      loader: async () => await import('./layout-algorithms/dagre/index.js'),
-    },
-    {
-      name: 'elk',
-      loader: async () => await import('./layout-algorithms/elk/index.js'),
-    },
-  ]);
-};
-
-export const render = async (data4Layout: LayoutData, svg: SVG) => {
-  const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
-  const layoutRenderer = await layoutDefinition.loader();
-  return layoutRenderer.render(data4Layout, svg, internalHelpers);
-};
-```
-
-### Unified Renderer Example
-
-```typescript
-// packages/mermaid/src/diagrams/er/erRenderer-unified.ts
-
-export const draw = async function (text: string, id: string, _version: string, diag: any) {
-  const { securityLevel, er: conf, layout } = getConfig();
-
-  // Extract data from parsed structure into Layout data format
-  const data4Layout = diag.db.getData() as LayoutData;
-
-  // Create the root SVG element
-  const svg = getDiagramElement(id, securityLevel);
-
-  // Configure layout
-  data4Layout.type = diag.type;
-  data4Layout.layoutAlgorithm = getRegisteredLayoutAlgorithm(layout);
-  data4Layout.config.flowchart!.nodeSpacing = conf?.nodeSpacing || 140;
-  data4Layout.config.flowchart!.rankSpacing = conf?.rankSpacing || 80;
-  data4Layout.direction = diag.db.getDirection();
-  data4Layout.markers = ['only_one', 'zero_or_one', 'one_or_more', 'zero_or_more'];
-  data4Layout.diagramId = id;
-
-  // Render using layout algorithm
-  await render(data4Layout, svg);
-
-  // Setup viewport
-  setupViewPortForSVG(svg, conf.padding, conf.useMaxWidth);
-};
-```
-
-## Class Diagram Renderer Examples
-
-### Traditional Renderer (v2)
-
-```javascript
-// packages/mermaid/src/diagrams/class/classRenderer.js
-
-export const draw = function (text, id, _version, diagObj) {
-  const conf = getConfig().class;
-
-  // Create directed graph using graphlib
-  const g = new graphlib.Graph({
-    multigraph: true,
-  });
-
-  g.setGraph({
-    isMultiGraph: true,
-  });
-
-  // Add classes as nodes
-  classes.forEach(function (classDef) {
-    const node = svgDraw.drawClass(diagram, classDef, conf, diagObj);
-    idCache[node.id] = node;
-    g.setNode(node.id, node);
-  });
-
-  // Add relationships as edges
-  relations.forEach(function (relation) {
-    g.setEdge(
-      getGraphId(relation.id1),
-      getGraphId(relation.id2),
-      { relation: relation },
-      relation.title || 'DEFAULT'
-    );
-  });
-
-  // Apply layout
-  dagreLayout(g);
-
-  // Position nodes
-  g.nodes().forEach(function (v) {
-    if (v !== undefined && g.node(v) !== undefined) {
-      root
-        .select('#' + (diagObj.db.lookUpDomId(v) || v))
-        .attr(
-          'transform',
-          'translate(' +
-            (g.node(v).x - g.node(v).width / 2) +
-            ',' +
-            (g.node(v).y - g.node(v).height / 2) +
-            ' )'
-        );
-    }
-  });
-
-  // Draw edges
-  g.edges().forEach(function (e) {
-    if (e !== undefined && g.edge(e) !== undefined) {
-      svgDraw.drawEdge(diagram, g.edge(e), g.edge(e).relation, conf, diagObj);
-    }
-  });
-};
-```
-
-### Modern Unified Renderer (v3)
-
-```typescript
-// packages/mermaid/src/diagrams/class/classRenderer-v3-unified.ts
-
-export const draw = async function (text: string, id: string, _version: string, diag: any) {
-  const { securityLevel, state: conf, layout } = getConfig();
-
-  // Extract data from parsed structure into Layout data format
-  const data4Layout = diag.db.getData() as LayoutData;
-
-  // Create the root SVG element
-  const svg = getDiagramElement(id, securityLevel);
-
-  // Configure layout settings
-  data4Layout.type = diag.type;
-  data4Layout.layoutAlgorithm = getRegisteredLayoutAlgorithm(layout);
-  data4Layout.nodeSpacing = conf?.nodeSpacing || 50;
-  data4Layout.rankSpacing = conf?.rankSpacing || 50;
-  data4Layout.markers = ['aggregation', 'extension', 'composition', 'dependency', 'lollipop'];
-  data4Layout.diagramId = id;
-
-  // Use unified rendering system
-  await render(data4Layout, svg);
-
-  // Add title
-  utils.insertTitle(
-    svg,
-    'classDiagramTitleText',
-    conf?.titleTopMargin ?? 25,
-    diag.db.getDiagramTitle()
-  );
-
-  setupViewPortForSVG(svg, padding, conf?.useMaxWidth);
-};
-```
-
-## Configuration System Example
-
-### Type-Safe Configuration
-
-```typescript
-// packages/mermaid/src/config.type.ts
-
-export interface MermaidConfig {
-  theme?: 'default' | 'dark' | 'forest' | 'neutral';
-  themeVariables?: any;
-  startOnLoad?: boolean;
-  securityLevel?: 'strict' | 'loose' | 'antiscript' | 'sandbox';
-  deterministicIds?: boolean;
-  fontSize?: number;
-
-  // Diagram-specific configurations
-  flowchart?: FlowchartDiagramConfig;
-  sequence?: SequenceDiagramConfig;
-  class?: ClassDiagramConfig;
-  state?: StateDiagramConfig;
-  er?: ErDiagramConfig;
-  // ... other diagram configs
-}
-
-export interface FlowchartDiagramConfig extends BaseDiagramConfig {
-  diagramPadding?: number;
-  htmlLabels?: boolean;
-  nodeSpacing?: number;
-  rankSpacing?: number;
-  curve?: CurveStyle;
-  useMaxWidth?: boolean;
-  defaultRenderer?: 'dagre-d3' | 'dagre-wrapper' | 'elk';
-}
-```
-
-### Configuration API
-
-```typescript
-// packages/mermaid/src/config.ts
-
-let config: MermaidConfig = assignWithDepth({}, defaultConfig);
-let directives: MermaidConfig = {};
-let currentConfig: MermaidConfig = assignWithDepth({}, defaultConfig);
-
-export const getConfig = (): MermaidConfig => currentConfig;
-
-export const setConfig = (conf: MermaidConfig): MermaidConfig => {
-  updateCurrentConfig(conf);
-  return getConfig();
-};
-
-export const reset = (): void => {
-  config = assignWithDepth({}, defaultConfig);
-  directives = {};
-  updateCurrentConfig(config);
-};
-
-const updateCurrentConfig = (conf: MermaidConfig): void => {
-  currentConfig = assignWithDepth({}, config, directives, conf);
-};
-```
-
-## Web Integration Example
-
-### Simple Usage
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-  </head>
-  <body>
-    <div class="mermaid">
-      graph TD A[Start] --> B{Decision} B -->|Yes| C[Action 1] B -->|No| D[Action 2]
-    </div>
-
-    <script>
-      mermaid.initialize({
-        startOnLoad: true,
-        theme: 'dark',
-      });
-    </script>
-  </body>
-</html>
-```
-
-### Advanced Programmatic Usage
-
-```javascript
-// Advanced integration example
-import mermaid from 'mermaid';
-
-// Initialize with configuration
-mermaid.initialize({
-  startOnLoad: false,
-  theme: 'default',
-  securityLevel: 'strict',
-  flowchart: {
-    useMaxWidth: true,
-    htmlLabels: true,
-  },
-  sequence: {
-    actorMargin: 50,
-    boxMargin: 10,
-    boxTextMargin: 5,
-    noteMargin: 10,
-    messageMargin: 35,
-  },
-});
-
-// Render specific diagram
-async function renderDiagram(definition, element) {
-  try {
-    const { svg } = await mermaid.render('graphDiv', definition);
-    element.innerHTML = svg;
-  } catch (error) {
-    console.error('Error rendering diagram:', error);
-  }
-}
-
-// Parse and validate before rendering
-async function validateAndRender(definition, element) {
-  try {
-    const parseResult = await mermaid.parse(definition);
-    console.log('Valid diagram type:', parseResult.diagramType);
-
-    const { svg } = await mermaid.render('graphDiv', definition);
-    element.innerHTML = svg;
-  } catch (error) {
-    console.error('Invalid diagram syntax:', error);
-  }
-}
-```
-
-## Extension Example: Custom Diagram Type
-
-### Custom Diagram Definition
-
-```typescript
-// example-diagram/exampleDiagram.ts
-import type { DiagramDefinition } from '../../diagram-api/types.js';
-
-export const diagram: DiagramDefinition = {
-  parser: {
-    parse: (text: string) => {
-      // Custom parsing logic
-    },
-  },
-  get db() {
-    return {
-      clear: () => {},
-      // ... other required DB methods
-    };
-  },
-  renderer: {
-    draw: async (text: string, id: string, version: string) => {
-      // Custom rendering logic
-      const svg = d3.select(`#${id}`);
-      // ... create SVG elements
-    },
-  },
-  styles: () => `
-    .example-class {
-      fill: #ff6b6b;
-      stroke: #333;
-    }
-  `,
-};
-```
-
-### Registration and Usage
-
-```typescript
-// Register custom diagram
-import { registerDiagram } from 'mermaid';
-import { diagram } from './exampleDiagram.js';
-
-registerDiagram('example', diagram, (text) => text.includes('example'));
-
-// Now can use in text:
-const diagramText = `
-example
-  nodeA --> nodeB
-`;
-```
-
-This comprehensive set of examples demonstrates how Mermaid's modular architecture enables powerful diagram generation while maintaining extensibility and type safety.

DEMONSTRATION.html

@@ -1,210 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Mermaid Functionality Demonstration</title>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
-    <style>
-      body {
-        font-family: Arial, sans-serif;
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 20px;
-        background-color: #f5f5f5;
-      }
-      .demo-section {
-        background: white;
-        margin: 20px 0;
-        padding: 20px;
-        border-radius: 8px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-      .demo-title {
-        color: #333;
-        border-bottom: 2px solid #007acc;
-        padding-bottom: 10px;
-        margin-bottom: 20px;
-      }
-      .mermaid {
-        text-align: center;
-        margin: 20px 0;
-      }
-      .code-block {
-        background: #f8f9fa;
-        border: 1px solid #e9ecef;
-        border-radius: 4px;
-        padding: 15px;
-        font-family: 'Courier New', monospace;
-        margin: 10px 0;
-        overflow-x: auto;
-      }
-      .header {
-        text-align: center;
-        color: #007acc;
-        margin-bottom: 30px;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="header">
-      <h1>🧜‍♀️ Mermaid Functionality Demonstration</h1>
-      <p>A showcase of Mermaid's key diagram types and capabilities</p>
-    </div>
-
-    <div class="demo-section">
-      <h2 class="demo-title">1. Flowchart - Decision Flow</h2>
-      <p><strong>Use case:</strong> Process flows, decision trees, algorithm visualization</p>
-      <div class="code-block">
-        flowchart TD A[Start] --> B{Is it working?} B -->|Yes| C[Great!] B -->|No| D[Debug] D -->
-        E[Fix issues] E --> B C --> F[Deploy]
-      </div>
-      <div class="mermaid">
-        flowchart TD A[Start] --> B{Is it working?} B -->|Yes| C[Great!] B -->|No| D[Debug] D -->
-        E[Fix issues] E --> B C --> F[Deploy]
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h2 class="demo-title">2. Sequence Diagram - API Interaction</h2>
-      <p><strong>Use case:</strong> API documentation, system interactions, communication flows</p>
-      <div class="code-block">
-        sequenceDiagram participant C as Client participant S as Server participant DB as Database
-        C->>S: Request user data S->>DB: Query user table DB-->>S: Return user data S-->>C: JSON
-        response Note right of C: Client processes data
-      </div>
-      <div class="mermaid">
-        sequenceDiagram participant C as Client participant S as Server participant DB as Database
-        C->>S: Request user data S->>DB: Query user table DB-->>S: Return user data S-->>C: JSON
-        response Note right of C: Client processes data
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h2 class="demo-title">3. Class Diagram - Software Architecture</h2>
-      <p>
-        <strong>Use case:</strong> Object-oriented design, software architecture, database schemas
-      </p>
-      <div class="code-block">
-        classDiagram class User { +String name +String email +login() +logout() } class Order { +int
-        id +Date date +float total +calculate() } class Product { +String name +float price +int
-        stock } User ||--o{ Order : places Order }|--|| Product : contains
-      </div>
-      <div class="mermaid">
-        classDiagram class User { +String name +String email +login() +logout() } class Order { +int
-        id +Date date +float total +calculate() } class Product { +String name +float price +int
-        stock } User ||--o{ Order : places Order }|--|| Product : contains
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h2 class="demo-title">4. Git Graph - Development Workflow</h2>
-      <p>
-        <strong>Use case:</strong> Git workflow documentation, branching strategies, release
-        processes
-      </p>
-      <div class="code-block">
-        gitGraph commit id: "Initial" commit id: "Setup" branch feature checkout feature commit id:
-        "Feature A" commit id: "Feature B" checkout main merge feature commit id: "Release v1.0"
-        branch hotfix checkout hotfix commit id: "Fix bug" checkout main merge hotfix commit id:
-        "Release v1.1"
-      </div>
-      <div class="mermaid">
-        gitGraph commit id: "Initial" commit id: "Setup" branch feature checkout feature commit id:
-        "Feature A" commit id: "Feature B" checkout main merge feature commit id: "Release v1.0"
-        branch hotfix checkout hotfix commit id: "Fix bug" checkout main merge hotfix commit id:
-        "Release v1.1"
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h2 class="demo-title">5. Gantt Chart - Project Timeline</h2>
-      <p><strong>Use case:</strong> Project management, milestone tracking, resource planning</p>
-      <div class="code-block">
-        gantt title Development Timeline dateFormat YYYY-MM-DD section Planning Requirements :done,
-        req, 2024-01-01, 2024-01-07 Design :done, des, 2024-01-08, 2024-01-14 section Development
-        Backend API :active, api, 2024-01-15, 2024-02-15 Frontend :frontend, after api, 20d Testing
-        :test, after frontend, 10d section Deployment Staging :staging, after test, 3d Production
-        :prod, after staging, 2d
-      </div>
-      <div class="mermaid">
-        gantt title Development Timeline dateFormat YYYY-MM-DD section Planning Requirements :done,
-        req, 2024-01-01, 2024-01-07 Design :done, des, 2024-01-08, 2024-01-14 section Development
-        Backend API :active, api, 2024-01-15, 2024-02-15 Frontend :frontend, after api, 20d Testing
-        :test, after frontend, 10d section Deployment Staging :staging, after test, 3d Production
-        :prod, after staging, 2d
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h2 class="demo-title">6. State Diagram - System States</h2>
-      <p><strong>Use case:</strong> State machines, user workflows, system behavior modeling</p>
-      <div class="code-block">
-        stateDiagram-v2 [*] --> Idle Idle --> Loading : start_request Loading --> Success :
-        request_success Loading --> Error : request_failed Success --> Idle : reset Error --> Idle :
-        retry Error --> [*] : give_up
-      </div>
-      <div class="mermaid">
-        stateDiagram-v2 [*] --> Idle Idle --> Loading : start_request Loading --> Success :
-        request_success Loading --> Error : request_failed Success --> Idle : reset Error --> Idle :
-        retry Error --> [*] : give_up
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h2 class="demo-title">7. Pie Chart - Data Visualization</h2>
-      <p><strong>Use case:</strong> Data visualization, market share, resource allocation</p>
-      <div class="code-block">
-        pie title Technology Stack Usage "JavaScript" : 35 "TypeScript" : 25 "Python" : 20 "Java" :
-        15 "Other" : 5
-      </div>
-      <div class="mermaid">
-        pie title Technology Stack Usage "JavaScript" : 35 "TypeScript" : 25 "Python" : 20 "Java" :
-        15 "Other" : 5
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h2 class="demo-title">8. User Journey - UX Flow</h2>
-      <p>
-        <strong>Use case:</strong> User experience mapping, customer journeys, process optimization
-      </p>
-      <div class="code-block">
-        journey title User Registration Journey section Discovery Visit homepage : 5: User Read
-        about features : 4: User Check pricing : 3: User section Registration Click signup : 3: User
-        Fill form : 2: User Verify email : 1: User, System section Onboarding Complete profile : 4:
-        User Take tutorial : 5: User First task : 5: User
-      </div>
-      <div class="mermaid">
-        journey title User Registration Journey section Discovery Visit homepage : 5: User Read
-        about features : 4: User Check pricing : 3: User section Registration Click signup : 3: User
-        Fill form : 2: User Verify email : 1: User, System section Onboarding Complete profile : 4:
-        User Take tutorial : 5: User First task : 5: User
-      </div>
-    </div>
-
-    <script>
-      // Initialize Mermaid with configuration
-      mermaid.initialize({
-        startOnLoad: true,
-        theme: 'default',
-        securityLevel: 'loose',
-        flowchart: {
-          useMaxWidth: true,
-          htmlLabels: true,
-        },
-        sequence: {
-          actorMargin: 50,
-          width: 150,
-          height: 65,
-          boxMargin: 10,
-        },
-        gantt: {
-          useMaxWidth: true,
-          leftMargin: 75,
-          gridLineStartPadding: 35,
-        },
-      });
-    </script>
-  </body>
-</html>

Dockerfile

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

MERMAID_OVERVIEW.md

@@ -1,249 +0,0 @@
-# Mermaid: Overview of Main Functionality and Key Components
-
-## What is Mermaid?
-
-Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development by enabling users to create easily modifiable diagrams that can be integrated into production scripts and documentation workflows.
-
-**Core Philosophy**: "Doc-Rot is a Catch-22 that Mermaid helps to solve" - providing a solution to the common problem where diagramming costs precious developer time and gets outdated quickly, but not having diagrams hurts productivity and organizational learning.
-
-## Main Functionality
-
-### 1. **Text-to-Diagram Conversion**
-
-- Converts Markdown-inspired text definitions into SVG diagrams
-- Supports over 15+ different diagram types
-- Real-time rendering and preview capabilities
-- Integration with popular platforms (GitHub, GitLab, etc.)
-
-### 2. **Interactive Diagram Creation**
-
-- Live Editor for interactive diagram creation
-- Web integration module for embedding in web pages
-- Dynamic rendering and modification capabilities
-
-### 3. **Extensible Architecture**
-
-- Plugin system for custom diagram types
-- Configurable themes and styling
-- Multiple layout algorithms support
-- External diagram definition loading
-
-## Key Components
-
-### Core Architecture
-
-#### 1. **Entry Points & API Layer**
-
-- **`mermaid.ts`**: Main web page integration module, provides the primary interface for users
-- **`mermaidAPI.ts`**: Core API containing functions for parsing and rendering diagrams
-- **`Diagram.ts`**: Main diagram abstraction class that handles diagram lifecycle
-
-#### 2. **Configuration System**
-
-- **`config.ts`** & **`config.type.ts`**: Centralized configuration management
-- **`defaultConfig.ts`**: Default configuration values
-- Supports runtime configuration updates and diagram-specific settings
-
-#### 3. **Parser & Detection System**
-
-- **`diagram-api/detectType.ts`**: Automatic diagram type detection from text input
-- **`diagram-api/loadDiagram.ts`**: Dynamic loading and registration of diagram parsers
-- **`preprocess.ts`**: Text preprocessing and directive handling
-
-### Diagram Types (Located in `/src/diagrams/`)
-
-Mermaid supports a comprehensive set of diagram types, each with its own parser, renderer, and styling:
-
-#### **Core Diagram Types:**
-
-1. **Flowchart** - Flow diagrams with nodes, edges, and decision points
-2. **Sequence** - Interaction diagrams between actors over time
-3. **Class** - Object-oriented modeling diagrams
-4. **State** - State machine and statechart diagrams
-5. **Gantt** - Project timeline and scheduling charts
-6. **Git** - Git branching and merging visualizations
-
-#### **Specialized Diagram Types:**
-
-7. **Pie** - Data visualization pie charts
-8. **User Journey** - User experience journey mapping
-9. **C4** - C4 architecture diagrams (Context, Container, Component, Code)
-10. **ER (Entity-Relationship)** - Database modeling diagrams
-11. **Mindmap** - Hierarchical mind mapping
-12. **Architecture** - System architecture diagrams
-13. **Block** - Block diagrams
-14. **Kanban** - Kanban board visualization
-15. **Packet** - Network packet diagrams
-16. **Quadrant** - Four-quadrant analysis charts
-17. **Radar** - Radar/spider charts
-18. **Requirement** - Requirements modeling
-19. **Sankey** - Flow diagrams showing quantities
-20. **Timeline** - Chronological event timelines
-21. **Treemap** - Hierarchical data visualization
-22. **XYChart** - Scatter plots and line charts
-
-#### **Diagram Structure Pattern:**
-
-Each diagram type follows a consistent structure:
-
-```typescript
-export const diagram = {
-  parser: parserDefinition, // JISON or custom parser
-  db: databaseClass, // Data management and state
-  renderer: rendererFunction, // SVG rendering logic
-  styles: stylingDefinition, // CSS styling
-  init: initializationFunction, // Setup and configuration
-};
-```
-
-### Rendering System
-
-#### 1. **Core Rendering (`rendering-util/`)**
-
-- **`render.ts`**: Main rendering orchestrator with pluggable layout algorithms
-- **`createGraph.ts`** & **`createText.ts`**: Basic shape and text creation
-- **`insertElementsForSize.ts`**: Element sizing and positioning
-- **`setupViewPortForSVG.ts`**: SVG viewport management
-
-#### 2. **Layout Algorithms (`layout-algorithms/`)**
-
-- **Dagre**: Default hierarchical layout algorithm
-- **Elk**: Advanced layout engine with multiple algorithms
-- **Cose-Bilkent**: Physics-based layout for complex graphs
-- **Tidy-Tree**: Tree layout algorithm
-
-#### 3. **Styling & Theming**
-
-- **`themes/`**: Multiple built-in themes (default, dark, forest, neutral, etc.)
-- **`styles.ts`**: CSS-in-JS styling system
-- Theme inheritance and customization capabilities
-
-### Security & Safety
-
-#### 1. **Security Levels**
-
-- **Sandbox Mode**: Renders diagrams in sandboxed iframes to prevent script execution
-- **Loose Mode**: Standard rendering with sanitization
-- **Strict Mode**: Enhanced security with limited functionality
-
-#### 2. **Content Sanitization**
-
-- **DOMPurify Integration**: XSS protection for user-generated content
-- Input validation and sanitization
-- Safe handling of external content
-
-### Extension & Integration System
-
-#### 1. **External Diagram Support**
-
-- Dynamic loading of custom diagram types
-- Plugin architecture for extending functionality
-- External diagram definition interface
-
-#### 2. **Layout Extension**
-
-- Pluggable layout algorithms
-- Custom layout loader registration
-- Runtime algorithm selection
-
-#### 3. **Icon System**
-
-- **`icons.ts`**: Icon pack management
-- SVG icon rendering
-- Customizable icon libraries
-
-### Package Structure (Monorepo)
-
-The repository uses a monorepo structure with pnpm workspaces:
-
-#### **Main Packages:**
-
-- **`packages/mermaid/`**: Core Mermaid library
-- **`packages/mermaid-example-diagram/`**: Example external diagram
-- **`packages/mermaid-layout-elk/`**: Elk layout algorithm
-- **`packages/mermaid-layout-tidy-tree/`**: Tidy tree layout
-- **`packages/mermaid-zenuml/`**: ZenUML integration
-- **`packages/parser/`**: Parser utilities
-- **`packages/tiny/`**: Minimal Mermaid build
-
-#### **Supporting Infrastructure:**
-
-- **`docs/`**: Documentation and website content
-- **`demos/`**: Example implementations
-- **`cypress/`**: End-to-end testing
-- **`tests/`**: Unit and integration tests
-
-### Development & Build System
-
-#### 1. **Build Pipeline**
-
-- **ESBuild**: Fast JavaScript bundling
-- **TypeScript**: Type checking and compilation
-- **Vite**: Development server and hot reloading
-
-#### 2. **Testing Strategy**
-
-- **Vitest**: Unit testing framework
-- **Cypress**: End-to-end visual regression testing
-- **Applitools**: Visual testing integration
-- **Argos**: PR visual regression testing
-
-#### 3. **Code Quality**
-
-- **ESLint**: JavaScript/TypeScript linting
-- **Prettier**: Code formatting
-- **Husky**: Git hooks for pre-commit checks
-- **CSpell**: Spell checking for documentation
-
-## Integration Ecosystem
-
-### Official Integrations
-
-- **Mermaid Chart**: Commercial diagram editor and collaboration platform
-- **GitHub**: Native Mermaid support in GitHub Markdown
-- **GitLab**: Built-in Mermaid rendering
-
-### Community Integrations
-
-- **Productivity Tools**: Notion, Confluence, Obsidian, etc.
-- **Development Tools**: VS Code, IntelliJ, various editors
-- **Documentation**: GitBook, Docusaurus, VuePress, etc.
-- **Communication**: Slack, Discord, Microsoft Teams
-- **CMS/Wiki Systems**: MediaWiki, TiddlyWiki, etc.
-
-## Usage Patterns
-
-### 1. **Direct Web Integration**
-
-```javascript
-import mermaid from 'mermaid';
-mermaid.initialize({ startOnLoad: true });
-```
-
-### 2. **Programmatic API Usage**
-
-```javascript
-const { svg } = await mermaid.render('graphDiv', 'graph TD; A-->B');
-```
-
-### 3. **Configuration & Customization**
-
-```javascript
-mermaid.initialize({
-  theme: 'dark',
-  flowchart: { useMaxWidth: true },
-  sequence: { actorMargin: 50 },
-});
-```
-
-## Future Extensibility
-
-The architecture is designed for extensibility through:
-
-- **Plugin System**: Easy addition of new diagram types
-- **Layout Algorithms**: Pluggable layout engines
-- **Theming**: Comprehensive theme customization
-- **Output Formats**: Support for multiple output formats
-- **Integration APIs**: Well-defined interfaces for third-party integration
-
-This modular architecture makes Mermaid a powerful platform for diagram generation that can grow and adapt to new use cases while maintaining backward compatibility and performance.

README.md

@@ -15,7 +15,7 @@ Generate diagrams from markdown-like text.
 <a href="https://mermaid.live/"><b>Live Editor!</b></a>
 </p>
 <p align="center">
- <a href="https://mermaid.js.org">📖 Documentation</a> | <a href="https://mermaid.js.org/intro/">🚀 Getting Started</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/sKeNQX4Wtj" title="Discord invite">🙌 Join Us</a>
+ <a href="https://mermaid.js.org">📖 Documentation</a> | <a href="https://mermaid.js.org/intro/">🚀 Getting Started</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/AgrbSrBer3" title="Discord invite">🙌 Join Us</a>
 </p>
 <p align="center">
 <a href="./README.zh-CN.md">简体中文</a>
@@ -33,10 +33,9 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
 [![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
 [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
 [![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/sKeNQX4Wtj)
+[![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?utm_source=mermaid&utm_campaign=oss)
-[![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/mermaid-js/mermaid/badge)](https://securityscorecards.dev/viewer/?uri=github.com/mermaid-js/mermaid)
+[![Covered by Argos Visual Testing](https://argos-ci.com/badge.svg)](https://argos-ci.com)
 
 <img src="./img/header.png" alt="" />
 
@@ -44,7 +43,7 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
 
 **Thanks to all involved, people committing pull requests, people answering questions! 🙏**
 
-<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt='Banner for "The Official Guide to Mermaid.js" book'></a>
+<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
 
 ## Table of content
 
@@ -83,10 +82,6 @@ You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-
 
 For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](https://mermaid.js.org/intro/getting-started.html), [Usage](https://mermaid.js.org/config/usage.html) and [Tutorials](https://mermaid.js.org/ecosystem/tutorials.html).
 
-Our PR Visual Regression Testing is powered by [Argos](https://argos-ci.com/?utm_source=mermaid&utm_campaign=oss) with their generous Open Source plan. It makes the process of reviewing PRs with visual changes a breeze.
-
-[![Covered by Argos Visual Testing](https://argos-ci.com/badge-large.svg)](https://argos-ci.com?utm_source=mermaid&utm_campaign=oss)
-
 In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
 
 <a href="https://applitools.com/">
@@ -253,34 +248,6 @@ pie
 
 ### Git graph [experimental - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>]
 
-```
-gitGraph
-  commit
-  commit
-  branch develop
-  checkout develop
-  commit
-  commit
-  checkout main
-  merge develop
-  commit
-  commit
-```
-
-```mermaid
-gitGraph
-  commit
-  commit
-  branch develop
-  checkout develop
-  commit
-  commit
-  checkout main
-  merge develop
-  commit
-  commit
-```
-
 ### Bar chart (using gantt chart) [<a href="https://mermaid.js.org/syntax/gantt.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNptkU1vhCAQhv8KIenNugiI4rkf6bmXpvEyFVxJFDYyNt1u9r8X63Z7WQ9m5pknLzieaBeMpQ3dg0dsPUkPOhwteXZIXmJcbCT3xMAxkuh8Z8kIEclyMIB209fqKcwTICFvG4IvFy_oLrZ-g9F26ILfQgvNFN94VaRXQ1iWqpumZBcu1J8p1E1TXDx59eQNr5LyEqjJn6hv5QnGNlxevZJmdLLpy5xJSzut45biYCfb0iaVxvawjNjS1p-TCguG16PvaIPzYjO67e3BwX6GiTY9jPFKH43DMF_hGMDY1J4oHg-_f8hFTJFd8L3br3yZx4QHxENsdrt1nO8dDstH3oVpF50ZYMbhU6ud4qoGLqyqBJRCmO6j0HXPZdGbihUc6Pmc0QP49xD-b5X69ZQv2gjO81IwzWqhC1lKrjJ6pA3nVS7SMiVjrKirWlYp5fs3osgrWeo00lorLWvOzz8JVbXm">live editor</a>]
 
 ```
@@ -447,7 +414,7 @@ For public sites, it can be precarious to retrieve text from users on the intern
 
 As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security.
 
-_Unfortunately you cannot have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
+_Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
 
 ## Reporting vulnerabilities
 
@@ -463,7 +430,7 @@ A quick note from Knut Sveidqvist:
 >
 > _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
-> _Thank you to the ever-growing list of [contributors](https://github.com/mermaid-js/mermaid/graphs/contributors) that brought the project this far!_
+> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
 
 ---
 

README.zh-CN.md

@@ -15,7 +15,7 @@ Mermaid
 <a href="https://mermaid.live/"><b>实时编辑器!</b></a>
 </p>
 <p align="center">
- <a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/sKeNQX4Wtj" title="Discord invite">🙌 加入我们</a>
+ <a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/AgrbSrBer3" title="Discord invite">🙌 加入我们</a>
 </p>
 <p align="center">
 <a href="./README.md">English</a>
@@ -34,7 +34,7 @@ Mermaid
 [![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
 [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
 [![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/sKeNQX4Wtj)
+[![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_)
 
 <img src="./img/header.png" alt="" />
@@ -43,13 +43,13 @@ Mermaid
 
 **感谢所有参与进来提交 PR，解答疑问的人们! 🙏**
 
-<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt='Banner for "The Official Guide to Mermaid.js" book'></a>
+<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
 
 ## 关于 Mermaid
 
 <!-- <Main description>   -->
 
-Mermaid 是一个基于 JavaScript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
+Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
 
 > Doc-Rot 是 Mermaid 致力于解决的一个难题。
 
@@ -358,7 +358,7 @@ _很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在
 
 > _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库！_ > _同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ > _感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
 >
-> _感谢越来越多的 [贡献者们](https://github.com/mermaid-js/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_
+> _感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_
 
 ---
 

__mocks__/d3.ts

@@ -0,0 +1,13 @@
+import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js';
+
+export const select = function () {
+  return new MockedD3();
+};
+
+export const selectAll = function () {
+  return new MockedD3();
+};
+
+export const curveBasis = 'basis';
+export const curveLinear = 'linear';
+export const curveCardinal = 'cardinal';

cypress.config.ts

@@ -1,9 +1,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';
-import coverage from '@cypress/code-coverage/task.js';
-import { defineConfig } from 'cypress';
-import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin.js';
-import cypressSplit from 'cypress-split';
 
 export default eyesPlugin(
   defineConfig({
@@ -14,7 +13,6 @@ export default eyesPlugin(
       specPattern: 'cypress/integration/**/*.{js,ts}',
       setupNodeEvents(on, config) {
         coverage(on, config);
-        cypressSplit(on, config);
         on('before:browser:launch', (browser, launchOptions) => {
           if (browser.name === 'chrome' && browser.isHeadless) {
             launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
@@ -23,12 +21,11 @@ export default eyesPlugin(
         });
         // copy any needed variables from process.env to config.env
         config.env.useAppli = process.env.USE_APPLI ? true : false;
-        config.env.useArgos = process.env.RUN_VISUAL_TEST === 'true';
+        config.env.useArgos = !!process.env.CI;
 
         if (config.env.useArgos) {
           registerArgosTask(on, config, {
-            // Enable upload to Argos only when it runs on CI.
-            uploadToArgos: !!process.env.CI,
+            token: 'fc3a35cf5200db928d65b2047861582d9444032b',
           });
         } else {
           addMatchImageSnapshotPlugin(on, config);

cypress/helpers/util.ts

@@ -14,7 +14,7 @@ interface CodeObject {
   mermaid: CypressMermaidConfig;
 }
 
-export const utf8ToB64 = (str: string): string => {
+const utf8ToB64 = (str: string): string => {
   return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64');
 };
 
@@ -22,14 +22,13 @@ const batchId: string =
   'mermaid-batch-' +
   (Cypress.env('useAppli')
     ? Date.now().toString()
-    : (Cypress.env('CYPRESS_COMMIT') ?? Date.now().toString()));
+    : Cypress.env('CYPRESS_COMMIT') || Date.now().toString());
 
 export const mermaidUrl = (
   graphStr: string | string[],
   options: CypressMermaidConfig,
   api: boolean
 ): string => {
-  options.handDrawnSeed = 1;
   const codeObject: CodeObject = {
     code: graphStr,
     mermaid: options,
@@ -61,7 +60,9 @@ export const imgSnapshotTest = (
     sequence: {
       ...(_options.sequence ?? {}),
       actorFontFamily: 'courier',
-      noteFontFamily: _options.sequence?.noteFontFamily ?? 'courier',
+      noteFontFamily: _options.sequence?.noteFontFamily
+        ? _options.sequence.noteFontFamily
+        : 'courier',
       messageFontFamily: 'courier',
     },
   };
@@ -72,7 +73,7 @@ export const imgSnapshotTest = (
 
 export const urlSnapshotTest = (
   url: string,
-  options: CypressMermaidConfig = {},
+  options: CypressMermaidConfig,
   _api = false,
   validation?: any
 ): void => {
@@ -130,10 +131,3 @@ export const verifyScreenshot = (name: string): void => {
     cy.matchImageSnapshot(name);
   }
 };
-
-export const verifyNumber = (value: number, expected: number, deltaPercent = 10): void => {
-  expect(value).to.be.within(
-    expected * (1 - deltaPercent / 100),
-    expected * (1 + deltaPercent / 100)
-  );
-};

cypress/integration/other/configuration.spec.js

@@ -69,9 +69,7 @@ describe('Configuration', () => {
           .and('include', 'url(#');
       });
     });
-    // This has been broken for a long time, but something about the Cypress environment was
-    // rewriting the URL to be relative, causing the test to incorrectly pass.
-    it.skip('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
+    it('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
       renderGraph(
         `graph TD
         A[Christmas] -->|Get money| B(Go shopping)
@@ -114,7 +112,7 @@ describe('Configuration', () => {
           .first()
           .should('have.attr', 'marker-end')
           .should('exist')
-          .and('include', 'url(http\\:\\/\\/localhost');
+          .and('include', 'url(http://localhost');
       });
     });
     it('should not taint the initial configuration when using multiple directives', () => {

cypress/integration/other/interaction.spec.js

@@ -20,7 +20,7 @@ describe('Interaction', () => {
     });
 
     it('Graph: should handle a click on a node with a bound url', () => {
-      // When there is a URL, `cy.contains()` selects the `a` tag instead of the `span` tag. The .node is a child of `a`, so we have to use `find()` instead of `parent`.
+      // When there is a URL, cy.contains selects the a tag instead of the span. The .node is a child of a, so we have to use find instead of parent.
       cy.contains('URLTest1').find('.node').click();
       cy.location().should(({ href }) => {
         expect(href).to.eq('http://localhost:9000/empty.html');
@@ -146,7 +146,7 @@ describe('Interaction', () => {
     });
   });
 
-  describe('Interaction - security level other, misspelling', () => {
+  describe('Interaction - security level other, missspelling', () => {
     beforeEach(() => {
       cy.visit('http://localhost:9000/click_security_other.html');
     });

cypress/integration/other/xss.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, mermaidUrl, utf8ToB64 } from '../../helpers/util.ts';
+import { mermaidUrl } from '../../helpers/util.ts';
 describe('XSS', () => {
   it('should handle xss in tags', () => {
     const str =
@@ -141,37 +141,4 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
-
-  it('should sanitize icon labels in architecture diagrams', () => {
-    const str = JSON.stringify({
-      code: `architecture-beta
-    group api(cloud)[API]
-    service db "<img src=x onerror=\\"xssAttack()\\">" [Database] in api`,
-    });
-    imgSnapshotTest(utf8ToB64(str), {}, true);
-    cy.wait(1000);
-    cy.get('#the-malware').should('not.exist');
-  });
-
-  it('should sanitize katex blocks', () => {
-    const str = JSON.stringify({
-      code: `sequenceDiagram
-    participant A as Alice<img src="x" onerror="xssAttack()">$$\\text{Alice}$$
-    A->>John: Hello John, how are you?`,
-    });
-    imgSnapshotTest(utf8ToB64(str), {}, true);
-    cy.wait(1000);
-    cy.get('#the-malware').should('not.exist');
-  });
-
-  it('should sanitize labels', () => {
-    const str = JSON.stringify({
-      code: `erDiagram
-    "<img src=x onerror=xssAttack()>" ||--|| ENTITY2 : "<img src=x onerror=xssAttack()>"
-    `,
-    });
-    imgSnapshotTest(utf8ToB64(str), {}, true);
-    cy.wait(1000);
-    cy.get('#the-malware').should('not.exist');
-  });
 });

cypress/integration/rendering/architecture.spec.ts

@@ -1,252 +0,0 @@
-import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts';
-
-describe.skip('architecture diagram', () => {
-  it('should render a simple architecture diagram with groups', () => {
-    imgSnapshotTest(
-      `architecture-beta
-                group api(cloud)[API]
-
-                service db(database)[Database] in api
-                service disk1(disk)[Storage] in api
-                service disk2(disk)[Storage] in api
-                service server(server)[Server] in api
-                service gateway(internet)[Gateway] 
-
-                db L--R server
-                disk1 T--B server
-                disk2 T--B db
-                server T--B gateway
-            `
-    );
-  });
-  it('should render a simple architecture diagram with titleAndAccessibilities', () => {
-    imgSnapshotTest(
-      `architecture-beta
-          title Simple Architecture Diagram
-          accTitle: Accessibility Title
-          accDescr: Accessibility Description
-          group api(cloud)[API]
-
-          service db(database)[Database] in api
-          service disk1(disk)[Storage] in api
-          service disk2(disk)[Storage] in api
-          service server(server)[Server] in api
-
-          db:L -- R:server
-          disk1:T -- B:server
-          disk2:T -- B:db
-      `
-    );
-  });
-  it('should render an architecture diagram with groups within groups', () => {
-    imgSnapshotTest(
-      `architecture-beta
-                group api[API]
-                group public[Public API] in api
-                group private[Private API] in api
-        
-                service serv1(server)[Server] in public
-        
-                service serv2(server)[Server] in private
-                service db(database)[Database] in private
-        
-                service gateway(internet)[Gateway] in api
-        
-                serv1 B--T serv2
-                serv2 L--R db
-                serv1 L--R gateway
-            `
-    );
-  });
-  it('should render an architecture diagram with the fallback icon', () => {
-    imgSnapshotTest(
-      `architecture-beta
-                service unknown(iconnamedoesntexist)[Unknown Icon]
-            `
-    );
-  });
-  it('should render an architecture diagram with split directioning', () => {
-    imgSnapshotTest(
-      `architecture-beta
-                service db(database)[Database]
-                service s3(disk)[Storage]
-                service serv1(server)[Server 1]
-                service serv2(server)[Server 2]
-                service disk(disk)[Disk]
-        
-                db L--R s3
-                serv1 L--T s3
-                serv2 L--B s3
-                serv1 T--B disk
-            `
-    );
-  });
-  it('should render an architecture diagram with directional arrows', () => {
-    imgSnapshotTest(
-      `architecture-beta
-                service servC(server)[Server 1]
-                service servL(server)[Server 2]
-                service servR(server)[Server 3]
-                service servT(server)[Server 4]
-                service servB(server)[Server 5]
-        
-                servC (L--R) servL
-                servC (R--L) servR
-                servC (T--B) servT
-                servC (B--T) servB
-        
-                servL (T--L) servT
-                servL (B--L) servB
-                servR (T--R) servT
-                servR (B--R) servB
-            `
-    );
-  });
-  it('should render an architecture diagram with group edges', () => {
-    imgSnapshotTest(
-      `architecture-beta
-                group left_group(cloud)[Left]
-                group right_group(cloud)[Right]
-                group top_group(cloud)[Top]
-                group bottom_group(cloud)[Bottom]
-                group center_group(cloud)[Center]
-        
-                service left_disk(disk)[Disk] in left_group
-                service right_disk(disk)[Disk] in right_group
-                service top_disk(disk)[Disk] in top_group
-                service bottom_disk(disk)[Disk] in bottom_group
-                service center_disk(disk)[Disk] in center_group
-        
-                left_disk{group} (R--L) center_disk{group}
-                right_disk{group} (L--R) center_disk{group}
-                top_disk{group} (B--T) center_disk{group}
-                bottom_disk{group} (T--B) center_disk{group}
-            `
-    );
-  });
-  it('should render an architecture diagram with edge labels', () => {
-    imgSnapshotTest(
-      `architecture-beta
-                service servC(server)[Server 1]
-                service servL(server)[Server 2]
-                service servR(server)[Server 3]
-                service servT(server)[Server 4]
-                service servB(server)[Server 5]
-        
-                servC L-[Label]-R servL
-                servC R-[Label]-L servR
-                servC T-[Label]-B servT
-                servC B-[Label]-T servB
-        
-                servL T-[Label]-L servT
-                servL B-[Label]-L servB
-                servR T-[Label]-R servT
-                servR B-[Label]-R servB
-            `
-    );
-  });
-  it('should render an architecture diagram with simple junction edges', () => {
-    imgSnapshotTest(
-      `architecture-beta
-                service left_disk(disk)[Disk]
-                service top_disk(disk)[Disk]
-                service bottom_disk(disk)[Disk]
-                service top_gateway(internet)[Gateway]
-                service bottom_gateway(internet)[Gateway]
-                junction juncC
-                junction juncR
-        
-                left_disk R--L juncC
-                top_disk B--T juncC
-                bottom_disk T--B juncC
-                juncC R--L juncR
-                top_gateway B--T juncR
-                bottom_gateway T--B juncR
-            `
-    );
-  });
-  it('should render an architecture diagram with complex junction edges', () => {
-    imgSnapshotTest(
-      `architecture-beta
-                group left
-                group right
-                service left_disk(disk)[Disk] in left
-                service top_disk(disk)[Disk] in left
-                service bottom_disk(disk)[Disk] in left
-                service top_gateway(internet)[Gateway] in right
-                service bottom_gateway(internet)[Gateway] in right
-                junction juncC in left
-                junction juncR in right
-        
-                left_disk R--L juncC
-                top_disk B--T juncC
-                bottom_disk T--B juncC
-        
-        
-                top_gateway (B--T juncR
-                bottom_gateway (T--B juncR
-        
-                juncC{group} R--L) juncR{group}
-            `
-    );
-  });
-
-  it('should render an architecture diagram with a reasonable height', () => {
-    imgSnapshotTest(
-      `architecture-beta
-              group federated(cloud)[Federated Environment]
-                  service server1(server)[System] in federated
-                  service edge(server)[Edge Device] in federated
-                  server1:R -- L:edge
-
-              group on_prem(cloud)[Hub]
-                  service firewall(server)[Firewall Device] in on_prem
-                  service server(server)[Server] in on_prem
-                  firewall:R -- L:server
-
-                  service db1(database)[db1] in on_prem
-                  service db2(database)[db2] in on_prem
-                  service db3(database)[db3] in on_prem
-                  service db4(database)[db4] in on_prem
-                  service db5(database)[db5] in on_prem
-                  service db6(database)[db6] in on_prem
-
-                  junction mid in on_prem
-                  server:B -- T:mid
-
-                  junction 1Leftofmid in on_prem
-                  1Leftofmid:R -- L:mid
-                  1Leftofmid:B -- T:db1
-
-                  junction 2Leftofmid in on_prem
-                  2Leftofmid:R -- L:1Leftofmid
-                  2Leftofmid:B -- T:db2
-
-                  junction 3Leftofmid in on_prem
-                  3Leftofmid:R -- L:2Leftofmid
-                  3Leftofmid:B -- T:db3
-
-                  junction 1RightOfMid in on_prem
-                  mid:R -- L:1RightOfMid
-                  1RightOfMid:B -- T:db4
-                  
-                  junction 2RightOfMid in on_prem
-                  1RightOfMid:R -- L:2RightOfMid
-                  2RightOfMid:B -- T:db5        
-                  
-                  junction 3RightOfMid in on_prem
-                  2RightOfMid:R -- L:3RightOfMid
-                  3RightOfMid:B -- T:db6         
-
-                  edge:R -- L:firewall
-      `
-    );
-  });
-});
-
-// Skipped as the layout is not deterministic, and causes issues in E2E tests.
-describe.skip('architecture - external', () => {
-  it('should allow adding external icons', () => {
-    urlSnapshotTest('http://localhost:9000/architecture-external.html');
-  });
-});

cypress/integration/rendering/block.spec.js

@@ -14,9 +14,9 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL2: should handle columns statement in sub-blocks', () => {
+  it('BL2: should handle colums statement in sub-blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   id1["Hello"]
   block
     columns 3
@@ -30,9 +30,9 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL3: should align block widths and handle columns statement in sub-blocks', () => {
+  it('BL3: should align block widths and handle colums statement in sub-blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   block
     columns 1
     id1
@@ -46,9 +46,9 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL4: should align block widths and handle columns statements in deeper sub-blocks then 1 level', () => {
+  it('BL4: should align block widths and handle colums statements in deeper sub-blocks then 1 level', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 1
   block
     columns 1
@@ -66,9 +66,9 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL5: should align block widths and handle columns statements in deeper sub-blocks then 1 level (alt)', () => {
+  it('BL5: should align block widths and handle colums statements in deeper sub-blocks then 1 level (alt)', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 1
   block
     id1
@@ -87,7 +87,7 @@ describe('Block diagram', () => {
 
   it('BL6: should handle block arrows and spece statements', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     columns 3
     space:3
     ida idb idc
@@ -106,7 +106,7 @@ describe('Block diagram', () => {
 
   it('BL7: should handle different types of edges', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       A space:5
       A --o B
@@ -119,7 +119,7 @@ describe('Block diagram', () => {
 
   it('BL8: should handle sub-blocks without columns statements', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 2
       C A B
       block
@@ -133,7 +133,7 @@ describe('Block diagram', () => {
 
   it('BL9: should handle edges from blocks in sub blocks to other blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       B space
       block
@@ -147,7 +147,7 @@ describe('Block diagram', () => {
 
   it('BL10: should handle edges from composite blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       B space
       block BL
@@ -161,7 +161,7 @@ describe('Block diagram', () => {
 
   it('BL11: should handle edges to composite blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       B space
       block BL
@@ -175,7 +175,7 @@ describe('Block diagram', () => {
 
   it('BL12: edges should handle labels', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       A
       space
       A -- "apa" --> E
@@ -186,7 +186,7 @@ describe('Block diagram', () => {
 
   it('BL13: should handle block arrows in different directions', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       columns 3
       space blockArrowId1<["down"]>(down) space
       blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
@@ -199,7 +199,7 @@ describe('Block diagram', () => {
 
   it('BL14: should style statements and class statements', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A
     B
     classDef blue fill:#66f,stroke:#333,stroke-width:2px;
@@ -212,7 +212,7 @@ describe('Block diagram', () => {
 
   it('BL15: width alignment - D and E should share available space', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   block
     D
     E
@@ -225,7 +225,7 @@ describe('Block diagram', () => {
 
   it('BL16: width alignment - C should be as wide as the composite block', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   block
     A("This is the text")
     B
@@ -236,9 +236,9 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL17: width alignment - blocks should be equal in width', () => {
+  it('BL17: width alignment - blocks shold be equal in width', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A("This is the text")
     B
     C
@@ -249,7 +249,7 @@ describe('Block diagram', () => {
 
   it('BL18: block types 1 - square, rounded and circle', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A["square"]
     B("rounded")
     C(("circle"))
@@ -260,7 +260,7 @@ describe('Block diagram', () => {
 
   it('BL19: block types 2 - odd, diamond and hexagon', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A>"rect_left_inv_arrow"]
     B{"diamond"}
     C{{"hexagon"}}
@@ -271,7 +271,7 @@ describe('Block diagram', () => {
 
   it('BL20: block types 3 - stadium', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A(["stadium"])
       `,
       {}
@@ -280,7 +280,7 @@ describe('Block diagram', () => {
 
   it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A[/"lean right"/]
     B[\"lean left"\]
     C[/"trapezoid"\]
@@ -292,7 +292,7 @@ describe('Block diagram', () => {
 
   it('BL22: block types 1 - square, rounded and circle', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
     A["square"]
     B("rounded")
     C(("circle"))
@@ -303,7 +303,7 @@ describe('Block diagram', () => {
 
   it('BL23: sizing - it should be possible to make a block wider', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       A("rounded"):2
       B:2
       C
@@ -314,7 +314,7 @@ describe('Block diagram', () => {
 
   it('BL24: sizing - it should be possible to make a composite block wider', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
       block:2
         A
       end
@@ -326,7 +326,7 @@ describe('Block diagram', () => {
 
   it('BL25: block in the middle with space on each side', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
         columns 3
         space
         middle["In the middle"]
@@ -337,7 +337,7 @@ describe('Block diagram', () => {
   });
   it('BL26: space and an edge', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 5
     A space B
     A --x B
@@ -347,7 +347,7 @@ describe('Block diagram', () => {
   });
   it('BL27: block sizes for regular blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 3
     a["A wide one"] b:2 c:2 d
       `,
@@ -356,7 +356,7 @@ describe('Block diagram', () => {
   });
   it('BL28: composite block with a set width - f should use the available space', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 3
   a:3
   block:e:3
@@ -370,7 +370,7 @@ describe('Block diagram', () => {
 
   it('BL29: composite block with a set width - f and g should split the available space', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 3
   a:3
   block:e:3
@@ -384,28 +384,4 @@ describe('Block diagram', () => {
       {}
     );
   });
-
-  it('BL30: block should overflow if too wide for columns', () => {
-    imgSnapshotTest(
-      `block-beta
-  columns 2
-  fit:2
-  overflow:3
-  short:1
-  also_overflow:2
-`,
-      {}
-    );
-  });
-
-  it('BL31: edge without arrow syntax should render with no arrowheads', () => {
-    imgSnapshotTest(
-      `block-beta
-  a
-  b
-  a --- b
-`,
-      {}
-    );
-  });
 });

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

@@ -581,63 +581,4 @@ class C13["With Città foreign language"]
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
   });
-
-  it('renders a class diagram with a generic class in a namespace', () => {
-    const diagramDefinition = `
-      classDiagram-v2
-      namespace Company.Project.Module {
-        class GenericClass~T~ {
-          +addItem(item: T)
-          +getItem() T
-        }
-      }
-    `;
-
-    imgSnapshotTest(diagramDefinition);
-  });
-
-  it('renders a class diagram with nested namespaces and relationships', () => {
-    const diagramDefinition = `
-      classDiagram-v2
-      namespace Company.Project.Module.SubModule {
-        class Report {
-          +generatePDF(data: List)
-          +generateCSV(data: List)
-        }
-      }
-      namespace Company.Project.Module {
-        class Admin {
-          +generateReport()
-        }
-      }
-      Admin --> Report : generates
-    `;
-
-    imgSnapshotTest(diagramDefinition);
-  });
-
-  it('renders a class diagram with multiple classes and relationships in a namespace', () => {
-    const diagramDefinition = `
-      classDiagram-v2
-      namespace Company.Project.Module {
-        class User {
-          +login(username: String, password: String)
-          +logout()
-        }
-        class Admin {
-          +addUser(user: User)
-          +removeUser(user: User)
-          +generateReport()
-        }
-        class Report {
-          +generatePDF(reportData: List)
-          +generateCSV(reportData: List)
-        }
-      }
-      Admin --> User : manages
-      Admin --> Report : generates
-    `;
-
-    imgSnapshotTest(diagramDefinition);
-  });
 });

cypress/integration/rendering/classDiagram.spec.js

@@ -429,7 +429,7 @@ describe('Class diagram', () => {
     classDiagram
       class \`This\nTitle\nHas\nMany\nNewlines\` {
         +String Also
-        -String Many
+        -Stirng Many
         #int Members
         +And()
         -Many()
@@ -443,7 +443,7 @@ describe('Class diagram', () => {
     classDiagram
       class \`This\nTitle\nHas\nMany\nNewlines\` {
         +String Also
-        -String Many
+        -Stirng Many
         #int Members
         +And()
         -Many()
@@ -459,7 +459,7 @@ describe('Class diagram', () => {
       namespace testingNamespace {
       class \`This\nTitle\nHas\nMany\nNewlines\` {
         +String Also
-        -String Many
+        -Stirng Many
         #int Members
         +And()
         -Many()
@@ -495,47 +495,4 @@ describe('Class diagram', () => {
       cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener');
     });
   });
-
-  describe('Include char sequence "graph" in text (#6795)', () => {
-    it('has a label with char sequence "graph"', () => {
-      imgSnapshotTest(
-        `
-        classDiagram
-          class Person {
-            +String name
-            -Int id
-            #double age
-            +Text demographicProfile
-          }
-        `,
-        { flowchart: { defaultRenderer: 'elk' } }
-      );
-    });
-  });
-
-  it('should handle backticks for namespace and class names', () => {
-    imgSnapshotTest(
-      `
-      classDiagram
-          namespace \`A::B\` {
-              class \`IPC::Sender\`
-          }
-          RenderProcessHost --|> \`IPC::Sender\`
-      `,
-      {}
-    );
-    it('should handle an empty class body with empty braces', () => {
-      imgSnapshotTest(
-        ` classDiagram
-        class FooBase~T~ {}
-    class Bar {
-        +Zip
-        +Zap()
-    }
-    FooBase <|-- Ba
-        `,
-        { flowchart: { defaultRenderer: 'elk' } }
-      );
-    });
-  });
 });

cypress/integration/rendering/erDiagram-unified.spec.js

@@ -1,652 +0,0 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
-
-const testOptions = [
-  { description: '', options: { logLevel: 1 } },
-  { description: 'ELK: ', options: { logLevel: 1, layout: 'elk' } },
-  { description: 'HD: ', options: { logLevel: 1, look: 'handDrawn' } },
-];
-
-describe('Entity Relationship Diagram Unified', () => {
-  testOptions.forEach(({ description, options }) => {
-    it(`${description}should render a simple ER diagram`, () => {
-      imgSnapshotTest(
-        `
-      erDiagram
-          CUSTOMER ||--o{ ORDER : places
-          ORDER ||--|{ LINE-ITEM : contains
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render a simple ER diagram without htmlLabels`, () => {
-      imgSnapshotTest(
-        `
-      erDiagram
-          CUSTOMER ||--o{ ORDER : places
-          ORDER ||--|{ LINE-ITEM : contains
-        `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render an ER diagram with a recursive relationship`, () => {
-      imgSnapshotTest(
-        `
-      erDiagram
-          CUSTOMER ||..o{ CUSTOMER : refers
-          CUSTOMER ||--o{ ORDER : places
-          ORDER ||--|{ LINE-ITEM : contains
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render an ER diagram with multiple relationships between the same two entities`, () => {
-      imgSnapshotTest(
-        `
-      erDiagram
-          CUSTOMER ||--|{ ADDRESS : "invoiced at"
-          CUSTOMER ||--|{ ADDRESS : "receives goods at"
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render a cyclical ER diagram`, () => {
-      imgSnapshotTest(
-        `
-      erDiagram
-          A ||--|{ B : likes
-          B ||--|{ C : likes
-          C ||--|{ A : likes
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render a not-so-simple ER diagram`, () => {
-      imgSnapshotTest(
-        `
-      erDiagram
-          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-          CUSTOMER ||--o{ ORDER : places
-          CUSTOMER ||--o{ INVOICE : "liable for"
-          DELIVERY-ADDRESS ||--o{ ORDER : receives
-          INVOICE ||--|{ ORDER : covers
-          ORDER ||--|{ ORDER-ITEM : includes
-          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render a not-so-simple ER diagram without htmlLabels`, () => {
-      imgSnapshotTest(
-        `
-      erDiagram
-          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-          CUSTOMER ||--o{ ORDER : places
-          CUSTOMER ||--o{ INVOICE : "liable for"
-          DELIVERY-ADDRESS ||--o{ ORDER : receives
-          INVOICE ||--|{ ORDER : covers
-          ORDER ||--|{ ORDER-ITEM : includes
-          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-          PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-        `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render multiple ER diagrams`, () => {
-      imgSnapshotTest(
-        [
-          `
-      erDiagram
-          CUSTOMER ||--o{ ORDER : places
-          ORDER ||--|{ LINE-ITEM : contains
-        `,
-          `
-      erDiagram
-          CUSTOMER ||--o{ ORDER : places
-          ORDER ||--|{ LINE-ITEM : contains
-        `,
-        ],
-        options
-      );
-    });
-
-    it(`${description}should render an ER diagram with blank or empty labels`, () => {
-      imgSnapshotTest(
-        `
-      erDiagram
-          BOOK }|..|{ AUTHOR : ""
-          BOOK }|..|{ GENRE : " "
-          AUTHOR }|..|{ GENRE : "  "
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render entities that have no relationships`, () => {
-      renderGraph(
-        `
-      erDiagram
-          DEAD_PARROT
-          HERMIT
-          RECLUSE
-          SOCIALITE }o--o{ SOCIALITE : "interacts with"
-          RECLUSE }o--o{ SOCIALITE : avoids
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render entities with and without attributes`, () => {
-      renderGraph(
-        `
-      erDiagram
-          BOOK { string title }
-          AUTHOR }|..|{ BOOK : writes
-          BOOK { float price }
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render entities with generic and array attributes`, () => {
-      renderGraph(
-        `
-      erDiagram
-          BOOK {
-            string title
-            string[] authors
-            type~T~ type
-          }
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render entities with generic and array attributes without htmlLabels`, () => {
-      renderGraph(
-        `
-      erDiagram
-          BOOK {
-            string title
-            string[] authors
-            type~T~ type
-          }
-        `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render entities with length in attributes type`, () => {
-      renderGraph(
-        `
-      erDiagram
-          CLUSTER {
-            varchar(99) name
-            string(255) description
-          }
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render entities with length in attributes type without htmlLabels`, () => {
-      renderGraph(
-        `
-      erDiagram
-          CLUSTER {
-            varchar(99) name
-            string(255) description
-          }
-        `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render entities and attributes with big and small entity names`, () => {
-      renderGraph(
-        `
-      erDiagram
-          PRIVATE_FINANCIAL_INSTITUTION {
-            string name
-            int    turnover
-          }
-          PRIVATE_FINANCIAL_INSTITUTION ||..|{ EMPLOYEE : employs
-          EMPLOYEE { bool officer_of_firm }
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render entities and attributes with big and small entity names without htmlLabels`, () => {
-      renderGraph(
-        `
-      erDiagram
-          PRIVATE_FINANCIAL_INSTITUTION {
-            string name
-            int    turnover
-          }
-          PRIVATE_FINANCIAL_INSTITUTION ||..|{ EMPLOYEE : employs
-          EMPLOYEE { bool officer_of_firm }
-        `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render entities with attributes that begin with asterisk`, () => {
-      imgSnapshotTest(
-        `
-      erDiagram
-          BOOK {
-            int         *id
-            string      name
-            varchar(99) summary
-          }
-          BOOK }o..o{ STORE : soldBy
-          STORE {
-            int         *id
-            string      name
-            varchar(50) address
-          }
-          `,
-        options
-      );
-    });
-
-    it(`${description}should render entities with attributes that begin with asterisk without htmlLabels`, () => {
-      imgSnapshotTest(
-        `
-      erDiagram
-          BOOK {
-            int         *id
-            string      name
-            varchar(99) summary
-          }
-          BOOK }o..o{ STORE : soldBy
-          STORE {
-            int         *id
-            string      name
-            varchar(50) address
-          }
-          `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render entities with keys`, () => {
-      renderGraph(
-        `
-      erDiagram
-        AUTHOR_WITH_LONG_ENTITY_NAME {
-          string name PK
-        }
-        AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
-        BOOK {
-            float price
-            string author FK
-            string title PK
-          }
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render entities with keys without htmlLabels`, () => {
-      renderGraph(
-        `
-      erDiagram
-        AUTHOR_WITH_LONG_ENTITY_NAME {
-          string name PK
-        }
-        AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
-        BOOK {
-            float price
-            string author FK
-            string title PK
-          }
-        `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render entities with comments`, () => {
-      renderGraph(
-        `
-      erDiagram
-        AUTHOR_WITH_LONG_ENTITY_NAME {
-          string name "comment"
-        }
-        AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
-        BOOK {
-            string author
-            string title "author comment"
-            float price "price comment"
-          }
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render entities with comments without htmlLabels`, () => {
-      renderGraph(
-        `
-      erDiagram
-        AUTHOR_WITH_LONG_ENTITY_NAME {
-          string name "comment"
-        }
-        AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
-        BOOK {
-            string author
-            string title "author comment"
-            float price "price comment"
-          }
-        `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render entities with keys and comments`, () => {
-      renderGraph(
-        `
-      erDiagram
-        AUTHOR_WITH_LONG_ENTITY_NAME {
-          string name PK "comment"
-        }
-        AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
-        BOOK {
-            string description
-            float price "price comment"
-            string title PK "title comment"
-            string author FK
-          }
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render entities with keys and comments without htmlLabels`, () => {
-      renderGraph(
-        `
-      erDiagram
-        AUTHOR_WITH_LONG_ENTITY_NAME {
-          string name PK "comment"
-        }
-        AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
-        BOOK {
-            string description
-            float price "price comment"
-            string title PK "title comment"
-            string author FK
-          }
-        `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render entities with aliases`, () => {
-      renderGraph(
-        `
-      erDiagram
-        T1 one or zero to one or more T2 : test
-        T2 one or many optionally to zero or one T3 : test
-        T3 zero or more to zero or many T4 : test
-        T4 many(0) to many(1) T5 : test
-        T5 many optionally to one T6 : test
-        T6 only one optionally to only one T1 : test
-        T4 0+ to 1+ T6 : test
-        T1 1 to 1 T3 : test
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render a simple ER diagram with a title`, () => {
-      imgSnapshotTest(
-        `---
-  title: simple ER diagram
-  ---
-  erDiagram
-  CUSTOMER ||--o{ ORDER : places
-  ORDER ||--|{ LINE-ITEM : contains
-  `,
-        options
-      );
-    });
-
-    it(`${description}should render entities with entity name aliases`, () => {
-      imgSnapshotTest(
-        `
-      erDiagram
-        p[Person] {
-          varchar(64) firstName
-          varchar(64) lastName
-        }
-        c["Customer Account"] {
-          varchar(128) email
-        }
-        p ||--o| c : has
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render relationship labels with line breaks`, () => {
-      imgSnapshotTest(
-        `
-      erDiagram
-        p[Person] {
-            string firstName
-            string lastName
-        }
-        a["Customer Account"] {
-            string email
-        }
-  
-        b["Customer Account Secondary"] {
-          string email
-        }
-        
-        c["Customer Account Tertiary"] {
-          string email
-        }
-        
-        d["Customer Account Nth"] {
-          string email
-        }
-  
-        p ||--o| a : "has<br />one"
-        p ||--o| b : "has<br />one<br />two"
-        p ||--o| c : "has<br />one<br/>two<br />three"
-        p ||--o| d : "has<br />one<br />two<br/>three<br />...<br/>Nth"
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render an ER diagram with unicode text`, () => {
-      imgSnapshotTest(
-        `
-      erDiagram
-          _**testẽζ➕Ø😀㌕ぼ**_ {
-              *__List~List~int~~sdfds__* **driversLicense** PK "***The l😀icense #***"
-              *string(99)~T~~~~~~* firstName "Only __99__ <br>characters are a<br>llowed dsfsdfsdfsdfs"
-              string last*Name*
-              string __phone__ UK
-              int _age_
-          }
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render an ER diagram with unicode text without htmlLabels`, () => {
-      imgSnapshotTest(
-        `
-      erDiagram
-          _**testẽζ➕Ø😀㌕ぼ**_ {
-              *__List~List~int~~sdfds__* **driversLicense** PK "***The l😀icense #***"
-              *string(99)~T~~~~~~* firstName "Only __99__ <br>characters are a<br>llowed dsfsdfsdfsdfs"
-              string last*Name*
-              string __phone__ UK
-              int _age_
-          }
-        `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render an ER diagram with relationships with unicode text`, () => {
-      imgSnapshotTest(
-        `
-          erDiagram
-            person[😀] {
-                string *first*Name
-                string _**last**Name_
-            }
-            a["*Customer Account*"] {
-                **string** ema*i*l
-            }
-            person ||--o| a : __hẽ😀__
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render an ER diagram with relationships with unicode text without htmlLabels`, () => {
-      imgSnapshotTest(
-        `
-          erDiagram
-            person[😀] {
-                string *first*Name
-                string _**last**Name_
-            }
-            a["*Customer Account*"] {
-                **string** ema*i*l
-            }
-            person ||--o| a : __hẽ😀__
-        `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render an ER diagram with TB direction`, () => {
-      imgSnapshotTest(
-        `
-          erDiagram
-          direction TB
-          CAR ||--|{ NAMED-DRIVER : allows
-          PERSON ||..o{ NAMED-DRIVER : is
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render an ER diagram with BT direction`, () => {
-      imgSnapshotTest(
-        `
-          erDiagram
-          direction BT
-          CAR ||--|{ NAMED-DRIVER : allows
-          PERSON ||..o{ NAMED-DRIVER : is
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render an ER diagram with LR direction`, () => {
-      imgSnapshotTest(
-        `
-          erDiagram
-          direction LR
-          CAR ||--|{ NAMED-DRIVER : allows
-          PERSON ||..o{ NAMED-DRIVER : is
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render an ER diagram with RL direction`, () => {
-      imgSnapshotTest(
-        `
-          erDiagram
-          direction RL
-          CAR ||--|{ NAMED-DRIVER : allows
-          PERSON ||..o{ NAMED-DRIVER : is
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render entities with styles applied from style statement`, () => {
-      imgSnapshotTest(
-        `
-            erDiagram
-              c[CUSTOMER]
-              p[PERSON]
-              style c,p fill:#f9f,stroke:blue, color:grey, font-size:24px,font-weight:bold
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render entities with styles applied from style statement without htmlLabels`, () => {
-      imgSnapshotTest(
-        `
-            erDiagram
-              c[CUSTOMER]
-              p[PERSON]
-              style c,p fill:#f9f,stroke:blue, color:grey, font-size:24px,font-weight:bold
-        `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render entities with styles applied from class statement`, () => {
-      imgSnapshotTest(
-        `
-            erDiagram
-              c[CUSTOMER]
-              p[PERSON]:::blue
-              classDef bold font-size:24px, font-weight: bold
-              classDef blue stroke:lightblue, color: #0000FF
-              class c,p bold
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render entities with styles applied from class statement without htmlLabels`, () => {
-      imgSnapshotTest(
-        `
-            erDiagram
-              c[CUSTOMER]
-              p[PERSON]:::blue
-              classDef bold font-size:24px, font-weight: bold
-              classDef blue stroke:lightblue, color: #0000FF
-              class c,p bold
-        `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render entities with styles applied from the default class and other styles`, () => {
-      imgSnapshotTest(
-        `
-            erDiagram
-              c[CUSTOMER]
-              p[PERSON]:::blue
-              classDef blue stroke:lightblue, color: #0000FF
-              classDef default fill:pink
-              style c color:green
-        `,
-        { ...options }
-      );
-    });
-  });
-});

cypress/integration/rendering/erDiagram.spec.js

@@ -109,8 +109,8 @@ describe('Entity Relationship Diagram', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      // use within because the absolute value can be slightly different depending on the environment ±6%
-      expect(maxWidthValue).to.be.within(140 * 0.96, 140 * 1.06);
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      expect(maxWidthValue).to.be.within(140 * 0.95, 140 * 1.05);
     });
   });
 
@@ -125,8 +125,8 @@ describe('Entity Relationship Diagram', () => {
     );
     cy.get('svg').should((svg) => {
       const width = parseFloat(svg.attr('width'));
-      // use within because the absolute value can be slightly different depending on the environment ±6%
-      expect(width).to.be.within(140 * 0.96, 140 * 1.06);
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      expect(width).to.be.within(140 * 0.95, 140 * 1.05);
       // expect(svg).to.have.attr('height', '465');
       expect(svg).to.not.have.attr('style');
     });
@@ -321,52 +321,4 @@ ORDER ||--|{ LINE-ITEM : contains
       { logLevel: 1 }
     );
   });
-
-  it('should render relationship labels with line breaks', () => {
-    imgSnapshotTest(
-      `
-    erDiagram
-      p[Person] {
-          string firstName
-          string lastName
-      }
-      a["Customer Account"] {
-          string email
-      }
-
-      b["Customer Account Secondary"] {
-        string email
-      }
-      
-      c["Customer Account Tertiary"] {
-        string email
-      }
-      
-      d["Customer Account Nth"] {
-        string email
-      }
-
-      p ||--o| a : "has<br />one"
-      p ||--o| b : "has<br />one<br />two"
-      p ||--o| c : "has<br />one<br/>two<br />three"
-      p ||--o| d : "has<br />one<br />two<br/>three<br />...<br/>Nth"
-      `,
-      { logLevel: 1 }
-    );
-  });
-
-  describe('Include char sequence "graph" in text (#6795)', () => {
-    it('has a label with char sequence "graph"', () => {
-      imgSnapshotTest(
-        `
-        erDiagram
-          p[Photograph] {
-            varchar(12) jobId
-            date dateCreated
-          }
-        `,
-        { flowchart: { defaultRenderer: 'elk' } }
-      );
-    });
-  });
 });

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

@@ -1,6 +1,6 @@
-import { imgSnapshotTest, renderGraph, verifyNumber } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
-describe('Flowchart ELK', () => {
+describe.skip('Flowchart ELK', () => {
   it('1-elk: should render a simple flowchart', () => {
     imgSnapshotTest(
       `flowchart-elk TD
@@ -109,7 +109,7 @@ describe('Flowchart ELK', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      verifyNumber(maxWidthValue, 380);
+      expect(maxWidthValue).to.be.within(230 * 0.95, 230 * 1.05);
     });
   });
   it('8-elk: should render a flowchart when useMaxWidth is false', () => {
@@ -128,7 +128,7 @@ describe('Flowchart ELK', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      verifyNumber(width, 380);
+      expect(width).to.be.within(230 * 0.95, 230 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -208,13 +208,13 @@ describe('Flowchart ELK', () => {
       `flowchart-elk TB
   internet
   nat
-  router
+  routeur
   lb1
   lb2
   compute1
   compute2
   subgraph project
-  router
+  routeur
   nat
     subgraph subnet1
       compute1
@@ -225,8 +225,8 @@ describe('Flowchart ELK', () => {
       lb2
     end
   end
-  internet --> router
-  router --> subnet1 & subnet2
+  internet --> routeur
+  routeur --> subnet1 & subnet2
   subnet1 & subnet2 --> nat --> internet
       `,
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
@@ -443,7 +443,7 @@ flowchart-elk TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('63-elk: title on subgraphs should be themeable', () => {
+  it('63-elk: title on subgraphs should be themable', () => {
     imgSnapshotTest(
       `
       %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
@@ -692,7 +692,7 @@ A --> B
       {}
     );
     cy.get('svg').should((svg) => {
-      const edges = svg[0].querySelectorAll('.edges > path');
+      const edges = svg.querySelectorAll('.edges > path');
       edges.forEach((edge) => {
         expect(edge).to.have.class('flowchart-link');
       });
@@ -739,7 +739,7 @@ NL\`") --"\`1o **bold**\`"--> c
           { flowchart: { titleTopMargin: 0 } }
         );
       });
-      it.skip('Wrapping long text with a new line', () => {
+      it('Wrapping long text with a new line', () => {
         imgSnapshotTest(
           `%%{init: {"flowchart": {"htmlLabels": true}} }%%
 flowchart-elk LR
@@ -841,7 +841,7 @@ end
           { flowchart: { titleTopMargin: 0 } }
         );
       });
-      it('Sub graphs', () => {
+      it('Sub graphs and markdown strings', () => {
         imgSnapshotTest(
           `---
 config:
@@ -857,217 +857,12 @@ flowchart LR
     D --> E
       A["A"]
 
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-      it('6080: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
----
-flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
-        n3["Option 2"]
-        n4["fa:fa-car Option 3"]
-  end
- subgraph s2["Untitled subgraph"]
-        n5["Evaluate"]
-        n6["Option 1"]
-        n7["Option 2"]
-        n8["fa:fa-car Option 3"]
-  end
-    A["Start"] -- Some text --> B("Continue")
-    B --> C{"Evaluate"}
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    n1 -- One --> n2
-    n1 -- Two --> n3
-    n1 -- Three --> n4
-    n5 -- One --> n6
-    n5 -- Two --> n7
-    n5 -- Three --> n8
-    n1@{ shape: diam}
-    n2@{ shape: rect}
-    n3@{ shape: rect}
-    n4@{ shape: rect}
-    n5@{ shape: diam}
-    n6@{ shape: rect}
-    n7@{ shape: rect}
-    n8@{ shape: rect}
-
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-
-      it('6088-1: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
----
-      flowchart LR
-      subgraph S2
-      subgraph s1["APA"]
-      D{"Use the editor"}
-      end
-
-
-      D -- Mermaid js --> I{"fa:fa-code Text"}
-            D --> I
-            D --> I
-
-      end
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-
-      it('6088-2: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
----
-      flowchart LR
-      a
-      subgraph s0["APA"]
-      subgraph s8["APA"]
-      subgraph s1["APA"]
-        D{"X"}
-        E[Q]
-      end
-      subgraph s3["BAPA"]
-        F[Q]
-        I
-      end
-            D --> I
-            D --> I
-            D --> I
-
-      I{"X"}
-      end
-      end
-
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-
-      it('6088-3: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
----
-      flowchart LR
-      a
-        D{"Use the editor"}
-
-      D -- Mermaid js --> I{"fa:fa-code Text"}
-      D-->I
-      D-->I
-
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-
-      it('6088-4: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
----
-flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
-        n3["Option 2"]
-        n4["fa:fa-car Option 3"]
-  end
- subgraph s2["Untitled subgraph"]
-        n5["Evaluate"]
-        n6["Option 1"]
-        n7["Option 2"]
-        n8["fa:fa-car Option 3"]
-  end
-    A["Start"] -- Some text --> B("Continue")
-    B --> C{"Evaluate"}
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    n1 -- One --> n2
-    n1 -- Two --> n3
-    n1 -- Three --> n4
-    n5 -- One --> n6
-    n5 -- Two --> n7
-    n5 -- Three --> n8
-    n1@{ shape: diam}
-    n2@{ shape: rect}
-    n3@{ shape: rect}
-    n4@{ shape: rect}
-    n5@{ shape: diam}
-    n6@{ shape: rect}
-    n7@{ shape: rect}
-    n8@{ shape: rect}
-
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-
-      it('6088-5: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
----
-flowchart LR
-    A{A} --> B & C
-
-`,
-          { flowchart: { titleTopMargin: 0 } }
-        );
-      });
-      it('6088-6: should handle diamond shape intersections', () => {
-        imgSnapshotTest(
-          `---
-config:
-  layout: elk
----
-flowchart LR
-    A{A} --> B & C
-    subgraph "subbe"
-      A
-    end
-
 `,
           { flowchart: { titleTopMargin: 0 } }
         );
       });
     });
   });
-
-  it('6647-elk: should keep node order when using elk layout unless it would add crossings', () => {
-    imgSnapshotTest(
-      `---
-config:
-  layout: elk
----
-      flowchart TB
-        a --> a1 & a2 & a3 & a4
-        b --> b1 & b2
-        b2 --> b3
-        b1 --> b4
-      `
-    );
-  });
 });
 
 describe('Title and arrow styling #4813', () => {

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

@@ -12,6 +12,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -29,6 +30,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: true },
         fontFamily: 'courier',
       }
@@ -45,7 +47,7 @@ describe('Flowchart HandDrawn', () => {
       C -->|Two| E[iPhone]
       C -->|Three| F[Car]
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -60,7 +62,7 @@ describe('Flowchart HandDrawn', () => {
       C -->|Two| E[\\iPhone\\]
       C -->|Three| F[Car]
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -76,7 +78,7 @@ describe('Flowchart HandDrawn', () => {
       classDef processHead fill:#888888,color:white,font-weight:bold,stroke-width:3px,stroke:#001f3f
       class 1A,1B,D,E processHead
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -105,7 +107,7 @@ describe('Flowchart HandDrawn', () => {
       35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
       36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -176,7 +178,7 @@ describe('Flowchart HandDrawn', () => {
       9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
       9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -185,7 +187,7 @@ describe('Flowchart HandDrawn', () => {
       `
     graph TB;subgraph "number as labels";1;end;
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -197,7 +199,7 @@ describe('Flowchart HandDrawn', () => {
         a1-->a2
       end
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -209,7 +211,7 @@ describe('Flowchart HandDrawn', () => {
         a1-->a2
       end
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -244,7 +246,7 @@ describe('Flowchart HandDrawn', () => {
       style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
       style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -346,7 +348,7 @@ describe('Flowchart HandDrawn', () => {
       sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
       sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
       `,
-      { look: 'handDrawn', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, fontFamily: 'courier' }
     );
   });
 
@@ -362,6 +364,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         listUrl: false,
         listId: 'color styling',
         fontFamily: 'courier',
@@ -387,6 +390,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         listUrl: false,
         listId: 'color styling',
         fontFamily: 'courier',
@@ -407,6 +411,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -430,6 +435,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -451,6 +457,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -464,6 +471,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -477,6 +485,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -491,6 +500,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -517,6 +527,7 @@ describe('Flowchart HandDrawn', () => {
       class A someclass;`,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -533,7 +544,7 @@ describe('Flowchart HandDrawn', () => {
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
       `,
-      { look: 'handDrawn', flowchart: { nodeSpacing: 50 }, fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { nodeSpacing: 50 }, fontFamily: 'courier' }
     );
   });
 
@@ -549,6 +560,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { rankSpacing: '100' },
         fontFamily: 'courier',
       }
@@ -566,6 +578,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -590,7 +603,7 @@ describe('Flowchart HandDrawn', () => {
       click E "notes://do-your-thing/id" "other protocol test"
       click F "javascript:alert('test')" "script test"
       `,
-      { look: 'handDrawn', securityLevel: 'loose', fontFamily: 'courier' }
+      { look: 'handDrawn', handDrawnSeed: 0, securityLevel: 'loose', fontFamily: 'courier' }
     );
   });
 
@@ -610,7 +623,7 @@ describe('Flowchart HandDrawn', () => {
       click B "index.html#link-clicked" "link test"
       click D testClick "click test"
       `,
-      { look: 'handDrawn', flowchart: { htmlLabels: true } }
+      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { htmlLabels: true } }
     );
   });
 
@@ -632,6 +645,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -650,7 +664,7 @@ describe('Flowchart HandDrawn', () => {
       class A myClass1
       class D myClass2
       `,
-      { look: 'handDrawn', flowchart: { htmlLabels: true } }
+      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { htmlLabels: true } }
     );
   });
 
@@ -668,6 +682,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -696,6 +711,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -712,6 +728,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -735,6 +752,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: false },
         fontFamily: 'courier',
       }
@@ -751,7 +769,7 @@ describe('Flowchart HandDrawn', () => {
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
       `,
-      { look: 'handDrawn', flowchart: { diagramPadding: 0 } }
+      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { diagramPadding: 0 } }
     );
   });
 
@@ -760,7 +778,7 @@ describe('Flowchart HandDrawn', () => {
       `graph TD
       A[Christmas]
       `,
-      { look: 'handDrawn', handDrawnSeed: 1 }
+      { look: 'handDrawn', handDrawnSeed: 0 }
     );
   });
 
@@ -778,7 +796,7 @@ describe('Flowchart HandDrawn', () => {
       C -----> E4
       C ======> E5
       `,
-      { look: 'handDrawn', handDrawnSeed: 1 }
+      { look: 'handDrawn', handDrawnSeed: 0 }
     );
   });
   it('FDH36: should render escaped without html labels', () => {
@@ -786,7 +804,7 @@ describe('Flowchart HandDrawn', () => {
       `graph TD
         a["<strong>Haiya</strong>"]-->b
       `,
-      { look: 'handDrawn', htmlLabels: false, flowchart: { htmlLabels: false } }
+      { look: 'handDrawn', handDrawnSeed: 0, htmlLabels: false, flowchart: { htmlLabels: false } }
     );
   });
   it('FDH37: should render non-escaped with html labels', () => {
@@ -796,6 +814,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         htmlLabels: true,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
@@ -811,7 +830,7 @@ describe('Flowchart HandDrawn', () => {
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
       `,
-      { look: 'handDrawn', flowchart: { useMaxWidth: true } }
+      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { useMaxWidth: true } }
     );
     cy.get('svg').should((svg) => {
       expect(svg).to.have.attr('width', '100%');
@@ -834,7 +853,7 @@ describe('Flowchart HandDrawn', () => {
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
       `,
-      { look: 'handDrawn', flowchart: { useMaxWidth: false } }
+      { look: 'handDrawn', handDrawnSeed: 0, flowchart: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
       // const height = parseFloat(svg.attr('height'));
@@ -855,6 +874,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         htmlLabels: true,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
@@ -884,6 +904,7 @@ describe('Flowchart HandDrawn', () => {
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         htmlLabels: true,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
@@ -898,6 +919,7 @@ graph TD
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         htmlLabels: true,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
@@ -915,6 +937,7 @@ graph TD
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         htmlLabels: true,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
@@ -954,6 +977,7 @@ graph TD
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         htmlLabels: true,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
@@ -975,6 +999,7 @@ graph TD
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         htmlLabels: true,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
@@ -991,6 +1016,7 @@ graph TD
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         htmlLabels: true,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
@@ -1001,11 +1027,12 @@ graph TD
     imgSnapshotTest(
       `
       graph TD
-        classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff
+        classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff 
         hello --> default
       `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         htmlLabels: true,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
@@ -1024,6 +1051,7 @@ graph TD
     `,
       {
         look: 'handDrawn',
+        handDrawnSeed: 0,
         flowchart: { htmlLabels: true },
         securityLevel: 'loose',
       }

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

@@ -1,28 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-const themes = ['default', 'forest', 'dark', 'base', 'neutral'];
-
-describe('when rendering flowchart with icons', () => {
-  for (const theme of themes) {
-    it(`should render icons from fontawesome library on theme ${theme}`, () => {
-      imgSnapshotTest(
-        `flowchart TD
-            A("fab:fa-twitter Twitter") --> B("fab:fa-facebook Facebook")
-            B --> C("fa:fa-coffee Coffee")
-            C --> D("fa:fa-car Car")
-            D --> E("fab:fa-github GitHub")
-        `,
-        { theme }
-      );
-    });
-
-    it(`should render registered icons on theme ${theme}`, () => {
-      imgSnapshotTest(
-        `flowchart TD
-            A("fa:fa-bell Bell") 
-        `,
-        { theme }
-      );
-    });
-  }
-});

cypress/integration/rendering/flowchart-shape-alias.spec.ts

@@ -1,142 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-const aliasSet1 = ['process', 'rect', 'proc', 'rectangle'] as const;
-
-const aliasSet2 = ['event', 'rounded'] as const;
-
-const aliasSet3 = ['stadium', 'pill', 'terminal'] as const;
-
-const aliasSet4 = ['fr-rect', 'subproc', 'subprocess', 'framed-rectangle', 'subroutine'] as const;
-
-const aliasSet5 = ['db', 'database', 'cylinder', 'cyl'] as const;
-
-const aliasSet6 = ['diam', 'decision', 'diamond'] as const;
-
-const aliasSet7 = ['hex', 'hexagon', 'prepare'] as const;
-
-const aliasSet8 = ['lean-r', 'lean-right', 'in-out'] as const;
-
-const aliasSet9 = ['lean-l', 'lean-left', 'out-in'] as const;
-
-const aliasSet10 = ['trap-b', 'trapezoid-bottom', 'priority'] as const;
-
-const aliasSet11 = ['trap-t', 'trapezoid-top', 'manual'] as const;
-
-const aliasSet12 = ['dbl-circ', 'double-circle'] as const;
-
-const aliasSet13 = ['notched-rectangle', 'card', 'notch-rect'] as const;
-
-const aliasSet14 = [
-  'lin-rect',
-  'lined-rectangle',
-  'lin-proc',
-  'lined-process',
-  'shaded-process',
-] as const;
-
-const aliasSet15 = ['sm-circ', 'small-circle', 'start'] as const;
-
-const aliasSet16 = ['fr-circ', 'framed-circle', 'stop'] as const;
-
-const aliasSet17 = ['fork', 'join'] as const;
-// brace-r', 'braces'
-const aliasSet18 = ['comment', 'brace-l'] as const;
-
-const aliasSet19 = ['bolt', 'com-link', 'lightning-bolt'] as const;
-
-const aliasSet20 = ['doc', 'document'] as const;
-
-const aliasSet21 = ['delay', 'half-rounded-rectangle'] as const;
-
-const aliasSet22 = ['h-cyl', 'das', 'horizontal-cylinder'] as const;
-
-const aliasSet23 = ['lin-cyl', 'disk', 'lined-cylinder'] as const;
-
-const aliasSet24 = ['curv-trap', 'display', 'curved-trapezoid'] as const;
-
-const aliasSet25 = ['div-rect', 'div-proc', 'divided-rectangle', 'divided-process'] as const;
-
-const aliasSet26 = ['extract', 'tri', 'triangle'] as const;
-
-const aliasSet27 = ['win-pane', 'internal-storage', 'window-pane'] as const;
-
-const aliasSet28 = ['f-circ', 'junction', 'filled-circle'] as const;
-
-const aliasSet29 = ['lin-doc', 'lined-document'] as const;
-
-const aliasSet30 = ['notch-pent', 'loop-limit', 'notched-pentagon'] as const;
-
-const aliasSet31 = ['flip-tri', 'manual-file', 'flipped-triangle'] as const;
-
-const aliasSet32 = ['sl-rect', 'manual-input', 'sloped-rectangle'] as const;
-
-const aliasSet33 = ['docs', 'documents', 'st-doc', 'stacked-document'] as const;
-
-const aliasSet34 = ['procs', 'processes', 'st-rect', 'stacked-rectangle'] as const;
-
-const aliasSet35 = ['flag', 'paper-tape'] as const;
-
-const aliasSet36 = ['bow-rect', 'stored-data', 'bow-tie-rectangle'] as const;
-
-const aliasSet37 = ['cross-circ', 'summary', 'crossed-circle'] as const;
-
-const aliasSet38 = ['tag-doc', 'tagged-document'] as const;
-
-const aliasSet39 = ['tag-rect', 'tag-proc', 'tagged-rectangle', 'tagged-process'] as const;
-
-const aliasSet40 = ['collate', 'hourglass'] as const;
-
-// Aggregate all alias sets into a single array
-const aliasSets = [
-  aliasSet1,
-  aliasSet2,
-  aliasSet3,
-  aliasSet4,
-  aliasSet5,
-  aliasSet6,
-  aliasSet7,
-  aliasSet8,
-  aliasSet9,
-  aliasSet10,
-  aliasSet11,
-  aliasSet12,
-  aliasSet13,
-  aliasSet14,
-  aliasSet15,
-  aliasSet16,
-  aliasSet17,
-  aliasSet18,
-  aliasSet19,
-  aliasSet20,
-  aliasSet21,
-  aliasSet22,
-  aliasSet23,
-  aliasSet24,
-  aliasSet25,
-  aliasSet26,
-  aliasSet27,
-  aliasSet28,
-  aliasSet29,
-  aliasSet30,
-  aliasSet31,
-  aliasSet32,
-  aliasSet33,
-  aliasSet34,
-  aliasSet35,
-  aliasSet36,
-  aliasSet37,
-  aliasSet38,
-  aliasSet39,
-] as const;
-
-aliasSets.forEach((aliasSet) => {
-  describe(`Test ${aliasSet.join(',')} `, () => {
-    it(`All ${aliasSet.join(',')} should render same shape`, () => {
-      let flowchartCode = `flowchart \n`;
-      aliasSet.forEach((alias, index) => {
-        flowchartCode += ` n${index}@{ shape: ${alias}, label: "${alias}" }\n`;
-      });
-      imgSnapshotTest(flowchartCode);
-    });
-  });
-});

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

@@ -99,7 +99,7 @@ describe('Flowchart v2', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.be.within(440 * 0.95, 440 * 1.05);
+      expect(maxWidthValue).to.be.within(446 * 0.95 - 1, 446 * 1.05);
     });
   });
   it('8: should render a flowchart when useMaxWidth is false', () => {
@@ -118,7 +118,7 @@ describe('Flowchart v2', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      expect(width).to.be.within(440 * 0.95, 440 * 1.05);
+      expect(width).to.be.within(446 * 0.95 - 1, 446 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -198,13 +198,13 @@ describe('Flowchart v2', () => {
       `flowchart TB
   internet
   nat
-  router
+  routeur
   lb1
   lb2
   compute1
   compute2
   subgraph project
-  router
+  routeur
   nat
     subgraph subnet1
       compute1
@@ -215,8 +215,8 @@ describe('Flowchart v2', () => {
       lb2
     end
   end
-  internet --> router
-  router --> subnet1 & subnet2
+  internet --> routeur
+  routeur --> subnet1 & subnet2
   subnet1 & subnet2 --> nat --> internet
       `,
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
@@ -433,7 +433,7 @@ flowchart TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('63: title on subgraphs should be themeable', () => {
+  it('63: title on subgraphs should be themable', () => {
     imgSnapshotTest(
       `
       %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
@@ -699,7 +699,7 @@ A --> B
       { flowchart: { titleTopMargin: 10 } }
     );
   });
-  it('3192: It should be possible to render flowcharts with invisible edges', () => {
+  it('3192: It should be possieble to render flowcharts with invisible edges', () => {
     imgSnapshotTest(
       `---
 title: Simple flowchart with invisible edges
@@ -786,7 +786,7 @@ A ~~~ B
       `---
       title: Subgraph nodeSpacing and rankSpacing example
       config:
-        flowchart:
+        flowchart: 
           nodeSpacing: 250
           rankSpacing: 250
       ---
@@ -1052,138 +1052,5 @@ end
         }
       );
     });
-    it('Should render self-loops', () => {
-      imgSnapshotTest(
-        `flowchart
-          A --> A
-          subgraph B
-            B1 --> B1
-          end
-          subgraph C
-            subgraph C1
-              C2 --> C2
-              subgraph D
-                D1 --> D1
-              end
-              D --> D
-            end
-            C1 --> C1
-          end
-        `,
-        {
-          flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } },
-        }
-      );
-    });
-  });
-  describe('New @ syntax for node metadata edge cases', () => {
-    it('should be possible to use @  syntax to add labels on multi nodes', () => {
-      imgSnapshotTest(
-        `flowchart TB
-       n2["label for n2"] &   n4@{ label: "label for n4"}   & n5@{ label: "label for n5"}
-        `,
-        {}
-      );
-    });
-    it('should be possible to use @  syntax to add labels with trail spaces and &', () => {
-      imgSnapshotTest(
-        `flowchart TB
-       n2["label for n2"] &   n4@{ label: "label for n4"}   & n5@{ label: "label for n5"}   
-        `,
-        {}
-      );
-    });
-    it('should be possible to use @  syntax to add labels with trail spaces', () => {
-      imgSnapshotTest(
-        `flowchart TB
-       n2["label for n2"]
-       n4@{ label: "label for n4"}
-       n5@{ label: "label for n5"}  
-        `,
-        {}
-      );
-    });
-    it('should be possible to use @  syntax to add labels with trail spaces and edge/link', () => {
-      imgSnapshotTest(
-        `flowchart TD
-    A["A"] --> B["for B"] &    C@{ label: "for c"} & E@{label : "for E"}  
-    D@{label: "for D"}     
-        `,
-        {}
-      );
-    });
-  });
-  describe('Flowchart Node Shape Rendering', () => {
-    it('should render a stadium-shaped node', () => {
-      imgSnapshotTest(
-        `flowchart TB
-          A(["Start"]) --> n1["Untitled Node"]
-          A --> n2["Untitled Node"]
-        `,
-        {}
-      );
-    });
-    it('should render a diamond-shaped node using shape config', () => {
-      imgSnapshotTest(
-        `flowchart BT
-          n2["Untitled Node"] --> n1["Diamond"]
-          n1@{ shape: diam}
-        `,
-        {}
-      );
-    });
-    it('should render a rounded rectangle and a normal rectangle', () => {
-      imgSnapshotTest(
-        `flowchart BT
-        n2["Untitled Node"] --> n1["Rounded Rectangle"]
-        n3["Untitled Node"] --> n1
-        n1@{ shape: rounded}
-        n3@{ shape: rect}
-    `,
-        {}
-      );
-    });
-  });
-
-  it('6617: Per Link Curve Styling using edge Ids', () => {
-    imgSnapshotTest(
-      `flowchart TD
-      A e1@-->B e5@--> E
-      E e7@--> D
-      B e3@-->D
-      A e2@-->C e4@-->D
-      C e6@--> F
-      F e8@--> D
-      e1@{ curve: natural }
-      e2@{ curve: stepAfter }
-      e3@{ curve: monotoneY }
-      e4@{ curve: bumpY }
-      e5@{ curve: linear }
-      e6@{ curve: catmullRom }
-      e7@{ curve: cardinal }
-      `
-    );
-  });
-
-  describe('when rendering unsuported markdown', () => {
-    const graph = `flowchart TB
-    mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"\`<**1**1\`"--> fine["No bug"]
-    mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
-    subgraph subgraph1["\`How to fix **fix**\`"]
-        broken --> B["B"]
-    end
-    githost["Github, Gitlab, BitBucket, etc."]
-    githost2["\`Github, Gitlab, BitBucket, etc.\`"]
-    a["1."]
-    b["- x"]
-      `;
-
-    it('should render raw strings', () => {
-      imgSnapshotTest(graph);
-    });
-
-    it('should render raw strings with htmlLabels: false', () => {
-      imgSnapshotTest(graph, { htmlLabels: false });
-    });
   });
 });

cypress/integration/rendering/flowchart.spec.js

@@ -895,7 +895,7 @@ graph TD
     imgSnapshotTest(
       `
       graph TD
-        classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff
+        classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff 
         hello --> default
       `,
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
@@ -917,60 +917,4 @@ graph TD
       }
     );
   });
-  it('#6369: edge color should affect arrow head', () => {
-    imgSnapshotTest(
-      `
-    flowchart LR
-        A --> B
-        A --> C
-        C --> D
-
-        linkStyle 0 stroke:#D50000
-        linkStyle 2 stroke:#D50000
-    `,
-      {
-        flowchart: { htmlLabels: true },
-        securityLevel: 'loose',
-      }
-    );
-  });
-  it('68: should honor subgraph direction when inheritDir is false', () => {
-    imgSnapshotTest(
-      `
-      %%{init: {"flowchart": { "inheritDir": false }}}%%
-      flowchart TB
-        direction LR
-        subgraph A
-          direction TB
-          a --> b
-        end
-        subgraph B
-          c --> d
-        end
-      `,
-      {
-        fontFamily: 'courier',
-      }
-    );
-  });
-
-  it('69: should inherit global direction when inheritDir is true', () => {
-    imgSnapshotTest(
-      `
-      %%{init: {"flowchart": { "inheritDir": true }}}%%
-      flowchart TB
-        direction LR
-        subgraph A
-          direction TB
-          a --> b
-        end
-        subgraph B
-          c --> d
-        end
-      `,
-      {
-        fontFamily: 'courier',
-      }
-    );
-  });
 });

cypress/integration/rendering/gantt.spec.js

@@ -117,7 +117,7 @@ describe('Gantt diagram', () => {
       {}
     );
   });
-  it('should FAIL rendering a gantt chart for issue #1060 with invalid date', () => {
+  it('should FAIL redering a gantt chart for issue #1060 with invalid date', () => {
     imgSnapshotTest(
       `
       gantt
@@ -358,23 +358,6 @@ describe('Gantt diagram', () => {
     );
   });
 
-  it('should render a gantt diagram with a vert tag', () => {
-    imgSnapshotTest(
-      `
-      gantt
-        title A Gantt Diagram
-        dateFormat   ss
-        axisFormat   %Ss
-
-        section Section
-        A task           : a1, 00, 6s
-        Milestone     : vert, 01,
-        section Another
-        Task in sec      : 06, 3s
-        another task     : 3s
-      `
-    );
-  });
   it('should render a gantt diagram with tick is 2 milliseconds', () => {
     imgSnapshotTest(
       `
@@ -565,18 +548,6 @@ describe('Gantt diagram', () => {
     );
   });
 
-  it('should render only the day when using dateFormat D', () => {
-    imgSnapshotTest(
-      `
-    gantt
-      title Test
-      dateFormat D
-      A :a, 1, 1d
-    `,
-      {}
-    );
-  });
-
   // TODO: fix it
   //
   // This test is skipped deliberately
@@ -602,7 +573,7 @@ describe('Gantt diagram', () => {
       `
     );
   });
-  it('should render a gantt diagram excluding friday and saturday', () => {
+  it('should render a gantt diagram exculding friday and saturday', () => {
     imgSnapshotTest(
       `gantt
       title A Gantt Diagram
@@ -613,7 +584,7 @@ describe('Gantt diagram', () => {
       A task :a1, 2024-02-28, 10d`
     );
   });
-  it('should render a gantt diagram excluding saturday and sunday', () => {
+  it('should render a gantt diagram exculding saturday and sunday', () => {
     imgSnapshotTest(
       `gantt
       title A Gantt Diagram
@@ -659,49 +630,6 @@ describe('Gantt diagram', () => {
     );
   });
 
-  it('should render a gantt diagram excluding a specific date in YYYY-MM-DD HH:mm:ss format', () => {
-    imgSnapshotTest(
-      `
-    gantt
-      dateFormat  YYYY-MM-DD HH:mm:ss
-      excludes    2025-07-07
-      section     Section
-      A task      :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
-      Another task:after a1, 20h
-    `,
-      {}
-    );
-  });
-
-  it('should render a gantt diagram excluding saturday and sunday in YYYY-MM-DD HH:mm:ss format', () => {
-    imgSnapshotTest(
-      `
-        gantt
-      dateFormat  YYYY-MM-DD HH:mm:ss
-      excludes    weekends
-       weekend saturday
-      section     Section
-      A task      :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
-      Another task:after a1, 20h
-    `,
-      {}
-    );
-  });
-  it('should render a gantt diagram excluding friday and saturday in YYYY-MM-DD HH:mm:ss format', () => {
-    imgSnapshotTest(
-      `
-        gantt
-      dateFormat  YYYY-MM-DD HH:mm:ss
-      excludes    weekends
-       weekend friday
-      section     Section
-      A task      :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
-      Another task:after a1, 20h
-    `,
-      {}
-    );
-  });
-
   it("should render when there's a semicolon in the title", () => {
     imgSnapshotTest(
       `
@@ -743,7 +671,7 @@ describe('Gantt diagram', () => {
       title Gantt Digram
       dateFormat  YYYY-MM-DD
       section Section
-      ;A task with a semicolon           :a1, 2014-01-01, 30d
+      ;A task with a semiclon           :a1, 2014-01-01, 30d
       Another task     :after a1  , 20d
       section Another
       Task in sec      :2014-01-12  , 12d

cypress/integration/rendering/gitGraph.spec.js

@@ -11,7 +11,7 @@ describe('Git Graph diagram', () => {
       {}
     );
   });
-  it('2: should render a simple gitgraph with commit on main branch with id', () => {
+  it('2: should render a simple gitgraph with commit on main branch with Id', () => {
     imgSnapshotTest(
       `gitGraph
        commit id: "One"
@@ -253,7 +253,7 @@ describe('Git Graph diagram', () => {
       `
       gitGraph
       checkout main
-      %% Make sure to manually set the id of all commits, for consistent visual tests
+      %% Make sure to manually set the ID of all commits, for consistent visual tests
       commit id: "1-abcdefg"
       checkout main
       branch branch1
@@ -343,7 +343,7 @@ gitGraph
       {}
     );
   });
-  it('16: should render a simple gitgraph with commit on main branch with id | Vertical Branch', () => {
+  it('16: should render a simple gitgraph with commit on main branch with Id | Vertical Branch', () => {
     imgSnapshotTest(
       `gitGraph TB:
        commit id: "One"
@@ -585,7 +585,7 @@ gitGraph
       `
       gitGraph TB:
       checkout main
-      %% Make sure to manually set the id of all commits, for consistent visual tests
+      %% Make sure to manually set the ID of all commits, for consistent visual tests
       commit id: "1-abcdefg"
       checkout main
       branch branch1
@@ -1024,7 +1024,7 @@ gitGraph TB:
         {}
       );
     });
-    it('51: should render a simple gitgraph with commit on main branch with id | Vertical Branch - Bottom-to-top', () => {
+    it('51: should render a simple gitgraph with commit on main branch with Id | Vertical Branch - Bottom-to-top', () => {
       imgSnapshotTest(
         `gitGraph BT:
          commit id: "One"
@@ -1266,7 +1266,7 @@ gitGraph TB:
         `
         gitGraph BT:
         checkout main
-        %% Make sure to manually set the id of all commits, for consistent visual tests
+        %% Make sure to manually set the ID of all commits, for consistent visual tests
         commit id: "1-abcdefg"
         checkout main
         branch branch1
@@ -1491,7 +1491,7 @@ gitGraph TB:
         `
         gitGraph
         switch main
-        %% Make sure to manually set the id of all commits, for consistent visual tests
+        %% Make sure to manually set the ID of all commits, for consistent visual tests
         commit id: "1-abcdefg"
         switch main
         branch branch1

cypress/integration/rendering/iconShape.spec.ts

@@ -1,143 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util';
-
-const looks = ['classic', 'handDrawn'] as const;
-const directions = [
-  'TB',
-  //'BT',
-  'LR',
-  //  'RL'
-] as const;
-const forms = [undefined, 'square', 'circle', 'rounded'] as const;
-const labelPos = [undefined, 't', 'b'] as const;
-
-looks.forEach((look) => {
-  directions.forEach((direction) => {
-    forms.forEach((form) => {
-      labelPos.forEach((pos) => {
-        describe(`Test iconShape in ${form ? `${form} form,` : ''} ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => {
-          it(`without label`, () => {
-            let flowchartCode = `flowchart ${direction}\n`;
-            flowchartCode += `  nA --> nAA@{ icon: 'fa:bell'`;
-            if (form) {
-              flowchartCode += `, form: '${form}'`;
-            }
-            flowchartCode += ` }\n`;
-            imgSnapshotTest(flowchartCode, { look });
-          });
-
-          it(`with label`, () => {
-            let flowchartCode = `flowchart ${direction}\n`;
-            flowchartCode += `  nA --> nAA@{ icon: 'fa:bell', label: 'This is a label for icon shape'`;
-            if (form) {
-              flowchartCode += `, form: '${form}'`;
-            }
-            if (pos) {
-              flowchartCode += `, pos: '${pos}'`;
-            }
-            flowchartCode += ` }\n`;
-            imgSnapshotTest(flowchartCode, { look });
-          });
-
-          it(`with very long label`, () => {
-            let flowchartCode = `flowchart ${direction}\n`;
-            flowchartCode += `  nA --> nAA@{ icon: 'fa:bell', label: 'This is a very very very very very long long long label for icon shape'`;
-            if (form) {
-              flowchartCode += `, form: '${form}'`;
-            }
-            if (pos) {
-              flowchartCode += `, pos: '${pos}'`;
-            }
-            flowchartCode += ` }\n`;
-            imgSnapshotTest(flowchartCode, { look });
-          });
-
-          it(`with markdown htmlLabels:true`, () => {
-            let flowchartCode = `flowchart ${direction}\n`;
-            flowchartCode += `  nA --> nAA@{ icon: 'fa:bell', label: 'This is **bold** </br>and <strong>strong</strong> for icon shape'`;
-            if (form) {
-              flowchartCode += `, form: '${form}'`;
-            }
-            if (pos) {
-              flowchartCode += `, pos: '${pos}'`;
-            }
-            flowchartCode += ` }\n`;
-            imgSnapshotTest(flowchartCode, { look });
-          });
-
-          it(`with markdown htmlLabels:false`, () => {
-            let flowchartCode = `flowchart ${direction}\n`;
-            flowchartCode += `  nA --> nAA@{ icon: 'fa:bell', label: 'This is **bold** </br>and <strong>strong</strong> for icon shape'`;
-            if (form) {
-              flowchartCode += `, form: '${form}'`;
-            }
-            if (pos) {
-              flowchartCode += `, pos: '${pos}'`;
-            }
-            flowchartCode += ` }\n`;
-            imgSnapshotTest(flowchartCode, {
-              look,
-              htmlLabels: false,
-              flowchart: { htmlLabels: false },
-            });
-          });
-
-          it(`with styles`, () => {
-            let flowchartCode = `flowchart ${direction}\n`;
-            flowchartCode += `  nA --> nAA@{ icon: 'fa:bell', label: 'new icon shape'`;
-            if (form) {
-              flowchartCode += `, form: '${form}'`;
-            }
-            if (pos) {
-              flowchartCode += `, pos: '${pos}'`;
-            }
-            flowchartCode += ` }\n`;
-            flowchartCode += `  style nAA fill:#f9f,stroke:#333,stroke-width:4px \n`;
-            imgSnapshotTest(flowchartCode, { look });
-          });
-
-          it(`with classDef`, () => {
-            let flowchartCode = `flowchart ${direction}\n`;
-            flowchartCode += `  classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
-            flowchartCode += `  nA --> nAA@{ icon: 'fa:bell', label: 'new icon shape'`;
-            if (form) {
-              flowchartCode += `, form: '${form}'`;
-            }
-            if (pos) {
-              flowchartCode += `, pos: '${pos}'`;
-            }
-            flowchartCode += ` }\n`;
-            flowchartCode += `  nAA:::customClazz\n`;
-            imgSnapshotTest(flowchartCode, { look });
-          });
-        });
-      });
-    });
-  });
-});
-
-describe('Test iconShape with different h', () => {
-  it('with different h', () => {
-    let flowchartCode = `flowchart TB\n`;
-    const icon = 'fa:bell';
-    const iconHeight = 64;
-    flowchartCode += `  nA --> nAA@{ icon: '${icon}', label: 'icon with different h', h: ${iconHeight} }\n`;
-    imgSnapshotTest(flowchartCode);
-  });
-});
-
-describe('Test colored iconShape', () => {
-  it('with no styles', () => {
-    let flowchartCode = `flowchart TB\n`;
-    const icon = 'fluent-emoji:tropical-fish';
-    flowchartCode += `  nA --> nAA@{ icon: '${icon}', form: 'square', label: 'icon with color' }\n`;
-    imgSnapshotTest(flowchartCode);
-  });
-
-  it('with styles', () => {
-    let flowchartCode = `flowchart TB\n`;
-    const icon = 'fluent-emoji:tropical-fish';
-    flowchartCode += `  nA --> nAA@{ icon: '${icon}', form: 'square', label: 'icon with color' }\n`;
-    flowchartCode += `  style nAA fill:#f9f,stroke:#333,stroke-width:4px \n`;
-    imgSnapshotTest(flowchartCode);
-  });
-});

cypress/integration/rendering/imageShape.spec.ts

@@ -1,103 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util';
-
-const looks = ['classic', 'handDrawn'] as const;
-const directions = [
-  'TB',
-  //'BT',
-  'LR',
-  //  'RL'
-] as const;
-const labelPos = [undefined, 't', 'b'] as const;
-
-looks.forEach((look) => {
-  directions.forEach((direction) => {
-    labelPos.forEach((pos) => {
-      describe(`Test imageShape in ${look} look and dir ${direction} with label position ${pos ? pos : 'not defined'}`, () => {
-        it(`without label`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', w: '100', h: '100' }\n`;
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with label`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', label: 'This is a label for image shape'`;
-
-          flowchartCode += `, w: '100', h: '200'`;
-          if (pos) {
-            flowchartCode += `, pos: '${pos}'`;
-          }
-          flowchartCode += ` }\n`;
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with very long label`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', label: 'This is a very very very very very long long long label for image shape'`;
-
-          flowchartCode += `, w: '100', h: '250'`;
-          if (pos) {
-            flowchartCode += `, pos: '${pos}'`;
-          }
-          flowchartCode += ` }\n`;
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with markdown htmlLabels:true`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', label: 'This is **bold** </br>and <strong>strong</strong> for image shape'`;
-
-          flowchartCode += `, w: '550', h: '200'`;
-          if (pos) {
-            flowchartCode += `, pos: '${pos}'`;
-          }
-          flowchartCode += ` }\n`;
-          imgSnapshotTest(flowchartCode, { look, htmlLabels: true });
-        });
-
-        it(`with markdown htmlLabels:false`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', label: 'This is **bold** </br>and <strong>strong</strong> for image shape'`;
-          flowchartCode += `, w: '250', h: '200'`;
-
-          if (pos) {
-            flowchartCode += `, pos: '${pos}'`;
-          }
-          flowchartCode += ` }\n`;
-          imgSnapshotTest(flowchartCode, {
-            look,
-            htmlLabels: false,
-            flowchart: { htmlLabels: false },
-          });
-        });
-
-        it(`with styles`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', label: 'new image shape'`;
-          flowchartCode += `, w: '550', h: '200'`;
-
-          if (pos) {
-            flowchartCode += `, pos: '${pos}'`;
-          }
-          flowchartCode += ` }\n`;
-          flowchartCode += `  style A fill:#f9f,stroke:#333,stroke-width:4px \n`;
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with classDef`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#000000,stroke-dasharray: 5 5\n`;
-          flowchartCode += `  nA --> A@{ img: 'https://cdn.pixabay.com/photo/2020/02/22/18/49/paper-4871356_1280.jpg', label: 'new image shape'`;
-
-          flowchartCode += `, w: '500', h: '550'`;
-          if (pos) {
-            flowchartCode += `, pos: '${pos}'`;
-          }
-          flowchartCode += ` }\n`;
-          flowchartCode += `  A:::customClazz\n`;
-          imgSnapshotTest(flowchartCode, { look });
-        });
-      });
-    });
-  });
-});

cypress/integration/rendering/journey.spec.js

@@ -63,199 +63,4 @@ section Checkout from website
       { journey: { useMaxWidth: false } }
     );
   });
-
-  it('should initialize with a left margin of 150px for user journeys', () => {
-    renderGraph(
-      `
-      ---
-      config:
-        journey:
-          maxLabelWidth: 320
-      ---
-      journey
-        title User Journey Example
-        section Onboarding
-            Sign Up: 5:
-            Browse Features: 3:
-            Use Core Functionality: 4:
-        section Engagement
-            Browse Features: 3
-            Use Core Functionality: 4
-      `,
-      { journey: { useMaxWidth: true } }
-    );
-
-    let diagramStartX;
-
-    cy.contains('foreignobject', 'Sign Up').then(($diagram) => {
-      diagramStartX = parseFloat($diagram.attr('x'));
-      expect(diagramStartX).to.be.closeTo(150, 2);
-    });
-  });
-
-  it('should maintain sufficient space between legend and diagram when legend labels are longer', () => {
-    renderGraph(
-      `journey
-      title  Web hook life cycle
-      section Darkoob
-        Make preBuilt:5: Darkoob user
-        register slug : 5: Darkoob userf deliberately increasing the size of this label to check if distance between legend and diagram is  maintained
-        Map slug to a Prebuilt Job:5: Darkoob user
-      section External Service
-        set Darkoob slug as hook for an Event : 5 : admin Exjjjnjjjj qwerty
-        listen to the events : 5 :  External Service
-        call darkoob endpoint : 5 : External Service
-      section Darkoob
-        check for inputs : 5 : DarkoobAPI
-        run the prebuilt job : 5 : DarkoobAPI
-        `,
-      { journey: { useMaxWidth: true } }
-    );
-
-    let LabelEndX, diagramStartX;
-
-    // Get right edge of the legend
-    cy.contains('tspan', 'Darkoob userf').then((textBox) => {
-      const bbox = textBox[0].getBBox();
-      LabelEndX = bbox.x + bbox.width;
-    });
-
-    // Get left edge of the diagram
-    cy.contains('foreignobject', 'Make preBuilt').then((rect) => {
-      diagramStartX = parseFloat(rect.attr('x'));
-    });
-
-    // Assert right edge of the diagram is greater than or equal to the right edge of the label
-    cy.then(() => {
-      expect(diagramStartX).to.be.gte(LabelEndX);
-    });
-  });
-
-  it('should wrap a single long word with hyphenation', () => {
-    renderGraph(
-      `
-      ---
-      config:
-        journey:
-          maxLabelWidth: 100
-      ---
-      journey
-        title Long Word Test
-        section Test
-          VeryLongWord: 5: Supercalifragilisticexpialidocious
-      `,
-      { journey: { useMaxWidth: true } }
-    );
-
-    // Verify that the line ends with a hyphen, indicating proper hyphenation for words exceeding maxLabelWidth.
-    cy.get('tspan').then((tspans) => {
-      const hasHyphen = [...tspans].some((t) => t.textContent.trim().endsWith('-'));
-      return expect(hasHyphen).to.be.true;
-    });
-  });
-
-  it('should wrap text on whitespace without adding hyphens', () => {
-    renderGraph(
-      `
-      ---
-      config:
-        journey:
-          maxLabelWidth: 200
-      ---
-      journey
-        title Whitespace Test
-        section Test
-          TextWithSpaces: 5: Gustavo Fring is played by Giancarlo Esposito and is a character in Breaking Bad.
-      `,
-      { journey: { useMaxWidth: true } }
-    );
-
-    // Verify that none of the text spans end with a hyphen.
-    cy.get('tspan').each(($el) => {
-      const text = $el.text();
-      expect(text.trim()).not.to.match(/-$/);
-    });
-  });
-
-  it('should wrap long labels into multiple lines, keep them under max width, and maintain margins', () => {
-    renderGraph(
-      `
-      ---
-      config:
-        journey:
-          maxLabelWidth: 320
-      ---
-      journey
-        title User Journey Example
-        section Onboarding
-            Sign Up: 5: This is a long label that will be split into multiple lines to test the wrapping functionality
-            Browse Features: 3: This is another long label that will be split into multiple lines to test the wrapping functionality
-            Use Core Functionality: 4: This is yet another long label that will be split into multiple lines to test the wrapping functionality
-        section Engagement
-            Browse Features: 3
-            Use Core Functionality: 4
-      `,
-      { journey: { useMaxWidth: true } }
-    );
-
-    let diagramStartX, maxLineWidth;
-
-    // Get the diagram's left edge x-coordinate
-    cy.contains('foreignobject', 'Sign Up')
-      .then(($diagram) => {
-        diagramStartX = parseFloat($diagram.attr('x'));
-      })
-      .then(() => {
-        cy.get('text.legend').then(($lines) => {
-          // Check that there are multiple lines
-          expect($lines.length).to.be.equal(9);
-
-          // Check that all lines are under the maxLabelWidth
-          $lines.each((index, el) => {
-            const bbox = el.getBBox();
-            expect(bbox.width).to.be.lte(320);
-            maxLineWidth = Math.max(maxLineWidth || 0, bbox.width);
-          });
-
-          /** The expected margin between the diagram and the legend is 150px, as defined by
-           *  conf.leftMargin in user-journey-config.js
-           */
-          expect(diagramStartX - maxLineWidth).to.be.closeTo(150, 2);
-        });
-      });
-  });
-
-  it('should correctly render the user journey diagram title with the specified styling', () => {
-    renderGraph(
-      `---
-config:
-  journey:
-    titleColor: "#2900A5"
-    titleFontFamily: "Times New Roman"
-    titleFontSize: "5rem"
----
-
-journey
-    title User Journey Example
-    section Onboarding
-        Sign Up: 5: John, Shahir
-        Complete Profile: 4: John
-    section Engagement
-        Browse Features: 3: John
-        Use Core Functionality: 4: John
-    section Retention
-        Revisit Application: 5: John
-        Invite Friends: 3: John
-
-        size: 2rem
-    `
-    );
-
-    cy.get('text').contains('User Journey Example').as('title');
-    cy.get('@title').then(($title) => {
-      expect($title).to.have.attr('fill', '#2900A5');
-      expect($title).to.have.attr('font-family', 'Times New Roman');
-      expect($title).to.have.attr('font-size', '5rem');
-    });
-  });
 });

cypress/integration/rendering/kanban.spec.ts

@@ -1,136 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-describe('Kanban diagram', () => {
-  it('1: should render a kanban with a single section', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    docs[Create Documentation]
-    docs[Create Blog about the new diagram]
-      `,
-      {}
-    );
-  });
-  it('2: should render a kanban with multiple sections', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    docs[Create Documentation]
-  id2
-    docs[Create Blog about the new diagram]
-      `,
-      {}
-    );
-  });
-  it('3: should render a kanban with a single wrapping node', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char, wrapping]
-      `,
-      {}
-    );
-  });
-  it('4: should handle the height of a section with a wrapping node at the end', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    id2[One line]
-    id3[Title of diagram is more than 100 chars when user duplicates diagram with 100 char, wrapping]
-      `,
-      {}
-    );
-  });
-  it('5: should handle the height of a section with a wrapping node at the top', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char, wrapping]
-    id3[One line]
-      `,
-      {}
-    );
-  });
-  it('6: should handle the height of a section with a wrapping node in the middle', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    id2[One line]
-    id3[Title of diagram is more than 100 chars when user duplicates diagram with 100 char, wrapping]
-    id4[One line]
-      `,
-      {}
-    );
-  });
-  it('6: should handle assignments', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    docs[Create Documentation]
-  id2[In progress]
-    docs[Create Blog about the new diagram]@{ assigned: 'knsv' }
-      `,
-      {}
-    );
-  });
-  it('7: should handle prioritization', () => {
-    imgSnapshotTest(
-      `kanban
-  id2[In progress]
-    vh[Very High]@{ priority: 'Very High' }
-    h[High]@{ priority: 'High' }
-    m[Default priority]
-    l[Low]@{ priority: 'Low' }
-    vl[Very Low]@{ priority: 'Very Low' }
-      `,
-      {}
-    );
-  });
-  it('7: should handle external tickets', () => {
-    imgSnapshotTest(
-      `kanban
-  id1[Todo]
-    docs[Create Documentation]
-  id2[In progress]
-    docs[Create Blog about the new diagram]@{ ticket: MC-2037 }
-      `,
-      {}
-    );
-  });
-  it('8: should handle assignments, prioritization and tickets ids in the same item', () => {
-    imgSnapshotTest(
-      `kanban
-  id2[In progress]
-    docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
-      `,
-      {}
-    );
-  });
-  it('10: Full example', () => {
-    imgSnapshotTest(
-      `---
-config:
-  kanban:
-    ticketBaseUrl: 'https://abc123.atlassian.net/browse/#TICKET#'
----
-kanban
-  id1[Todo]
-    docs[Create Documentation]
-    docs[Create Blog about the new diagram]
-  id7[In progress]
-    id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
-    id8[Design grammar]@{ assigned: 'knsv' }
-  id9[Ready for deploy]
-  id10[Ready for test]
-  id11[Done]
-    id5[define getData]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
-    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
-    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
-    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
-  id12[Can't reproduce]
-      `,
-      {}
-    );
-  });
-});

cypress/integration/rendering/mindmap-tidy-tree.spec.js

@@ -1,79 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-describe('Mindmap Tidy Tree', () => {
-  it('1-tidy-tree: should render a simple mindmap without children', () => {
-    imgSnapshotTest(
-      ` ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-      `
-    );
-  });
-  it('2-tidy-tree: should render a simple mindmap', () => {
-    imgSnapshotTest(
-      ` ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-      `
-    );
-  });
-  it('3-tidy-tree: should render a  mindmap with different shapes', () => {
-    imgSnapshotTest(
-      ` ---
-      config:
-        layout: tidy-tree
-      ---
-      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
-              id)I am a cloud(
-                  id))I am a bang((
-                    Tools
-      `
-    );
-  });
-  it('4-tidy-tree: should render a mindmap with children', () => {
-    imgSnapshotTest(
-      ` ---
-      config:
-        layout: tidy-tree
-      ---
-       mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      `
-    );
-  });
-});

cypress/integration/rendering/mindmap.spec.ts

@@ -146,7 +146,7 @@ root
       shouldHaveRoot
     );
   });
-  it('text should wrap with icon', () => {
+  it('text shouhld wrap with icon', () => {
     imgSnapshotTest(
       `mindmap
 root
@@ -159,10 +159,12 @@ root
   });
   it('square shape', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
     root[
       The root
-    ]`,
+    ]
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -170,10 +172,12 @@ root
   });
   it('rounded rect shape', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
     root((
       The root
-    ))`,
+    ))
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -181,10 +185,12 @@ root
   });
   it('circle shape', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
     root(
       The root
-    )`,
+    )
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -192,8 +198,10 @@ root
   });
   it('default shape', () => {
     imgSnapshotTest(
-      `mindmap
-  The root`,
+      `
+mindmap
+  The root
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -201,10 +209,12 @@ root
   });
   it('adding children', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
   The root
     child1
-    child2`,
+    child2
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -212,11 +222,13 @@ root
   });
   it('adding grand children', () => {
     imgSnapshotTest(
-      `mindmap
+      `
+mindmap
   The root
     child1
       child2
-      child3`,
+      child3
+      `,
       {},
       undefined,
       shouldHaveRoot
@@ -228,22 +240,9 @@ root
         `mindmap
     id1[\`**Start** with
     a second line 😎\`]
-      id2[\`The dog in **the** hog... a *very long text* about it Word!\`]`
-      );
-    });
-  });
-  describe('Include char sequence "graph" in text (#6795)', () => {
-    it('has a label with char sequence "graph"', () => {
-      imgSnapshotTest(
-        ` mindmap
-          root
-            Photograph
-              Waterfall
-              Landscape
-            Geography
-              Mountains
-              Rocks`,
-        { flowchart: { defaultRenderer: 'elk' } }
+      id2[\`The dog in **the** hog... a *very long text* about it
+Word!\`]
+`
       );
     });
   });

cypress/integration/rendering/newShapes.spec.ts

@@ -1,146 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-const looks = ['classic', 'handDrawn'] as const;
-const directions = [
-  'TB',
-  //'BT',
-  'LR',
-  //'RL'
-] as const;
-const newShapesSet1 = [
-  'triangle',
-  'sloped-rectangle',
-  'horizontal-cylinder',
-  'flipped-triangle',
-  'hourglass',
-] as const;
-const newShapesSet2 = [
-  'tagged-rectangle',
-  'documents',
-  'lightning-bolt',
-  'filled-circle',
-  'window-pane',
-] as const;
-
-const newShapesSet3 = [
-  'curved-trapezoid',
-  'bow-rect',
-  'tagged-document',
-  'divided-rectangle',
-  'crossed-circle',
-] as const;
-
-const newShapesSet4 = [
-  'document',
-  'notched-pentagon',
-  'lined-cylinder',
-  'stacked-document',
-  'half-rounded-rectangle',
-] as const;
-
-const newShapesSet5 = [
-  'lined-document',
-  'tagged-document',
-  'brace-l',
-  'comment',
-  'braces',
-  'brace-r',
-] as const;
-
-const newShapesSet6 = ['brace-r', 'braces'] as const;
-// Aggregate all shape sets into a single array
-const newShapesSets = [
-  newShapesSet1,
-  newShapesSet2,
-  newShapesSet3,
-  newShapesSet4,
-  newShapesSet5,
-  newShapesSet6,
-];
-
-looks.forEach((look) => {
-  directions.forEach((direction) => {
-    newShapesSets.forEach((newShapesSet) => {
-      describe(`Test ${newShapesSet.join(', ')} in ${look} look and dir ${direction}`, () => {
-        it(`without label`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape} }\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with label`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`connect all shapes with each other`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
-          });
-          for (let i = 0; i < newShapesSet.length; i++) {
-            for (let j = i + 1; j < newShapesSet.length; j++) {
-              flowchartCode += `  n${i}${i} --> n${j}${j}\n`;
-            }
-          }
-          if (!(direction === 'TB' && look === 'handDrawn' && newShapesSet === newShapesSet1)) {
-            //skip this test, works in real. Need to look
-            imgSnapshotTest(flowchartCode, { look });
-          }
-        });
-
-        it(`with very long label`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with markdown htmlLabels:true`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with markdown htmlLabels:false`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
-          });
-          imgSnapshotTest(flowchartCode, {
-            look,
-            htmlLabels: false,
-            flowchart: { htmlLabels: false },
-          });
-        });
-
-        it(`with styles`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
-            flowchartCode += `  style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with classDef`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
-          newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
-            flowchartCode += `  n${index}${index}:::customClazz\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-      });
-    });
-  });
-});

cypress/integration/rendering/oldShapes.spec.ts

@@ -1,107 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util';
-
-const looks = ['classic', 'handDrawn'] as const;
-const directions = [
-  'TB',
-  //'BT',
-  'LR',
-  //'RL'
-] as const;
-
-const shapesSet1 = ['text', 'card', 'lin-rect', 'diamond', 'hexagon'] as const;
-
-// removing labelRect, need have alias for it
-const shapesSet2 = ['rounded', 'rect', 'start', 'stop'] as const;
-
-const shapesSet3 = ['fork', 'choice', 'note', 'stadium', 'odd'] as const;
-
-const shapesSet4 = ['subroutine', 'cylinder', 'circle', 'doublecircle', 'odd'] as const;
-
-const shapesSet5 = ['anchor', 'lean-r', 'lean-l', 'trap-t', 'trap-b'] as const;
-
-// Aggregate all shape sets into a single array
-const shapesSets = [shapesSet1, shapesSet2, shapesSet3, shapesSet4, shapesSet5] as const;
-
-looks.forEach((look) => {
-  directions.forEach((direction) => {
-    shapesSets.forEach((shapesSet) => {
-      describe(`Test ${shapesSet.join(', ')} in ${look} look and dir ${direction}`, () => {
-        it(`without label`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape} }\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with label`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`connect all shapes with each other`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
-          });
-          for (let i = 0; i < shapesSet.length; i++) {
-            for (let j = i + 1; j < shapesSet.length; j++) {
-              flowchartCode += `  n${i}${i} --> n${j}${j}\n`;
-            }
-          }
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with very long label`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with markdown htmlLabels:true`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with markdown htmlLabels:false`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
-          });
-          imgSnapshotTest(flowchartCode, {
-            look,
-            htmlLabels: false,
-            flowchart: { htmlLabels: false },
-          });
-        });
-
-        it(`with styles`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
-            flowchartCode += `  style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-
-        it(`with classDef`, () => {
-          let flowchartCode = `flowchart ${direction}\n`;
-          flowchartCode += `  classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
-          shapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
-            flowchartCode += `  n${index}${index}:::customClazz\n`;
-          });
-          imgSnapshotTest(flowchartCode, { look });
-        });
-      });
-    });
-  });
-});

cypress/integration/rendering/packet.spec.ts

@@ -1,7 +1,7 @@
 import { imgSnapshotTest } from '../../helpers/util';
 
 describe('packet structure', () => {
-  it('should render a simple packet-beta diagram', () => {
+  it('should render a simple packet diagram', () => {
     imgSnapshotTest(
       `packet-beta
   title Hello world
@@ -10,18 +10,9 @@ describe('packet structure', () => {
     );
   });
 
-  it('should render a simple packet diagram', () => {
-    imgSnapshotTest(
-      `packet
-  title Hello world
-  0-10: "hello"
-`
-    );
-  });
-
   it('should render a simple packet diagram without ranges', () => {
     imgSnapshotTest(
-      `packet
+      `packet-beta
   0: "h"
   1: "i"
 `
@@ -30,7 +21,7 @@ describe('packet structure', () => {
 
   it('should render a complex packet diagram', () => {
     imgSnapshotTest(
-      `packet
+      `packet-beta
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"
@@ -61,7 +52,7 @@ describe('packet structure', () => {
         packet:
           showBits: false
       ---
-      packet
+      packet-beta
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"

cypress/integration/rendering/pie.spec.ts

@@ -64,7 +64,7 @@ describe('pie chart', () => {
     });
   });
 
-  it('should render a pie diagram when textPosition is set', () => {
+  it('should render a pie diagram when textPosition is setted', () => {
     imgSnapshotTest(
       `pie
         "Dogs": 50
@@ -82,13 +82,4 @@ describe('pie chart', () => {
       `
     );
   });
-  it('should render pie slices only for non-zero values but shows all legends', () => {
-    imgSnapshotTest(
-      `   pie title Pets adopted by volunteers
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 1
-      `
-    );
-  });
 });

cypress/integration/rendering/quadrantChart.spec.js

@@ -45,7 +45,7 @@ describe('Quadrant Chart', () => {
       {}
     );
   });
-  it('should able to render y-axis on right side', () => {
+  it('should able to render y-axix on right side', () => {
     imgSnapshotTest(
       `
   %%{init: {"quadrantChart": {"yAxisPosition": "right"}}}%%
@@ -61,7 +61,7 @@ describe('Quadrant Chart', () => {
       {}
     );
   });
-  it('should able to render x-axis on bottom', () => {
+  it('should able to render x-axix on bottom', () => {
     imgSnapshotTest(
       `
   %%{init: {"quadrantChart": {"xAxisPosition": "bottom"}}}%%
@@ -77,7 +77,7 @@ describe('Quadrant Chart', () => {
       {}
     );
   });
-  it('should able to render x-axis on bottom and y-axis on right', () => {
+  it('should able to render x-axix on bottom and y-axis on right', () => {
     imgSnapshotTest(
       `
   %%{init: {"quadrantChart": {"xAxisPosition": "bottom", "yAxisPosition": "right"}}}%%

cypress/integration/rendering/radar.spec.js

@@ -1,79 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util';
-
-describe('radar structure', () => {
-  it('should render a simple radar diagram', () => {
-    imgSnapshotTest(
-      `radar-beta
-                title Best Radar Ever
-                axis A, B, C
-                curve c1{1, 2, 3}
-            `
-    );
-  });
-
-  it('should render a radar diagram with multiple curves', () => {
-    imgSnapshotTest(
-      `radar-beta
-                title Best Radar Ever
-                axis A, B, C
-                curve c1{1, 2, 3}
-                curve c2{2, 3, 1}
-            `
-    );
-  });
-
-  it('should render a complex radar diagram', () => {
-    imgSnapshotTest(
-      `radar-beta 
-                title My favorite ninjas
-                axis Agility, Speed, Strength
-                axis Stam["Stamina"] , Intel["Intelligence"]
-
-                curve Ninja1["Naruto Uzumaki"]{
-                    Agility 2, Speed 2,
-                    Strength 3, Stam 5,
-                    Intel 0
-                }
-                curve Ninja2["Sasuke"]{2, 3, 4, 1, 5}
-                curve Ninja3 {3, 2, 1, 5, 4}
-
-                showLegend true
-                ticks 3
-                max 8
-                min 0
-                graticule polygon
-            `
-    );
-    cy.get('svg').should((svg) => {
-      expect(svg).to.have.length(1);
-    });
-  });
-
-  it('should render radar diagram with config override', () => {
-    imgSnapshotTest(
-      `radar-beta
-                title Best Radar Ever
-                axis A,B,C
-                curve mycurve{1,2,3}`,
-      { radar: { marginTop: 100, axisScaleFactor: 0.5 } }
-    );
-  });
-
-  it('should parse radar diagram with theme override', () => {
-    imgSnapshotTest(
-      `radar-beta
-                axis A,B,C
-                curve mycurve{1,2,3}`,
-      { theme: 'base', themeVariables: { fontSize: 80, cScale0: '#FF0000' } }
-    );
-  });
-
-  it('should handle radar diagram with radar style override', () => {
-    imgSnapshotTest(
-      `radar-beta
-                axis A,B,C
-                curve mycurve{1,2,3}`,
-      { theme: 'base', themeVariables: { radar: { axisColor: '#FF0000' } } }
-    );
-  });
-});

cypress/integration/rendering/requirementDiagram-unified.spec.js

@@ -1,703 +0,0 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
-
-const testOptions = [
-  { description: '', options: { logLevel: 1 } },
-  { description: 'ELK: ', options: { logLevel: 1, layout: 'elk' } },
-  { description: 'HD: ', options: { logLevel: 1, look: 'handDrawn' } },
-];
-
-describe('Requirement Diagram Unified', () => {
-  testOptions.forEach(({ description, options }) => {
-    it(`${description}should render a simple Requirement diagram`, () => {
-      imgSnapshotTest(
-        `
-    requirementDiagram
-        requirement test_req {
-        id: 1
-        text: the test text.
-        risk: high
-        verifymethod: test
-        }
-
-        element test_entity {
-        type: simulation
-        }
-
-        test_entity - satisfies -> test_req
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render a simple Requirement diagram without htmlLabels`, () => {
-      imgSnapshotTest(
-        `
-    requirementDiagram
-        requirement test_req {
-        id: 1
-        text: the test text.
-        risk: high
-        verifymethod: test
-        }
-
-        element test_entity {
-        type: simulation
-        }
-
-        test_entity - satisfies -> test_req
-        `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render a not-so-simple Requirement diagram`, () => {
-      imgSnapshotTest(
-        `
-    requirementDiagram
-
-        requirement test_req {
-        id: 1
-        text: the test text.
-        risk: high
-        verifymethod: test
-        }
-
-        functionalRequirement test_req2 {
-        id: 1.1
-        text: the second test text.
-        risk: low
-        verifymethod: inspection
-        }
-
-        performanceRequirement test_req3 {
-        id: 1.2
-        text: the third test text.
-        risk: medium
-        verifymethod: demonstration
-        }
-
-        interfaceRequirement test_req4 {
-        id: 1.2.1
-        text: the fourth test text.
-        risk: medium
-        verifymethod: analysis
-        }
-
-        physicalRequirement test_req5 {
-        id: 1.2.2
-        text: the fifth test text.
-        risk: medium
-        verifymethod: analysis
-        }
-
-        designConstraint test_req6 {
-        id: 1.2.3
-        text: the sixth test text.
-        risk: medium
-        verifymethod: analysis
-        }
-
-        element test_entity {
-        type: simulation
-        }
-
-        element test_entity2 {
-        type: word doc
-        docRef: reqs/test_entity
-        }
-
-        element test_entity3 {
-        type: "test suite"
-        docRef: github.com/all_the_tests
-        }
-
-
-        test_entity - satisfies -> test_req2
-        test_req - traces -> test_req2
-        test_req - contains -> test_req3
-        test_req3 - contains -> test_req4
-        test_req4 - derives -> test_req5
-        test_req5 - refines -> test_req6
-        test_entity3 - verifies -> test_req5
-        test_req <- copies - test_entity2
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render a not-so-simple Requirement diagram without htmlLabels`, () => {
-      imgSnapshotTest(
-        `
-    requirementDiagram
-
-        requirement test_req {
-        id: 1
-        text: the test text.
-        risk: high
-        verifymethod: test
-        }
-
-        functionalRequirement test_req2 {
-        id: 1.1
-        text: the second test text.
-        risk: low
-        verifymethod: inspection
-        }
-
-        performanceRequirement test_req3 {
-        id: 1.2
-        text: the third test text.
-        risk: medium
-        verifymethod: demonstration
-        }
-
-        interfaceRequirement test_req4 {
-        id: 1.2.1
-        text: the fourth test text.
-        risk: medium
-        verifymethod: analysis
-        }
-
-        physicalRequirement test_req5 {
-        id: 1.2.2
-        text: the fifth test text.
-        risk: medium
-        verifymethod: analysis
-        }
-
-        designConstraint test_req6 {
-        id: 1.2.3
-        text: the sixth test text.
-        risk: medium
-        verifymethod: analysis
-        }
-
-        element test_entity {
-        type: simulation
-        }
-
-        element test_entity2 {
-        type: word doc
-        docRef: reqs/test_entity
-        }
-
-        element test_entity3 {
-        type: "test suite"
-        docRef: github.com/all_the_tests
-        }
-
-
-        test_entity - satisfies -> test_req2
-        test_req - traces -> test_req2
-        test_req - contains -> test_req3
-        test_req3 - contains -> test_req4
-        test_req4 - derives -> test_req5
-        test_req5 - refines -> test_req6
-        test_entity3 - verifies -> test_req5
-        test_req <- copies - test_entity2
-        `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render multiple Requirement diagrams`, () => {
-      imgSnapshotTest(
-        [
-          `
-    requirementDiagram
-
-    requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    test_entity - satisfies -> test_req
-    `,
-          `
-    requirementDiagram
-
-    requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    test_entity - satisfies -> test_req
-    `,
-        ],
-        options
-      );
-    });
-
-    it(`${description}should render a Requirement diagram with empty information`, () => {
-      imgSnapshotTest(
-        `
-    requirementDiagram
-        requirement test_req {
-        }
-        element test_entity {
-        }
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render requirements and elements with and without information`, () => {
-      renderGraph(
-        `
-    requirementDiagram
-        requirement test_req {
-            id: 1
-            text: the test text.
-            risk: high
-            verifymethod: test
-        }
-        element test_entity {
-        }
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render requirements and elements with long and short text`, () => {
-      renderGraph(
-        `
-    requirementDiagram
-        requirement test_req {
-            id: 1
-            text: the test text that is long and takes up a lot of space.
-            risk: high
-            verifymethod: test
-        }
-        element test_entity_name_that_is_extra_long {
-        }
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render requirements and elements with long and short text without htmlLabels`, () => {
-      renderGraph(
-        `
-      requirementDiagram
-          requirement test_req {
-              id: 1
-              text: the test text that is long and takes up a lot of space.
-              risk: high
-              verifymethod: test
-          }
-          element test_entity_name_that_is_extra_long {
-          }
-          `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render requirements and elements with quoted text for spaces`, () => {
-      renderGraph(
-        `
-      requirementDiagram
-          requirement "test req name with spaces" {
-              id: 1
-              text: the test text that is long and takes up a lot of space.
-              risk: high
-              verifymethod: test
-          }
-          element "test entity name that is extra long with spaces" {
-          }
-          `,
-        options
-      );
-    });
-
-    it(`${description}should render requirements and elements with markdown text`, () => {
-      renderGraph(
-        `
-      requirementDiagram
-          requirement "__my bolded name__" {
-              id: 1
-              text: "**Bolded text** _italicized text_"
-              risk: high
-              verifymethod: test
-          }
-          element "*my italicized name*" {
-            type: "**Bolded type** _italicized type_"
-            docref: "*Italicized* __Bolded__"
-          }
-          `,
-        options
-      );
-    });
-
-    it(`${description}should render requirements and elements with markdown text without htmlLabels`, () => {
-      renderGraph(
-        `
-      requirementDiagram
-          requirement "__my bolded name__" {
-              id: 1
-              text: "**Bolded text** _italicized text_"
-              risk: high
-              verifymethod: test
-          }
-          element "*my italicized name*" {
-            type: "**Bolded type** _italicized type_"
-            docref: "*Italicized* __Bolded__"
-          }
-          `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render a simple Requirement diagram with a title`, () => {
-      imgSnapshotTest(
-        `---
-  title: simple Requirement diagram
-  ---
-    requirementDiagram
-
-    requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    test_entity - satisfies -> test_req
-  `,
-        options
-      );
-    });
-
-    it(`${description}should render a Requirement diagram with TB direction`, () => {
-      imgSnapshotTest(
-        `
-    requirementDiagram
-    direction TB
-
-    requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    test_entity - satisfies -> test_req
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render a Requirement diagram with BT direction`, () => {
-      imgSnapshotTest(
-        `
-      requirementDiagram
-      direction BT
-  
-      requirement test_req {
-      id: 1
-      text: the test text.
-      risk: high
-      verifymethod: test
-      }
-  
-      element test_entity {
-      type: simulation
-      }
-  
-      test_entity - satisfies -> test_req
-          `,
-        options
-      );
-    });
-
-    it(`${description}should render a Requirement diagram with LR direction`, () => {
-      imgSnapshotTest(
-        `
-      requirementDiagram
-      direction LR
-  
-      requirement test_req {
-      id: 1
-      text: the test text.
-      risk: high
-      verifymethod: test
-      }
-  
-      element test_entity {
-      type: simulation
-      }
-  
-      test_entity - satisfies -> test_req
-          `,
-        options
-      );
-    });
-
-    it(`${description}should render a Requirement diagram with RL direction`, () => {
-      imgSnapshotTest(
-        `
-      requirementDiagram
-      direction RL
-  
-      requirement test_req {
-      id: 1
-      text: the test text.
-      risk: high
-      verifymethod: test
-      }
-  
-      element test_entity {
-      type: simulation
-      }
-  
-      test_entity - satisfies -> test_req
-          `,
-        options
-      );
-    });
-
-    it(`${description}should render requirements and elements with styles applied from style statement`, () => {
-      imgSnapshotTest(
-        `
-    requirementDiagram
-
-    requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    test_entity - satisfies -> test_req
-
-    style test_req,test_entity fill:#f9f,stroke:blue, color:grey, font-weight:bold
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render requirements and elements with styles applied from style statement without htmlLabels`, () => {
-      imgSnapshotTest(
-        `
-      requirementDiagram
-  
-      requirement test_req {
-      id: 1
-      text: the test text.
-      risk: high
-      verifymethod: test
-      }
-  
-      element test_entity {
-      type: simulation
-      }
-  
-      test_entity - satisfies -> test_req
-  
-      style test_req,test_entity fill:#f9f,stroke:blue, color:grey, font-weight:bold
-          `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render requirements and elements with styles applied from class statement`, () => {
-      imgSnapshotTest(
-        `
-requirementDiagram
-  
-      requirement test_req {
-      id: 1
-      text: the test text.
-      risk: high
-      verifymethod: test
-      }
-  
-      element test_entity {
-      type: simulation
-      }
-  
-      test_entity - satisfies -> test_req
-      classDef bold font-weight: bold
-      classDef blue stroke:lightblue, color: #0000FF
-      class test_entity bold
-      class test_req blue, bold
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render requirements and elements with styles applied from class statement without htmlLabels`, () => {
-      imgSnapshotTest(
-        `
-  requirementDiagram
-    
-        requirement test_req {
-        id: 1
-        text: the test text.
-        risk: high
-        verifymethod: test
-        }
-    
-        element test_entity {
-        type: simulation
-        }
-    
-        test_entity - satisfies -> test_req
-        classDef bold font-weight: bold
-        classDef blue stroke:lightblue, color: #0000FF
-        class test_entity bold
-        class test_req blue, bold
-          `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render requirements and elements with styles applied from classes with shorthand syntax`, () => {
-      imgSnapshotTest(
-        `
-  requirementDiagram
-    
-        requirement test_req:::blue {
-        id: 1
-        text: the test text.
-        risk: high
-        verifymethod: test
-        }
-    
-        element test_entity {
-        type: simulation
-        }
-    
-        test_entity - satisfies -> test_req
-        classDef bold font-weight: bold
-        classDef blue stroke:lightblue, color: #0000FF
-        test_entity:::bold
-          `,
-        options
-      );
-    });
-
-    it(`${description}should render requirements and elements with styles applied from classes with shorthand syntax without htmlLabels`, () => {
-      imgSnapshotTest(
-        `
-  requirementDiagram
-    
-        requirement test_req:::blue {
-        id: 1
-        text: the test text.
-        risk: high
-        verifymethod: test
-        }
-    
-        element test_entity {
-        type: simulation
-        }
-    
-        test_entity - satisfies -> test_req
-        classDef bold font-weight: bold
-        classDef blue stroke:lightblue, color: #0000FF
-        test_entity:::bold
-          `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render requirements and elements with styles applied from the default class and other styles`, () => {
-      imgSnapshotTest(
-        `
-requirementDiagram
-  
-      requirement test_req:::blue {
-      id: 1
-      text: the test text.
-      risk: high
-      verifymethod: test
-      }
-  
-      element test_entity {
-      type: simulation
-      }
-  
-      test_entity - satisfies -> test_req
-      classDef blue stroke:lightblue, color:blue
-      classDef default fill:pink
-      style test_entity color:green
-        `,
-        options
-      );
-    });
-
-    it(`${description}should render requirements and elements with styles applied from the default class and other styles without htmlLabels`, () => {
-      imgSnapshotTest(
-        `
-  requirementDiagram
-    
-        requirement test_req:::blue {
-        id: 1
-        text: the test text.
-        risk: high
-        verifymethod: test
-        }
-    
-        element test_entity {
-        type: simulation
-        }
-    
-        test_entity - satisfies -> test_req
-        classDef blue stroke:lightblue, color:blue
-        classDef default fill:pink
-        style test_entity color:green
-          `,
-        { ...options, htmlLabels: false }
-      );
-    });
-
-    it(`${description}should render a Requirement diagram with a theme`, () => {
-      imgSnapshotTest(
-        `
----
-  theme: forest
----
-  requirementDiagram
-    
-        requirement test_req:::blue {
-        id: 1
-        text: the test text.
-        risk: high
-        verifymethod: test
-        }
-    
-        element test_entity {
-        type: simulation
-        }
-    
-        test_entity - satisfies -> test_req
-          `,
-        options
-      );
-    });
-  });
-});

cypress/integration/rendering/sankey.spec.ts

@@ -15,7 +15,7 @@ describe('Sankey Diagram', () => {
   describe('when given a linkColor', function () {
     this.beforeAll(() => {
       cy.wrap(
-        `sankey
+        `sankey-beta
       a,b,10
       `
       ).as('graph');
@@ -62,7 +62,7 @@ describe('Sankey Diagram', () => {
     this.beforeAll(() => {
       cy.wrap(
         `
-        sankey
+        sankey-beta
         
         a,b,8
         b,c,8