Merge branch 'develop' into 5824-diff-between-markdown-and-strings

Co-authored-by: Sidharth Vinod <github@sidharth.dev>

.build/jsonSchema.ts

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

.changeset/angry-bags-brake.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: architecture diagrams no longer grow to extreme heights due to conflicting alignments

.changeset/gold-ducks-sort.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Proper separation between strings and markdown strings

.cspell/code-terms.txt

@@ -47,13 +47,13 @@ edgesep
 EMPTYSTR
 enddate
 ERDIAGRAM
-eslint
 flatmap
 forwardable
 frontmatter
 funs
 gantt
 GENERICTYPE
+getBoundarys
 grammr
 graphtype
 halign

.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,8 +26,6 @@ dompurify
 elkjs
 fcose
 fontawesome
-Fonticons
-Forgejo
 Foswiki
 Gitea
 graphlib

.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,27 +31,6 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
       // mermaid.js
       { ...iifeOptions },
       // mermaid.min.js
-      { ...iifeOptions, minify: true, metafile: shouldVisualize },
-      // mermaid.tiny.min.js
-      {
-        ...iifeOptions,
-        minify: true,
-        includeLargeFeatures: false,
-        metafile: shouldVisualize,
-        sourcemap: false,
-      }
-    );
-  }
-  if (entryName === 'mermaid-zenuml') {
-    const iifeOptions: MermaidBuildOptions = {
-      ...commonOptions,
-      format: 'iife',
-      globalName: 'mermaid-zenuml',
-    };
-    buildConfigs.push(
-      // mermaid-zenuml.js
-      { ...iifeOptions },
-      // mermaid-zenuml.min.js
       { ...iifeOptions, minify: true, metafile: shouldVisualize }
     );
   }
