Merge pull request #6727 from mermaid-js/changeset-release/master

Version Packages

.build/jsonSchema.ts

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

.build/types.ts

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

.changeset/angry-bags-brake.md

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

.changeset/bright-ads-exist.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-Fixes for consistent edge id creation & handling edge cases for animate edge feature

.changeset/chatty-elephants-warn.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-Fix for issue #6195 - allowing @ signs inside node labels

.changeset/chilly-years-cheat.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: `mermaidAPI.getDiagramFromText()` now returns a new different db for each class diagram

.changeset/dull-tips-cough.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: revert state db to resolve getData returning empty nodes and edges

.changeset/great-ghosts-rule.md

@@ -1,8 +0,0 @@
----
-'mermaid': minor
----
-
-Flowchart new syntax for node metadata bugs
-
-- Incorrect label mapping for nodes when using `&`
-- Syntax error when `}` with trailing spaces before new line

.changeset/hungry-guests-drive.md

@@ -1,5 +0,0 @@
----
-'@mermaid-js/layout-elk': patch
----
-
-fix: Updated offset calculations for diamond shape when handling intersections

.changeset/many-brooms-promise.md

@@ -1,5 +0,0 @@
----
-'mermaid': minor
----
-
-Adding support for animation of flowchart edges

.changeset/new-kiwis-listen.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: `mermaidAPI.getDiagramFromText()` now returns a new different db for each flowchart

.changeset/stupid-dots-do.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Gantt, Sankey and User Journey diagram are now able to pick font-family from mermaid config.

.changeset/witty-crews-smell.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-`mermaidAPI.getDiagramFromText()` now returns a new different db for each state diagram

.cspell/code-terms.txt

@@ -47,13 +47,13 @@ edgesep
 EMPTYSTR
 enddate
 ERDIAGRAM
+eslint
 flatmap
 forwardable
 frontmatter
 funs
 gantt
 GENERICTYPE
-getBoundarys
 grammr
 graphtype
 halign
@@ -88,6 +88,7 @@ NODIR
 NSTR
 outdir
 Qcontrolx
+QSTR
 reinit
 rels
 reqs

.cspell/contributors.txt

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

.cspell/libraries.txt

@@ -26,6 +26,7 @@ dompurify
 elkjs
 fcose
 fontawesome
+Fonticons
 Forgejo
 Foswiki
 Gitea
@@ -47,7 +48,6 @@ mdbook
 Mermerd
 mkdocs
 Nextra
-NODECOUNT
 nodenext
 npmjs
 pageview
@@ -59,7 +59,6 @@ presetAttributify
 pyplot
 redmine
 rehype
-RIGHTDOWN
 roughjs
 rscratch
 shiki
@@ -69,7 +68,6 @@ sphinxcontrib
 ssim
 stylis
 Swimm
-topdown
 tsbuildinfo
 tseslint
 Tuleap

.cspell/mermaid-terms.txt

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

.esbuild/build.ts

@@ -1,5 +1,5 @@
 import { build } from 'esbuild';
-import { mkdir, writeFile } from 'node:fs/promises';
+import { cp, mkdir, readFile, rename, writeFile } from 'node:fs/promises';
 import { packageOptions } from '../.build/common.js';
 import { generateLangium } from '../.build/generateLangium.js';
 import type { MermaidBuildOptions } from './util.js';
@@ -31,6 +31,27 @@ 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 }
     );
   }
@@ -57,6 +78,21 @@ 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 });
@@ -65,6 +101,7 @@ const main = async () => {
   for (const pkg of packageNames) {
     await buildPackage(pkg).catch(handler);
   }
+  await buildTinyMermaid();
 };
 
 void main();

.esbuild/util.ts

@@ -14,6 +14,7 @@ export interface MermaidBuildOptions extends BuildOptions {
   metafile: boolean;
   format: 'esm' | 'iife';
   options: PackageOptions;
+  includeLargeFeatures: boolean;
 }
 
 export const defaultOptions: Omit<MermaidBuildOptions, 'entryName' | 'options'> = {
@@ -21,6 +22,7 @@ export const defaultOptions: Omit<MermaidBuildOptions, 'entryName' | 'options'>
   metafile: false,
   core: false,
   format: 'esm',
+  includeLargeFeatures: true,
 } as const;
 
 const buildOptions = (override: BuildOptions): BuildOptions => {
@@ -39,12 +41,18 @@ const buildOptions = (override: BuildOptions): BuildOptions => {
   };
 };
 
