Linting, removing debug files

.build/common.ts

@@ -33,14 +33,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>;

.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/beige-peas-shave.md

@@ -1,5 +0,0 @@
----
-'@mermaid-js/mermaid-zenuml': patch
----
-
-Fixed a critical bug that the ZenUML diagram is not rendered.

.changeset/chatty-lemons-stick.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-chore: Remove the "-beta" suffix from the XYChart, Block, Sankey diagrams to reflect their stable status

.changeset/cold-sites-accept.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Position the edge label in state diagram correctly relative to the edge

.changeset/eleven-wolves-deny.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+chore: Convert StateDB into TypeScript

.changeset/empty-clouds-cry.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Apply correct dateFormat in Gantt chart to show only day when specified

.changeset/fuzzy-pears-cough.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: handle exclude dates properly in Gantt charts when using dateFormat: 'YYYY-MM-DD HH:mm:ss'

.changeset/gold-shoes-camp.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Remove incorrect `style="undefined;"` attributes in some Mermaid diagrams

.changeset/gold-spiders-join.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: fixed connection gaps in flowchart for roundedRect, stadium and diamond shape

.changeset/honest-trees-dress.md

@@ -0,0 +1,7 @@
+---
+'@mermaid-js/mermaid-zenuml': patch
+---
+
+chore: bump minimum ZenUML version to 3.23.28
+
+commit: 9d06d8f31e7f12af9e9e092214f907f2dc93ad75

.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/large-mirrors-cheer.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Update casing of ID in requirement diagram

.changeset/lemon-masks-unite.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-feat: Added support for per link curve styling in flowchart diagram using edge ids

.changeset/light-flowers-judge.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Make flowchart elk detector regex match less greedy

.changeset/lovely-queens-own.md

@@ -1,8 +0,0 @@
----
-'mermaid': patch
----
-
-fix(block): overflowing blocks no longer affect later lines
-
-This may change the layout of block diagrams that have overflowing lines
-(i.e. block diagrams that use up more columns that the `columns` specifier).

.changeset/neat-moose-compare.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Add support for styling Journey Diagram title (color, font-family, and font-size)

.changeset/ninety-roses-turn.md

@@ -1,7 +0,0 @@
----
-'mermaid': patch
----
-
-fix: log warning for blocks exceeding column width
-
-This update adds a validation check that logs a warning message when a block's width exceeds the defined column layout.

.changeset/rare-women-fly.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Add escaped class literal name on namespace

.changeset/red-zebras-happen.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Allow equals sign in sequenceDiagram labels

.changeset/sad-mails-accept.md

@@ -0,0 +1,6 @@
+---
+'mermaid': patch
+'@mermaid-js/parser': patch
+---
+
+Refactor grammar so that title don't break Architecture Diagrams

.changeset/seven-papayas-film.md

@@ -1,9 +0,0 @@
----
-'mermaid': patch
----
-
-Add validation for negative values in pie charts:
-
-Prevents crashes during parsing by validating values post-parsing.
-
-Provides clearer, user-friendly error messages for invalid negative inputs.

.changeset/silver-eyes-build.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-chore: migrate to class-based ArchitectureDB implementation

.changeset/six-planets-rescue.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: node border style for handdrawn shapes

.changeset/smart-humans-cover.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Update flowchart direction TD's behavior to be the same as TB

.changeset/soft-readers-tan.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Dynamically Render Data Labels Within Bar Charts

.changeset/strong-dryers-pay.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: correctly render non-directional lines for '---' in block diagrams

.changeset/ten-lamps-trade.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: allow colons in events

.changeset/vast-buses-see.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-chore: Update packet diagram to use new class-based database structure

.changeset/yellow-mirrors-change.md

@@ -0,0 +1,7 @@
+---
+'@mermaid-js/mermaid-zenuml': patch
+---
+
+fix(zenuml): limit `peerDependencies` to Mermaid v10 and v11
+
+commit: 0ad44c12feead9d20c6a870a49327ada58d6e657

.cspell/code-terms.txt

@@ -47,7 +47,6 @@ edgesep
 EMPTYSTR
 enddate
 ERDIAGRAM
-eslint
 flatmap
 forwardable
 frontmatter

.cspell/contributors.txt

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

.cspell/libraries.txt

@@ -26,7 +26,6 @@ dompurify
 elkjs
 fcose
 fontawesome
-Fonticons
 Forgejo
 Foswiki
 Gitea

.cspell/mermaid-terms.txt

@@ -13,10 +13,11 @@ gitgraph
 gzipped
 handDrawn
 kanban
+knsv
+Knut
 marginx
 marginy
 Markdownish
-mermaidchart
 mermaidjs
 mindmap
 mindmaps
@@ -34,6 +35,7 @@ sandboxed
 siebling
 statediagram
 substate
+Sveidqvist
 unfixable
 Viewbox
 viewports

.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';
@@ -31,15 +31,7 @@ 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,
-      }
+      { ...iifeOptions, minify: true, metafile: shouldVisualize }
     );
   }
   if (entryName === 'mermaid-zenuml') {
@@ -78,21 +70,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 +78,6 @@ const main = async () => {
   for (const pkg of packageNames) {
     await buildPackage(pkg).catch(handler);
   }
-  await buildTinyMermaid();
 };
 
 void main();

.esbuild/util.ts

@@ -14,7 +14,6 @@ export interface MermaidBuildOptions extends BuildOptions {
   metafile: boolean;
   format: 'esm' | 'iife';
   options: PackageOptions;
-  includeLargeFeatures: boolean;
 }
 
 export const defaultOptions: Omit<MermaidBuildOptions, 'entryName' | 'options'> = {
@@ -22,7 +21,6 @@ export const defaultOptions: Omit<MermaidBuildOptions, 'entryName' | 'options'>
   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';
   }
@@ -62,27 +54,25 @@ const getFileName = (
 export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
   const {
     core,
+    metafile,
     format,
+    minify,
     options: { name, file, packageName },
     globalName = 'mermaid',
-    includeLargeFeatures,
-    ...rest
   } = options;
-
   const external: string[] = ['require', 'fs', 'path'];
   const outFileName = getFileName(name, options);
   const output: BuildOptions = buildOptions({
-    ...rest,
     absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
     entryPoints: {
       [outFileName]: `src/${file}`,
     },
+    metafile,
+    minify,
     globalName,
     logLevel: 'info',
     chunkNames: `chunks/${outFileName}/[name]-[hash]`,
     define: {
-      // This needs to be stringified for esbuild
-      includeLargeFeatures: `${includeLargeFeatures}`,
       'import.meta.vitest': 'undefined',
     },
   });

.github/lychee.toml

@@ -46,20 +46,13 @@ exclude = [
 # 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://mermaid-preview.com"
 ]
 
 # Exclude all private IPs from checking.

.github/workflows/autofix.yml

@@ -42,4 +42,4 @@ jobs:
         working-directory: ./packages/mermaid
         run: pnpm run docs:build
 
-      - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 # main
+      - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef # main

.github/workflows/e2e-applitools.yml

@@ -45,15 +45,13 @@ jobs:
       - 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

.github/workflows/e2e-timings.yml

@@ -58,7 +58,7 @@ jobs:
           echo "EOF" >> $GITHUB_OUTPUT
 
       - name: Commit and create pull request
-        uses: peter-evans/create-pull-request@1310d7dab503600742045e6fd4b84dda64352858
+        uses: peter-evans/create-pull-request@a7b20e1da215b3ef3ccddb48ff65120256ed6226
         with:
           add-paths: |
             cypress/timings.json

.github/workflows/pr-labeler.yml

@@ -29,29 +29,3 @@ jobs:
           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/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
@@ -53,3 +52,4 @@ vite.config.ts.timestamp-*
 
 # autogenereated by langium-cli
 generated/
+.cursor/*

.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

README.md

@@ -95,6 +95,10 @@ In our release process we rely heavily on visual regression tests using [applito
 
 <!-- </Main description> -->
 
+## Mermaid AI Bot
+
+[Mermaid](https://codeparrot.ai/oracle?owner=mermaid-js&repo=mermaid) Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.
+
 ## Examples
 
 **The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid.js.org/intro/syntax-reference.html).**

__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

@@ -26,10 +26,7 @@ export default eyesPlugin(
         config.env.useArgos = process.env.RUN_VISUAL_TEST === 'true';
 
         if (config.env.useArgos) {
-          registerArgosTask(on, config, {
-            // Enable upload to Argos only when it runs on CI.
-            uploadToArgos: !!process.env.CI,
-          });
+          registerArgosTask(on, config);
         } else {
           addMatchImageSnapshotPlugin(on, config);
         }

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/rendering/block.spec.js

@@ -16,7 +16,7 @@ describe('Block diagram', () => {
 
   it('BL2: should handle columns statement in sub-blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   id1["Hello"]
   block
     columns 3
@@ -32,7 +32,7 @@ describe('Block diagram', () => {
 
   it('BL3: should align block widths and handle columns statement in sub-blocks', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   block
     columns 1
     id1
@@ -48,7 +48,7 @@ describe('Block diagram', () => {
 
   it('BL4: should align block widths and handle columns statements in deeper sub-blocks then 1 level', () => {
     imgSnapshotTest(
-      `block
+      `block-beta
   columns 1
   block
     columns 1
@@ -68,7 +68,7 @@ describe('Block diagram', () => {
 
   it('BL5: should align block widths and handle columns 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
@@ -238,7 +238,7 @@ describe('Block diagram', () => {
 
   it('BL17: width alignment - blocks should 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.spec.js

@@ -495,34 +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\`
-      `,
-      {}
-    );
-  });
 });

cypress/integration/rendering/erDiagram.spec.js

@@ -354,19 +354,4 @@ ORDER ||--|{ LINE-ITEM : contains
       { 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-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-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(417 * 0.95, 417 * 1.05);
     });
   });
   it('8: should render a flowchart when useMaxWidth is false', () => {
@@ -118,7 +118,7 @@ describe('Flowchart v2', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      expect(width).to.be.within(440 * 0.95, 440 * 1.05);
+      expect(width).to.be.within(417 * 0.95, 417 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -1113,55 +1113,4 @@ end
       );
     });
   });
-  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 }
-      `
-    );
-  });
 });

cypress/integration/rendering/flowchart.spec.js

@@ -934,43 +934,4 @@ graph TD
       }
     );
   });
-  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

@@ -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
@@ -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(
       `

cypress/integration/rendering/mindmap.spec.ts

@@ -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
@@ -234,22 +246,5 @@ 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' } }
-      );
-    });
-  });
   /* The end */
 });

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