@@ -78,21 +57,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 +65,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,23 @@ 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}`,
     },
-    globalName,
+    metafile,
+    minify,
     logLevel: 'info',
     chunkNames: `chunks/${outFileName}/[name]-[hash]`,
     define: {
-      // This needs to be stringified for esbuild
-      includeLargeFeatures: `${includeLargeFeatures}`,
       'import.meta.vitest': 'undefined',
     },
   });
@@ -101,12 +89,11 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
   if (format === 'iife') {
     output.format = 'iife';
     output.splitting = false;
-    const originalGlobalName = output.globalName ?? 'mermaid';
-    output.globalName = `__esbuild_esm_mermaid_nm[${JSON.stringify(originalGlobalName)}]`;
+    output.globalName = '__esbuild_esm_mermaid';
     // Workaround for removing the .default access in esbuild IIFE.
     // https://github.com/mermaid-js/mermaid/pull/4109#discussion_r1292317396
     output.footer = {
-      js: `globalThis[${JSON.stringify(originalGlobalName)}] = globalThis.${output.globalName}.default;`,
+      js: 'globalThis.mermaid = globalThis.__esbuild_esm_mermaid.default;',
     };
     output.outExtension = { '.js': '.js' };
   } else {

.github/ISSUE_TEMPLATE/config.yml

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

.github/ISSUE_TEMPLATE/theme_proposal.yml

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

.github/lychee.toml

@@ -47,13 +47,7 @@ exclude = [
 "https://(www.)?drupal.org",
 
 # Swimm returns 404, eventhough the link is valid
-"https://docs.swimm.io",
-
-# Timeout
-"https://huehive.co",
-"https://foswiki.org",
-"https://www.gnu.org",
-"https://mermaid-preview.com"
+"https://docs.swimm.io"
 ]
 
 # Exclude all private IPs from checking.

.github/stale.yml

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

.github/workflows/autofix.yml

@@ -13,13 +13,13 @@ jobs:
   autofix:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -42,4 +42,4 @@ jobs:
         working-directory: ./packages/mermaid
         run: pnpm run docs:build
 
-      - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef # main
+      - uses: autofix-ci/action@ff86a557419858bb967097bfc916833f5647fa8c # main

.github/workflows/build-docs.yml

@@ -18,12 +18,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         with:
           cache: pnpm
           node-version-file: '.node-version'

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

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

.github/workflows/codeql.yml

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

.github/workflows/dependency-review.yml

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

.github/workflows/e2e-applitools.yml

@@ -32,31 +32,29 @@ jobs:
         run: |
           echo "::error,title=Not using Applitools::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
 
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         with:
           node-version-file: '.node-version'
 
       - if: ${{ env.USE_APPLI }}
         name: Notify applitools of new batch
         # Copied from docs https://applitools.com/docs/topics/integrations/github-integration-ci-setup.html
+        run: curl -L -d '' -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"
         env:
           # e.g. mermaid-js/mermaid/my-branch
           APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
           APPLITOOLS_PARENT_BRANCH: ${{ github.event.inputs.parent_branch }}
           APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
           APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
-        uses: wei/curl@012398a392d02480afa2720780031f8621d5f94c
-        with:
-          args: -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"
 
       - name: Cypress run
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@d79d2d530a66e641eb4a5f227e13bc985c60b964 # v4.2.2
         id: cypress
         with:
           start: pnpm run dev

.github/workflows/e2e-timings.yml

@@ -11,7 +11,6 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 permissions:
   contents: write
-  pull-requests: write
 
 jobs:
   timings:
@@ -20,19 +19,18 @@ jobs:
       image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
       options: --user 1001
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         with:
           node-version-file: '.node-version'
       - name: Install dependencies
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
         with:
           runTests: false
-
       - name: Cypress run
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
         id: cypress
         with:
           install: false
@@ -46,25 +44,10 @@ jobs:
           SPLIT: 1
           SPLIT_INDEX: 0
           SPLIT_FILE: 'cypress/timings.json'
-
-      - name: Compare timings
-        id: compare
-        run: |
-          OUTPUT=$(pnpm tsx scripts/compare-timings.ts)
-          echo "$OUTPUT" >> $GITHUB_STEP_SUMMARY
-
-          echo "output<<EOF" >> $GITHUB_OUTPUT
-          echo "$OUTPUT" >> $GITHUB_OUTPUT
-          echo "EOF" >> $GITHUB_OUTPUT
-
-      - name: Commit and create pull request
-        uses: peter-evans/create-pull-request@889dce9eaba7900ce30494f5e1ac7220b27e5c81
+      - name: Commit changes
+        uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9.1.4
         with:
-          add-paths: |
-            cypress/timings.json
-          commit-message: 'chore: update E2E timings'
-          branch: update-timings
-          title: Update E2E Timings
-          body: ${{ steps.compare.outputs.output }}
-          delete-branch: true
-          sign-commits: true
+          add: 'cypress/timings.json'
+          author_name: 'github-actions[bot]'
+          author_email: '41898282+github-actions[bot]@users.noreply.github.com'
+          message: 'chore: update E2E timings'

.github/workflows/e2e.yml

@@ -28,8 +28,6 @@ env:
       ) || 
       github.event.before
     }}
-  RUN_VISUAL_TEST: >-
-    ${{ github.repository == 'mermaid-js/mermaid' && (github.event_name != 'pull_request' || !startsWith(github.head_ref, 'renovate/')) }}
 jobs:
   cache:
     runs-on: ubuntu-latest
@@ -37,29 +35,30 @@ jobs:
       image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
       options: --user 1001
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         with:
           node-version-file: '.node-version'
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
+        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
         with:
+          save-always: true
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
       # If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
       - name: Switch to base branch
         if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
         with:
           ref: ${{ env.targetHash }}
 
       - name: Install dependencies
         if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
         with:
           # just perform install
           runTests: false
@@ -82,26 +81,26 @@ jobs:
       matrix:
         containers: [1, 2, 3, 4, 5]
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         with:
           node-version-file: '.node-version'
 
       # These cached snapshots are downloaded, providing the reference snapshots.
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache/restore@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
+        uses: actions/cache/restore@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
         with:
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
       - name: Install dependencies
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
         with:
           runTests: false
 
@@ -117,7 +116,7 @@ jobs:
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
+        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
         id: cypress
         with:
           install: false
@@ -126,20 +125,21 @@ jobs:
           browser: chrome
           # Disable recording if we don't have an API key
           # e.g. if this action was run from a fork
-          record: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.CYPRESS_RECORD_KEY != '' }}
+          record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
         env:
-          ARGOS_PARALLEL: ${{ env.RUN_VISUAL_TEST == 'true' }}
-          ARGOS_PARALLEL_TOTAL: ${{ env.RUN_VISUAL_TEST == 'true' && strategy.job-total || 1 }}
-          ARGOS_PARALLEL_INDEX: ${{ env.RUN_VISUAL_TEST == 'true' && matrix.containers || 1 }}
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          VITEST_COVERAGE: true
           CYPRESS_COMMIT: ${{ github.sha }}
-          CYPRESS_RECORD_KEY: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.CYPRESS_RECORD_KEY || ''}}
+          ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
+          ARGOS_PARALLEL: true
+          ARGOS_PARALLEL_TOTAL: ${{ strategy.job-total }}
+          ARGOS_PARALLEL_INDEX: ${{ matrix.containers }}
           SPLIT: ${{ strategy.job-total }}
           SPLIT_INDEX: ${{ strategy.job-index }}
           SPLIT_FILE: 'cypress/timings.json'
-          VITEST_COVERAGE: true
 
       - name: Upload Coverage to Codecov
-        uses: codecov/codecov-action@13ce06bfc6bbe3ecf90edbbf1bc32fe5978ca1d3 # v5.3.1
+        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0
         # Run step only pushes to develop and pull_requests
         if: ${{ steps.cypress.conclusion == 'success' && (github.event_name == 'pull_request' || github.ref == 'refs/heads/develop')}}
         with:

.github/workflows/link-checker.yml

@@ -29,17 +29,17 @@ jobs:
       # lychee only uses the GITHUB_TOKEN to avoid rate-limiting
       contents: read
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
       - name: Restore lychee cache
-        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
+        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
         with:
           path: .lycheecache
           key: cache-lychee-${{ github.sha }}
           restore-keys: cache-lychee-
 
       - name: Link Checker
-        uses: lycheeverse/lychee-action@f613c4a64e50d792e0b31ec34bbcbba12263c6a6 # v2.3.0
+        uses: lycheeverse/lychee-action@c053181aa0c3d17606addfe97a9075a32723548a # v1.9.3
         with:
           args: >-
             --config .github/lychee.toml

.github/workflows/lint.yml

@@ -15,7 +15,7 @@ jobs:
   docker-lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
       - uses: hadolint/hadolint-action@54c9adbab1582c2ef04b2016b760714a4bfde3cf # v3.1.0
         with:
@@ -23,13 +23,13 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         with:
           cache: pnpm
           node-version-file: '.node-version'

.github/workflows/pr-labeler.yml

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

.github/workflows/publish-docs.yml

@@ -23,12 +23,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -37,7 +37,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Setup Pages
-        uses: actions/configure-pages@983d7736d9b0ae728b81ab479565c72886d7745b # v5.0.0
+        uses: actions/configure-pages@1f0c5cde4bc74cd7e1254d0cb4de8d49e9068c7d # v4.0.0
 
       - name: Run Build
         run: pnpm --filter mermaid run docs:build:vitepress

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

@@ -9,14 +9,14 @@ jobs:
   publish-preview:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
         with:
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         with:
           cache: pnpm
           node-version-file: '.node-version'

.github/workflows/release-preview.yml

@@ -26,12 +26,12 @@ jobs:
     timeout-minutes: 5
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
 
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         with:
           cache: pnpm
           node-version-file: '.node-version'

.github/workflows/release.yml

@@ -21,12 +21,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
 
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -36,7 +36,7 @@ jobs:
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets
-        uses: changesets/action@c8bada60c408975afd1a20b3db81d6eee6789308 # v1.4.9
+        uses: changesets/action@3de3850952bec538fde60aac71731376e57b9b57 # v1.4.8
         with:
           version: pnpm changeset:version
           publish: pnpm changeset:publish

.github/workflows/scorecard.yml

@@ -16,22 +16,22 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
         with:
           persist-credentials: false
       - name: Run analysis
-        uses: ossf/scorecard-action@f49aabe0b5af0936a0987cfb85d86b75731b0186 # v2.4.1
+        uses: ossf/scorecard-action@dc50aa9510b46c811795eb24b2f1ba02a914e534 # v2.3.3
         with:
           results_file: results.sarif
           results_format: sarif
           publish_results: true
       - name: Upload artifact
-        uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1
+        uses: actions/upload-artifact@97a0fba1372883ab732affbe8f94b823f91727db # v3.pre.node20
         with:
           name: SARIF file
           path: results.sarif
           retention-days: 5
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
+        uses: github/codeql-action/upload-sarif@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
         with:
           sarif_file: results.sarif

.github/workflows/test.yml

@@ -9,13 +9,13 @@ jobs:
   unit-test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -43,7 +43,7 @@ jobs:
           pnpm test:check:tsc
 
       - name: Upload Coverage to Codecov
-        uses: codecov/codecov-action@13ce06bfc6bbe3ecf90edbbf1bc32fe5978ca1d3 # v5.3.1
+        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0
         # Run step only pushes to develop and pull_requests
         if: ${{ github.event_name == 'pull_request' || github.ref == 'refs/heads/develop' }}
         with:

.github/workflows/update-browserlist.yml

@@ -8,8 +8,8 @@ jobs:
   update-browser-list:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
       - run: npx update-browserslist-db@latest
       - name: Commit changes
         uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9.1.4
@@ -19,7 +19,7 @@ jobs:
           message: 'chore: update browsers list'
           push: false
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7.0.6
+        uses: peter-evans/create-pull-request@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6.1.0
         with:
           branch: update-browserslist
           title: Update Browserslist

.node-version

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

.vite/build.ts

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

CHANGELOG.md

@@ -256,7 +256,7 @@ mermaid.run({
 - Problem showing graph with php on localhost [\#502](https://github.com/knsv/mermaid/issues/502)
 - logLevel's option doesnt work at 7.0.0 [\#501](https://github.com/knsv/mermaid/issues/501)
 - How do I get the log for a render or parse attempt? [\#500](https://github.com/knsv/mermaid/issues/500)
-- Mermaid neutral style to built in latest release [\#499](https://github.com/knsv/mermaid/issues/499)
+- Mermaid neutral style style to built in latest release [\#499](https://github.com/knsv/mermaid/issues/499)
 - Any plans for adding a typescript definition file? [\#495](https://github.com/knsv/mermaid/issues/495)
 - Gantt diagrams too narrow [\#493](https://github.com/knsv/mermaid/issues/493)
 - Flowchart edge labels placement [\#490](https://github.com/knsv/mermaid/issues/490)
@@ -833,7 +833,7 @@ mermaid.run({
 - Merge pull request \#1 from knsv/master [\#96](https://github.com/knsv/mermaid/pull/96) ([gkchic](https://github.com/gkchic))
 - Removed duplicated section in flowchart docs [\#94](https://github.com/knsv/mermaid/pull/94) ([kaime](https://github.com/kaime))
 - Grammar changes to sequence page [\#93](https://github.com/knsv/mermaid/pull/93) ([gkchic](https://github.com/gkchic))
-- GitHub buttons [\#89](https://github.com/knsv/mermaid/pull/89) ([gkchic](https://github.com/gkchic))
+- Github buttons [\#89](https://github.com/knsv/mermaid/pull/89) ([gkchic](https://github.com/gkchic))
 - Template change [\#88](https://github.com/knsv/mermaid/pull/88) ([gkchic](https://github.com/gkchic))
 
 ## [0.3.1](https://github.com/knsv/mermaid/tree/0.3.1) (2015-01-05)
@@ -1002,4 +1002,4 @@ mermaid.run({
 
 ## [0.1.0](https://github.com/knsv/mermaid/tree/0.1.0) (2014-11-16)
 
-\* _This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/GitHub-Changelog-Generator)_
+\* _This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)_

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:22.12.0-alpine3.19@sha256:40dc4b415c17b85bea9be05314b4a753f45a4e1716bb31c01182e6c53d51a654
+FROM node:20.12.2-alpine3.19@sha256:7a91aa397f2e2dfbfcdad2e2d72599f374e0b0172be1d86eeb73f1d33f36a4b2
 
 USER 0:0
 

README.md

@@ -15,7 +15,7 @@ Generate diagrams from markdown-like text.
 <a href="https://mermaid.live/"><b>Live Editor!</b></a>
 </p>
 <p align="center">
- <a href="https://mermaid.js.org">📖 Documentation</a> | <a href="https://mermaid.js.org/intro/">🚀 Getting Started</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/sKeNQX4Wtj" title="Discord invite">🙌 Join Us</a>
+ <a href="https://mermaid.js.org">📖 Documentation</a> | <a href="https://mermaid.js.org/intro/">🚀 Getting Started</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/AgrbSrBer3" title="Discord invite">🙌 Join Us</a>
 </p>
 <p align="center">
 <a href="./README.zh-CN.md">简体中文</a>
@@ -33,7 +33,7 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
 [![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
 [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
 [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid)
-[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/sKeNQX4Wtj)
+[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/AgrbSrBer3)
 [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
 [![Covered by Argos Visual Testing](https://argos-ci.com/badge.svg)](https://argos-ci.com?utm_source=mermaid&utm_campaign=oss)
 [![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/mermaid-js/mermaid/badge)](https://securityscorecards.dev/viewer/?uri=github.com/mermaid-js/mermaid)
@@ -44,7 +44,7 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
 
 **Thanks to all involved, people committing pull requests, people answering questions! 🙏**
 
-<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt='Banner for "The Official Guide to Mermaid.js" book'></a>
+<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
 
 ## Table of content
 
@@ -95,10 +95,6 @@ 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).**
@@ -257,34 +253,6 @@ pie
 
 ### Git graph [experimental - <a href="https://mermaid.live/edit#pako:eNqNkMFugzAMhl8F-VyVAR1tOW_aA-zKxSSGRCMJCk6lCvHuNZPKZdM0n-zf3_8r8QIqaIIGMqnB8kfEybQ--y4VnLP8-9RF9Mpkmm40hmlnDKmvkPiH_kfS7nFo_VN0FAf6XwocQGgxa_nGsm1bYEOOWmik1dRjGrmF1q-Cpkkj07u2HCI0PY4zHQATh8-7V9BwTPSE3iwOEd1OjQE1iWkBvk_bzQY7s0Sq4Hs7bHqKo8iGeZqbPN_WR7mpSd1RHpvPVhuMbG7XOq_L-oJlRfW5wteq0qorrpe-PBW9Pr8UJcK6rg-BLYPQ">live editor</a>]
 
-```
-gitGraph
-  commit
-  commit
-  branch develop
-  checkout develop
-  commit
-  commit
-  checkout main
-  merge develop
-  commit
-  commit
-```
-
-```mermaid
-gitGraph
-  commit
-  commit
-  branch develop
-  checkout develop
-  commit
-  commit
-  checkout main
-  merge develop
-  commit
-  commit
-```
-
 ### Bar chart (using gantt chart) [<a href="https://mermaid.js.org/syntax/gantt.html">docs</a> - <a href="https://mermaid.live/edit#pako:eNptkU1vhCAQhv8KIenNugiI4rkf6bmXpvEyFVxJFDYyNt1u9r8X63Z7WQ9m5pknLzieaBeMpQ3dg0dsPUkPOhwteXZIXmJcbCT3xMAxkuh8Z8kIEclyMIB209fqKcwTICFvG4IvFy_oLrZ-g9F26ILfQgvNFN94VaRXQ1iWqpumZBcu1J8p1E1TXDx59eQNr5LyEqjJn6hv5QnGNlxevZJmdLLpy5xJSzut45biYCfb0iaVxvawjNjS1p-TCguG16PvaIPzYjO67e3BwX6GiTY9jPFKH43DMF_hGMDY1J4oHg-_f8hFTJFd8L3br3yZx4QHxENsdrt1nO8dDstH3oVpF50ZYMbhU6ud4qoGLqyqBJRCmO6j0HXPZdGbihUc6Pmc0QP49xD-b5X69ZQv2gjO81IwzWqhC1lKrjJ6pA3nVS7SMiVjrKirWlYp5fs3osgrWeo00lorLWvOzz8JVbXm">live editor</a>]
 
 ```