-const getFileName = (fileName: string, { core, format, minify }: MermaidBuildOptions) => {
+const getFileName = (
+  fileName: string,
+  { core, format, minify, includeLargeFeatures }: MermaidBuildOptions
+) => {
   if (core) {
     fileName += '.core';
   } else if (format === 'esm') {
     fileName += '.esm';
   }
+  if (!includeLargeFeatures) {
+    fileName += '.tiny';
+  }
   if (minify) {
     fileName += '.min';
   }
@@ -54,23 +62,27 @@ const getFileName = (fileName: string, { core, format, minify }: MermaidBuildOpt
 export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
   const {
     core,
-    metafile,
     format,
-    minify,
     options: { name, file, packageName },
+    globalName = 'mermaid',
+    includeLargeFeatures,
+    ...rest
   } = options;
+
   const external: string[] = ['require', 'fs', 'path'];
   const outFileName = getFileName(name, options);
   const output: BuildOptions = buildOptions({
+    ...rest,
     absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
     entryPoints: {
       [outFileName]: `src/${file}`,
     },
-    metafile,
-    minify,
+    globalName,
     logLevel: 'info',
     chunkNames: `chunks/${outFileName}/[name]-[hash]`,
     define: {
+      // This needs to be stringified for esbuild
+      includeLargeFeatures: `${includeLargeFeatures}`,
       'import.meta.vitest': 'undefined',
     },
   });
@@ -89,11 +101,12 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
   if (format === 'iife') {
     output.format = 'iife';
     output.splitting = false;
-    output.globalName = '__esbuild_esm_mermaid';
+    const originalGlobalName = output.globalName ?? 'mermaid';
+    output.globalName = `__esbuild_esm_mermaid_nm[${JSON.stringify(originalGlobalName)}]`;
     // Workaround for removing the .default access in esbuild IIFE.
     // https://github.com/mermaid-js/mermaid/pull/4109#discussion_r1292317396
     output.footer = {
-      js: 'globalThis.mermaid = globalThis.__esbuild_esm_mermaid.default;',
+      js: `globalThis[${JSON.stringify(originalGlobalName)}] = globalThis.${output.globalName}.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/AgrbSrBer3
+    url: https://discord.gg/sKeNQX4Wtj
     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.
-        A list of currently used variable names can be found [here](https://mermaid-js.github.io/mermaid/#/theming?id=theme-variables-reference-table)
+        See the [list of currently used variable names](https://mermaid-js.github.io/mermaid/#/theming?id=theme-variables-reference-table)
       placeholder: |-
         - background: #f4f4f4
         - primaryColor: #fff4dd

.github/lychee.toml

@@ -46,8 +46,17 @@ exclude = [
 # Drupal 403
 "https://(www.)?drupal.org",
 
-# Swimm returns 404, eventhough the link is valid
-"https://docs.swimm.io"
+# Phbpp 403
+"https://(www.)?phpbb.com",
+
+# Swimm returns 404, even though the link is valid
+"https://docs.swimm.io",
+
+# Timeout
+"https://huehive.co",
+"https://foswiki.org",
+"https://www.gnu.org",
+"https://mermaid-preview.com"
 ]
 
 # 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 been automatically closed due to a lack of activity. 
+  This issue has 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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         with:
           cache: pnpm
           node-version-file: '.node-version'

.github/workflows/build-docs.yml

@@ -18,12 +18,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
       - 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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
+        uses: github/codeql-action/init@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
         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@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
+        uses: github/codeql-action/autobuild@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
 
       # ℹ️ 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@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
+        uses: github/codeql-action/analyze@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10

.github/workflows/dependency-review.yml

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

.github/workflows/e2e-applitools.yml

@@ -32,29 +32,31 @@ jobs:
         run: |
           echo "::error,title=Not using Applitools::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
 
-      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         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@d79d2d530a66e641eb4a5f227e13bc985c60b964 # v4.2.2
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         id: cypress
         with:
           start: pnpm run dev

.github/workflows/e2e-timings.yml

@@ -11,6 +11,7 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 permissions:
   contents: write
+  pull-requests: write
 
 jobs:
   timings:
@@ -19,18 +20,19 @@ 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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         with:
           node-version-file: '.node-version'
       - name: Install dependencies
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         with:
           runTests: false
+
       - name: Cypress run
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         id: cypress
         with:
           install: false
@@ -44,10 +46,25 @@ jobs:
           SPLIT: 1
           SPLIT_INDEX: 0
           SPLIT_FILE: 'cypress/timings.json'
-      - name: Commit changes
-        uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9.1.4
+
+      - 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
         with:
-          add: 'cypress/timings.json'
-          author_name: 'github-actions[bot]'
-          author_email: '41898282+github-actions[bot]@users.noreply.github.com'
-          message: 'chore: update E2E timings'
+          add-paths: |
+            cypress/timings.json
+          commit-message: 'chore: update E2E timings'
+          branch: update-timings
+          title: Update E2E Timings
+          body: ${{ steps.compare.outputs.output }}
+          delete-branch: true
+          sign-commits: true

.github/workflows/e2e.yml

@@ -7,9 +7,6 @@ on:
       - master
       - release/**
   pull_request:
-  issue_comment:
-    types:
-      - created
   merge_group:
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
@@ -31,41 +28,38 @@ env:
       ) || 
       github.event.before
     }}
-  # Check if this is a new comment with '/visual-test'
   RUN_VISUAL_TEST: >-
-    ${{ github.event_name == 'issue_comment' && github.event.action == 'created' && contains(github.event.comment.body, '/visual-test') && github.event.issue.pull_request != null }}
+    ${{ github.repository == 'mermaid-js/mermaid' && (github.event_name != 'pull_request' || !startsWith(github.head_ref, 'renovate/')) }}
 jobs:
   cache:
-    if: ${{ github.event_name != 'issue_comment' || contains(github.event.comment.body, '/visual-test') }}
     runs-on: ubuntu-latest
     container:
       image: cypress/browsers:node-20.11.0-chrome-121.0.6167.85-1-ff-120.0-edge-121.0.2277.83-1
       options: --user 1001
     steps:
-      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         with:
           node-version-file: '.node-version'
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
+        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
         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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
           ref: ${{ env.targetHash }}
 
       - name: Install dependencies
         if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         with:
           # just perform install
           runTests: false
@@ -88,26 +82,26 @@ jobs:
       matrix:
         containers: [1, 2, 3, 4, 5]
     steps:
-      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         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@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
+        uses: actions/cache/restore@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
         with:
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
       - name: Install dependencies
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         with:
           runTests: false
 
@@ -123,7 +117,7 @@ jobs:
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         id: cypress
         with:
           install: false
@@ -134,8 +128,6 @@ jobs:
           # e.g. if this action was run from a fork
           record: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.CYPRESS_RECORD_KEY != '' }}
         env:
-          # Only set Argos environment variables if the visual test comment trigger is present
-          ARGOS_TOKEN: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.ARGOS_TOKEN || '' }}
           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 }}
@@ -147,7 +139,7 @@ jobs:
           VITEST_COVERAGE: true
 
       - name: Upload Coverage to Codecov
-        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0
+        uses: codecov/codecov-action@13ce06bfc6bbe3ecf90edbbf1bc32fe5978ca1d3 # v5.3.1
         # 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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
       - name: Restore lychee cache
-        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
+        uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
         with:
           path: .lycheecache
           key: cache-lychee-${{ github.sha }}
           restore-keys: cache-lychee-
 
       - name: Link Checker
-        uses: lycheeverse/lychee-action@c053181aa0c3d17606addfe97a9075a32723548a # v1.9.3
+        uses: lycheeverse/lychee-action@f613c4a64e50d792e0b31ec34bbcbba12263c6a6 # v2.3.0
         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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
       - uses: hadolint/hadolint-action@54c9adbab1582c2ef04b2016b760714a4bfde3cf # v3.1.0
         with:
@@ -23,13 +23,13 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         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@3f0f87098bd6b5c5b9a36d49c41d998ea58f9348 # v6.0.0
+        uses: release-drafter/release-drafter@b1476f6e6eb133afa41ed8589daba6dc69b4d3f5 # v6.1.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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         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@1f0c5cde4bc74cd7e1254d0cb4de8d49e9068c7d # v4.0.0
+        uses: actions/configure-pages@983d7736d9b0ae728b81ab479565c72886d7745b # v5.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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         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@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         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@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         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@3de3850952bec538fde60aac71731376e57b9b57 # v1.4.8
+        uses: changesets/action@c8bada60c408975afd1a20b3db81d6eee6789308 # v1.4.9
         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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
           persist-credentials: false
       - name: Run analysis
-        uses: ossf/scorecard-action@dc50aa9510b46c811795eb24b2f1ba02a914e534 # v2.3.3
+        uses: ossf/scorecard-action@f49aabe0b5af0936a0987cfb85d86b75731b0186 # v2.4.1
         with:
           results_file: results.sarif
           results_format: sarif
           publish_results: true
       - name: Upload artifact
-        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4.6.0
+        uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1
         with:
           name: SARIF file
           path: results.sarif
           retention-days: 5
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
+        uses: github/codeql-action/upload-sarif@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
         with:
           sarif_file: results.sarif

.github/workflows/test.yml

@@ -9,13 +9,13 @@ jobs:
   unit-test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -39,12 +39,11 @@ jobs:
           pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts --coverage
 
       - name: Verify out-of-tree build with TypeScript
-        if: ${{ github.repository == 'mermaid-js/mermaid' }}
         run: |
           pnpm test:check:tsc
 
       - name: Upload Coverage to Codecov
-        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0
+        uses: codecov/codecov-action@13ce06bfc6bbe3ecf90edbbf1bc32fe5978ca1d3 # v5.3.1
         # 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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
-      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.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@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6.1.0
+        uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7.0.6
         with:
           branch: update-browserslist
           title: Update Browserslist

.github/workflows/validate-lockfile.yml

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

.node-version

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

.vite/build.ts

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

.vscode/launch.json

@@ -12,18 +12,18 @@
       "args": ["run", "${relativeFile}"],
       "smartStep": true,
       "console": "integratedTerminal"
+    },
+    {
+      "name": "Docs generation",
+      "type": "node",
+      "request": "launch",
+      "args": ["scripts/docs.cli.mts"],
+      // we'll need to change this to --import in Node.JS v20.6.0 and up
+      "runtimeArgs": ["--loader", "tsx/esm"],
+      "cwd": "${workspaceRoot}/packages/mermaid",
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "smartStep": true,
+      "internalConsoleOptions": "openOnSessionStart"
     }
-    // {
-    //   "name": "Docs generation",
-    //   "type": "node",
-    //   "request": "launch",
-    //   "args": ["scripts/docs.cli.mts"],
-    //   // we'll need to change this to --import in Node.JS v20.6.0 and up
-    //   "runtimeArgs": ["--loader", "tsx/esm"],
-    //   "cwd": "${workspaceRoot}/packages/mermaid",
-    //   "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
-    //   "smartStep": true,
-    //   "internalConsoleOptions": "openOnSessionStart"
-    // }
   ]
 }

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 style to built in latest release [\#499](https://github.com/knsv/mermaid/issues/499)
+- Mermaid neutral 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:20.12.2-alpine3.19@sha256:7a91aa397f2e2dfbfcdad2e2d72599f374e0b0172be1d86eeb73f1d33f36a4b2
+FROM node:22.12.0-alpine3.19@sha256:40dc4b415c17b85bea9be05314b4a753f45a4e1716bb31c01182e6c53d51a654
 
 USER 0:0
 

Pulling-from-remote.md

@@ -1,9 +0,0 @@
-Pulling from remote repo
-
-```
-git remote add os_repo git@github.com:mermaid-js/mermaid.git
-git pull os_repo main
-git pull os_repo
-git pull os_repo master
-git pull os_repo 5237-unified-layout-common-renderer
-```

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/AgrbSrBer3" 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/sKeNQX4Wtj" 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/AgrbSrBer3)
+[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/sKeNQX4Wtj)
 [![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="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>
+<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>
 
 ## 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,6 +253,34 @@ 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>]
 
 ```
@@ -423,7 +447,7 @@ For public sites, it can be precarious to retrieve text from users on the intern
 
 As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security.
 
-_Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
+_Unfortunately you cannot have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
 
 ## Reporting vulnerabilities
 

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/AgrbSrBer3" 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/sKeNQX4Wtj" 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/AgrbSrBer3)
+[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/sKeNQX4Wtj)
 [![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="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>
+<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>
 
 ## 关于 Mermaid
 
 <!-- <Main description>   -->
 
-Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
+Mermaid 是一个基于 JavaScript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
 
 > Doc-Rot 是 Mermaid 致力于解决的一个难题。
 

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';
+import coverage from '@cypress/code-coverage/task.js';
 import { defineConfig } from 'cypress';
-import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
+import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin.js';
 import cypressSplit from 'cypress-split';
 
 export default eyesPlugin(
@@ -23,16 +23,10 @@ export default eyesPlugin(
         });
         // copy any needed variables from process.env to config.env
         config.env.useAppli = process.env.USE_APPLI ? true : false;
-        // only use Argos on CI in the mermaid-js/mermaid repository
-        config.env.useArgos =
-          !!process.env.CI &&
-          process.env.GITHUB_REPOSITORY === 'mermaid-js/mermaid' &&
-          !!process.env.ARGOS_TOKEN;
+        config.env.useArgos = process.env.RUN_VISUAL_TEST === 'true';
 
         if (config.env.useArgos) {
-          registerArgosTask(on, config, {
-            token: 'fc3a35cf5200db928d65b2047861582d9444032b',
-          });
+          registerArgosTask(on, config);
         } else {
           addMatchImageSnapshotPlugin(on, config);
         }

cypress/integration/other/configuration.spec.js

@@ -69,7 +69,9 @@ describe('Configuration', () => {
           .and('include', 'url(#');
       });
     });
-    it('should handle arrowMarkerAbsolute explicitly set to "false" as false', () => {
+    // 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', () => {
       renderGraph(
         `graph TD
         A[Christmas] -->|Get money| B(Go shopping)
@@ -112,7 +114,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. 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` tag. 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, missspelling', () => {
+  describe('Interaction - security level other, misspelling', () => {
     beforeEach(() => {
       cy.visit('http://localhost:9000/click_security_other.html');
     });

cypress/integration/rendering/architecture.spec.ts

@@ -19,6 +19,25 @@ 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
@@ -172,7 +191,7 @@ describe.skip('architecture diagram', () => {
     );
   });
 
-  it('should render an architecture diagram with a resonable height', () => {
+  it('should render an architecture diagram with a reasonable 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 colums statement in sub-blocks', () => {
+  it('BL2: should handle columns statement in sub-blocks', () => {
     imgSnapshotTest(
       `block-beta
   id1["Hello"]
@@ -30,7 +30,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL3: should align block widths and handle colums statement in sub-blocks', () => {
+  it('BL3: should align block widths and handle columns statement in sub-blocks', () => {
     imgSnapshotTest(
       `block-beta
   block
@@ -46,7 +46,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL4: should align block widths and handle colums statements in deeper sub-blocks then 1 level', () => {
+  it('BL4: should align block widths and handle columns 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 colums statements in deeper sub-blocks then 1 level (alt)', () => {
+  it('BL5: should align block widths and handle columns 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 shold be equal in width', () => {
+  it('BL17: width alignment - blocks should 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
-        -Stirng Many
+        -String Many
         #int Members
         +And()
         -Many()
@@ -443,7 +443,7 @@ describe('Class diagram', () => {
     classDiagram
       class \`This\nTitle\nHas\nMany\nNewlines\` {
         +String Also
-        -Stirng Many
+        -String Many
         #int Members
         +And()
         -Many()
@@ -459,7 +459,7 @@ describe('Class diagram', () => {
       namespace testingNamespace {
       class \`This\nTitle\nHas\nMany\nNewlines\` {
         +String Also
-        -Stirng Many
+        -String Many
         #int Members
         +And()
         -Many()

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

@@ -0,0 +1,652 @@
+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 ±5%
-      expect(maxWidthValue).to.be.within(140 * 0.95, 140 * 1.05);
+      // 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);
     });
   });
 
@@ -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 ±5%
-      expect(width).to.be.within(140 * 0.95, 140 * 1.05);
+      // 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);
       // expect(svg).to.have.attr('height', '465');
       expect(svg).to.not.have.attr('style');
     });

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

@@ -208,13 +208,13 @@ describe('Flowchart ELK', () => {
       `flowchart-elk TB
   internet
   nat
-  routeur
+  router
   lb1
   lb2
   compute1
   compute2
   subgraph project
-  routeur
+  router
   nat
     subgraph subnet1
       compute1
@@ -225,8 +225,8 @@ describe('Flowchart ELK', () => {
       lb2
     end
   end
-  internet --> routeur
-  routeur --> subnet1 & subnet2
+  internet --> router
+  router --> 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 themable', () => {
+  it('63-elk: title on subgraphs should be themeable', () => {
     imgSnapshotTest(
       `
       %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%

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

@@ -0,0 +1,28 @@
+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(417 * 0.95, 417 * 1.05);
+      expect(maxWidthValue).to.be.within(440 * 0.95, 440 * 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(417 * 0.95, 417 * 1.05);
+      expect(width).to.be.within(440 * 0.95, 440 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -198,13 +198,13 @@ describe('Flowchart v2', () => {
       `flowchart TB
   internet
   nat
-  routeur
+  router
   lb1
   lb2
   compute1
   compute2
   subgraph project
-  routeur
+  router
   nat
     subgraph subnet1
       compute1
@@ -215,8 +215,8 @@ describe('Flowchart v2', () => {
       lb2
     end
   end
-  internet --> routeur
-  routeur --> subnet1 & subnet2
+  internet --> router
+  router --> 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 themable', () => {
+  it('63: title on subgraphs should be themeable', () => {
     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 possieble to render flowcharts with invisible edges', () => {
+  it('3192: It should be possible to render flowcharts with invisible edges', () => {
     imgSnapshotTest(
       `---
 title: Simple flowchart with invisible edges
@@ -1076,11 +1076,11 @@ end
       );
     });
   });
-  describe('New @ sytax for node metadata edge cases', () => {
+  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: "labe for n4"}   & n5@{ label: "labe for n5"}
+       n2["label for n2"] &   n4@{ label: "label for n4"}   & n5@{ label: "label for n5"}
         `,
         {}
       );
@@ -1088,7 +1088,7 @@ end
     it('should be possible to use @  syntax to add labels with trail spaces and &', () => {
       imgSnapshotTest(
         `flowchart TB
-       n2["label for n2"] &   n4@{ label: "labe for n4"}   & n5@{ label: "labe for n5"}   
+       n2["label for n2"] &   n4@{ label: "label for n4"}   & n5@{ label: "label for n5"}   
         `,
         {}
       );
@@ -1097,8 +1097,8 @@ end
       imgSnapshotTest(
         `flowchart TB
        n2["label for n2"]
-       n4@{ label: "labe for n4"}
-       n5@{ label: "labe for n5"}  
+       n4@{ label: "label for n4"}
+       n5@{ label: "label for n5"}  
         `,
         {}
       );

cypress/integration/rendering/flowchart.spec.js

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

cypress/integration/rendering/gantt.spec.js

@@ -117,7 +117,7 @@ describe('Gantt diagram', () => {
       {}
     );
   });
-  it('should FAIL redering a gantt chart for issue #1060 with invalid date', () => {
+  it('should FAIL rendering a gantt chart for issue #1060 with invalid date', () => {
     imgSnapshotTest(
       `
       gantt
@@ -358,6 +358,23 @@ 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(
       `
@@ -573,7 +590,7 @@ describe('Gantt diagram', () => {
       `
     );
   });
-  it('should render a gantt diagram exculding friday and saturday', () => {
+  it('should render a gantt diagram excluding friday and saturday', () => {
     imgSnapshotTest(
       `gantt
       title A Gantt Diagram
@@ -584,7 +601,7 @@ describe('Gantt diagram', () => {
       A task :a1, 2024-02-28, 10d`
     );
   });
-  it('should render a gantt diagram exculding saturday and sunday', () => {
+  it('should render a gantt diagram excluding saturday and sunday', () => {
     imgSnapshotTest(
       `gantt
       title A Gantt Diagram
@@ -671,7 +688,7 @@ describe('Gantt diagram', () => {
       title Gantt Digram
       dateFormat  YYYY-MM-DD
       section Section
-      ;A task with a semiclon           :a1, 2014-01-01, 30d
+      ;A task with a semicolon           :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,4 +63,199 @@ 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 assigments', () => {
+  it('6: should handle assignments', () => {
     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 som 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 some extra text here for testing purposes. And some more just for the extra flare.]
     id8[Design grammar]@{ assigned: 'knsv' }
   id9[Ready for deploy]
   id10[Ready for test]

cypress/integration/rendering/mindmap.spec.ts

@@ -146,7 +146,7 @@ root
       shouldHaveRoot
     );
   });
-  it('text shouhld wrap with icon', () => {
+  it('text should 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 setted', () => {
+  it('should render a pie diagram when textPosition is set', () => {
     imgSnapshotTest(
       `pie
         "Dogs": 50

cypress/integration/rendering/quadrantChart.spec.js

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

cypress/integration/rendering/radar.spec.js

@@ -0,0 +1,79 @@
+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

@@ -0,0 +1,703 @@
+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 a single line description
-    State2: This a a multi line description
+    State1: This a single line description
+    State2: This a multi line description
     State2: here comes the multi part
     [*] --> State1
     State1 --> State2
@@ -345,7 +345,7 @@ stateDiagram
       }
     );
   });
-  it('v2 width of compond state should grow with title if title is wider', () => {
+  it('v2 width of compound 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 leftie
-    note right of MyState : I am a rightie
+    note left of MyState : I am a lefty
+    note right of MyState : I am a righty
     `,
       {
         logLevel: 0,
@@ -460,7 +460,7 @@ stateDiagram-v2
     [*] --> State1
     State1 --> [*]
       `,
-      { state: { useMaxWidth: true }, look: 'classic' }
+      { state: { useMaxWidth: true } }
     );
     cy.get('svg').should((svg) => {
       expect(svg).to.have.attr('width', '100%');
@@ -482,7 +482,7 @@ stateDiagram-v2
     [*] --> State1
     State1 --> [*]
       `,
-      { state: { useMaxWidth: false }, look: 'classic' }
+      { state: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
       // const height = parseFloat(svg.attr('height'));
@@ -552,7 +552,7 @@ style AState fill:#636,border:1px solid red,color:white;
         { logLevel: 0, fontFamily: 'courier' }
       );
     });
-    it(' should let styles take preceedence over classes', () => {
+    it(' should let styles take precedence 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 stubgraphs', () => {
+    it(' should allow styles to take effect in subgraphs', () => {
       imgSnapshotTest(
         `
   stateDiagram

cypress/integration/rendering/stateDiagram.spec.js

@@ -129,8 +129,8 @@ describe('State diagram', () => {
     imgSnapshotTest(
       `
     stateDiagram
-    State1: This a a single line description
-    State2: This a a multi line description
+    State1: This a single line description
+    State2: This a multi line description
     State2: here comes the multi part
     [*] --> State1
     State1 --> State2
@@ -338,7 +338,7 @@ describe('State diagram', () => {
     [*] --> State1
     State1 --> [*]
       `,
-      { state: { useMaxWidth: true }, look: 'classic', theme: 'default' }
+      { state: { useMaxWidth: true } }
     );
     cy.get('svg').should((svg) => {
       expect(svg).to.have.attr('width', '100%');
@@ -361,7 +361,7 @@ describe('State diagram', () => {
     [*] --> State1
     State1 --> [*]
       `,
-      { state: { useMaxWidth: false }, look: 'classic', theme: 'default' }
+      { state: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
       // const height = parseFloat(svg.attr('height'));

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

cypress/integration/rendering/treemap.spec.ts

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

cypress/integration/rendering/xyChart.spec.js

@@ -179,6 +179,7 @@ describe('XY Chart', () => {
             axisLineWidth: 5
           chartOrientation: horizontal
           plotReservedSpacePercent: 60
+          showDataLabel: true
       ---
       xychart-beta
         title "Sales Revenue"
@@ -315,4 +316,516 @@ 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/ash.html

@@ -1,221 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
-      }
-
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-
-      /* tspan {
-              font-size: 6px !important;
-            } */
-    </style>
-  </head>
-
-  <body>
-    <pre id="diagram" class="mermaid">
-flowchart
-   node
-   rounded(rounded)
-   id1([This is the text in the box])
-   id2((circle))
-   id3(((double circle)))
-   id4>Asymetrical]
-   id5{This is the text in the box}
-   id6{{This is the text in the box}}
-   id7[/This is the text in the box/]
-   id8[\This is the text in the box\]
-   A[/Christmas\]
-   B[\Christmas/]
-   sub[[subroutine]]
-   db[(Database)]
-    
-
-      </pre
-    >
-    <pre id="diagram" class="mermaid">
----
-config: 
-      theme: default
-      look: classic
----
-flowchart
-   node
-   rounded(rounded)
-   id1([This is the text in the box])
-   id2((circle))
-   id3(((double circle)))
-   id4>Asymetrical]
-   id5{This is the text in the box}
-   id6{{This is the text in the box}}
-   id7[/This is the text in the box/]
-   id8[\This is the text in the box\]
-   B[/Christmas\]
-   sub[[subroutine]]
-   db[(Database)]
-    
-
-            
-
-      </pre
-    >
-    <pre id="diagram" class="mermaid">
-stateDiagram
-    [*] --> Active
-    Active --> Inactive
-    Inactive --> Active
-    Active --> [*]
-    </pre>
-
-    <pre id="diagram" class="mermaid2">
-flowchart
-   a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
-        a_a --> c --> d_d --> c_c
-        classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
-        class a_a apa;
-        click a_a "http://www.aftonbladet.se" "bookmark"
-        click c_c callback "new tooltip"
-      </pre
-    >
-    <pre id="diagram2" class="mermaid2">
-flowchart LR
-    id1(Start)-->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-
-      
-    </pre>
-
-    <pre id="diagram3" class="mermaid2">
-      flowchart LR
-    A:::foo & B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    classDef ash color:red
-    class C ash
-    style C stroke:#00f, fill:black
-
-    </pre>
-
-    <pre id="diagram4" class="mermaid2">
-      stateDiagram
-    A:::foo 
-    B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    style C stroke:#00f, fill:black, color:white
-
-    </pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
-      };
-      mermaid.initialize({
-        theme: 'neo',
-        look: 'neo',
-        // handdrawnSeed: 12,
-        // look: 'handdrawn',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        flowchart: { titleTopMargin: 10 },
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        fontFamily: 'arial',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        fontSize: 12,
-        logLevel: 0,
-        securityLevel: 'loose',
-      });
-      function callback() {
-        alert('It worked');
-      }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-    </script>
-  </body>
-</html>

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.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
@@ -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 big big big tasks
-          I am not so big tasks
+          I am a very, very big task
+          I am not so big task
     </pre>
     <pre id="diagram" class="mermaid">
  timeline
         title MermaidChart 2023 Timeline
         section 2023 Q1 <br> Release Personal Tier
-          Buttet 1 : sub-point 1a : sub-point 1b
+          Bullet 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
-          Buttet 3 : sub-point <br> 3a : sub-point 3b
+          Bullet 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 Broze Age
+        section Bronze 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.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.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
-        +withdrawl(amount) int
+        +withdrawal(amount) int
        }
        cssClass "BankAccount" customCss
 
@@ -56,7 +56,7 @@ classE o-- classF : aggregation
           +String owner
           +BigDecimal balance
           +deposit(amount) bool
-          +withdrawl(amount) int
+          +withdrawal(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: 'strct', logLevel: 1 });
+      mermaid.initialize({ startOnLoad: true, securityLevel: 'strict_', 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.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.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 preivously
+        sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had previously
         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 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
+      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
     </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.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.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 {
+      svg:not(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/4.7.0/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"

cypress/platform/flowchart-state.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/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.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.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.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.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
-        +withdrawl(amount) int
+        +withdrawal(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.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.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.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.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/4.7.0/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
@@ -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-dark.html

@@ -1,164 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        background: #333;
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
-      }
-
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-
-      /* tspan {
-              font-size: 6px !important;
-            } */
-    </style>
-  </head>
-
-  <body>
-    <pre id="diagram" class="mermaid">
-flowchart
-      A --> B & C
-      subgraph apa
-        D --> E
-      end
-      </pre
-    >
-    <pre id="diagram2" class="mermaid2">
-flowchart LR
-    id1(Start)-->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-
-
-    </pre>
-
-    <pre id="diagram3" class="mermaid2">
-      flowchart LR
-    A:::foo & B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    classDef ash color:red
-    class C ash
-    style C stroke:#00f, fill:black
-
-    </pre>
-
-    <pre id="diagram4" class="mermaid2">
-      stateDiagram
-    A:::foo
-    B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    style C stroke:#00f, fill:black, color:white
-
-    </pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
-      };
-      mermaid.initialize({
-        theme: 'neo-dark',
-        // handdrawnSeed: 12,
-        look: 'neo',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        flowchart: { titleTopMargin: 10 },
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        fontFamily: 'arial',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        fontSize: 12,
-        logLevel: 0,
-        securityLevel: 'loose',
-      });
-      function callback() {
-        alert('It worked');
-      }
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-    </script>
-  </body>
-</html>

cypress/platform/knsv-pos.html

@@ -1,206 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
-      }
-
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-
-      /* tspan {
-              font-size: 6px !important;
-            } */
-    </style>
-  </head>
-
-  <body>
-    <pre id="diagram" class="mermaid"></pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      mermaid.initialize({
-        startOnLoad: false,
-        // look: 'handdrawn',
-        // layout: 'elk',
-        fontFamily: 'Kalam',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        flowchart: {
-          // curve: 'cardinal',
-          // edgeDebug: true,
-        },
-        logLevel: 0,
-      });
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-      let code = `---
-config:
-  state:
-    curve: line
----
-      stateDiagram
-        S:S
-        T:T
-        U:U
-        state Z {
-          state X {
-            Y:Ypsilon
-          }
-        }
-        A
-
-        S --> T: angrepp
-        T --> U
-        T --> V
-      C
-      D
-      E
-
-              `;
-      code = `
-flowchart TB
-    n3["Untitled Node"] --> n5["Untitled Node"] & n6["Untitled Node"] & n7["Untitled Node"] & n8["Untitled Node"] & n9["Untitled Node"]
-      `;
-
-      let positions = {
-        nodes: {
-          S: { x: 0, y: 0 },
-          T: { x: 100, y: 100, width: 100, height: 100 },
-          U: { x: 250, y: 260 },
-          V: { x: 300, y: 120 },
-          Z: { x: 300, y: 10, width: 160, height: 100 },
-          X: { x: 300, y: 20, width: 80, height: 60 },
-          Y: { x: 300, y: 30, width: 50, height: 20 },
-          A: { x: 300, y: 75, width: 20, height: 20 },
-        },
-        edges: {
-          edge0: {
-            points: [
-              { x: 0, y: 0 },
-              { x: 50, y: 0 },
-              { x: 100, y: 100 },
-            ],
-          },
-          edge1: {
-            // points: [
-            //   { x: 100, y: 100 },
-            //   { x: 200, y: 200 },
-            // ],
-            points: [
-              { x: 100, y: 100 },
-              { x: 150, y: 120 },
-              { x: 190.19453144073486, y: 120 },
-              { x: 190.19453144073486, y: 152.1556251525879 },
-              { x: 250, y: 152.1556251525879 },
-              { x: 250, y: 160 },
-            ],
-          },
-          edge2: {
-            points: [
-              { x: 100, y: 100 },
-              { x: 175, y: 80 },
-              { x: 200, y: 120 },
-              { x: 300, y: 100 },
-            ],
-          },
-        },
-      };
-
-      positions = JSON.parse(
-        '{"nodes":{"n3":{"x":360.885009765625,"y":7.677405834197998,"width":120.59375,"height":45.00000762939453},"n5":{"x":546.1309814453125,"y":190.24496459960938,"width":120.59375,"height":45},"n6":{"x":694.6719360351562,"y":167.00001525878906,"width":120.59375,"height":45},"n7":{"x":72.29684925079346,"y":167.00001525878906,"width":120.59370994567871,"height":45},"n8":{"x":250.27700805664062,"y":183.1090545654297,"width":120.59375,"height":45},"n9":{"x":393.2580871582031,"y":197.45834350585938,"width":120.59375,"height":45}},"edges":{"L_n3_n5_0":{"points":[{"x":383.71510673157036,"y":30.177409648895264},{"x":383.71510673157036,"y":98.96118712425232},{"x":523.300888350029,"y":98.96118712425232},{"x":523.300888350029,"y":167.74496459960938}],"start":"n3","end":"n5"},"L_n3_n6_1":{"points":[{"x":408.02337350122014,"y":30.177409648895264},{"x":408.02337350122014,"y":87.33871245384216},{"x":647.533580291497,"y":87.33871245384216},{"x":647.533580291497,"y":144.50001525878906}],"start":"n3","end":"n6"},"L_n3_n7_2":{"points":[{"x":320.12974762228504,"y":30.177409648895264},{"x":270.12974762228504,"y":87.33871245384216},{"x":113.05210448440184,"y":87.33871245384216},{"x":113.05210448440184,"y":144.50001525878906}],"start":"n3","end":"n7"},"L_n3_n8_3":{"points":[{"x":346.6989693425486,"y":30.177409648895264},{"x":346.6989693425486,"y":95.39323210716248},{"x":264.4630460745863,"y":95.39323210716248},{"x":264.4630460745863,"y":160.6090545654297}],"start":"n3","end":"n8"},"L_n3_n9_4":{"points":[{"x":364.7230894682698,"y":30.177409648895264},{"x":364.7230894682698,"y":102.56787657737732},{"x":389.42000810627434,"y":102.56787657737732},{"x":389.42000810627434,"y":174.95834350585938}],"start":"n3","end":"n9"}}}'
-      );
-
-      // console.log('positions:', positions);
-      const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions);
-      // if (window?.calcIntersections2) {
-      //   const int = await calcIntersections2(
-      //     { id: 'a', shape: 'rect', x: 100, y: 100, width: 100, height: 100 },
-      //     { id: 'a', shape: 'rect', x: 300, y: 100, width: 100, height: 100 }
-      //   );
-      //   console.log('Intersections', int);
-      // } else {
-      //   console.error('calcIntersections not found');
-      // }
-      // console.log(JSON.stringify(positions));
-      const elem = document.querySelector('#diagram');
-      elem.innerHTML = svg;
-    </script>
-  </body>
-</html>

cypress/platform/knsv-recursive.html

@@ -1,272 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      .recursive-500 {
-        font-family: 'Recursive', serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-      }
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        /* font-family: 'Arial'; */
-        font-family: 'Recursive', serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-        /* color: white; */
-        /* font-size: 18px !important; */
-      }
-      .gridify.tiny {
-        background-image: linear-gradient(
-            transparent 11px,
-            rgba(220, 220, 200, 0.8) 12px,
-            transparent 12px
-          ),
-          linear-gradient(90deg, transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px);
-        background-size:
-          100% 12px,
-          12px 100%;
-      }
-
-      .gridify.dots {
-        background-image: radial-gradient(
-          circle at center,
-          rgba(220, 220, 200, 0.8) 1px,
-          transparent 1px
-        );
-        background-size: 24px 24px;
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        font-size: 16px !important;
-        font-family: 'Recursive', serif;
-        font-optical-sizing: auto;
-        font-weight: 500;
-        font-style: normal;
-        font-variation-settings:
-          'slnt' 0,
-          'CASL' 0,
-          'CRSV' 0.5,
-          'MONO' 0;
-      }
-
-      pre {
-        width: 100%;
-        /*box-shadow: 4px 4px 0px 0px #0000000F;*/
-      }
-    </style>
-  </head>
-
-  <body class="gridify dots">
-    <p class="mb-20">Test Diagram</p>
-    <div class="w-full h-64">
-      <pre id="diagram4" class="mermaid">
----
-config:
-  theme: neo
-  layout: dagre
----
-flowchart TD
-    A{"Diamond"} --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
-    n1 --x n4["Rounded"]
-    n2 --o n5["Hexagon"]
-    n3 --> n6["Parallelogram"]
-    n5 o--o n7["Trapezoid"]
-    n4 x--x n8["Lean Right"]
-    n6 <--> n9(("Circle"))
-    n8 --> n10["Rose"]
-    n7 --> n11["Pine"]
-    n9 --> n12["Peach"]
-    n2@{ shape: rounded}
-    n4@{ shape: rounded}
-    n5@{ shape: hex}
-    n6@{ shape: lean-l}
-    n7@{ shape: trap-b}
-    n8@{ shape: lean-r}
-
-     n10:::Rose
-     n11:::Pine
-     n12:::Peach
-    classDef Rose stroke-width:1px, stroke-dasharray:none, stroke:#FF5978, fill:#FFDFE5, color:#8E2236
-    classDef Pine stroke-width:1px, stroke-dasharray:none, stroke:#254336, fill:#27654A, color:#FFFFFF
-    classDef Peach stroke-width:1px, stroke-dasharray:none, stroke:#FBB35A, fill:#FFEFDB, color:#8F632D
-    n10 --x End
-    n11 --x End
-    n12 --x End
-
-    </pre
-      >
-      <pre id="diagram4" class="mermaid">
----
-config:
-  look: classic
-  theme: forest
-  layout: dagre
----
-flowchart TD
-    A{"Diamond"} --- n1["Rectangle"] & n2["Rounded"] & n3(["Stadium"])
-    n1 --x n4["Rounded"]
-    n2 --o n5["Hexagon"]
-    n3 --> n6["Parallelogram"]
-    n5 o--o n7["Trapezoid"]
-    n4 x--x n8["Lean Right"]
-    n6 <--> n9(("Circle"))
-    n8 --> n10["Rose"]
-    n7 --> n11["Pine"]
-    n9 --> n12["Peach"]
-    n2@{ shape: rounded}
-    n4@{ shape: rounded}
-    n5@{ shape: hex}
-    n6@{ shape: lean-l}
-    n7@{ shape: trap-b}
-    n8@{ shape: lean-r}
-
-     n10:::Rose
-     n11:::Pine
-     n12:::Peach
-    classDef Rose stroke-width:1px, stroke-dasharray:none, stroke:#FF5978, fill:#FFDFE5, color:#8E2236
-    classDef Pine stroke-width:1px, stroke-dasharray:none, stroke:#254336, fill:#27654A, color:#FFFFFF
-    classDef Peach stroke-width:1px, stroke-dasharray:none, stroke:#FBB35A, fill:#FFEFDB, color:#8F632D
-    n10 --x End
-    n11 --x End
-    n12 --x End
-
-    </pre
-      >
-    </div>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-
-      const staticBellIconPack = {
-        prefix: 'fa6-regular',
-        icons: {
-          bell: {
-            body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
-            width: 448,
-          },
-        },
-        width: 512,
-        height: 512,
-      };
-
-      mermaid.registerIconPacks([
-        {
-          name: 'logos',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
-        },
-        {
-          name: 'fa',
-          loader: () => staticBellIconPack,
-        },
-      ]);
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
-      };
-      function callback() {
-        alert('It worked');
-      }
-      await mermaid.initialize({
-        startOnLoad: false,
-        theme: 'redux',
-        // theme: 'default',
-        // theme: 'forest',
-        // handDrawnSeed: 12,
-        look: 'neo',
-        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        // layout: 'fixed',
-        // htmlLabels: false,
-        flowchart: { titleTopMargin: 10 },
-
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        fontFamily: 'Recursive',
-        sequence: {
-          actorFontFamily: 'courier',
-          noteFontFamily: 'courier',
-          messageFontFamily: 'courier',
-        },
-        kanban: {
-          htmlLabels: false,
-        },
-        fontSize: 16,
-        logLevel: 0,
-        securityLevel: 'loose',
-        callback,
-      });
-      // setTimeout(() => {
-      mermaid.init(undefined, document.querySelectorAll('.mermaid'));
-      // }, 1000);
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-    </script>
-  </body>
-</html>

cypress/platform/knsv-reset.html

@@ -1,306 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        font-family: 'Arial';
-        /* font-size: 18px !important; */
-      }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
-      }
-
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-
-      /* tspan {
-              font-size: 6px !important;
-            } */
-    </style>
-  </head>
-
-  <body>
-    <pre id="diagram" class="mermaid"></pre>
-    <pre id="diagram2" class="mermaid"></pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-
-      mermaid.parseError = function (err, hash) {
-        console.error('In parse error:');
-        console.error(err);
-      };
-      let code = `
-      stateDiagram
-        S:S
-        T:T
-        U:U
-        state Z {
-          state X {
-            Y:Ypsilon
-          }
-        }
-        A
-
-        S --> T: angrepp
-        S --> T: angrepp
-        T --> U
-        Y --> V
-      C
-      D
-      E
-
-              `;
-      code = `
-flowchart TB
-    c1-->a2
-    subgraph one
-    a1-->a2
-    end
-    subgraph two
-    b1-->b2
-    end
-    subgraph three
-    c1-->c2
-    end
-
-              `;
-      //       code = `
-      // flowchart BT
-      // A
-      //     subgraph one
-      //     a1 --> a2
-      //     end
-      //     subgraph two
-      //       a3
-      //     end
-
-      //               `;
-      //       code = `
-      // flowchart TB
-      //     subgraph one
-      //     a1-->a2
-      //     end`;
-      // let positions = JSON.parse(
-      //   '{"nodes":{"S":{"x":30.78125,"y":43.5},"Y":{"x":127.94140625,"y":50}},"edges":{}}'
-      // );
-
-      function exctractPositions(svg) {
-        const positions = { nodes: {}, edges: {} };
-
-        // Extract the viewbox paddings - TOSDO: update in collab
-        const viewBox = svg.getAttribute('viewBox').split(' ');
-        const viewBoxX = parseFloat(viewBox[0]);
-        const viewBoxY = parseFloat(viewBox[1]);
-        // console.log('viewBox:', viewBoxX, viewBoxY);
-        svg.querySelectorAll('[data-et="node"]').forEach((node) => {
-          if (node.tagName === 'g') {
-            // console.log('node:', node);
-            const id = node.dataset.id;
-            const bbox = node.getBBox();
-            const transform = node.getAttribute('transform');
-            const x = parseFloat(transform.split(',')[0].split('(')[1]);
-            const y = parseFloat(transform.split(',')[1].split(')')[0]);
-
-            // Get the bounding rectangle of the element
-            const rect = node.getBoundingClientRect();
-
-            // Get the absolute position relative to the document
-            const absoluteX = rect.left + window.pageXOffset + viewBoxX;
-            const absoluteY = rect.top + window.pageYOffset + viewBoxY;
-
-            positions.nodes[id] = {
-              x: absoluteX + rect.width / 2,
-              y: absoluteY + rect.height / 2,
-              width: rect.width,
-              height: rect.height,
-            };
-          }
-        });
-        svg.querySelectorAll('[data-et="cluster"]').forEach((node) => {
-          // console.log('cluster:', node);
-          if (node.tagName === 'g') {
-            const id = node.dataset.id;
-            // console.log('cluster:', node);
-
-            const transform = node.getAttribute('transform');
-            const rect = node.getBoundingClientRect();
-
-            // Get the absolute position relative to the document
-            const absoluteX = rect.left + window.pageXOffset + viewBoxX;
-            const absoluteY = rect.top + window.pageYOffset + viewBoxY;
-
-            positions.nodes[id] = {
-              x: absoluteX + rect.width / 2,
-              y: absoluteY + rect.height / 2,
-              width: rect.width,
-              height: rect.height,
-            };
-          }
-        });
-        svg.querySelectorAll('[data-et="edge"]').forEach((edge) => {
-          // if (node.tagName === 'g') {
-          const path = edge.getBoundingClientRect();
-
-          // Get the absolute position relative to the document
-          const absoluteX = path.left + window.pageXOffset + viewBoxX;
-          const absoluteY = path.top + window.pageYOffset + viewBoxY;
-          console.log(
-            'absoluteX:',
-            absoluteX,
-            'absoluteY:',
-            absoluteY,
-            'offset',
-            window.pageXOffset
-          );
-          const id = edge.dataset.id;
-          const points = JSON.parse(atob(edge.dataset.points));
-          console.log('edge:', points, absoluteX, absoluteY);
-          let minX = 10000;
-          let minY = 10000;
-          points.forEach((point) => {
-            if (point.x < minX) {
-              minX = point.x;
-            }
-            if (point.y < minY) {
-              minY = point.y;
-            }
-          });
-          let dx = absoluteX - minX;
-          let dy = absoluteY - minY;
-          if (dx < 1) {
-            dx = 0;
-          }
-          if (dy < 1) {
-            dy = 0;
-          }
-          positions.edges[id] = {
-            points: points.map((point) => {
-              console.log('point:', point.y, absoluteY);
-              return {
-                x: point.x + dx,
-                y: point.y + dy,
-              };
-            }),
-          };
-          // }
-        });
-        return positions;
-      }
-
-      const mode = 'reset';
-      if (mode === 'reset') {
-        mermaid.initialize({
-          startOnLoad: false,
-          layout: 'elk',
-          fontFamily: 'Kalam',
-          sequence: {
-            actorFontFamily: 'courier',
-            noteFontFamily: 'courier',
-            messageFontFamily: 'courier',
-          },
-          logLevel: 5,
-        });
-        const { svg } = await mermaid.render('the-id-of-the-svg', code);
-        const elem = document.querySelector('#diagram');
-        elem.innerHTML = svg;
-        elem.classList.remove('mermaid');
-        const positions = exctractPositions(elem.firstChild);
-        // console.log('Positions:', JSON.stringify(positions));
-        const { svg: svg2 } = await mermaid.render(
-          'the-id-of-the-svg2',
-          '---\n  config:\n    layout: fixed\n---' + code,
-          undefined,
-          positions
-        );
-        // console.log('svg2', svg2);
-        const elem2 = document.querySelector('#diagram2');
-        elem2.innerHTML = svg2;
-      } else {
-        mermaid.initialize({
-          startOnLoad: false,
-          // look: 'handdrawn',
-          layout: 'fixed',
-          fontFamily: 'Kalam',
-          sequence: {
-            actorFontFamily: 'courier',
-            noteFontFamily: 'courier',
-            messageFontFamily: 'courier',
-          },
-          logLevel: 0,
-        });
-        const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, positions);
-
-        // console.log(JSON.stringify(positions));
-        const elem = document.querySelector('#diagram');
-        elem.innerHTML = svg;
-      }
-    </script>
-  </body>
-</html>

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.5.2/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"

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/4.7.0/css/font-awesome.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
     />
     <link
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
       rel="stylesheet"
     />
     <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
       rel="stylesheet"
     />
     <link
@@ -32,8 +32,26 @@
       href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
       rel="stylesheet"
     />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
+      rel="stylesheet"
+    />
 
     <style>
+      .recursive-mermaid {
+        font-family: 'Recursive', sans-serif;
+        font-optical-sizing: auto;
+        font-weight: 500;
+        font-style: normal;
+        font-variation-settings:
+          'slnt' 0,
+          'CASL' 0,
+          'CRSV' 0.5,
+          'MONO' 0;
+      }
+
       body {
         /* background: rgb(221, 208, 208); */
         /* background: #333; */
@@ -45,7 +63,9 @@
       h1 {
         color: grey;
       }
-
+      .mermaid {
+        border: 1px solid red;
+      }
       .mermaid2 {
         display: none;
       }
@@ -78,87 +98,127 @@
         font-family: monospace;
         font-size: 72px;
       }
+
       pre {
         width: 100%;
       }
+
+      .class2 {
+        fill: red;
+        fill-opacity: 1;
+      }
+
       /* 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">
+treemap
+"Section 1"
+    "Leaf 1.1": 12
+    "Section 1.2":::class1
+      "Leaf 1.2.1": 12
+"Section 2"
+    "Leaf 2.1": 20:::class1
+    "Leaf 2.2": 25
+    "Leaf 2.3": 12
+
+classDef class1   fill:red,color:blue,stroke:#FFD600;
+
+
+</pre
+    >
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
-  look: classic
-  theme: forest
-  layout: dagre
+  treemap:
+    valueFormat: '$0,0'
 ---
-flowchart LR
-    A["A"] --> C
-    B("B B B B B") --> C[/"C C C C C"/]
-    C@{ shape: circle }
-    %%C@{ shape: question }
-    C@{ shape: stadium }
-    </pre>
+treemap
+"Budget"
+    "Operations"
+        "Salaries": 7000
+        "Equipment": 2000
+        "Supplies": 1000
+    "Marketing"
+        "Advertising": 4000
+        "Events": 1000
+
+</pre
+    >
     <pre id="diagram4" class="mermaid">
----
-config:
-  look: classic
-  layout: elk
----
-flowchart LR
-    n1["n1"] --- C
-    B("Continue") --> C[/"Evaluate"/]
-    C -- One --> D["Option 1"]
-    C -- Two --> E["Option 2"]
-    C -- Three --> F["fa:fa-car Option 3"]
-    C@{ shape: db }
+    treemap
+      title Accessible Treemap Title
+      "Category A"
+          "Item A1": 10
+          "Item A2": 20
+      "Category B"
+          "Item B1": 15
+          "Item B2": 25
     </pre>
     <pre id="diagram4" class="mermaid2">
----
-config:
-  layout: elk
----
-flowchart LR
- %% subgraph s1["Untitled subgraph"]
-        C{"Evaluate"}
- %% end
-
-    B --> C
-    </pre>
-    <pre id="diagram4" class="mermaid2">
----
-config:
-  look: neo
-  layout: elk
----
-flowchart LR
-%% A ==> B
-%% A2 --> B2
-      D --> I((I the Circle))
-            D --> I
-    </pre>
-    <pre id="diagram4" class="mermaid2">
----
-config:
-  layout: elk
----
       flowchart LR
-      subgraph S2
-      subgraph s1["APA"]
-      D{"Use the editor"}
-      end
-
-
-      D -- Mermaid js --> I(("fa:fa-code Text"))
-            D --> I
-           D --> E --> I
-
-      end
+        AB["apa@apa@"] --> B(("`apa@apa`"))
     </pre>
     <pre id="diagram4" class="mermaid2">
+      flowchart
+        D(("for D"))
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+      flowchart LR
+        A e1@==> B
+        e1@{ animate: true}
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+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>
+
+    <pre id="diagram4" class="mermaid2">
+
+info    </pre
+    >
+    <pre id="diagram4" class="mermaid2">
 ---
 config:
   layout: elk
@@ -395,7 +455,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 som 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 some 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]
@@ -443,10 +503,13 @@ kanban
       window.callback = function () {
         alert('A callback was triggered');
       };
-      mermaid.initialize({
-        // theme: 'base',
+      function callback() {
+        alert('It worked');
+      }
+      await mermaid.initialize({
+        // theme: 'forest',
         // theme: 'default',
-        theme: 'forest',
+        // theme: 'forest',
         // handDrawnSeed: 12,
         // look: 'handDrawn',
         // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
@@ -454,10 +517,8 @@ kanban
         // layout: 'elk',
         // layout: 'fixed',
         // htmlLabels: false,
-        flowchart: { titleTopMargin: 10, useMaxWidth: false },
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
+        flowchart: { titleTopMargin: 10 },
+        fontFamily: "'Recursive', sans-serif",
         sequence: {
           actorFontFamily: 'courier',
           noteFontFamily: 'courier',
@@ -469,10 +530,9 @@ 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/knsv3.html

@@ -1,173 +1,103 @@
-<html>
+<!doctype html>
+<html lang="en">
   <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mindmap Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
     <style>
-      body {
-        /* background: rgb(221, 208, 208); */
-        /* background: #333; */
-        font-family: 'Arial';
-        /* color: white; */
-        /* font-size: 18px !important; */
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
       }
-
-      h1 {
-        color: grey;
-      }
-
-      .mermaid2 {
-        display: none;
-      }
-
-      .mermaid svg {
-        /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
-      }
-
-      .malware {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        height: 150px;
-        background: red;
-        color: black;
-        display: flex;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-family: monospace;
-        font-size: 72px;
-      }
-      pre {
-        width: 100%;
-      }
-      /* tspan {
-              font-size: 6px !important;
-            } */
     </style>
   </head>
 
   <body>
-    <div class="flex gap-4">
-      <pre id="diagram4" class="mermaid">
----
-config:
-  look: classic
-  theme: forest
-  layout: elk
----
-flowchart LR
-    n1["n1"] --> C
-    n2("n2") --> C
-    C@{ shape: circle }
-    </pre
-      >
-      <pre id="diagram4" class="mermaid">
----
-config:
-  look: neo
-  theme: redux
-  layout: elk
----
-flowchart LR
-    n1["n1"] --> C
-    n2("n2") --> C
-    C@{ shape: circle }
-    </pre
-      >
-      <pre id="diagram4" class="mermaid">
----
-config:
-  look: handDrawn
-  theme: forest
-  layout: elk
----
-flowchart LR
-    n1["n1"] --> C
-    n2("n2") --> C
-    C@{ shape: circle }
-    </pre
-      >
-    </div>
+    <h1>Mindmap diagram demo</h1>
+    <pre class="mermaid">
+        mindmap
+        root
+            child1((Circle))
+                grandchild 1
+                grandchild 2
+            child2(Round rectangle)
+                grandchild 3
+                grandchild 4
+            child3[Square]
+                grandchild 5
+                ::icon(mdi mdi-fire)
+                gc6((grand<br/>child 6))
+                ::icon(mdi mdi-fire)
+                gc7((grand<br/>grand<br/>child 8))
+    </pre>
+
+    <h2>Mindmap with root wrapping text and a shape</h2>
+    <pre class="mermaid">
+        mindmap
+            root[A root with a long text that wraps to keep the node size in check]
+    </pre>
+
     <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
+      // import mermaid from './mermaid.esm.mjs';
+      import mermaid from '../../packages/mermaid/dist/mermaid.esm.mjs';
+      // import mermaidMindmap from './mermaid-mindmap.esm.mjs';
 
-      const staticBellIconPack = {
-        prefix: 'fa6-regular',
-        icons: {
-          bell: {
-            body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
-            width: 448,
-          },
-        },
-        width: 512,
-        height: 512,
-      };
+      // import mermaidMindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9.3.0/+esm';
+      // await mermaid.registerExternalDiagrams([mermaidMindmap]);
 
-      mermaid.registerIconPacks([
-        {
-          name: 'logos',
-          loader: () =>
-            fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
-        },
-        {
-          name: 'fa',
-          loader: () => staticBellIconPack,
-        },
-      ]);
-      mermaid.registerLayoutLoaders(layouts);
+      const ALLOWED_TAGS = [
+        'a',
+        'b',
+        'blockquote',
+        'br',
+        'dd',
+        'div',
+        'dl',
+        'dt',
+        'em',
+        'foreignObject',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'h7',
+        'h8',
+        'hr',
+        'i',
+        'li',
+        'ul',
+        'ol',
+        'p',
+        'pre',
+        'span',
+        'strike',
+        'strong',
+        'table',
+        'tbody',
+        'td',
+        'tfoot',
+        'th',
+        'thead',
+        'tr',
+      ];
       mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      window.callback = function () {
-        alert('A callback was triggered');
+        // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        flowchart: { titleTopMargin: 10, useMaxWidth: false },
-        fontSize: 12,
+        theme: 'base',
+        startOnLoad: true,
         logLevel: 0,
-        securityLevel: 'loose',
+        flowchart: {
+          useMaxWidth: false,
+          htmlLabels: true,
+        },
+        gantt: {
+          useMaxWidth: false,
+        },
+        useMaxWidth: false,
       });
       function callback() {
         alert('It worked');

cypress/platform/min-size-tester.html

@@ -1,171 +0,0 @@
-<html>
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
-    <style>
-      body {
-        font-family: 'Arial';
-        background-color: #333;
-      }
-
-      h3 {
-        color: white;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div class="flex w-full">
-      <div id="diagram-fixed"></div>
-      <div id="diagram-normal"></div>
-    </div>
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
-      mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
-      };
-      mermaid.initialize({
-        startOnLoad: false,
-        //look: 'handdrawn',
-        // layout: 'fixed',
-        theme: 'neo-dark',
-        //layout: 'elk',
-        fontFamily: 'Kalam',
-        logLevel: 1,
-      });
-
-      // let shape = 'rect';    // Done
-      //let shape = 'rounded';  // Done
-      //let shape = 'stadium';  // Done
-      // let shape = 'fr-rect'; // Done
-      // let shape = 'cyl'; // Done
-      //let shape = 'circle'; // Done
-      // let shape = 'odd'; // Done
-      // let shape = 'diam'; //Done
-      // let shape = 'hex'; // Done
-      // let shape = 'lean-r'; // Done
-      // let shape = 'lean-l'; // Done
-      // let shape = 'trap-b'; // Done
-      // let shape = 'trap-t'; // Done
-      // let shape = 'dbl-circ'; // Done
-      // let shape = 'text'; // Done
-      // let shape = 'notch-rect'; // Done
-      // let shape = 'lin-rect'; // Done
-      //let shape = 'sm-circ'; // Done
-      // let shape = 'fr-circ'; //Done
-      //let shape = 'fork'; // Done
-      //let shape = 'hourglass'; //Done
-      // let shape = 'bolt'; //Done
-      // let shape = 'doc'; // Done
-      // let shape = 'delay'; // Done
-      // let shape = 'h-cyl'; // Done
-      // let shape = 'lin-cyl'; // Done
-      // let shape = 'curv-trap'; // Done
-      // let shape = 'div-rect'; // Done
-      //let shape = 'tri'; // Done
-      // let shape = 'win-pane'; //Done
-      // let shape = 'f-circ'; // Done
-      // let shape = 'lin-doc'; // Done
-      // let shape = 'notch-pent'; // Done
-      // let shape = 'flip-tri'; // Done
-      // let shape = 'sl-rect'; // Done
-      // let shape = 'cross-circ'; // Done
-      // let shape = 'bow-rect'; // Done
-      // let shape = 'st-rect'; // Done
-
-      // let shape = 'flag';
-
-      // let shape = 'docs';
-      // let shape = 'brace';
-      // let shape = 'brace-r';
-      // let shape = 'braces';
-      // let shape = 'tag-doc';
-
-      let configFixed = `---
-config:
-  layout: fixed
----
-      `;
-      let code = `flowchart TB
-                %% n80["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
-                %% n80@{ shape: '${shape}'}
-                n81@{ label: "Ashish", shape: '${shape}'}
-                %%n82@{ label: "n82", shape: '${shape}'}
-                %%n83@{ label: "n83", shape: '${shape}'}
-                `;
-
-      let positions = {
-        edges: {},
-        nodes: {
-          n81: {
-            x: 0,
-            y: 10,
-            width: 107.7,
-            height: 65,
-          },
-          n80: {
-            x: -400,
-            y: 10,
-            width: 1,
-            height: 1,
-          },
-          n82: {
-            x: 0,
-            y: 110,
-          },
-          n83: {
-            x: 80,
-            y: 10,
-          },
-          n84: {
-            x: 1200,
-            y: 10,
-            width: 300,
-            height: 200,
-          },
-        },
-      };
-      console.log(configFixed + code);
-      const { svg } = await mermaid.render(
-        'the-id-of-the-svg-1',
-        configFixed + code,
-        undefined,
-        positions
-      );
-      const elem = document.querySelector('#diagram-fixed');
-      elem.innerHTML = svg;
-      const { svg: svg2 } = await mermaid.render('the-id-of-the-svg-2', code, undefined, positions);
-      const elem2 = document.querySelector('#diagram-normal');
-      elem2.innerHTML = svg2;
-    </script>
-  </body>
-</html>

cypress/platform/per.html

@@ -4,60 +4,28 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
-      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
     />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
-      rel="stylesheet"
-    />
-
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        /* background: #333; */
+        /* background:#333; */
         font-family: 'Arial';
         /* font-size: 18px !important; */
       }
-
       h1 {
         color: grey;
       }
-
       .mermaid2 {
         display: none;
       }
-
       .mermaid svg {
         /* font-size: 18px !important; */
-
-        /* background-color: #efefef;
-        background-image: radial-gradient(#fff 51%, transparent 91%),
-          radial-gradient(#fff 51%, transparent 91%);
-        background-size: 20px 20px;
-        background-position:
-          0 0,
-          10px 10px;
-        background-repeat: repeat; */
       }
-
       .malware {
         position: fixed;
         bottom: 0;
@@ -73,75 +41,34 @@
         font-family: monospace;
         font-size: 72px;
       }
-
-      /* tspan {
-              font-size: 6px !important;
-            } */
     </style>
   </head>
-
   <body>
-    <pre id="diagram" class="mermaid2">
-stateDiagram-v2
-    direction LR
-    [*] --> Active
-
-    state Active {
-      direction BT
-        [*] --> Inner
-        Inner --> NumLockOn : EvNumLockPressed
-    }
-    %% Outer --> Inner
-      </pre
-    >
-
+    <div>Security check</div>
     <pre id="diagram" class="mermaid">
-      stateDiagram-v2
-      [*] --> First
-      state First {
-          [*] --> second
-          second --> [*]
-      }
-
-
-    </pre>
-
+flowchart LR
+A-->B
+        </pre
+    >
     <pre id="diagram" class="mermaid2">
-      flowchart LR
-        A[Start] --Some text--> B(Continue)
-        B --> C{Evaluate}
-        C -- One --> D[Option 1]
-        C -- Two --> E[Option 2]
-        C -- Three --> F[fa:fa-car Option 3]
-    </pre>
-
-    <script type="module">
-      import mermaid from './mermaid.esm.mjs';
-      import layouts from './mermaid-layout-elk.esm.mjs';
-      mermaid.registerLayoutLoaders(layouts);
+            mindmap
+          root
+            ch1
+            ch2
+        </pre
+    >
+    <script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
+    <script src="./packages/mermaid-mindmap/dist/mermaid-example-diagram-detector.js"></script>
+    <script src="./packages/mermaid/dist/mermaid.esm.mjs"></script>
+    <script>
       mermaid.parseError = function (err, hash) {
-        console.error('Mermaid error: ', err);
+        // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'neo',
-        handdrawnSeed: 12,
-        look: 'neo',
-        //layout: 'elk',
-        'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        // layout: 'elk',
-        flowchart: { titleTopMargin: 10 },
-        // fontFamily: 'Caveat',
-        //fontFamily: 'Kalam',
-        fontFamily: 'Arial',
-        sequence: {
-          actorFontFamily: 'arial',
-          noteFontFamily: 'arial',
-          messageFontFamily: 'arial',
-        },
-        fontSize: 10,
+        startOnLoad: true,
         logLevel: 0,
-        htmlLabels: true,
+        basePath: './packages/',
+        // themeVariables: {relationLabelColor: 'red'}
       });
       function callback() {
         alert('It worked');
@@ -150,10 +77,6 @@ stateDiagram-v2
         console.error('In parse error:');
         console.error(err);
       };
-      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
-      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
     </script>
   </body>
 </html>