@@ -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/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

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

@@ -602,231 +602,6 @@ State1 --> [*]
       --
       55
   }
-`,
-      {}
-    );
-  });
-  it('should render edge labels correctly', () => {
-    imgSnapshotTest(
-      `---
-title: On The Way To Something Something DarkSide
-config:
-  look: default
-  theme: default
----
-
-stateDiagram-v2
-
-   state State1_____________
-   {
-      c0
-   }
-
-   state State2_____________
-   {
-      c1
-   }
-
-   state State3_____________
-   {
-      c7
-   }
-
-   state State4_____________
-   {
-      c2
-   }
-
-   state State5_____________
-   {
-      c3
-   }
-
-   state State6_____________
-   {
-      c4
-   }
-
-   state State7_____________
-   {
-      c5
-   }
-
-   state State8_____________
-   {
-      c6
-   }
-
-
-[*] --> State1_____________
-State1_____________ --> State2_____________   : Transition1_____
-State2_____________ --> State4_____________   : Transition2_____
-State2_____________ --> State3_____________   : Transition3_____
-State3_____________ --> State2_____________
-State4_____________ --> State2_____________   : Transition5_____
-State4_____________ --> State5_____________   : Transition6_____
-State5_____________ --> State6_____________   : Transition7_____
-State6_____________ --> State4_____________   : Transition8_____
-State2_____________ --> State7_____________   : Transition4_____
-State4_____________ --> State7_____________   : Transition4_____
-State5_____________ --> State7_____________   : Transition4_____
-State6_____________ --> State7_____________   : Transition4_____
-State7_____________ --> State1_____________   : Transition9_____
-State5_____________ --> State8_____________   : Transition10____
-State8_____________ --> State5_____________   : Transition11____
-`,
-      {}
-    );
-  });
-  it('should render edge labels correctly with multiple transitions', () => {
-    imgSnapshotTest(
-      `---
-title: Multiple Transitions
-config:
-  look: default
-  theme: default
----
-
-stateDiagram-v2
-
-   state State1_____________
-   {
-      c0
-   }
-
-   state State2_____________
-   {
-      c1
-   }
-
-   state State3_____________
-   {
-      c7
-   }
-
-   state State4_____________
-   {
-      c2
-   }
-
-   state State5_____________
-   {
-      c3
-   }
-
-   state State6_____________
-   {
-      c4
-   }
-
-   state State7_____________
-   {
-      c5
-   }
-
-   state State8_____________
-   {
-      c6
-   }
-
-   state State9_____________
-   {
-      c9
-   }
-
-[*] --> State1_____________
-State1_____________ --> State2_____________   : Transition1_____
-State2_____________ --> State4_____________   : Transition2_____
-State2_____________ --> State3_____________   : Transition3_____
-State3_____________ --> State2_____________
-State4_____________ --> State2_____________   : Transition5_____
-State4_____________ --> State5_____________   : Transition6_____
-State5_____________ --> State6_____________   : Transition7_____
-State6_____________ --> State4_____________   : Transition8_____
-State2_____________ --> State7_____________   : Transition4_____
-State4_____________ --> State7_____________   : Transition4_____
-State5_____________ --> State7_____________   : Transition4_____
-State6_____________ --> State7_____________   : Transition4_____
-State7_____________ --> State1_____________   : Transition9_____
-State5_____________ --> State8_____________   : Transition10____
-State8_____________ --> State5_____________   : Transition11____
-State9_____________ --> State8_____________   : Transition12____
-`,
-      {}
-    );
-  });
-
-  it('should render edge labels correctly with multiple states', () => {
-    imgSnapshotTest(
-      `---
-title: Multiple States
-config:
-  look: default
-  theme: default
----
-
-stateDiagram-v2
-
-   state State1_____________
-   {
-      c0
-   }
-
-   state State2_____________
-   {
-      c1
-   }
-
-   state State3_____________
-   {
-      c7
-   }
-
-   state State4_____________
-   {
-      c2
-   }
-
-   state State5_____________
-   {
-      c3
-   }
-
-   state State6_____________
-   {
-      c4
-   }
-
-   state State7_____________
-   {
-      c5
-   }
-
-   state State8_____________
-   {
-      c6
-   }
-
-   state State9_____________
-   {
-      c9
-   }
-
-   state State10_____________
-   {
-      c10
-   }
-
-[*] --> State1_____________
-State1_____________ --> State2_____________   : Transition1_____
-State2_____________ --> State3_____________   : Transition2_____
-State3_____________ --> State4_____________   : Transition3_____
-State4_____________ --> State5_____________   : Transition4_____
-State5_____________ --> State6_____________   : Transition5_____
-State6_____________ --> State7_____________   : Transition6_____
-State7_____________ --> State8_____________   : Transition7_____
-State8_____________ --> State9_____________   : Transition8_____
-State9_____________ --> State10_____________   : Transition9_____
 `,
       {}
     );

cypress/integration/rendering/timeline.spec.ts

@@ -161,68 +161,4 @@ describe('Timeline diagram', () => {
       {}
     );
   });
-
-  it('11: should render timeline with many stacked events and proper timeline line length', () => {
-    imgSnapshotTest(
-      `timeline
-        title Medical Device Lifecycle
-        section Pre-Development
-          Quality Management System : Regulatory Compliance : Risk Management
-        section Development
-          Management Responsibility : Planning Activities : Human Resources
-          Resource Management : Management Reviews : Infrastructure
-        section Post-Development
-          Product Realization Activities : Planning Activities : Customer-related Processes
-          Post-Production Activities : Feedback : Complaints : Adverse Events
-                                    : Research and Development : Purchasing Activities
-                                    : Production Activities : Installation Activities
-                                    : Servicing Activities : Post-Market Surveillance
-      `,
-      {}
-    );
-  });
-
-  it('12: should render timeline with proper vertical line lengths for all columns', () => {
-    imgSnapshotTest(
-      `---
-config:
-    theme: base
-    themeVariables:
-        fontFamily: Fira Sans
-        fontSize: 17px
-        cScale0: '#b3cde0'
-        cScale1: '#f49090'
-        cScale2: '#85d5b8'
----
-
-timeline
-    title Medical Device Lifecycle
-    section Planning
-        Quality Management System (4): Regulatory Compliance (4.1.1)
-            : Risk Management (4.1.2)
-        Management Resposibility (5): Planning Activities (5.4)
-            : Management Reviews (5.6)
-         Resource Management (6): Human Resources (6.2)
-            : Infrastructure (6.3)
-    section Realization
-        Research and Development (7.3): RnD Planning (7.3.2)
-            : Inputs (7.3.3)
-            : Outputs (7.3.4)
-            : Review (7.3.5)
-            : Verification (7.3.6)
-            : Validation (7.3.7)
-        Purchasing (7.4): Purchasing Process (7.4.1)
-            : Purchasing Information (7.4.2)
-        Production (7.5): Production Activities (7.5.1)
-            : Production Feedback (8.2.1)
-        Installation (7.5.3): Installation Activities (7.5.3)
-        Servicing (7.5.4): Servicing Activities (7.5.4)
-    section Post-Production
-        Post-Market Activities (8): Feedback (8.2.1)
-            : Complaints (8.2.2)
-            : Adverse Events (8.2.3)
-      `,
-      {}
-    );
-  });
 });

cypress/integration/rendering/treemap.spec.ts

@@ -1,382 +0,0 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
-
-describe('Treemap Diagram', () => {
-  it('1: should render a basic treemap', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-      `,
-      {}
-    );
-  });
-
-  it('2: should render a hierarchical treemap', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Products"
-    "Electronics"
-        "Phones": 50
-        "Computers": 30
-        "Accessories": 20
-    "Clothing"
-        "Men's"
-            "Shirts": 10
-            "Pants": 15
-        "Women's"
-            "Dresses": 20
-            "Skirts": 10
-      `,
-      {}
-    );
-  });
-
-  it('3: should render a treemap with styling using classDef', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2":::class1
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20:::class1
-    "Leaf 2.2": 25
-    "Leaf 2.3": 12
-
-classDef class1 fill:red,color:blue,stroke:#FFD600;
-      `,
-      {}
-    );
-  });
-
-  it('4: should handle long text that wraps', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Main Category"
-    "This is a very long item name that should wrap to the next line when rendered in the treemap diagram": 50
-    "Short item": 20
-      `,
-      {}
-    );
-  });
-
-  it('5: should render with a forest theme', () => {
-    imgSnapshotTest(
-      `---
-config:
-  theme: forest
----
-treemap-beta
-"Category A"
-    "Item A1": 10
-    "Item A2": 20
-"Category B"
-    "Item B1": 15
-    "Item B2": 25
-      `,
-      {}
-    );
-  });
-
-  it('6: should handle multiple levels of nesting', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Level 1"
-    "Level 2A"
-        "Level 3A": 10
-        "Level 3B": 15
-    "Level 2B"
-        "Level 3C": 20
-        "Level 3D"
-            "Level 4A": 5
-            "Level 4B": 5
-      `,
-      {}
-    );
-  });
-
-  it('7: should handle classDef with multiple styles', () => {
-    imgSnapshotTest(
-      `treemap-beta
-"Main"
-    "A": 20
-    "B":::important
-        "B1": 10
-        "B2": 15
-    "C": 5:::secondary
-
-classDef important fill:#f96,stroke:#333,stroke-width:2px;
-classDef secondary fill:#6cf,stroke:#333,stroke-dasharray:5 5;
-      `,
-      {}
-    );
-  });
-
-  it('8: should handle dollar value formatting with thousands separator', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: "$0,0"
----
-treemap
-"Budget"
-    "Operations"
-        "Salaries": 700000
-        "Equipment": 200000
-        "Supplies": 100000
-    "Marketing"
-        "Advertising": 400000
-        "Events": 100000
-      `,
-      {}
-    );
-  });
-
-  it('8a: should handle percentage formatting', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: ".1%"
----
-treemap-beta
-"Market Share"
-    "Company A": 0.35
-    "Company B": 0.25
-    "Company C": 0.15
-    "Others": 0.25
-      `,
-      {}
-    );
-  });
-
-  it('8b: should handle decimal formatting', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: ".2f"
----
-treemap-beta
-"Metrics"
-    "Conversion Rate": 0.0567
-    "Bounce Rate": 0.6723
-    "Click-through Rate": 0.1289
-    "Engagement": 0.4521
-      `,
-      {}
-    );
-  });
-
-  it('8c: should handle dollar sign with decimal places', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: "$.2f"
----
-treemap-beta
-"Product Prices"
-    "Basic": 19.99
-    "Standard": 49.99
-    "Premium": 99.99
-    "Enterprise": 199.99
-      `,
-      {}
-    );
-  });
-
-  it('8d: should handle dollar sign with thousands separator and decimal places', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: "$,.2f"
----
-treemap-beta
-"Revenue"
-    "Q1": 1250345.75
-    "Q2": 1645789.25
-    "Q3": 1845123.50
-    "Q4": 2145678.75
-      `,
-      {}
-    );
-  });
-
-  it('8e: should handle simple thousands separator', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: ","
----
-treemap-beta
-"User Counts"
-    "Active Users": 1250345
-    "New Signups": 45789
-    "Churned": 12350
-    "Converted": 78975
-      `,
-      {}
-    );
-  });
-
-  it('8f: should handle valueFormat set via directive with dollar and thousands separator', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: "$,.0f"
----
-treemap-beta
-"Sales by Region"
-    "North": 1234567
-    "South": 7654321
-    "East": 4567890
-    "West": 9876543
-      `,
-      {}
-    );
-  });
-
-  it('8g: should handle scientific notation format', () => {
-    imgSnapshotTest(
-      `---
-config:
-  treemap:
-    valueFormat: ".2e"
----
-treemap-beta
-"Scientific Values"
-    "Value 1": 1234567
-    "Value 2": 0.0000123
-    "Value 3": 1000000000
-      `,
-      {}
-    );
-  });
-
-  it('9: should handle a complex example with multiple features', () => {
-    imgSnapshotTest(
-      `---
-config:
-  theme: dark
-  treemap:
-    valueFormat: "$0,0"
----
-treemap-beta
-"Company Budget"
-    "Engineering":::engineering
-        "Frontend": 300000
-        "Backend": 400000
-        "DevOps": 200000
-    "Marketing":::marketing
-        "Digital": 250000
-        "Print": 100000
-        "Events": 150000
-    "Sales":::sales
-        "Direct": 500000
-        "Channel": 300000
-
-classDef engineering fill:#6b9bc3,stroke:#333;
-classDef marketing fill:#c36b9b,stroke:#333;
-classDef sales fill:#c3a66b,stroke:#333;
-      `,
-      {}
-    );
-  });
-
-  it('10: should render the example from documentation', () => {
-    imgSnapshotTest(
-      `
-    treemap-beta
-      "Section 1"
-          "Leaf 1.1": 12
-          "Section 1.2":::class1
-            "Leaf 1.2.1": 12
-      "Section 2"
-          "Leaf 2.1": 20:::class1
-          "Leaf 2.2": 25
-          "Leaf 2.3": 12
-
-      classDef class1 fill:red,color:blue,stroke:#FFD600;
-      `,
-      {}
-    );
-  });
-
-  it('11: should handle comments', () => {
-    imgSnapshotTest(
-      `
-    treemap-beta
-      %% This is a comment
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      %% Another comment
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-      `,
-      {}
-    );
-  });
-  /*
-  it.skip('12: should render a treemap with title', () => {
-    imgSnapshotTest(
-      `
-    treemap-beta
-      title Treemap with Title
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-      `,
-      {}
-    );
-  });
-
-  it.skip('13: should render a treemap with accessibility attributes', () => {
-    imgSnapshotTest(
-      `
-    treemap-beta
-      accTitle: Accessible Treemap Title
-      accDescr: This is a description of the treemap for accessibility purposes
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-      `,
-      {}
-    );
-  });
-
-  it.skip('14: should render a treemap with title and accessibility attributes', () => {
-    imgSnapshotTest(
-      `
-    treemap
-      title Treemap with Title and Accessibility
-      accTitle: Accessible Treemap Title
-      accDescr: This is a description of the treemap for accessibility purposes
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-      `,
-      {}
-    );
-  });
-  */
-});

cypress/integration/rendering/xyChart.spec.js

@@ -1,7 +1,7 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('XY Chart', () => {
-  it('should render the simplest possible xy-beta chart', () => {
+  it('should render the simplest possible chart', () => {
     imgSnapshotTest(
       `
       xychart-beta
@@ -10,19 +10,10 @@ describe('XY Chart', () => {
       {}
     );
   });