@@ -467,7 +435,7 @@ A quick note from Knut Sveidqvist:
 >
 > _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
-> _Thank you to the ever-growing list of [contributors](https://github.com/mermaid-js/mermaid/graphs/contributors) that brought the project this far!_
+> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
 
 ---
 

README.zh-CN.md

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

cypress.config.ts

@@ -1,8 +1,8 @@
 import eyesPlugin from '@applitools/eyes-cypress';
 import { registerArgosTask } from '@argos-ci/cypress/task';
-import coverage from '@cypress/code-coverage/task.js';
+import coverage from '@cypress/code-coverage/task';
 import { defineConfig } from 'cypress';
-import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin.js';
+import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
 import cypressSplit from 'cypress-split';
 
 export default eyesPlugin(
@@ -23,10 +23,12 @@ export default eyesPlugin(
         });
         // copy any needed variables from process.env to config.env
         config.env.useAppli = process.env.USE_APPLI ? true : false;
-        config.env.useArgos = process.env.RUN_VISUAL_TEST === 'true';
+        config.env.useArgos = !!process.env.CI;
 
         if (config.env.useArgos) {
-          registerArgosTask(on, config);
+          registerArgosTask(on, config, {
+            token: 'fc3a35cf5200db928d65b2047861582d9444032b',
+          });
         } else {
           addMatchImageSnapshotPlugin(on, config);
         }

cypress/helpers/util.ts

@@ -132,10 +132,3 @@ export const verifyScreenshot = (name: string): void => {
     cy.matchImageSnapshot(name);
   }
 };
-
-export const verifyNumber = (value: number, expected: number, deltaPercent = 10): void => {
-  expect(value).to.be.within(
-    expected * (1 - deltaPercent / 100),
-    expected * (1 + deltaPercent / 100)
-  );
-};

cypress/integration/other/configuration.spec.js

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

cypress/integration/other/interaction.spec.js

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

cypress/integration/rendering/architecture.spec.ts

@@ -19,25 +19,6 @@ describe.skip('architecture diagram', () => {
             `
     );
   });
-  it('should render a simple architecture diagram with titleAndAccessibilities', () => {
-    imgSnapshotTest(
-      `architecture-beta
-          title Simple Architecture Diagram
-          accTitle: Accessibility Title
-          accDescr: Accessibility Description
-          group api(cloud)[API]
-
-          service db(database)[Database] in api
-          service disk1(disk)[Storage] in api
-          service disk2(disk)[Storage] in api
-          service server(server)[Server] in api
-
-          db:L -- R:server
-          disk1:T -- B:server
-          disk2:T -- B:db
-      `
-    );
-  });
   it('should render an architecture diagram with groups within groups', () => {
     imgSnapshotTest(
       `architecture-beta
@@ -191,7 +172,7 @@ describe.skip('architecture diagram', () => {
     );
   });
 
-  it('should render an architecture diagram with a reasonable height', () => {
+  it('should render an architecture diagram with a resonable height', () => {
     imgSnapshotTest(
       `architecture-beta
               group federated(cloud)[Federated Environment]

cypress/integration/rendering/block.spec.js

@@ -14,7 +14,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL2: should handle columns statement in sub-blocks', () => {
+  it('BL2: should handle colums statement in sub-blocks', () => {
     imgSnapshotTest(
       `block-beta
   id1["Hello"]
@@ -30,7 +30,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL3: should align block widths and handle columns statement in sub-blocks', () => {
+  it('BL3: should align block widths and handle colums statement in sub-blocks', () => {
     imgSnapshotTest(
       `block-beta
   block
@@ -46,7 +46,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL4: should align block widths and handle columns statements in deeper sub-blocks then 1 level', () => {
+  it('BL4: should align block widths and handle colums statements in deeper sub-blocks then 1 level', () => {
     imgSnapshotTest(
       `block-beta
   columns 1
@@ -66,7 +66,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL5: should align block widths and handle columns statements in deeper sub-blocks then 1 level (alt)', () => {
+  it('BL5: should align block widths and handle colums statements in deeper sub-blocks then 1 level (alt)', () => {
     imgSnapshotTest(
       `block-beta
   columns 1
@@ -236,7 +236,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL17: width alignment - blocks should be equal in width', () => {
+  it('BL17: width alignment - blocks shold be equal in width', () => {
     imgSnapshotTest(
       `block-beta
     A("This is the text")

cypress/integration/rendering/classDiagram.spec.js

@@ -429,7 +429,7 @@ describe('Class diagram', () => {
     classDiagram
       class \`This\nTitle\nHas\nMany\nNewlines\` {
         +String Also
-        -String Many
+        -Stirng Many
         #int Members
         +And()
         -Many()
@@ -443,7 +443,7 @@ describe('Class diagram', () => {
     classDiagram
       class \`This\nTitle\nHas\nMany\nNewlines\` {
         +String Also
-        -String Many
+        -Stirng Many
         #int Members
         +And()
         -Many()
@@ -459,7 +459,7 @@ describe('Class diagram', () => {
       namespace testingNamespace {
       class \`This\nTitle\nHas\nMany\nNewlines\` {
         +String Also
-        -String Many
+        -Stirng Many
         #int Members
         +And()
         -Many()

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

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

cypress/integration/rendering/erDiagram.spec.js

@@ -109,8 +109,8 @@ describe('Entity Relationship Diagram', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      // use within because the absolute value can be slightly different depending on the environment ±6%
-      expect(maxWidthValue).to.be.within(140 * 0.96, 140 * 1.06);
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      expect(maxWidthValue).to.be.within(140 * 0.95, 140 * 1.05);
     });
   });
 
@@ -125,8 +125,8 @@ describe('Entity Relationship Diagram', () => {
     );
     cy.get('svg').should((svg) => {
       const width = parseFloat(svg.attr('width'));
-      // use within because the absolute value can be slightly different depending on the environment ±6%
-      expect(width).to.be.within(140 * 0.96, 140 * 1.06);
+      // use within because the absolute value can be slightly different depending on the environment ±5%
+      expect(width).to.be.within(140 * 0.95, 140 * 1.05);
       // expect(svg).to.have.attr('height', '465');
       expect(svg).to.not.have.attr('style');
     });

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

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph, verifyNumber } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('Flowchart ELK', () => {
   it('1-elk: should render a simple flowchart', () => {
@@ -109,7 +109,7 @@ describe('Flowchart ELK', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      verifyNumber(maxWidthValue, 380);
+      expect(maxWidthValue).to.be.within(230 * 0.95, 230 * 1.05);
     });
   });
   it('8-elk: should render a flowchart when useMaxWidth is false', () => {
@@ -128,7 +128,7 @@ describe('Flowchart ELK', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      verifyNumber(width, 380);
+      expect(width).to.be.within(230 * 0.95, 230 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -208,13 +208,13 @@ describe('Flowchart ELK', () => {
       `flowchart-elk TB
   internet
   nat
-  router
+  routeur
   lb1
   lb2
   compute1
   compute2
   subgraph project
-  router
+  routeur
   nat
     subgraph subnet1
       compute1
@@ -225,8 +225,8 @@ describe('Flowchart ELK', () => {
       lb2
     end
   end
-  internet --> router
-  router --> subnet1 & subnet2
+  internet --> routeur
+  routeur --> subnet1 & subnet2
   subnet1 & subnet2 --> nat --> internet
       `,
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
@@ -443,7 +443,7 @@ flowchart-elk TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('63-elk: title on subgraphs should be themeable', () => {
+  it('63-elk: title on subgraphs should be themable', () => {
     imgSnapshotTest(
       `
       %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
@@ -692,7 +692,7 @@ A --> B
       {}
     );
     cy.get('svg').should((svg) => {
-      const edges = svg[0].querySelectorAll('.edges > path');
+      const edges = svg.querySelectorAll('.edges > path');
       edges.forEach((edge) => {
         expect(edge).to.have.class('flowchart-link');
       });
@@ -739,7 +739,7 @@ NL\`") --"\`1o **bold**\`"--> c
           { flowchart: { titleTopMargin: 0 } }
         );
       });
-      it.skip('Wrapping long text with a new line', () => {
+      it('Wrapping long text with a new line', () => {
         imgSnapshotTest(
           `%%{init: {"flowchart": {"htmlLabels": true}} }%%
 flowchart-elk LR
@@ -841,7 +841,7 @@ end
           { flowchart: { titleTopMargin: 0 } }
         );
       });
-      it('Sub graphs', () => {
+      it('Sub graphs and markdown strings', () => {
         imgSnapshotTest(
           `---
 config:

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');
     });
   });
@@ -198,13 +198,13 @@ describe('Flowchart v2', () => {
       `flowchart TB
   internet
   nat
-  router
+  routeur
   lb1
   lb2
   compute1
   compute2
   subgraph project
-  router
+  routeur
   nat
     subgraph subnet1
       compute1
@@ -215,8 +215,8 @@ describe('Flowchart v2', () => {
       lb2
     end
   end
-  internet --> router
-  router --> subnet1 & subnet2
+  internet --> routeur
+  routeur --> subnet1 & subnet2
   subnet1 & subnet2 --> nat --> internet
       `,
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
@@ -433,7 +433,7 @@ flowchart TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('63: title on subgraphs should be themeable', () => {
+  it('63: title on subgraphs should be themable', () => {
     imgSnapshotTest(
       `
       %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
@@ -699,7 +699,7 @@ A --> B
       { flowchart: { titleTopMargin: 10 } }
     );
   });
-  it('3192: It should be possible to render flowcharts with invisible edges', () => {
+  it('3192: It should be possieble to render flowcharts with invisible edges', () => {
     imgSnapshotTest(
       `---
 title: Simple flowchart with invisible edges
@@ -1076,41 +1076,4 @@ end
       );
     });
   });
-  describe('New @ syntax for node metadata edge cases', () => {
-    it('should be possible to use @  syntax to add labels on multi nodes', () => {
-      imgSnapshotTest(
-        `flowchart TB
-       n2["label for n2"] &   n4@{ label: "label for n4"}   & n5@{ label: "label for n5"}
-        `,
-        {}
-      );
-    });
-    it('should be possible to use @  syntax to add labels with trail spaces and &', () => {
-      imgSnapshotTest(
-        `flowchart TB
-       n2["label for n2"] &   n4@{ label: "label for n4"}   & n5@{ label: "label for n5"}   
-        `,
-        {}
-      );
-    });
-    it('should be possible to use @  syntax to add labels with trail spaces', () => {
-      imgSnapshotTest(
-        `flowchart TB
-       n2["label for n2"]
-       n4@{ label: "label for n4"}
-       n5@{ label: "label for n5"}  
-        `,
-        {}
-      );
-    });
-    it('should be possible to use @  syntax to add labels with trail spaces and edge/link', () => {
-      imgSnapshotTest(
-        `flowchart TD
-    A["A"] --> B["for B"] &    C@{ label: "for c"} & E@{label : "for E"}  
-    D@{label: "for D"}     
-        `,
-        {}
-      );
-    });
-  });
 });

cypress/integration/rendering/flowchart.spec.js

@@ -917,16 +917,19 @@ graph TD
       }
     );
   });
-  it('#6369: edge color should affect arrow head', () => {
+  it('68: should be able to render string and markdown labels (#5824)', () => {
     imgSnapshotTest(
       `
-    flowchart LR
-        A --> B
-        A --> C
-        C --> D
-
-        linkStyle 0 stroke:#D50000
-        linkStyle 2 stroke:#D50000
+flowchart TB
+    mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"\`<**1**1\`"--> fine["No bug"]
+    mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
+    subgraph subgraph1["\`How to fix **fix**\`"]
+        broken --> B["B"]
+    end
+    githost["Github, Gitlab, BitBucket, etc."]
+    githost2["\`Github, Gitlab, BitBucket, etc.\`"]
+    a["1."]
+    b["- x"]
     `,
       {
         flowchart: { htmlLabels: true },
@@ -934,43 +937,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

@@ -117,7 +117,7 @@ describe('Gantt diagram', () => {
       {}
     );
   });
-  it('should FAIL rendering a gantt chart for issue #1060 with invalid date', () => {
+  it('should FAIL redering a gantt chart for issue #1060 with invalid date', () => {
     imgSnapshotTest(
       `
       gantt
@@ -358,23 +358,6 @@ describe('Gantt diagram', () => {
     );
   });
 
-  it('should render a gantt diagram with a vert tag', () => {
-    imgSnapshotTest(
-      `
-      gantt
-        title A Gantt Diagram
-        dateFormat   ss
-        axisFormat   %Ss
-
-        section Section
-        A task           : a1, 00, 6s
-        Milestone     : vert, 01,
-        section Another
-        Task in sec      : 06, 3s
-        another task     : 3s
-      `
-    );
-  });
   it('should render a gantt diagram with tick is 2 milliseconds', () => {
     imgSnapshotTest(
       `
@@ -590,7 +573,7 @@ describe('Gantt diagram', () => {
       `
     );
   });
-  it('should render a gantt diagram excluding friday and saturday', () => {
+  it('should render a gantt diagram exculding friday and saturday', () => {
     imgSnapshotTest(
       `gantt
       title A Gantt Diagram
@@ -601,7 +584,7 @@ describe('Gantt diagram', () => {
       A task :a1, 2024-02-28, 10d`
     );
   });
-  it('should render a gantt diagram excluding saturday and sunday', () => {
+  it('should render a gantt diagram exculding saturday and sunday', () => {
     imgSnapshotTest(
       `gantt
       title A Gantt Diagram
@@ -688,7 +671,7 @@ describe('Gantt diagram', () => {
       title Gantt Digram
       dateFormat  YYYY-MM-DD
       section Section
-      ;A task with a semicolon           :a1, 2014-01-01, 30d
+      ;A task with a semiclon           :a1, 2014-01-01, 30d
       Another task     :after a1  , 20d
       section Another
       Task in sec      :2014-01-12  , 12d

cypress/integration/rendering/gitGraph.spec.js

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

cypress/integration/rendering/journey.spec.js

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

cypress/integration/rendering/kanban.spec.ts

@@ -62,7 +62,7 @@ describe('Kanban diagram', () => {
       {}
     );
   });
-  it('6: should handle assignments', () => {
+  it('6: should handle assigments', () => {
     imgSnapshotTest(
       `kanban
   id1[Todo]
@@ -118,7 +118,7 @@ kanban
     docs[Create Documentation]
     docs[Create Blog about the new diagram]
   id7[In progress]
-    id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
+    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
     id8[Design grammar]@{ assigned: 'knsv' }
   id9[Ready for deploy]
   id10[Ready for test]

cypress/integration/rendering/mindmap.spec.ts

@@ -146,7 +146,7 @@ root
       shouldHaveRoot
     );
   });
-  it('text should wrap with icon', () => {
+  it('text shouhld wrap with icon', () => {
     imgSnapshotTest(
       `mindmap
 root

cypress/integration/rendering/pie.spec.ts

@@ -64,7 +64,7 @@ describe('pie chart', () => {
     });
   });
 
-  it('should render a pie diagram when textPosition is set', () => {
+  it('should render a pie diagram when textPosition is setted', () => {
     imgSnapshotTest(
       `pie
         "Dogs": 50

cypress/integration/rendering/quadrantChart.spec.js

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

cypress/integration/rendering/radar.spec.js

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

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

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

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

@@ -138,8 +138,8 @@ describe('State diagram', () => {
     imgSnapshotTest(
       `
     stateDiagram-v2
-    State1: This a single line description
-    State2: This a multi line description
+    State1: This a a single line description
+    State2: This a a multi line description
     State2: here comes the multi part
     [*] --> State1
     State1 --> State2
@@ -345,7 +345,7 @@ stateDiagram
       }
     );
   });
-  it('v2 width of compound state should grow with title if title is wider', () => {
+  it('v2 width of compond state should grow with title if title is wider', () => {
     imgSnapshotTest(
       `
 stateDiagram-v2
@@ -402,8 +402,8 @@ stateDiagram-v2
       `
 stateDiagram-v2
     MyState
-    note left of MyState : I am a lefty
-    note right of MyState : I am a righty
+    note left of MyState : I am a leftie
+    note right of MyState : I am a rightie
     `,
       {
         logLevel: 0,
@@ -552,7 +552,7 @@ style AState fill:#636,border:1px solid red,color:white;
         { logLevel: 0, fontFamily: 'courier' }
       );
     });
-    it(' should let styles take precedence over classes', () => {
+    it(' should let styles take preceedence over classes', () => {
       imgSnapshotTest(
         `
 stateDiagram-v2
@@ -565,7 +565,7 @@ style AState fill:#636,border:1px solid red,color:white;
         { logLevel: 0, fontFamily: 'courier' }
       );
     });
-    it(' should allow styles to take effect in subgraphs', () => {
+    it(' should allow styles to take effect in stubgraphs', () => {
       imgSnapshotTest(
         `
   stateDiagram

cypress/integration/rendering/stateDiagram.spec.js

@@ -129,8 +129,8 @@ describe('State diagram', () => {
     imgSnapshotTest(
       `
     stateDiagram
-    State1: This a single line description
-    State2: This a multi line description
+    State1: This a a single line description
+    State2: This a a multi line description
     State2: here comes the multi part
     [*] --> State1
     State1 --> State2

cypress/integration/rendering/timeline.spec.ts

@@ -7,7 +7,7 @@ describe('Timeline diagram', () => {
     title History of Social Media Platform
     2002 : LinkedIn
     2004 : Facebook : Google
-    2005 : YouTube
+    2005 : Youtube
     2006 : Twitter
       `,
       {}
@@ -35,7 +35,7 @@ describe('Timeline diagram', () => {
         section Stone Age
           7600 BC : Britain's oldest known house was built in Orkney, Scotland
           6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
-        section Bronze Age
+        section Broze Age
           2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
                   : New styles of pottery and ways of burying the dead appear.
           2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
@@ -51,7 +51,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
       `,
       {}
@@ -68,7 +68,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -84,7 +84,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -101,7 +101,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -118,7 +118,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -135,7 +135,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -152,7 +152,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -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/xyChart.spec.js

@@ -179,7 +179,6 @@ describe('XY Chart', () => {
             axisLineWidth: 5
           chartOrientation: horizontal
           plotReservedSpacePercent: 60
-          showDataLabel: true
       ---
       xychart-beta
         title "Sales Revenue"
@@ -316,516 +315,4 @@ describe('XY Chart', () => {
     );
     cy.get('svg');
   });
-
-  it('should render vertical bar chart with labels', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-    ---
-    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
-      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-    `,
-      {}
-    );
-  });
-
-  it('should render horizontal bar chart with labels', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-        chartOrientation: horizontal
-    ---
-    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
-      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-    `,
-      {}
-    );
-  });
-
-  it('should render vertical bar chart without labels by default', () => {
-    imgSnapshotTest(
-      `
-    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
-      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-    `,
-      {}
-    );
-  });
-
-  it('should render horizontal bar chart without labels by default', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        chartOrientation: horizontal
-    ---
-    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
-      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-    `,
-      {}
-    );
-  });
-
-  it('should render multiple bar plots vertically with labels correctly', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-    ---
-      xychart-beta
-        title "Multiple Bar Plots"
-        x-axis Categories [A, B, C]
-        y-axis "Values" 0 --> 100
-        bar [10, 50, 90]
-      `,
-      {}
-    );
-  });
-
-  it('should render multiple bar plots horizontally with labels correctly', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-        chartOrientation: horizontal
-    ---
-      xychart-beta
-        title "Multiple Bar Plots"
-        x-axis Categories [A, B, C]
-        y-axis "Values" 0 --> 100
-        bar [10, 50, 90]
-      `,
-      {}
-    );
-  });
-
-  it('should render a single bar with label for a vertical xy-chart', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-    ---
-      xychart-beta
-        title "Single Bar Chart"
-        x-axis Categories [A]
-        y-axis "Value" 0 --> 100
-        bar [75]
-      `,
-      {}
-    );
-  });
-
-  it('should render a single bar with label for a horizontal xy-chart', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-        chartOrientation: horizontal
-    ---
-      xychart-beta
-        title "Single Bar Chart"
-        x-axis Categories [A]
-        y-axis "Value" 0 --> 100
-        bar [75]
-      `,
-      {}
-    );
-  });
-
-  it('should render negative and decimal values with correct labels for vertical xy-chart', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-    ---
-      xychart-beta
-        title "Decimal and Negative Values"
-        x-axis Categories [A, B, C]
-        y-axis -10 --> 10
-        bar [ -2.5, 0.75, 5.1 ]
-      `,
-      {}
-    );
-  });
-
-  it('should render negative and decimal values with correct labels for horizontal xy-chart', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-        chartOrientation: horizontal
-    ---
-      xychart-beta
-        title "Decimal and Negative Values"
-        x-axis Categories [A, B, C]
-        y-axis -10 --> 10
-        bar [ -2.5, 0.75, 5.1 ]
-      `,
-      {}
-    );
-  });
-
-  it('should render data labels within each bar in the vertical xy-chart', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-    ---
-    xychart-beta
-            title "Sales Revenue"
-            x-axis Months [jan,b,c]
-            y-axis "Revenue (in $)" 4000 --> 12000
-            bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
-    `,
-      {}
-    );
-
-    cy.get('g.bar-plot-0').within(() => {
-      cy.get('rect').each(($rect, index) => {
-        // Extract bar properties
-        const barProps = {
-          x: parseFloat($rect.attr('x')),
-          y: parseFloat($rect.attr('y')),
-          width: parseFloat($rect.attr('width')),
-          height: parseFloat($rect.attr('height')),
-        };
-
-        // Get the text element corresponding to this bar by index.
-        cy.get('text')
-          .eq(index)
-          .then(($text) => {
-            const bbox = $text[0].getBBox();
-            const textProps = {
-              x: bbox.x,
-              y: bbox.y,
-              width: bbox.width,
-              height: bbox.height,
-            };
-
-            // Verify that the text label is positioned within the boundaries of the bar.
-            expect(textProps.x).to.be.greaterThan(barProps.x);
-            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
-
-            // Check horizontal alignment (within tolerance)
-            expect(textProps.x + textProps.width / 2).to.be.closeTo(
-              barProps.x + barProps.width / 2,
-              5
-            );
-
-            expect(textProps.y).to.be.greaterThan(barProps.y);
-            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
-          });
-      });
-    });
-  });
-
-  it('should render data labels within each bar in the horizontal xy-chart', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-        chartOrientation: horizontal
-    ---
-    xychart-beta
-            title "Sales Revenue"
-            x-axis Months [jan,b,c]
-            y-axis "Revenue (in $)" 4000 --> 12000
-            bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
-    `,
-      {}
-    );
-
-    cy.get('g.bar-plot-0').within(() => {
-      cy.get('rect').each(($rect, index) => {
-        // Extract bar properties
-        const barProps = {
-          x: parseFloat($rect.attr('x')),
-          y: parseFloat($rect.attr('y')),
-          width: parseFloat($rect.attr('width')),
-          height: parseFloat($rect.attr('height')),
-        };
-
-        // Get the text element corresponding to this bar by index.
-        cy.get('text')
-          .eq(index)
-          .then(($text) => {
-            const bbox = $text[0].getBBox();
-            const textProps = {
-              x: bbox.x,
-              y: bbox.y,
-              width: bbox.width,
-              height: bbox.height,
-            };
-
-            // Verify that the text label is positioned within the boundaries of the bar.
-            expect(textProps.x).to.be.greaterThan(barProps.x);
-            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
-
-            expect(textProps.y).to.be.greaterThan(barProps.y);
-            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
-            expect(textProps.y + textProps.height / 2).to.be.closeTo(
-              barProps.y + barProps.height / 2,
-              5
-            );
-          });
-      });
-    });
-  });
-
-  it('should render data labels within each bar in the vertical xy-chart with a lot of bars of different sizes', () => {
-    imgSnapshotTest(
-      `
-      ---
-      config:
-        xyChart:
-          showDataLabel: true
-      ---
-      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
-        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
-    `,
-      {}
-    );
-
-    cy.get('g.bar-plot-0').within(() => {
-      cy.get('rect').each(($rect, index) => {
-        // Extract bar properties
-        const barProps = {
-          x: parseFloat($rect.attr('x')),
-          y: parseFloat($rect.attr('y')),
-          width: parseFloat($rect.attr('width')),
-          height: parseFloat($rect.attr('height')),
-        };
-
-        // Get the text element corresponding to this bar by index.
-        cy.get('text')
-          .eq(index)
-          .then(($text) => {
-            const bbox = $text[0].getBBox();
-            const textProps = {
-              x: bbox.x,
-              y: bbox.y,
-              width: bbox.width,
-              height: bbox.height,
-            };
-
-            // Verify that the text label is positioned within the boundaries of the bar.
-            expect(textProps.x).to.be.greaterThan(barProps.x);
-            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
-
-            // Check horizontal alignment (within tolerance)
-            expect(textProps.x + textProps.width / 2).to.be.closeTo(
-              barProps.x + barProps.width / 2,
-              5
-            );
-
-            expect(textProps.y).to.be.greaterThan(barProps.y);
-            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
-          });
-      });
-    });
-  });
-
-  it('should render data labels within each bar in the horizontal xy-chart with a lot of bars of different sizes', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-        chartOrientation: horizontal
-    ---
-    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
-      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
-    `,
-      {}
-    );
-
-    cy.get('g.bar-plot-0').within(() => {
-      cy.get('rect').each(($rect, index) => {
-        // Extract bar properties
-        const barProps = {
-          x: parseFloat($rect.attr('x')),
-          y: parseFloat($rect.attr('y')),
-          width: parseFloat($rect.attr('width')),
-          height: parseFloat($rect.attr('height')),
-        };
-
-        // Get the text element corresponding to this bar by index.
-        cy.get('text')
-          .eq(index)
-          .then(($text) => {
-            const bbox = $text[0].getBBox();
-            const textProps = {
-              x: bbox.x,
-              y: bbox.y,
-              width: bbox.width,
-              height: bbox.height,
-            };
-
-            // Verify that the text label is positioned within the boundaries of the bar.
-            expect(textProps.x).to.be.greaterThan(barProps.x);
-            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
-
-            expect(textProps.y).to.be.greaterThan(barProps.y);
-            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
-            expect(textProps.y + textProps.height / 2).to.be.closeTo(
-              barProps.y + barProps.height / 2,
-              5
-            );
-          });
-      });
-    });
-  });
-
-  it('should render data labels correctly for a bar in the vertical xy-chart', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-    ---
-    xychart-beta
-            title "Sales Revenue"
-            x-axis Months [jan]
-            y-axis "Revenue (in $)" 3000 --> 12000
-            bar [4000]
-    `,
-      {}
-    );
-
-    cy.get('g.bar-plot-0').within(() => {
-      cy.get('rect').each(($rect, index) => {
-        // Extract bar properties
-        const barProps = {
-          x: parseFloat($rect.attr('x')),
-          y: parseFloat($rect.attr('y')),
-          width: parseFloat($rect.attr('width')),
-          height: parseFloat($rect.attr('height')),
-        };
-
-        // Get the text element corresponding to this bar by index.
-        cy.get('text')
-          .eq(index)
-          .then(($text) => {
-            const bbox = $text[0].getBBox();
-            const textProps = {
-              x: bbox.x,
-              y: bbox.y,
-              width: bbox.width,
-              height: bbox.height,
-            };
-
-            // Verify that the text label is positioned within the boundaries of the bar.
-            expect(textProps.x).to.be.greaterThan(barProps.x);
-            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
-
-            // Check horizontal alignment (within tolerance)
-            expect(textProps.x + textProps.width / 2).to.be.closeTo(
-              barProps.x + barProps.width / 2,
-              5
-            );
-
-            expect(textProps.y).to.be.greaterThan(barProps.y);
-            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
-          });
-      });
-    });
-  });
-
-  it('should render data labels correctly for a bar in the horizontal xy-chart', () => {
-    imgSnapshotTest(
-      `
-    ---
-    config:
-      xyChart:
-        showDataLabel: true
-        chartOrientation: horizontal
-    ---
-    xychart-beta
-            title "Sales Revenue"
-            x-axis Months [jan]
-            y-axis "Revenue (in $)" 3000 --> 12000
-            bar [4000]
-    `,
-      {}
-    );
-
-    cy.get('g.bar-plot-0').within(() => {
-      cy.get('rect').each(($rect, index) => {
-        // Extract bar properties
-        const barProps = {
-          x: parseFloat($rect.attr('x')),
-          y: parseFloat($rect.attr('y')),
-          width: parseFloat($rect.attr('width')),
-          height: parseFloat($rect.attr('height')),
-        };
-
-        // Get the text element corresponding to this bar by index.
-        cy.get('text')
-          .eq(index)
-          .then(($text) => {
-            const bbox = $text[0].getBBox();
-            const textProps = {
-              x: bbox.x,
-              y: bbox.y,
-              width: bbox.width,
-              height: bbox.height,
-            };
-
-            // Verify that the text label is positioned within the boundaries of the bar.
-            expect(textProps.x).to.be.greaterThan(barProps.x);
-            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
-
-            expect(textProps.y).to.be.greaterThan(barProps.y);
-            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
-            expect(textProps.y + textProps.height / 2).to.be.closeTo(
-              barProps.y + barProps.height / 2,
-              5
-            );
-          });
-      });
-    });
-  });
 });

cypress/platform/ashish2.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
@@ -30,8 +30,8 @@
       .mermaid svg {
         /* font-size: 18px !important; */
         background-color: #eee;
-        background-image:
-          radial-gradient(#fff 1%, transparent 11%), radial-gradient(#fff 1%, transparent 11%);
+        background-image: radial-gradient(#fff 1%, transparent 11%),
+          radial-gradient(#fff 1%, transparent 11%);
         background-size: 20px 20px;
         background-position:
           0 0,
@@ -60,7 +60,7 @@
     <pre id="diagram" class="mermaid2">
  timeline
         title My day
-        section Section with no tasks
+        section section with no tasks
         section Go to work at the dog office
           1930 : first step : second step is a long step
                : third step
@@ -70,18 +70,18 @@
           1960 : India fights poverty, looses war to China and gets nuclear weapons from USA and USSR
           1970 : Green Revolution comes to india
         section Another section with no tasks
-          I am a very, very big task
-          I am not so big task
+          I am a big big big tasks
+          I am not so big tasks
     </pre>
     <pre id="diagram" class="mermaid">
  timeline
         title MermaidChart 2023 Timeline
         section 2023 Q1 <br> Release Personal Tier
-          Bullet 1 : sub-point 1a : sub-point 1b
+          Buttet 1 : sub-point 1a : sub-point 1b
                : sub-point 1c
           Bullet 2 : sub-point 2a : sub-point 2b
         section 2023 Q2 <br> Release XYZ Tier
-          Bullet 3 : sub-point <br> 3a : sub-point 3b
+          Buttet 3 : sub-point <br> 3a : sub-point 3b
                : sub-point 3c
           Bullet 4 : sub-point 4a : sub-point 4b
 
@@ -93,7 +93,7 @@
         section Stone Age
           7600 BC : Britain's oldest known house was built in Orkney, Scotland
           6000 BC : Sea levels rise and Britain becomes an island. The people who live here are hunter-gatherers.
-        section Bronze Age
+        section Broze Age
           2300 BC : People arrive from Europe and settle in Britain. They bring farming and metalworking.
                : New styles of pottery and ways of burying the dead appear.
           2200 BC : The last major building works are completed at Stonehenge. People now bury their dead in stone circles.
@@ -106,7 +106,7 @@
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google : Pixar
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008s : Instagram
@@ -122,7 +122,7 @@
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google : Pixar
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008s : Instagram
@@ -139,7 +139,7 @@
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -152,7 +152,7 @@
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : YouTube
+          2005 : Youtube
           2006 : Twitter
           2007 : Tumblr
           2008s : Instagram

cypress/platform/class.html

@@ -3,7 +3,7 @@
     <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
@@ -37,7 +37,7 @@
         +String owner
         +BigDecimal balance
         +deposit(amount) bool
-        +withdrawal(amount) int
+        +withdrawl(amount) int
        }
        cssClass "BankAccount" customCss
 
@@ -56,7 +56,7 @@ classE o-- classF : aggregation
           +String owner
           +BigDecimal balance
           +deposit(amount) bool
-          +withdrawal(amount) int
+          +withdrawl(amount) int
         }
           Class01~T~ <|-- AveryLongClass : Cool
           Class03~T~ *-- Class04~T~

cypress/platform/click_security_other.html

@@ -77,7 +77,7 @@
 
         document.getElementsByTagName('body')[0].appendChild(div);
       }
-      mermaid.initialize({ startOnLoad: true, securityLevel: 'strict_', logLevel: 1 });
+      mermaid.initialize({ startOnLoad: true, securityLevel: 'strct', logLevel: 1 });
     </script>
   </body>
 </html>

cypress/platform/current.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
@@ -31,7 +31,7 @@
         flowchart BT subgraph S1 sub1 -->sub2 end subgraph S2 sub4 end S1 --> S2 sub1 --> sub4
       </div>
       <div class="mermaid2" style="width: 50%; height: 200px">
-        sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had previously
+        sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had preivously
         overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short
         though
       </div>
@@ -61,9 +61,9 @@
       #quot;elit#quot;."}}
     </div>
     <div class="mermaid2" style="width: 50%; height: 50%">
-      flowchart TB internet nat router lb1 lb2 compute1 compute2 subgraph project router nat
-      subgraph subnet1 compute1 lb1 end subgraph subnet2 compute2 lb2 end end internet --> router
-      router --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
+      flowchart TB internet nat routeur lb1 lb2 compute1 compute2 subgraph project routeur nat
+      subgraph subnet1 compute1 lb1 end subgraph subnet2 compute2 lb2 end end internet --> routeur
+      routeur --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
     </div>
     <div class="mermaid2" style="width: 50%; height: 50%">
       flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end end subgraph two[Two]

cypress/platform/current2.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/e2e.html

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

cypress/platform/flowchart-refactor.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"

cypress/platform/flowchart-sate.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"

cypress/platform/ghsa3.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/git-graph.html

@@ -3,7 +3,7 @@
     <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
@@ -38,7 +38,7 @@
         +String owner
         +BigDecimal balance
         +deposit(amount) bool
-        +withdrawal(amount) int
+        +withdrawl(amount) int
        }
        cssClass "BankAccount" customCss
     </pre>

cypress/platform/gitgraph.html

@@ -3,7 +3,7 @@
     <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/gitgraph2.html

@@ -3,7 +3,7 @@
     <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/knsv-4442.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
@@ -30,8 +30,8 @@
       .mermaid svg {
         /* font-size: 18px !important; */
         background-color: #efefef;
-        background-image:
-          radial-gradient(#fff 51%, transparent 91%), radial-gradient(#fff 51%, transparent 91%);
+        background-image: radial-gradient(#fff 51%, transparent 91%),
+          radial-gradient(#fff 51%, transparent 91%);
         background-size: 20px 20px;
         background-position:
           0 0,

cypress/platform/knsv.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"

cypress/platform/knsv2.html

@@ -4,14 +4,14 @@
     <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"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
       rel="stylesheet"
     />
     <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
       rel="stylesheet"
     />
     <link
@@ -78,78 +78,35 @@
         font-family: monospace;
         font-size: 72px;
       }
-
       pre {
         width: 100%;
       }
-
       /* tspan {
               font-size: 6px !important;
             } */
-      /* .flowchart-link {
-        stroke-dasharray: 4, 4 !important;
-        animation: flow 1s linear infinite;
-        animation: dashdraw 4.93282s linear infinite;
-        stroke-width: 2px !important;
-      } */
-
-      @keyframes dashdraw {
-        from {
-          stroke-dashoffset: 0;
-        }
-      }
-
-      /*stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation:    4.932820s linear infinite;*/
-      /* stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;*/
     </style>
   </head>
 
   <body>
     <pre id="diagram4" class="mermaid">
+---
+config:
+  layout: elk
+---
       flowchart LR
-        AB["apa@apa@"] --> B(("`apa@apa`"))
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      flowchart
-        D(("for D"))
-    </pre>
-    <pre id="diagram4" class="mermaid">
-      flowchart LR
-        A e1@==> B
-        e1@{ animate: true}
-    </pre>
-    <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
-  class e1 animate
-    </pre>
-    <h2>infinite</h2>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  A e1@--> B
-  classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
-  class e1 animate
-    </pre>
-    <h2>Mermaid - edge-animation-slow</h2>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  A e1@--> B
-e1@{ animation: fast}
-    </pre>
-    <h2>Mermaid - edge-animation-fast</h2>
-    <pre id="diagram4" class="mermaid2">
-flowchart LR
-  A e1@--> B
-  classDef animate stroke-dasharray: 1000,stroke-dashoffset: 1000,animation: dash 10s linear;
-  class e1 edge-animation-fast
-    </pre>
+      subgraph S2
+      subgraph s1["APA"]
+      D{"Use the editor"}
+      end
 
-    <pre id="diagram4" class="mermaid2">
 
-info    </pre
-    >
-    <pre id="diagram4" class="mermaid2">
+      D -- Mermaid js --> I{"fa:fa-code Text"}
+            D --> I
+            D --> I
+
+      end
+    </pre>
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -174,7 +131,7 @@ config:
       end
       end
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -226,23 +183,23 @@ flowchart LR
     n8@{ shape: rect}
 
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
-config:
-  layout: elk
+title: https://github.com/mermaid-js/mermaid/issues/5824
 ---
-flowchart LR
- subgraph s1["Untitled subgraph"]
-        n1["Evaluate"]
-        n2["Option 1"]
+%% 6048, 5824
+flowchart TB
+    mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"`<**1**1`"--> fine["No bug"]
+    mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
+    subgraph subgraph1["`How to fix **fix**`"]
+        broken --> B["B"]
     end
-    n1 -- One --> n2
-
-
-
-
+    githost["Github, Gitlab, BitBucket, etc."]
+    githost2["`Github, Gitlab, BitBucket, etc.`"]
+    a["1."]
+    b["- x"]
     </pre>
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -251,7 +208,7 @@ flowchart LR
     A{A} --> B & C
 </pre
     >
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -263,7 +220,7 @@ flowchart LR
     end
 </pre
     >
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -386,7 +343,7 @@ kanban
     [Create Documentation]
     docs[Create Blog about the new diagram]
   id7[In progress]
-    id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
+    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
   id9[Ready for deploy]
     id8[Design grammar]@{ assigned: 'knsv' }
   id10[Ready for test]
@@ -434,10 +391,7 @@ kanban
       window.callback = function () {
         alert('A callback was triggered');
       };
-      function callback() {
-        alert('It worked');
-      }
-      await mermaid.initialize({
+      mermaid.initialize({
         // theme: 'base',
         // theme: 'default',
         // theme: 'forest',
@@ -449,11 +403,9 @@ kanban
         // layout: 'fixed',
         // htmlLabels: false,
         flowchart: { titleTopMargin: 10 },
-
         // fontFamily: 'Caveat',
         // fontFamily: 'Kalam',
         // fontFamily: 'courier',
-        fontFamily: 'arial',
         sequence: {
           actorFontFamily: 'courier',
           noteFontFamily: 'courier',
@@ -465,9 +417,10 @@ kanban
         fontSize: 12,
         logLevel: 0,
         securityLevel: 'loose',
-        callback,
       });
-
+      function callback() {
+        alert('It worked');
+      }
       mermaid.parseError = function (err, hash) {
         console.error('In parse error:');
         console.error(err);

cypress/platform/per.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/saurabh.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
@@ -62,23 +62,56 @@
 
   <body style="display: flex; gap: 2rem; flex-direction: row">
     <pre id="diagram4" class="mermaid">
-      flowchart
-          A --> A
-          subgraph B
-            B1 --> B1
-          end
-          subgraph C
-            subgraph C1
-              C2 --> C2
-              subgraph D
-                D1 --> D1
-              end
-              D --> D
-            end
-            C1 --> C1
-          end
+      flowchart LR
+      A@{ icon: "fa:window-minimize", form: circle }
+      E@{ icon: "fa:window-minimize", form: circle }
+      B@{ icon: "fa:bell", form: circle }
+      B2@{ icon: "fa:bell", form: circle }
+      C@{ icon: "fa:address-book",  form: square  }
+      D@{ icon: "fa:star-half",  form: square  }
+      A --> E
+      B --> B2
+
 
     </pre>
+    <pre id="diagram4" class="mermaid2">
+      flowchart TB
+       A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
+       B2 --test--> C
+       D --> B2 --> E
+       style B2 fill:#f9f,stroke:#333,stroke-width:4px
+  </pre
+    >
+    <pre id="diagram43" class="mermaid2">
+      flowchart BT
+       A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }
+       B2 --test--> C
+       D --> B2 --> E
+  </pre
+    >
+    <pre id="diagram4" class="mermaid2">
+      flowchart BT
+       A --test2--> B2@{ icon: "fa:bell", label: "B2 awiugdawu uydgayuiwd wuydguy", pos: "b", h: 40, w: 30 }
+       B2 --test--> C
+  </pre
+    >
+    <pre id="diagram43" class="mermaid2">
+      flowchart BT
+       A --test2--> B2@{ icon: "fa:bell", label: "B2 dawuygd ayuwgd uy", pos: "t", h: 40, w: 30 }
+       B2 --test--> C
+  </pre
+    >
+    <pre id="diagram6" class="mermaid2">
+      flowchart TB
+       A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "t", w: 200, h: 100 } --> C
+  </pre
+    >
+    <pre id="diagram6" class="mermaid2">
+      flowchart TB
+       A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "b", w: 200, h: 100 } --> C
+       D --> B2 --> E
+  </pre
+    >
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       import layouts from './mermaid-layout-elk.esm.mjs';

cypress/platform/showcase_base.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/showcase_base_dark.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/showcase_dark.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/showcase_default.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/showcase_forest.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/showcase_neutral.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/state-refactor.html

@@ -3,7 +3,7 @@
 <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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
   <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />

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/platform/xss10.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/xss11.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/xss12.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/xss13.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/xss14.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/xss15.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/xss16.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/xss17.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/xss18.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/xss19.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/xss20.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"

cypress/platform/xss21.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"