-  it('should render the simplest possible xy chart', () => {
-    imgSnapshotTest(
-      `
-      xychart
-        line [10, 30, 20]
-      `,
-      {}
-    );
-  });
   it('Should render a complete chart', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -35,7 +26,7 @@ describe('XY Chart', () => {
   it('Should render a chart without title', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
@@ -47,7 +38,7 @@ describe('XY Chart', () => {
   it('y-axis title not required', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis 4000 --> 11000
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
@@ -59,7 +50,7 @@ describe('XY Chart', () => {
   it('Should render a chart without y-axis with different range', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
         line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
@@ -70,7 +61,7 @@ describe('XY Chart', () => {
   it('x axis title not required', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
         line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
@@ -81,7 +72,7 @@ describe('XY Chart', () => {
   it('Multiple plots can be rendered', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         line [23, 46, 77, 34]
         line [45, 32, 33, 12]
         bar [87, 54, 99, 85]
@@ -95,7 +86,7 @@ describe('XY Chart', () => {
   it('Decimals and negative numbers are supported', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         y-axis -2.4 --> 3.5
         line [+1.3, .6, 2.4, -.34]
       `,
@@ -113,7 +104,7 @@ describe('XY Chart', () => {
           height: 20
           plotReservedSpacePercent: 100
       ---
-      xychart
+      xychart-beta
         line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
       `,
       {}
@@ -139,7 +130,7 @@ describe('XY Chart', () => {
             showTick: false
             showAxisLine: false
       ---
-      xychart
+      xychart-beta
         bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
       `,
       {}
@@ -149,7 +140,7 @@ describe('XY Chart', () => {
     imgSnapshotTest(
       `
       %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5},  "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60  }}}%%
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -190,7 +181,7 @@ describe('XY Chart', () => {
           plotReservedSpacePercent: 60
           showDataLabel: true
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -211,7 +202,7 @@ describe('XY Chart', () => {
           yAxis:
             showTitle: false
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -232,7 +223,7 @@ describe('XY Chart', () => {
           yAxis:
             showLabel: false
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -253,7 +244,7 @@ describe('XY Chart', () => {
           yAxis:
             showTick: false
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -274,7 +265,7 @@ describe('XY Chart', () => {
           yAxis:
             showAxisLine: false
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -303,7 +294,7 @@ describe('XY Chart', () => {
             xAxisLineColor: "#87ceeb"
             plotColorPalette: "#008000, #faba63"
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -316,7 +307,7 @@ describe('XY Chart', () => {
   it('should use the correct distances between data points', () => {
     imgSnapshotTest(
       `
-      xychart
+      xychart-beta
         x-axis 0 --> 2
         line [0, 1, 0, 1]
         bar [1, 0, 1, 0]
@@ -334,7 +325,7 @@ describe('XY Chart', () => {
       xyChart:
         showDataLabel: true
     ---
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000
@@ -353,7 +344,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000
@@ -366,7 +357,7 @@ describe('XY Chart', () => {
   it('should render vertical bar chart without labels by default', () => {
     imgSnapshotTest(
       `
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000
@@ -384,7 +375,7 @@ describe('XY Chart', () => {
       xyChart:
         chartOrientation: horizontal
     ---
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000
@@ -402,7 +393,7 @@ describe('XY Chart', () => {
       xyChart:
         showDataLabel: true
     ---
-      xychart
+      xychart-beta
         title "Multiple Bar Plots"
         x-axis Categories [A, B, C]
         y-axis "Values" 0 --> 100
@@ -421,7 +412,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-      xychart
+      xychart-beta
         title "Multiple Bar Plots"
         x-axis Categories [A, B, C]
         y-axis "Values" 0 --> 100
@@ -439,7 +430,7 @@ describe('XY Chart', () => {
       xyChart:
         showDataLabel: true
     ---
-      xychart
+      xychart-beta
         title "Single Bar Chart"
         x-axis Categories [A]
         y-axis "Value" 0 --> 100
@@ -458,7 +449,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-      xychart
+      xychart-beta
         title "Single Bar Chart"
         x-axis Categories [A]
         y-axis "Value" 0 --> 100
@@ -476,7 +467,7 @@ describe('XY Chart', () => {
       xyChart:
         showDataLabel: true
     ---
-      xychart
+      xychart-beta
         title "Decimal and Negative Values"
         x-axis Categories [A, B, C]
         y-axis -10 --> 10
@@ -495,7 +486,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-      xychart
+      xychart-beta
         title "Decimal and Negative Values"
         x-axis Categories [A, B, C]
         y-axis -10 --> 10
@@ -513,7 +504,7 @@ describe('XY Chart', () => {
       xyChart:
         showDataLabel: true
     ---
-    xychart
+    xychart-beta
             title "Sales Revenue"
             x-axis Months [jan,b,c]
             y-axis "Revenue (in $)" 4000 --> 12000
@@ -570,7 +561,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-    xychart
+    xychart-beta
             title "Sales Revenue"
             x-axis Months [jan,b,c]
             y-axis "Revenue (in $)" 4000 --> 12000
@@ -624,7 +615,7 @@ describe('XY Chart', () => {
         xyChart:
           showDataLabel: true
       ---
-      xychart
+      xychart-beta
         title "Sales Revenue"
         x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
         y-axis "Revenue (in $)" 4000 --> 12000
@@ -681,7 +672,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
       y-axis "Revenue (in $)" 4000 --> 12000
@@ -735,7 +726,7 @@ describe('XY Chart', () => {
       xyChart:
         showDataLabel: true
     ---
-    xychart
+    xychart-beta
             title "Sales Revenue"
             x-axis Months [jan]
             y-axis "Revenue (in $)" 3000 --> 12000
@@ -792,7 +783,7 @@ describe('XY Chart', () => {
         showDataLabel: true
         chartOrientation: horizontal
     ---
-    xychart
+    xychart-beta
             title "Sales Revenue"
             x-axis Months [jan]
             y-axis "Revenue (in $)" 3000 --> 12000

cypress/platform/darshan.html

@@ -1,35 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-    <style>
-      div.mermaid {
-        font-family: 'Courier New', Courier, monospace !important;
-      }
-    </style>
-  </head>
-
-  <body>
-    <h1>Pie chart demos</h1>
-    <pre class="mermaid">
-     pie title Default text position: Animal adoption
-        accTitle: simple pie char demo
-        accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
-         "dogs" : -60.67
-        "rats" : 40.12
-    </pre>
-
-    <hr />
-    <script type="module">
-      import mermaid from '/mermaid.esm.mjs';
-      mermaid.initialize({
-        theme: 'forest',
-        logLevel: 3,
-        securityLevel: 'loose',
-      });
-    </script>
-  </body>
-</html>

cypress/platform/e2e.html

@@ -7,7 +7,7 @@
       rel="stylesheet"
     />
     <style>
-      svg:not(svg svg) {
+      svg {
         border: 2px solid darkred;
       }
       .exClass2 > rect,

cypress/platform/knsv2.html

@@ -32,26 +32,8 @@
       href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
       rel="stylesheet"
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
-      rel="stylesheet"
-    />
 
     <style>
-      .recursive-mermaid {
-        font-family: 'Recursive', sans-serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-      }
-
       body {
         /* background: rgb(221, 208, 208); */
         /* background: #333; */
@@ -63,9 +45,7 @@
       h1 {
         color: grey;
       }
-      .mermaid {
-        border: 1px solid red;
-      }
+
       .mermaid2 {
         display: none;
       }
@@ -103,11 +83,6 @@
         width: 100%;
       }
 
-      .class2 {
-        fill: red;
-        fill-opacity: 1;
-      }
-
       /* tspan {
               font-size: 6px !important;
             } */
@@ -130,271 +105,20 @@
   </head>
 
   <body>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      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
-          Pen and paper
-          Mermaid
-
-    </pre>
     <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-      </pre
-    >
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-      </pre
-    >
-    <pre id="diagram4" class="mermaid">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-
-    <pre id="diagram4" class="mermaid">
-treemap
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2":::class1
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20:::class1
-    "Leaf 2.2": 25
-    "Leaf 2.3": 12
-
-classDef class1   fill:red,color:blue,stroke:#FFD600;
-
-
-</pre
-    >
-    <pre id="diagram4" class="mermaid2">
----
-config:
-  treemap:
-    valueFormat: '$0,0'
----
-treemap
-"Budget"
-    "Operations"
-        "Salaries": 7000
-        "Equipment": 2000
-        "Supplies": 1000
-    "Marketing"
-        "Advertising": 4000
-        "Events": 1000
-
-</pre
-    >
-    <pre id="diagram4" class="mermaid">
-    treemap
-      title Accessible Treemap Title
-      "Category A"
-          "Item A1": 10
-          "Item A2": 20
-      "Category B"
-          "Item B1": 15
-          "Item B2": 25
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        a
-          apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        b
-          apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      flowchart TB
-          A --> n0["1"]
-          A --> n1["2"]
-          A --> n2["3"]
-          A --> n3["4"] --> Q & R & S & T
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: elk
-      ---
-      flowchart TB
-          A --> n0["1"]
-          A --> n1["2"]
-          A --> n2["3"]
-          A --> n3["4"] --> Q & R & S & T
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-          Pen and paper
-          Mermaid
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-          Pen and paper
-          Mermaid
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;br/>and features
-          On Automatic creation
-            Uses
-                Creative techniques
-                Strategic planning
-                Argument mapping
-        Tools
-          Pen and paper
-          Mermaid
-    </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: cose-bilkent
-      ---
       flowchart LR
-      root{mindmap} --- Origins --- Europe
-      Origins --> Asia
-      root --- Background --- Rich
-      Background --- Poor
-      subgraph apa
-        Background
-        Poor
-      end
-
-
-
-
+        AB["apa@apa@"] --> B(("`apa@apa`"))
     </pre>
-    <pre id="diagram4" class="mermaid2">
-      ---
-      config:
-        layout: elk
-      ---
-      flowchart LR
-      root{mindmap} --- Origins --- Europe
-      Origins --> Asia
-      root --- Background --- Rich
-      Background --- Poor
-
-
-
-
-    </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       flowchart
         D(("for D"))
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
       flowchart LR
         A e1@==> B
         e1@{ animate: true}
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 flowchart LR
   A e1@--> B
   classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
@@ -465,44 +189,6 @@ config:
     </pre>
     <pre id="diagram4" class="mermaid2">
 ---
-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
-    </pre>
-    <pre id="diagram4" class="mermaid2">
----
-config:
-  layout: elk
----
-      flowchart LR
-      a
-        D{"Use the editor"}
-
-      D -- Mermaid js --> I{"fa:fa-code Text"}
-      D-->I
-      D-->I
-    </pre>
-    <pre id="diagram4" class="mermaid2">
----
 config:
   layout: elk
 ---
@@ -752,7 +438,7 @@ kanban
         alert('It worked');
       }
       await mermaid.initialize({
-        // theme: 'forest',
+        // theme: 'base',
         // theme: 'default',
         // theme: 'forest',
         // handDrawnSeed: 12,
@@ -763,7 +449,11 @@ kanban
         // layout: 'fixed',
         // htmlLabels: false,
         flowchart: { titleTopMargin: 10 },
-        fontFamily: "'Recursive', sans-serif",
+
+        // fontFamily: 'Caveat',
+        // fontFamily: 'Kalam',
+        // fontFamily: 'courier',
+        fontFamily: 'arial',
         sequence: {
           actorFontFamily: 'courier',
           noteFontFamily: 'courier',

cypress/platform/mindmap-layouts.html

@@ -1,379 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Mermaid Quick Test Page</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
-    <style>
-      div.mermaid {
-        font-family: 'Courier New', Courier, monospace !important;
-      }
-    </style>
-  </head>
-
-  <body>
-    <pre class="mermaid">
- ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
- ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
- ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
- ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap))
-        A
-        B
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-      mindmap
-      root((mindmap is a long thing))
-        A
-        B
-        C
-        D
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;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
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;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
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;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
-    </pre>
-    <pre class="mermaid">
-    ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap))
-        Origins
-          Long history
-          ::icon(fa fa-book)
-          Popularisation
-            British popular psychology author Tony Buzan
-        Research
-          On effectiveness&lt;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
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-    <pre class="mermaid">
-      ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      root((mindmap))
-        A
-          a
-            apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-            apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          b
-          c
-          d
-        B
-            apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-        D
-          apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-          apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
-
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: tidy-tree
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: dagre
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: elk
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <pre class="mermaid">
- ---
-      config:
-        layout: cose-bilkent
-      ---
-      mindmap
-      ((This is a mindmap))
-        child1
-         grandchild 1
-         grandchild 2
-        child2
-         grandchild 3
-         grandchild 4
-        child3
-         grandchild 5
-         grandchild 6
-      
-    </pre>
-
-    <hr />
-    <script type="module">
-      import mermaid from '/mermaid.esm.mjs';
-      mermaid.initialize({
-        theme: 'default',
-        logLevel: 3,
-        securityLevel: 'loose',
-      });
-    </script>
-  </body>
-</html>

cypress/platform/viewer.js

@@ -14,28 +14,12 @@ function markRendered() {
   }
 }
 
-function loadFontAwesomeCSS() {
-  const link = document.createElement('link');
-  link.rel = 'stylesheet';
-  link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css';
-
-  document.head.appendChild(link);
-
-  return new Promise((resolve, reject) => {
-    link.onload = resolve;
-    link.onerror = () => reject(new Error('Failed to load FontAwesome'));
-  });
-}
-
 /**
  * ##contentLoaded Callback function that is called when page is loaded. This functions fetches
  * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
  * page.
  */
 const contentLoaded = async function () {
-  await loadFontAwesomeCSS();
-  await Promise.all(Array.from(document.fonts, (font) => font.load()));
-
   let pos = document.location.href.indexOf('?graph=');
   if (pos > 0) {
     pos = pos + 7;
@@ -66,13 +50,8 @@ const contentLoaded = async function () {
 
     mermaid.registerLayoutLoaders(layouts);
     mermaid.initialize(graphObj.mermaid);
-    /**
-     *  CC-BY-4.0
-     *  Copyright (c) Fonticons, Inc. - https://fontawesome.com/license/free
-     *  https://fontawesome.com/icons/bell?f=classic&s=regular
-     */
     const staticBellIconPack = {
-      prefix: 'fa',
+      prefix: 'fa6-regular',
       icons: {
         bell: {
           body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',

cypress/timings.json

@@ -2,219 +2,211 @@
   "durations": [
     {
       "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 5672
+      "duration": 5450
     },
     {
       "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 1990
+      "duration": 2004
     },
     {
       "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3186
+      "duration": 3183
     },
     {
       "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 1948
+      "duration": 1913
     },
     {
       "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 11938
+      "duration": 10944
     },
     {
       "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 1932
+      "duration": 1938
     },
     {
       "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 27237
+      "duration": 26753
     },
     {
       "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 3170
+      "duration": 2571
     },
     {
       "spec": "cypress/integration/rendering/architecture.spec.ts",
-      "duration": 104
+      "duration": 110
     },
     {
       "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 17390
+      "duration": 14697
     },
     {
       "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 5296
+      "duration": 4705
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
-      "duration": 39004
+      "duration": 35841
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
-      "duration": 37653
+      "duration": 34279
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 23278
+      "duration": 20641
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
-      "duration": 36645
+      "duration": 33020
     },
     {
       "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 15418
+      "duration": 13546
     },
     {
       "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 9684
+      "duration": 8072
     },
     {
       "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 2570
+      "duration": 2083
     },
     {
       "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
-      "duration": 84687
+      "duration": 78269
     },
     {
       "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 14819
+      "duration": 12578
     },
     {
       "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 3371
+      "duration": 2784
     },
     {
       "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 39925
+      "duration": 36205
     },
     {
       "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 34694
-    },
-    {
-      "spec": "cypress/integration/rendering/flowchart-icon.spec.js",
-      "duration": 7137
+      "duration": 26627
     },
     {
       "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 24740
+      "duration": 21332
     },
     {
       "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 42077
+      "duration": 37328
     },
     {
       "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 30642
+      "duration": 25914
     },
     {
       "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 18085
+      "duration": 15383
     },
     {
       "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 50107
+      "duration": 45226
     },
     {
       "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 276279
+      "duration": 251094
     },
     {
       "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 56505
+      "duration": 50916
     },
     {
       "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 3036
+      "duration": 2489
     },
     {
       "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 6889
+      "duration": 5988
     },
     {
       "spec": "cypress/integration/rendering/kanban.spec.ts",
-      "duration": 7353
+      "duration": 6225
     },
     {
       "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 3580
+      "duration": 3009
     },
     {
       "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 2508
+      "duration": 2426
     },
     {
       "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 10939
+      "duration": 9306
     },
     {
       "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 149102
+      "duration": 134419
     },
     {
       "spec": "cypress/integration/rendering/oldShapes.spec.ts",
-      "duration": 113987
+      "duration": 102434
     },
     {
       "spec": "cypress/integration/rendering/packet.spec.ts",
-      "duration": 4060
+      "duration": 3373
     },
     {
       "spec": "cypress/integration/rendering/pie.spec.ts",
-      "duration": 5715
+      "duration": 4898
     },
     {
       "spec": "cypress/integration/rendering/quadrantChart.spec.js",
-      "duration": 8945
+      "duration": 7578
     },
     {
       "spec": "cypress/integration/rendering/radar.spec.js",
-      "duration": 5337
+      "duration": 4526
     },
     {
       "spec": "cypress/integration/rendering/requirement.spec.js",
-      "duration": 2643
+      "duration": 2172
     },
     {
       "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
-      "duration": 52072
+      "duration": 47175
     },
     {
       "spec": "cypress/integration/rendering/sankey.spec.ts",
-      "duration": 6692
+      "duration": 5717
     },
     {
       "spec": "cypress/integration/rendering/sequencediagram.spec.js",
-      "duration": 35721
+      "duration": 32556
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
-      "duration": 26030
+      "duration": 22572
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 16333
+      "duration": 14064
     },
     {
       "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 29287
+      "duration": 26565
     },
     {
       "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 8491
-    },
-    {
-      "spec": "cypress/integration/rendering/treemap.spec.ts",
-      "duration": 12291
+      "duration": 6233
     },
     {
       "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 20651
+      "duration": 17750
     },
     {
       "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 3218
+      "duration": 2696
     }
   ]
 }

demos/block.html

@@ -10,7 +10,7 @@
   <body>
     <h1>Block diagram demos</h1>
     <pre id="diagram" class="mermaid">
-block
+block-beta
 columns 1
   db(("DB"))
   blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -26,7 +26,7 @@ columns 1
   style B fill:#f9F,stroke:#333,stroke-width:4px
     </pre>
     <pre id="diagram" class="mermaid">
-block
+block-beta
     A1["square"]
     B1("rounded")
     C1(("circle"))
@@ -36,7 +36,7 @@ block
     </pre>
 
     <pre id="diagram" class="mermaid">
-block
+block-beta
     A1(["stadium"])
     A2[["subroutine"]]
     B1[("cylinder")]
@@ -48,7 +48,7 @@ block
     </pre>
 
     <pre id="diagram" class="mermaid">
-block
+block-beta
   block:e:4
     columns 2
       f
@@ -57,7 +57,7 @@ block
 
     </pre>
     <pre id="diagram" class="mermaid">
-block
+block-beta
   block:e:4
     columns 2
       f
@@ -67,7 +67,7 @@ block
 
     </pre>
     <pre id="diagram" class="mermaid">
-block
+block-beta
   columns 3
   a:3
   block:e:3
@@ -80,7 +80,7 @@ block
 
     </pre>
     <pre id="diagram" class="mermaid">
-block
+block-beta
   columns 4
   a b c d
   block:e:4
@@ -97,19 +97,19 @@ flowchart LR
   X-- "a label" -->z
     </pre>
     <pre id="diagram" class="mermaid">
-block
+block-beta
 columns 5
    A space B
    A --x B
     </pre>
     <pre id="diagram" class="mermaid">
-block
+block-beta
 columns 3
   a["A wide one"] b:2 c:2 d
     </pre>
 
     <pre id="diagram" class="mermaid">
-block
+block-beta
 columns 3
   a b c
   e:3
@@ -117,7 +117,7 @@ columns 3
     </pre>
 
     <pre id="diagram" class="mermaid">
-block
+block-beta
 
   A1:3
   A2:1

demos/er-multiline.html

@@ -1,222 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      .recursive-500 {
-        font-family: 'Recursive', serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-      }
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        /* font-family: 'Arial'; */
-        font-family: 'Recursive', serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-        /* color: white; */
-        /* font-size: 18px !important; */
-      }
-      .gridify.tiny {
-        background-image:
-          linear-gradient(transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px),
-          linear-gradient(90deg, transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px);
-        background-size:
-          100% 12px,
-          12px 100%;
-      }
-
-      .gridify.dots {
-        background-image: radial-gradient(
-          circle at center,
-          rgba(220, 220, 200, 0.8) 1px,
-          transparent 1px
-        );
-        background-size: 24px 24px;
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        font-size: 16px !important;
-        font-family: 'Recursive', serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-      }
-
-      pre {
-        width: 100%;
-        /*box-shadow: 4px 4px 0px 0px #0000000F;*/
-      }
-    </style>
-  </head>
-
-  <body class="gridify dots">
-    <div class="w-full h-64">
-      <pre id="diagram4" class="mermaid" style="background: rgb(255, 255, 255)">
-              erDiagram
-              CAR ||--o{ NAMED-DRIVER : allows
-              CAR ::: Pine {
-                  string registrationNumber PK "Primary Key<br><strong>Unique registration number</strong>"
-                  string make "Car make<br><strong>e.g., Toyota</strong>"
-                  string model "Model of the car<br><strong>e.g., Corolla</strong>"
-                  string[] parts "List of parts<br><strong>Stored as array</strong>"
-              }
-              PERSON ||--o{ NAMED-DRIVER : is
-              PERSON ::: someclass {
-                  string driversLicense PK "The license #<br><strong>Primary Key</strong>"
-                  string(99) firstName "Only 99 characters <br>are allowed <br> <strong>e.g., Smith</strong>"
-                  string lastName "Last name of person<br><strong>e.g., Smith</strong>"
-                  string phone UK "Unique phone number<br><strong>Used for contact</strong>"
-                  int age "Age of the person<br><strong>Must be numeric</strong>"
-              }
-              NAMED-DRIVER {
-                  string carRegistrationNumber PK, FK, UK, PK "Foreign key to CAR<br><strong>Also part of PK</strong>"
-                  string driverLicence PK, FK "Foreign key to PERSON<br><strong>Also part of PK</strong>"
-              }
-              MANUFACTURER only one to zero or more CAR : makesx      
-            </pre>
-      <hr />
-      <pre class="mermaid">
-                  erDiagram
-                  _**testẽζ➕Ø😀㌕ぼ**_ {
-                    *__List~List~int~~sdfds__* **driversLicense** PK "***The l😀icense #***"
-                    string last*Name*
-                    string __phone__ UK
-                    *string(99)~T~~~~~~* firstName "Only __99__ <br>characters are a<br>llowed dsfsdfsdfsdfs"
-                  int _age_
-                  }
-                </pre>
-    </div>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-
-      const staticBellIconPack = {
-        prefix: 'fa6-regular',
-        icons: {
-          bell: {
-            body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
-            width: 448,
-          },
-        },
-        width: 512,
-        height: 512,
-      };
-
-      mermaid.registerIconPacks([
-        {
-          name: 'logos',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
-        },
-        {
-          name: 'fa',
-          loader: () => staticBellIconPack,
-        },
-      ]);
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
-      };
-      function callback() {
-        alert('It worked');
-      }
-      await mermaid.initialize({
-        startOnLoad: false,
-
-        theme: 'forest',
-        look: 'classic',
-        layout: 'dagre',
-
-        // theme: 'default',
-        // look: 'classic',
-        flowchart: { titleTopMargin: 10 },
-        fontFamily: 'Recursive',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        kanban: {
-          htmlLabels: false,
-        },
-        fontSize: 16,
-        logLevel: 0,
-        securityLevel: 'loose',
-        callback,
-      });
-      // setTimeout(() => {
-      mermaid.init(undefined, document.querySelectorAll('.mermaid'));
-      // }, 1000);
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-    </script>
-  </body>
-</html>

demos/packet.html

@@ -17,7 +17,7 @@
 
     <div class="diagrams">
       <pre class="mermaid">
-      packet
+      packet-beta
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"
@@ -44,7 +44,7 @@
         packet:
           showBits: false
       ---
-      packet
+      packet-beta
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"
@@ -70,7 +70,7 @@
       config:
         theme: forest
       ---
-      packet
+      packet-beta
         title Forest theme
         0-15: "Source Port"
         16-31: "Destination Port"
@@ -97,7 +97,7 @@
       config:
         theme: dark
       ---
-      packet
+      packet-beta
         title Dark theme
         0-15: "Source Port"
         16-31: "Destination Port"

demos/sankey.html

@@ -20,14 +20,12 @@
           width: 800
           nodeAlignment: left
       ---
-     sankey   
-        a,b,8
-        b,c,8
-        c,d,8
-        d,e,8
-        
-        x,c,4
-        c,y,4 
+      sankey-beta
+        Revenue,Expenses,10
+        Revenue,Profit,10
+        Expenses,Manufacturing,5
+        Expenses,Tax,3
+        Expenses,Research,2
     </pre>
 
     <h2>Energy flow</h2>
@@ -42,7 +40,7 @@
           linkColor: gradient
           nodeAlignment: justify
       ---
-      sankey
+      sankey-beta
 
       Agricultural 'waste',Bio-conversion,124.729
       Bio-conversion,Liquid,0.597

demos/timeline.html

@@ -23,23 +23,6 @@
           1940 : fourth step : fifth step
 				</pre>
 
-    <h2>Medical Device Lifecycle Timeline</h2>
-    <pre class="mermaid">
-        timeline
-        title Medical Device Lifecycle
-        section Planning
-          Quality Management System (4) : Regulatory Compliance (4.1) : Risk Management (4.1.3) : Management Review (5.6) : Infrastructure (6.3)
-          Management Responsibility (5) : Planning Activities (5.2) : Human Resources (6.2) : RnD Planning (7.3.2) : Purchasing Process (7.4.1) : Production Activities (7.5.1) : Installation Activities (7.5.3) : Servicing Activities (7.5.4)
-        section Realization
-          Research and Development (7.3) : Inputs (7.3.3) : Outputs (7.3.4) : Review (7.3.5) : Verification (7.3.6) : Validation (7.3.7)
-          Purchasing (7.4) : Purchasing Information (7.4.2) : Production Feedback (8.2.1)
-          Production (7.5) : Production Feedback (8.2.1)
-          Installation (7.5.3) : Installation Activities (7.5.3)
-          Servicing (7.5.4) : Servicing Activities (7.5.4)
-        section Post-Production
-          Post-Market Activities (8) : Feedback (8.2.1) : Complaints (8.2.2) : Adverse Events (8.2.3)
-    </pre>
-
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({

demos/treemap.html

@@ -1,75 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Mermaid Treemap Diagram Demo</title>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <style>
-      body {
-        font-family: 'Montserrat', sans-serif;
-        margin: 0 auto;
-        max-width: 900px;
-        padding: 20px;
-      }
-      .mermaid {
-        margin: 30px 0;
-      }
-      h1,
-      h2 {
-        color: #333;
-      }
-      pre {
-        background-color: #f5f5f5;
-        padding: 15px;
-        border-radius: 5px;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Treemap Diagram Demo</h1>
-    <p>This is a demo of the new treemap diagram type in Mermaid.</p>
-
-    <h2>Basic Treemap Example</h2>
-    <pre class="mermaid">
-treemap
-    "Root"
-        "Branch 1"
-            "Leaf 1.1": 10
-            "Leaf 1.2": 15
-        "Branch 2"
-            "Branch 2.1"
-                "Leaf 2.1.1": 20
-                "Leaf 2.1.2": 25
-            "Leaf 2.2": 25
-            "Leaf 2.3": 30
-    </pre>
-
-    <h2>Technology Stack Treemap Example</h2>
-    <pre class="mermaid">
-treemap
-    "Technology Stack"
-        "Frontend"
-            "React": 35
-            "CSS": 15
-            "HTML": 10
-        "Backend"
-            "Node.js": 25
-            "Express": 10
-            "MongoDB": 15
-        "DevOps"
-            "Docker": 10
-            "Kubernetes": 15
-            "CI/CD": 5
-    </pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      mermaid.initialize({
-        theme: 'forest',
-        logLevel: 1,
-        securityLevel: 'loose',
-      });
-    </script>
-  </body>
-</html>

demos/xychart.html

@@ -16,7 +16,7 @@
   <body>
     <h1>XY Charts demos</h1>
     <pre class="mermaid">
-    xychart
+    xychart-beta
     title "Sales Revenue (in $)"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
     y-axis "Revenue (in $)" 4000 --> 11000
@@ -26,7 +26,7 @@
     <hr />
     <h1>XY Charts horizontal</h1>
     <pre class="mermaid">
-    xychart horizontal
+    xychart-beta horizontal
     title "Basic xychart"
     x-axis "this is x axis" [category1, "category 2", category3, category4]
     y-axis yaxisText 10 --> 150
@@ -36,7 +36,7 @@
     <hr />
     <h1>XY Charts only lines and bar</h1>
     <pre class="mermaid">
-    xychart
+    xychart-beta
     line [23, 46, 77, 34]
     line [45, 32, 33, 12]
     line [87, 54, 99, 85]
@@ -48,13 +48,13 @@
     <hr />
     <h1>XY Charts with +ve and -ve numbers</h1>
     <pre class="mermaid">
-    xychart
+    xychart-beta
     line [+1.3, .6, 2.4, -.34]
     </pre>
 
     <h1>XY Charts Bar with multiple category</h1>
     <pre class="mermaid">
-    xychart
+    xychart-beta
     title "Basic xychart with many categories"
     x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
     y-axis yaxisText 10 --> 150
@@ -63,7 +63,7 @@
 
     <h1>XY Charts line with multiple category</h1>
     <pre class="mermaid">
-    xychart
+    xychart-beta
     title "Line chart with many category"
     x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
     y-axis yaxisText 10 --> 150
@@ -72,7 +72,7 @@
 
     <h1>XY Charts category with large text</h1>
     <pre class="mermaid">
-    xychart
+    xychart-beta
     title "Basic xychart with many categories with category overlap"
     x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7]
     y-axis yaxisText 10 --> 150
@@ -89,7 +89,7 @@ config:
     height: 20
     plotReservedSpacePercent: 100
 ---
-    xychart
+    xychart-beta
       line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
     </pre>
 
@@ -103,7 +103,7 @@ config:
     height: 20
     plotReservedSpacePercent: 100
 ---
-    xychart
+    xychart-beta
       bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
     </pre>
 
@@ -136,7 +136,7 @@ config:
     chartOrientation: horizontal
     plotReservedSpacePercent: 60
 ---
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000
@@ -162,7 +162,7 @@ config:
       xAxisLineColor: "#87ceeb"
       plotColorPalette: "#008000, #faba63"
 ---
-    xychart
+    xychart-beta
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000

demos/zenuml.html

@@ -10,20 +10,16 @@
     <h1>Zenuml demos</h1>
     <pre class="mermaid">
 		zenuml
-BookLibService.Borrow(id) {
-  User = Session.GetUser()
-  if(User.isActive) {
-    try {
-      BookRepository.Update(id, onLoan, User)
-      receipt = new Receipt(id, dueDate)
-    } catch (BookNotFoundException) {
-      ErrorService.onException(BookNotFoundException)
-    } finally {
-      Connection.close()
-    }
-  }
-  return receipt
-}
+      title Sync Messages (Design Pattern: Adapter)
+			@Starter(Client)
+      Adapter.interfaceMethod() {
+        translateParameter(parameter)
+
+        result = Implementation.implementationMethod()
+
+        translateResult()
+        return translatedResult
+      }
     </pre>
     <pre class="mermaid">
 		zenuml

docs/community/contributing.md

@@ -29,8 +29,7 @@ In GitHub, you first [**fork a mermaid repository**](https://github.com/mermaid-
 
 Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with.
 
-> **💡 Tip**
-> [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
+> **💡 Tip** > [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
 
 ```bash
 git clone git@github.com/your-fork/mermaid
@@ -302,7 +301,7 @@ If you are adding a feature, you will definitely need to add tests. Depending on
 
 Unit tests are tests that test a single function or module. They are the easiest to write and the fastest to run.
 
-Unit tests are mandatory for all code except the layout tests. (The layouts are tested with integration tests.)
+Unit tests are mandatory for all code except the renderers. (The renderers are tested with integration tests.)
 
 We use [Vitest](https://vitest.dev) to run unit tests.
 
@@ -328,30 +327,6 @@ When using Docker prepend your command with `./run`:
 ./run pnpm test
 ```
 
-##### Testing the DOM
-
-One can use `jsdomIt` to test any part of Mermaid that interacts with the DOM, as long as it is not related to the layout.
-
-The function `jsdomIt` ([developed in utils.ts](../../tests/util.ts)) overrides `it` from `vitest`, and creates a pseudo-browser environment that works almost like the real deal for the duration of the test. It uses JSDOM to create a DOM, and adds objects `window` and `document` to `global` to mock the browser environment.
-
-> \[!NOTE]
-> The layout cannot work in `jsdomIt` tests because JSDOM has no rendering engine, hence the pseudo-browser environment.
-
-Example :
-
-```typescript
-import { ensureNodeFromSelector, jsdomIt } from './tests/util.js';
-
-jsdomIt('should add element "thing" in the SVG', ({ svg }) => {
-  // Code in this block runs in a pseudo-browser environment
-  addThing(svg); // The svg item is the D3 selection of the SVG node
-  const svgNode = ensureNodeFromSelector('svg'); // Retrieve the DOM node using the DOM API
-  expect(svgNode.querySelector('thing')).not.toBeNull(); // Test the structure of the SVG
-});
-```
-
-They can be used to test any method that interacts with the DOM, including for testing renderers. For renderers, additional integration testing is necessary to test the layout though.
-
 #### Integration / End-to-End (E2E) Tests
 
 These test the rendering and visual appearance of the diagrams.

docs/community/intro.md

@@ -33,8 +33,7 @@ mindmap
 
 ## Join the Development
 
-> **💡 Tip**
-> **Check out our** [**detailed contribution guide**](./contributing.md).
+> **💡 Tip** > **Check out our** [**detailed contribution guide**](./contributing.md).
 
 Where to start:
 
@@ -48,8 +47,7 @@ Where to start:
 
 ## A Question Or a Suggestion?
 
-> **💡 Tip**
-> **Have a look at** [**how to open an issue**](./questions-and-suggestions.md).
+> **💡 Tip** > **Have a look at** [**how to open an issue**](./questions-and-suggestions.md).
 
 If you have faced a vulnerability [report it to us](./security.md).
 

docs/community/new-diagram.md

@@ -111,13 +111,3 @@ const themes = {
 ```
 
 The actual options and values for the colors are defined in **src/theme/theme-\[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.
-
-## Examples
-
-The `@mermaid-js/examples` package contains a collection of examples that are used by tools like mermaid.live to help users get started with the new diagram.
-
-You can duplicate an existing diagram example file, eg: `packages/examples/src/examples/flowchart.ts`, and modify it with details specific to your diagram.
-
-Then you can import the example in the `packages/examples/src/index.ts` file and add it to the `examples` array.
-
-Each diagram should have at least one example, and that should be marked as default. It is good to add more examples to showcase different features of the diagram.

docs/community/questions-and-suggestions.md

@@ -22,4 +22,4 @@ This helps the team know the relative interest in something and helps them set p
 
 You have not found anything that already addresses your request, or maybe you have come up with the new idea? Feel free to open a new issue or discussion.
 
-Log in to [GitHub.com](https://www.github.com), and use [GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues). Press [issue, select the appropriate template](https://github.com/mermaid-js/mermaid/issues/new/choose) and describe your problem.
+Log in to [GitHub.com](https://www.github.com), and use [GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues). Press \[<https://github.com/mermaid-js/mermaid/issues/new/choose>] issue, select the appropriate template and describe your problem.

docs/config/directives.md

@@ -22,6 +22,7 @@ While directives allow you to change most of the default configuration settings,
 Mermaid basically supports two types of configuration options to be overridden by directives.
 
 1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
+
    - theme
    - fontFamily
    - logLevel

docs/config/setup/defaultConfig/variables/configKeys.md

@@ -12,4 +12,4 @@
 
 > `const` **configKeys**: `Set`<`string`>
 
-Defined in: [packages/mermaid/src/defaultConfig.ts:290](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L290)
+Defined in: [packages/mermaid/src/defaultConfig.ts:274](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L274)

docs/config/setup/mermaid/README.md

@@ -10,6 +10,10 @@
 
 # mermaid
 
+## Classes
+
+- [UnknownDiagramError](classes/UnknownDiagramError.md)
+
 ## Interfaces
 
 - [DetailedError](interfaces/DetailedError.md)
@@ -23,7 +27,6 @@
 - [RenderOptions](interfaces/RenderOptions.md)
 - [RenderResult](interfaces/RenderResult.md)
 - [RunOptions](interfaces/RunOptions.md)
-- [UnknownDiagramError](interfaces/UnknownDiagramError.md)
 
 ## Type Aliases
 

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

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

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

@@ -10,7 +10,7 @@
 
 # Interface: ExternalDiagramDefinition
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L94)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L99)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:94](https://github.com/me
 
 > **detector**: `DiagramDetector`
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L96)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L101)
 
 ---
 
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/me
 
 > **id**: `string`
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L95)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L100)
 
 ---
 
@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:95](https://github.com/me
 
 > **loader**: `DiagramLoader`
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L102)

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

@@ -10,7 +10,7 @@
 
 # Interface: LayoutData
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L170)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L145)
 
 ## Indexable
 
@@ -22,7 +22,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:170](https://github.co
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L173)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L148)
 
 ---
 
@@ -30,7 +30,7 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:173](https://github.co
 
 > **edges**: `Edge`\[]
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L172)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:147](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L147)
 
 ---
 
@@ -38,4 +38,4 @@ Defined in: [packages/mermaid/src/rendering-util/types.ts:172](https://github.co
 
 > **nodes**: `Node`\[]
 
-Defined in: [packages/mermaid/src/rendering-util/types.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L171)
+Defined in: [packages/mermaid/src/rendering-util/types.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L146)

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

@@ -10,7 +10,7 @@
 
 # Interface: Mermaid
 
-Defined in: [packages/mermaid/src/mermaid.ts:429](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L429)
+Defined in: [packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:429](https://github.com/mermaid-js/
 
 > **contentLoaded**: () => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:447](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L447)
+Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
 
 \##contentLoaded Callback function that is called when page is loaded. This functions fetches
 configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
@@ -32,9 +32,9 @@ page.
 
 ### detectType()
 
-> **detectType**: (`text`, `config?`) => `string`
+> **detectType**: (`text`, `config`?) => `string`
 
-Defined in: [packages/mermaid/src/mermaid.ts:449](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L449)
+Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
 
 Detects the type of the graph text.
 
@@ -86,28 +86,11 @@ A graph definition key
 
 ---
 
-### getRegisteredDiagramsMetadata()
-
-> **getRegisteredDiagramsMetadata**: () => `Pick`<[`ExternalDiagramDefinition`](ExternalDiagramDefinition.md), `"id"`>\[]
-
-Defined in: [packages/mermaid/src/mermaid.ts:451](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L451)
-
-Gets the metadata for all registered diagrams.
-Currently only the id is returned.
-
-#### Returns
-
-`Pick`<[`ExternalDiagramDefinition`](ExternalDiagramDefinition.md), `"id"`>\[]
-
-An array of objects with the id of the diagram.
-
----
-
 ### ~~init()~~
 
-> **init**: (`config?`, `nodes?`, `callback?`) => `Promise`<`void`>
+> **init**: (`config`?, `nodes`?, `callback`?) => `Promise`<`void`>
 
-Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
+Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
 
 ## init
 
@@ -117,7 +100,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/
 
 [`MermaidConfig`](MermaidConfig.md)
 
-**Deprecated**, please set configuration in [initialize](#initialize).
+**Deprecated**, please set configuration in [initialize](Mermaid.md#initialize).
 
 ##### nodes?
 
@@ -141,13 +124,13 @@ Called once for each rendered diagram's id.
 
 #### Deprecated
 
-Use [initialize](#initialize) and [run](#run) instead.
+Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
 
 Renders the mermaid diagrams
 
 #### Deprecated
 
-Use [initialize](#initialize) and [run](#run) instead.
+Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
 
 ---
 
@@ -155,7 +138,7 @@ Use [initialize](#initialize) and [run](#run) instead.
 
 > **initialize**: (`config`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:446](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L446)
+Defined in: [packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
 
 Used to set configurations for mermaid.
 This function should be called before the run function.
@@ -176,89 +159,81 @@ Configuration object for mermaid.
 
 ### ~~mermaidAPI~~
 
-> **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: {(`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>; (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>; }; `render`: (`id`, `text`, `svgContainingElement?`) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }>
+> **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>; `render`: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }>
 
-Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
+Defined in: [packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
 
 **`Internal`**
 
 #### Deprecated
 
-Use [parse](#parse) and [render](#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
+Use [parse](Mermaid.md#parse) and [render](Mermaid.md#render) instead. Please [open a discussion](https://github.com/mermaid-js/mermaid/discussions) if your use case does not fit the new API.
 
 ---
 
 ### parse()
 
-> **parse**: {(`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>; (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>; }
+> **parse**: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>
 
-Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
-
-#### Call Signature
-
-> (`text`, `parseOptions`): `Promise`<`false` | [`ParseResult`](ParseResult.md)>
+Defined in: [packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
 
 Parse the text and validate the syntax.
 
-##### Parameters
+#### Parameters
 
-###### text
+##### text
 
 `string`
 
 The mermaid diagram definition.
 
-###### parseOptions
+##### parseOptions
 
 [`ParseOptions`](ParseOptions.md) & `object`
 
 Options for parsing.
 
-##### Returns
+#### Returns
 
 `Promise`<`false` | [`ParseResult`](ParseResult.md)>
 
 An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
 
-##### See
+#### See
 
 [ParseOptions](ParseOptions.md)
 
-##### Throws
+#### Throws
 
 Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
 
-#### Call Signature
-
-> (`text`, `parseOptions?`): `Promise`<[`ParseResult`](ParseResult.md)>
-
 Parse the text and validate the syntax.
 
-##### Parameters
+#### Parameters
 
-###### text
+##### text
 
 `string`
 
 The mermaid diagram definition.
 
-###### parseOptions?
+##### parseOptions?
 
 [`ParseOptions`](ParseOptions.md)
 
 Options for parsing.
 
-##### Returns
+#### Returns
 
 `Promise`<[`ParseResult`](ParseResult.md)>
 
 An object with the `diagramType` set to type of the diagram if valid. Otherwise `false` if parseOptions.suppressErrors is `true`.
 
-##### See
+#### See
 
 [ParseOptions](ParseOptions.md)
 
-##### Throws
+#### Throws
 
 Error if the diagram is invalid and parseOptions.suppressErrors is false or not set.
 
@@ -268,7 +243,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not
 
 > `optional` **parseError**: [`ParseErrorFunction`](../type-aliases/ParseErrorFunction.md)
 
-Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
+Defined in: [packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420)
 
 ---
 
@@ -276,7 +251,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/
 
 > **registerExternalDiagrams**: (`diagrams`, `opts`) => `Promise`<`void`>
 
-Defined in: [packages/mermaid/src/mermaid.ts:445](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L445)
+Defined in: [packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
 
 Used to register external diagram types.
 
@@ -306,7 +281,7 @@ If opts.lazyLoad is false, the diagrams will be loaded immediately.
 
 > **registerIconPacks**: (`iconLoaders`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:450](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L450)
+Defined in: [packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439)
 
 #### Parameters
 
@@ -324,7 +299,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:450](https://github.com/mermaid-js/
 
 > **registerLayoutLoaders**: (`loaders`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:444](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L444)
+Defined in: [packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
 
 #### Parameters
 
@@ -340,9 +315,9 @@ Defined in: [packages/mermaid/src/mermaid.ts:444](https://github.com/mermaid-js/
 
 ### render()
 
-> **render**: (`id`, `text`, `svgContainingElement?`) => `Promise`<[`RenderResult`](RenderResult.md)>
+> **render**: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>
 
-Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
+Defined in: [packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
 
 #### Parameters
 
@@ -374,7 +349,7 @@ Deprecated for external use.
 
 > **run**: (`options`) => `Promise`<`void`>
 
-Defined in: [packages/mermaid/src/mermaid.ts:443](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L443)
+Defined in: [packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
 
 ## run
 
@@ -418,7 +393,7 @@ Optional runtime configs
 
 > **setParseErrorHandler**: (`parseErrorHandler`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:448](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L448)
+Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
 
 ## setParseErrorHandler Alternative to directly setting parseError using:
 
@@ -449,4 +424,4 @@ New parseError() callback.
 
 > **startOnLoad**: `boolean`
 
-Defined in: [packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)
+Defined in: [packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)

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

@@ -10,7 +10,7 @@
 
 # Interface: ParseOptions
 
-Defined in: [packages/mermaid/src/types.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L76)
+Defined in: [packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:76](https://github.com/mermaid-js/mer
 
 > `optional` **suppressErrors**: `boolean`
 
-Defined in: [packages/mermaid/src/types.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L81)
+Defined in: [packages/mermaid/src/types.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L64)
 
 If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
 The `parseError` function will not be called.

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

@@ -10,7 +10,7 @@
 
 # Interface: ParseResult
 
-Defined in: [packages/mermaid/src/types.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L84)
+Defined in: [packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L67)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:84](https://github.com/mermaid-js/mer
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/types.ts:92](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L92)
+Defined in: [packages/mermaid/src/types.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L75)
 
 The config passed as YAML frontmatter or directives
 
@@ -28,6 +28,6 @@ The config passed as YAML frontmatter or directives
 
 > **diagramType**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
+Defined in: [packages/mermaid/src/types.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L71)
 
 The diagram type, e.g. 'flowchart', 'sequence', etc.

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

@@ -10,7 +10,7 @@
 
 # Interface: RenderResult
 
-Defined in: [packages/mermaid/src/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L102)
+Defined in: [packages/mermaid/src/types.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L85)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:102](https://github.com/mermaid-js/me
 
 > `optional` **bindFunctions**: (`element`) => `void`
 
-Defined in: [packages/mermaid/src/types.ts:120](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L120)
+Defined in: [packages/mermaid/src/types.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L103)
 
 Bind function to be called after the svg has been inserted into the DOM.
 This is necessary for adding event listeners to the elements in the svg.
@@ -45,7 +45,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 > **diagramType**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:110](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L110)
+Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
 
 The diagram type, e.g. 'flowchart', 'sequence', etc.
 
@@ -55,6 +55,6 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
 
 > **svg**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:106](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L106)
+Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)
 
 The svg code for the rendered graph.

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

@@ -1,65 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md](../../../../../packages/mermaid/src/docs/config/setup/mermaid/interfaces/UnknownDiagramError.md).
-
-[**mermaid**](../../README.md)
-
----
-
-# Interface: UnknownDiagramError
-
-Defined in: [packages/mermaid/src/errors.ts:1](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/errors.ts#L1)
-
-## Extends
-
-- `Error`
-
-## Properties
-
-### cause?
-
-> `optional` **cause**: `unknown`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es2022.error.d.ts:26
-
-#### Inherited from
-
-`Error.cause`
-
----
-
-### message
-
-> **message**: `string`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1077
-
-#### Inherited from
-
-`Error.message`
-
----
-
-### name
-
-> **name**: `string`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1076
-
-#### Inherited from
-
-`Error.name`
-
----
-
-### stack?
-
-> `optional` **stack**: `string`
-
-Defined in: node_modules/.pnpm/typescript\@5.7.3/node_modules/typescript/lib/lib.es5.d.ts:1078
-
-#### Inherited from
-
-`Error.stack`

docs/config/setup/mermaid/type-aliases/InternalHelpers.md

@@ -10,6 +10,6 @@
 
 # Type Alias: InternalHelpers
 
-> **InternalHelpers** = _typeof_ `internalHelpers`
+> **InternalHelpers**: _typeof_ `internalHelpers`
 
 Defined in: [packages/mermaid/src/internals.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/internals.ts#L33)

docs/config/setup/mermaid/type-aliases/ParseErrorFunction.md

@@ -10,7 +10,7 @@
 
 # Type Alias: ParseErrorFunction()
 
-> **ParseErrorFunction** = (`err`, `hash?`) => `void`
+> **ParseErrorFunction**: (`err`, `hash`?) => `void`
 
 Defined in: [packages/mermaid/src/Diagram.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/Diagram.ts#L10)
 

docs/config/setup/mermaid/type-aliases/SVG.md

@@ -10,6 +10,6 @@
 
 # Type Alias: SVG
 
-> **SVG** = `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
+> **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L126)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)

docs/config/setup/mermaid/type-aliases/SVGGroup.md

@@ -10,6 +10,6 @@
 
 # Type Alias: SVGGroup
 
-> **SVGGroup** = `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
+> **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L132)

docs/config/setup/mermaid/variables/default.md

@@ -12,4 +12,4 @@
 
 > `const` **default**: [`Mermaid`](../interfaces/Mermaid.md)
 
-Defined in: [packages/mermaid/src/mermaid.ts:454](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L454)
+Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)

docs/config/theming.md

@@ -141,7 +141,7 @@ The theming engine will only recognize hex colors and not color names. So, the v
 | -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
 | darkMode             | false                              | Affects how derived colors are calculated. Set value to `true` for dark mode.                                                    |
 | background           | #f4f4f4                            | Used to calculate color for items that should either be background colored or contrasting to the background                      |
-| fontFamily           | trebuchet ms, verdana, arial       | Font family for diagram text                                                                                                     |
+| fontFamily           | trebuchet ms, verdana, arial       |                                                                                                                                  |
 | fontSize             | 16px                               | Font size in pixels                                                                                                              |
 | primaryColor         | #fff4dd                            | Color to be used as background in nodes, other colors will be derived from this                                                  |
 | primaryTextColor     | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor`                                                                     |