fix: Handle langium data loss warning

It's not an issue to actually lose the data, as we're just taking the last value anyways. But having the warnings clog up the console means we might miss actual warnings.

.build/common.ts

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

.build/jsonSchema.ts

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

.changeset/gold-shoes-camp.md

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

.changeset/honest-trees-dress.md

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

.changeset/neat-moose-compare.md

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

.changeset/sad-mails-accept.md

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

.changeset/soft-readers-tan.md

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

.changeset/yellow-mirrors-change.md

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

.cspell/code-terms.txt

@@ -26,6 +26,7 @@ concat
 controlx
 controly
 CSSCLASS
+curv
 CYLINDEREND
 CYLINDERSTART
 DAGA
@@ -55,6 +56,7 @@ GENERICTYPE
 getBoundarys
 grammr
 graphtype
+halign
 iife
 interp
 introdcued
@@ -66,6 +68,7 @@ Kaufmann
 keyify
 LABELPOS
 LABELTYPE
+layoutstop
 lcov
 LEFTOF
 Lexa
@@ -138,6 +141,7 @@ tsdoc
 typeof
 typestr
 unshift
+urlsafe
 verifymethod
 VERIFYMTHD
 WARN_DOCSDIR_DOESNT_MATCH

.cspell/cspell.config.yaml

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

.cspell/libraries.txt

@@ -24,11 +24,14 @@ Doctave
 DokuWiki
 dompurify
 elkjs
+fcose
 fontawesome
+Forgejo
 Foswiki
 Gitea
 graphlib
 Grav
+icones
 iconify
 Inkdrop
 jiti

.cspell/mermaid-terms.txt

@@ -1,15 +1,18 @@
 Adamiecki
 arrowend
+Bendpoints
 bmatrix
 braintree
 catmull
 compositTitleSize
+curv
 doublecircle
 elems
 gantt
 gitgraph
 gzipped
 handDrawn
+kanban
 knsv
 Knut
 marginx
@@ -23,6 +26,7 @@ multigraph
 nodesep
 NOTEGROUP
 Pinterest
+procs
 rankdir
 ranksep
 rect

.cspell/misc-terms.txt

@@ -4,3 +4,4 @@ handDrawn
 KOEPF
 neato
 newbranch
+validify

.esbuild/build.ts

@@ -8,7 +8,10 @@ import { defaultOptions, getBuildConfig } from './util.js';
 const shouldVisualize = process.argv.includes('--visualize');
 
 const buildPackage = async (entryName: keyof typeof packageOptions) => {
-  const commonOptions: MermaidBuildOptions = { ...defaultOptions, entryName } as const;
+  const commonOptions: MermaidBuildOptions = {
+    ...defaultOptions,
+    options: packageOptions[entryName],
+  } as const;
   const buildConfigs: MermaidBuildOptions[] = [
     // package.mjs
     { ...commonOptions },
@@ -31,6 +34,19 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
       { ...iifeOptions, minify: true, metafile: shouldVisualize }
     );
   }
+  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 }
+    );
+  }
 
   const results = await Promise.all(buildConfigs.map((option) => build(getBuildConfig(option))));
 
@@ -40,7 +56,7 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
         continue;
       }
       const fileName = Object.keys(metafile.outputs)
-        .find((file) => !file.includes('chunks') && file.endsWith('js'))
+        .find((file) => !file.includes('chunks') && file.endsWith('js'))!
         .replace('dist/', '');
       // Upload metafile into https://esbuild.github.io/analyze/
       await writeFile(`stats/${fileName}.meta.json`, JSON.stringify(metafile));

.esbuild/server.ts

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

.esbuild/util.ts

@@ -3,7 +3,7 @@ import { fileURLToPath } from 'url';
 import type { BuildOptions } from 'esbuild';
 import { readFileSync } from 'fs';
 import jsonSchemaPlugin from './jsonSchemaPlugin.js';
-import { packageOptions } from '../.build/common.js';
+import type { PackageOptions } from '../.build/common.js';
 import { jisonPlugin } from './jisonPlugin.js';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
@@ -13,10 +13,10 @@ export interface MermaidBuildOptions extends BuildOptions {
   core: boolean;
   metafile: boolean;
   format: 'esm' | 'iife';
-  entryName: keyof typeof packageOptions;
+  options: PackageOptions;
 }
 
-export const defaultOptions: Omit<MermaidBuildOptions, 'entryName'> = {
+export const defaultOptions: Omit<MermaidBuildOptions, 'entryName' | 'options'> = {
   minify: false,
   metafile: false,
   core: false,
@@ -52,9 +52,15 @@ const getFileName = (fileName: string, { core, format, minify }: MermaidBuildOpt
 };
 
 export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
-  const { core, entryName, metafile, format, minify } = options;
+  const {
+    core,
+    metafile,
+    format,
+    minify,
+    options: { name, file, packageName },
+    globalName = 'mermaid',
+  } = options;
   const external: string[] = ['require', 'fs', 'path'];
-  const { name, file, packageName } = packageOptions[entryName];
   const outFileName = getFileName(name, options);
   const output: BuildOptions = buildOptions({
     absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
@@ -63,6 +69,7 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
     },
     metafile,
     minify,
+    globalName,
     logLevel: 'info',
     chunkNames: `chunks/${outFileName}/[name]-[hash]`,
     define: {
@@ -84,11 +91,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/lychee.toml

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

.github/workflows/autofix.yml

@@ -7,17 +7,19 @@ on:
 permissions:
   contents: read
 
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
 jobs:
   autofix:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -40,4 +42,4 @@ jobs:
         working-directory: ./packages/mermaid
         run: pnpm run docs:build
 
-      - uses: autofix-ci/action@ff86a557419858bb967097bfc916833f5647fa8c
+      - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef # main

.github/workflows/build-docs.yml

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

.github/workflows/build.yml

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

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

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

.github/workflows/checks.yml

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

.github/workflows/codeql.yml

@@ -11,6 +11,9 @@ on:
       - synchronize
       - ready_for_review
 
+permissions: # added using https://github.com/step-security/secure-repo
+  contents: read
+
 jobs:
   analyze:
     name: Analyze
@@ -29,11 +32,11 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
         with:
           config-file: ./.github/codeql/codeql-config.yml
           languages: ${{ matrix.language }}
@@ -45,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@v3
+        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
@@ -59,4 +62,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        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@v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       - name: 'Dependency Review'
-        uses: actions/dependency-review-action@v4
+        uses: actions/dependency-review-action@3b139cfc5fae8b618d3eae3675e383bb1769c019 # v4.5.0

.github/workflows/e2e-applitools.yml

@@ -11,6 +11,8 @@ on:
         default: master
         description: 'Parent branch to use for PRs'
 
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
 permissions:
   contents: read
 
@@ -30,13 +32,13 @@ jobs:
         run: |
           echo "::error,title=Not using Applitools::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
 
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         with:
           node-version-file: '.node-version'
 
@@ -52,7 +54,7 @@ jobs:
           APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
 
       - name: Cypress run
-        uses: cypress-io/github-action@v4
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         id: cypress
         with:
           start: pnpm run dev

.github/workflows/e2e-timings.yml

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

.github/workflows/e2e.yml

@@ -2,11 +2,15 @@ name: E2E
 
 on:
   push:
-    branches-ignore:
-      - 'gh-readonly-queue/**'
+    branches:
+      - develop
+      - master
+      - release/**
   pull_request:
   merge_group:
 
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
 permissions:
   contents: read
 
@@ -24,7 +28,8 @@ env:
       ) || 
       github.event.before
     }}
-  shouldRunParallel: ${{ secrets.CYPRESS_RECORD_KEY != '' && !(github.event_name == 'push' && github.ref == 'refs/heads/develop') }}
+  RUN_VISUAL_TEST: >-
+    ${{ github.repository == 'mermaid-js/mermaid' && (github.event_name != 'pull_request' || !startsWith(github.head_ref, 'renovate/')) }}
 jobs:
   cache:
     runs-on: ubuntu-latest
@@ -32,30 +37,29 @@ 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@v4
-      - uses: pnpm/action-setup@v4
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         with:
           node-version-file: '.node-version'
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache@v4
+        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@v4
+        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@v6
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         with:
           # just perform install
           runTests: false
@@ -76,28 +80,28 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        containers: [1, 2, 3, 4]
+        containers: [1, 2, 3, 4, 5]
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        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@v4
+        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@v6
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         with:
           runTests: false
 
@@ -113,11 +117,8 @@ jobs:
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@v6
+        uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         id: cypress
-        # If CYPRESS_RECORD_KEY is set, run in parallel on all containers
-        # Otherwise (e.g. if running from fork), we run on a single container only
-        if: ${{ env.shouldRunParallel == 'true' || ( matrix.containers == 1 ) }}
         with:
           install: false
           start: pnpm run dev:coverage
@@ -125,19 +126,20 @@ jobs:
           browser: chrome
           # Disable recording if we don't have an API key
           # e.g. if this action was run from a fork
-          record: ${{ env.shouldRunParallel == 'true' }}
-          parallel: ${{ env.shouldRunParallel == 'true' }}
+          record: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.CYPRESS_RECORD_KEY != '' }}
         env:
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-          VITEST_COVERAGE: true
+          ARGOS_PARALLEL: ${{ env.RUN_VISUAL_TEST == 'true' }}
+          ARGOS_PARALLEL_TOTAL: ${{ env.RUN_VISUAL_TEST == 'true' && strategy.job-total || 1 }}
+          ARGOS_PARALLEL_INDEX: ${{ env.RUN_VISUAL_TEST == 'true' && matrix.containers || 1 }}
           CYPRESS_COMMIT: ${{ github.sha }}
-          ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
-          ARGOS_PARALLEL: ${{ env.shouldRunParallel == 'true' }}
-          ARGOS_PARALLEL_TOTAL: 4
-          ARGOS_PARALLEL_INDEX: ${{ matrix.containers }}
+          CYPRESS_RECORD_KEY: ${{ env.RUN_VISUAL_TEST == 'true' && secrets.CYPRESS_RECORD_KEY || ''}}
+          SPLIT: ${{ strategy.job-total }}
+          SPLIT_INDEX: ${{ strategy.job-index }}
+          SPLIT_FILE: 'cypress/timings.json'
+          VITEST_COVERAGE: true
 
       - name: Upload Coverage to Codecov
-        uses: codecov/codecov-action@v4
+        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/issue-triage.yml

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

.github/workflows/link-checker.yml

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

.github/workflows/lint.yml

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

.github/workflows/pr-labeler.yml

@@ -22,7 +22,7 @@ jobs:
       pull-requests: write # write permission is required to label PRs
     steps:
       - name: Label PR
-        uses: release-drafter/release-drafter@v6
+        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@v4
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -37,13 +37,13 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Setup Pages
-        uses: actions/configure-pages@v4
+        uses: actions/configure-pages@983d7736d9b0ae728b81ab479565c72886d7745b # v5.0.0
 
       - name: Run Build
         run: pnpm --filter mermaid run docs:build:vitepress
 
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
+        uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3.0.1
         with:
           path: packages/mermaid/src/vitepress/.vitepress/dist
 
@@ -56,4 +56,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4.0.5

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

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

.github/workflows/release-preview.yml

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

.github/workflows/release-publish.yml

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

.github/workflows/release.yml

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

.github/workflows/scorecard.yml

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

.github/workflows/test.yml

@@ -9,13 +9,13 @@ jobs:
   unit-test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -38,8 +38,12 @@ jobs:
         run: |
           pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts --coverage
 
+      - name: Verify out-of-tree build with TypeScript
+        run: |
+          pnpm test:check:tsc
+
       - name: Upload Coverage to Codecov
-        uses: codecov/codecov-action@v4
+        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/unlock-reopened-issues.yml

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

.github/workflows/update-browserlist.yml

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

.hadolint.yaml

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

.husky/pre-commit

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

.node-version

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

Dockerfile

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

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,9 +33,10 @@ 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)
+[![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)
 
 <img src="./img/header.png" alt="" />
 
@@ -82,6 +83,10 @@ You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-
 
 For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](https://mermaid.js.org/intro/getting-started.html), [Usage](https://mermaid.js.org/config/usage.html) and [Tutorials](https://mermaid.js.org/ecosystem/tutorials.html).
 
+Our PR Visual Regression Testing is powered by [Argos](https://argos-ci.com/?utm_source=mermaid&utm_campaign=oss) with their generous Open Source plan. It makes the process of reviewing PRs with visual changes a breeze.
+
+[![Covered by Argos Visual Testing](https://argos-ci.com/badge-large.svg)](https://argos-ci.com?utm_source=mermaid&utm_campaign=oss)
+
 In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests.
 
 <a href="https://applitools.com/">
@@ -90,6 +95,10 @@ In our release process we rely heavily on visual regression tests using [applito
 
 <!-- </Main description> -->
 
+## Mermaid AI Bot
+
+[Mermaid](https://codeparrot.ai/oracle?owner=mermaid-js&repo=mermaid) Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.
+
 ## Examples
 
 **The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid.js.org/intro/syntax-reference.html).**
@@ -248,6 +257,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>]
 
 ```
@@ -430,7 +467,7 @@ A quick note from Knut Sveidqvist:
 >
 > _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
-> _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_
+> _Thank you to the ever-growing list of [contributors](https://github.com/mermaid-js/mermaid/graphs/contributors) that brought the project this far!_
 
 ---
 

README.zh-CN.md

@@ -15,7 +15,7 @@ Mermaid
 <a href="https://mermaid.live/"><b>实时编辑器!</b></a>
 </p>
 <p align="center">
- <a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/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="" />
@@ -358,7 +358,7 @@ _很不幸的是，鱼与熊掌不可兼得，在这个场景下它意味着在
 
 > _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目，它们提供了图形布局和绘图工具库！_ > _同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ > _感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_
 >
-> _感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_
+> _感谢越来越多的 [贡献者们](https://github.com/mermaid-js/mermaid/graphs/contributors)，没有你们，就没有这个项目的今天！_
 
 ---
 

cypress.config.ts

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

@@ -29,6 +29,7 @@ export const mermaidUrl = (
   options: CypressMermaidConfig,
   api: boolean
 ): string => {
+  options.handDrawnSeed = 1;
   const codeObject: CodeObject = {
     code: graphStr,
     mermaid: options,
@@ -73,7 +74,7 @@ export const imgSnapshotTest = (
 
 export const urlSnapshotTest = (
   url: string,
-  options: CypressMermaidConfig,
+  options: CypressMermaidConfig = {},
   _api = false,
   validation?: any
 ): void => {
@@ -131,3 +132,10 @@ export const verifyScreenshot = (name: string): void => {
     cy.matchImageSnapshot(name);
   }
 };
+
+export const verifyNumber = (value: number, expected: number, deltaPercent = 10): void => {
+  expect(value).to.be.within(
+    expected * (1 - deltaPercent / 100),
+    expected * (1 + deltaPercent / 100)
+  );
+};

cypress/integration/rendering/architecture.spec.ts

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

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

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

cypress/integration/rendering/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');
     });
@@ -321,4 +321,37 @@ ORDER ||--|{ LINE-ITEM : contains
       { logLevel: 1 }
     );
   });
+
+  it('should render relationship labels with line breaks', () => {
+    imgSnapshotTest(
+      `
+    erDiagram
+      p[Person] {
+          string firstName
+          string lastName
+      }
+      a["Customer Account"] {
+          string email
+      }
+
+      b["Customer Account Secondary"] {
+        string email
+      }
+      
+      c["Customer Account Tertiary"] {
+        string email
+      }
+      
+      d["Customer Account Nth"] {
+        string email
+      }
+
+      p ||--o| a : "has<br />one"
+      p ||--o| b : "has<br />one<br />two"
+      p ||--o| c : "has<br />one<br/>two<br />three"
+      p ||--o| d : "has<br />one<br />two<br/>three<br />...<br/>Nth"
+      `,
+      { logLevel: 1 }
+    );
+  });
 });

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

@@ -1,6 +1,6 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+import { imgSnapshotTest, renderGraph, verifyNumber } from '../../helpers/util.ts';
 
-describe.skip('Flowchart ELK', () => {
+describe('Flowchart ELK', () => {
   it('1-elk: should render a simple flowchart', () => {
     imgSnapshotTest(
       `flowchart-elk TD
@@ -109,7 +109,7 @@ describe.skip('Flowchart ELK', () => {
       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(230 * 0.95, 230 * 1.05);
+      verifyNumber(maxWidthValue, 380);
     });
   });
   it('8-elk: should render a flowchart when useMaxWidth is false', () => {
@@ -128,7 +128,7 @@ describe.skip('Flowchart ELK', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      expect(width).to.be.within(230 * 0.95, 230 * 1.05);
+      verifyNumber(width, 380);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -692,7 +692,7 @@ A --> B
       {}
     );
     cy.get('svg').should((svg) => {
-      const edges = svg.querySelectorAll('.edges > path');
+      const edges = svg[0].querySelectorAll('.edges > path');
       edges.forEach((edge) => {
         expect(edge).to.have.class('flowchart-link');
       });
@@ -739,7 +739,7 @@ NL\`") --"\`1o **bold**\`"--> c
           { flowchart: { titleTopMargin: 0 } }
         );
       });
-      it('Wrapping long text with a new line', () => {
+      it.skip('Wrapping long text with a new line', () => {
         imgSnapshotTest(
           `%%{init: {"flowchart": {"htmlLabels": true}} }%%
 flowchart-elk LR
@@ -841,7 +841,7 @@ end
           { flowchart: { titleTopMargin: 0 } }
         );
       });
-      it('Sub graphs and markdown strings', () => {
+      it('Sub graphs', () => {
         imgSnapshotTest(
           `---
 config:
@@ -857,6 +857,196 @@ flowchart LR
     D --> E
       A["A"]
 
+`,
+          { flowchart: { titleTopMargin: 0 } }
+        );
+      });
+      it('6080: should handle diamond shape intersections', () => {
+        imgSnapshotTest(
+          `---
+config:
+  layout: elk
+---
+flowchart LR
+ subgraph s1["Untitled subgraph"]
+        n1["Evaluate"]
+        n2["Option 1"]
+        n3["Option 2"]
+        n4["fa:fa-car Option 3"]
+  end
+ subgraph s2["Untitled subgraph"]
+        n5["Evaluate"]
+        n6["Option 1"]
+        n7["Option 2"]
+        n8["fa:fa-car Option 3"]
+  end
+    A["Start"] -- Some text --> B("Continue")
+    B --> C{"Evaluate"}
+    C -- One --> D["Option 1"]
+    C -- Two --> E["Option 2"]
+    C -- Three --> F["fa:fa-car Option 3"]
+    n1 -- One --> n2
+    n1 -- Two --> n3
+    n1 -- Three --> n4
+    n5 -- One --> n6
+    n5 -- Two --> n7
+    n5 -- Three --> n8
+    n1@{ shape: diam}
+    n2@{ shape: rect}
+    n3@{ shape: rect}
+    n4@{ shape: rect}
+    n5@{ shape: diam}
+    n6@{ shape: rect}
+    n7@{ shape: rect}
+    n8@{ shape: rect}
+
+`,
+          { flowchart: { titleTopMargin: 0 } }
+        );
+      });
+
+      it('6088-1: should handle diamond shape intersections', () => {
+        imgSnapshotTest(
+          `---
+config:
+  layout: elk
+---
+      flowchart LR
+      subgraph S2
+      subgraph s1["APA"]
+      D{"Use the editor"}
+      end
+
+
+      D -- Mermaid js --> I{"fa:fa-code Text"}
+            D --> I
+            D --> I
+
+      end
+`,
+          { flowchart: { titleTopMargin: 0 } }
+        );
+      });
+
+      it('6088-2: should handle diamond shape intersections', () => {
+        imgSnapshotTest(
+          `---
+config:
+  layout: elk
+---
+      flowchart LR
+      a
+      subgraph s0["APA"]
+      subgraph s8["APA"]
+      subgraph s1["APA"]
+        D{"X"}
+        E[Q]
+      end
+      subgraph s3["BAPA"]
+        F[Q]
+        I
+      end
+            D --> I
+            D --> I
+            D --> I
+
+      I{"X"}
+      end
+      end
+
+`,
+          { flowchart: { titleTopMargin: 0 } }
+        );
+      });
+
+      it('6088-3: should handle diamond shape intersections', () => {
+        imgSnapshotTest(
+          `---
+config:
+  layout: elk
+---
+      flowchart LR
+      a
+        D{"Use the editor"}
+
+      D -- Mermaid js --> I{"fa:fa-code Text"}
+      D-->I
+      D-->I
+
+`,
+          { flowchart: { titleTopMargin: 0 } }
+        );
+      });
+
+      it('6088-4: should handle diamond shape intersections', () => {
+        imgSnapshotTest(
+          `---
+config:
+  layout: elk
+---
+flowchart LR
+ subgraph s1["Untitled subgraph"]
+        n1["Evaluate"]
+        n2["Option 1"]
+        n3["Option 2"]
+        n4["fa:fa-car Option 3"]
+  end
+ subgraph s2["Untitled subgraph"]
+        n5["Evaluate"]
+        n6["Option 1"]
+        n7["Option 2"]
+        n8["fa:fa-car Option 3"]
+  end
+    A["Start"] -- Some text --> B("Continue")
+    B --> C{"Evaluate"}
+    C -- One --> D["Option 1"]
+    C -- Two --> E["Option 2"]
+    C -- Three --> F["fa:fa-car Option 3"]
+    n1 -- One --> n2
+    n1 -- Two --> n3
+    n1 -- Three --> n4
+    n5 -- One --> n6
+    n5 -- Two --> n7
+    n5 -- Three --> n8
+    n1@{ shape: diam}
+    n2@{ shape: rect}
+    n3@{ shape: rect}
+    n4@{ shape: rect}
+    n5@{ shape: diam}
+    n6@{ shape: rect}
+    n7@{ shape: rect}
+    n8@{ shape: rect}
+
+`,
+          { flowchart: { titleTopMargin: 0 } }
+        );
+      });
+
+      it('6088-5: should handle diamond shape intersections', () => {
+        imgSnapshotTest(
+          `---
+config:
+  layout: elk
+---
+flowchart LR
+    A{A} --> B & C
+
+`,
+          { flowchart: { titleTopMargin: 0 } }
+        );
+      });
+      it('6088-6: should handle diamond shape intersections', () => {
+        imgSnapshotTest(
+          `---
+config:
+  layout: elk
+---
+flowchart LR
+    A{A} --> B & C
+    subgraph "subbe"
+      A
+    end
+
 `,
           { flowchart: { titleTopMargin: 0 } }
         );

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

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

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

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

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

@@ -99,7 +99,7 @@ describe('Flowchart v2', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.be.within(446 * 0.95 - 1, 446 * 1.05);
+      expect(maxWidthValue).to.be.within(417 * 0.95, 417 * 1.05);
     });
   });
   it('8: should render a flowchart when useMaxWidth is false', () => {
@@ -118,7 +118,7 @@ describe('Flowchart v2', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      expect(width).to.be.within(446 * 0.95 - 1, 446 * 1.05);
+      expect(width).to.be.within(417 * 0.95, 417 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -786,7 +786,7 @@ A ~~~ B
       `---
       title: Subgraph nodeSpacing and rankSpacing example
       config:
-        flowchart: 
+        flowchart:
           nodeSpacing: 250
           rankSpacing: 250
       ---
@@ -1052,5 +1052,65 @@ end
         }
       );
     });
+    it('Should render self-loops', () => {
+      imgSnapshotTest(
+        `flowchart
+          A --> A
+          subgraph B
+            B1 --> B1
+          end
+          subgraph C
+            subgraph C1
+              C2 --> C2
+              subgraph D
+                D1 --> D1
+              end
+              D --> D
+            end
+            C1 --> C1
+          end
+        `,
+        {
+          flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } },
+        }
+      );
+    });
+  });
+  describe('New @ sytax 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"}
+        `,
+        {}
+      );
+    });
+    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"}   
+        `,
+        {}
+      );
+    });
+    it('should be possible to use @  syntax to add labels with trail spaces', () => {
+      imgSnapshotTest(
+        `flowchart TB
+       n2["label for n2"]
+       n4@{ label: "labe for n4"}
+       n5@{ label: "labe for n5"}  
+        `,
+        {}
+      );
+    });
+    it('should be possible to use @  syntax to add labels with trail spaces and edge/link', () => {
+      imgSnapshotTest(
+        `flowchart TD
+    A["A"] --> B["for B"] &    C@{ label: "for c"} & E@{label : "for E"}  
+    D@{label: "for D"}     
+        `,
+        {}
+      );
+    });
   });
 });

cypress/integration/rendering/flowchart.spec.js

@@ -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,21 @@ 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',
+      }
+    );
+  });
 });

cypress/integration/rendering/iconShape.spec.ts

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

cypress/integration/rendering/imageShape.spec.ts

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

cypress/integration/rendering/journey.spec.js

@@ -63,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

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

cypress/integration/rendering/newShapes.spec.ts

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

cypress/integration/rendering/oldShapes.spec.ts

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

cypress/integration/rendering/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/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/architecture-external.html

@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Architecture Mermaid Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h2>External Icons Demo</h2>
+    <pre class="mermaid">
+    architecture-beta
+      service s3(logos:aws-s3)[Cloud Store]
+      service ec2(logos:aws-ec2)[Server]
+      service api(logos:aws-api-gateway)[Api Gateway]
+      service fa(fa:image)[Font Awesome Icon]
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({
+        startOnLoad: false,
+        logLevel: 0,
+      });
+      mermaid.registerIconPacks([
+        {
+          name: 'logos',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
+        },
+        {
+          name: 'fa',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
+              res.json()
+            ),
+        },
+      ]);
+      await mermaid.run();
+      if (window.Cypress) {
+        window.rendered = true;
+      }
+    </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,

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"

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"

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/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-sate.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/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"

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.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,12 +4,16 @@
     <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.7.2/css/all.min.css"
+      rel="stylesheet"
+    />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
@@ -34,6 +38,7 @@
         /* background: rgb(221, 208, 208); */
         /* background: #333; */
         font-family: 'Arial';
+        /* color: white; */
         /* font-size: 18px !important; */
       }
 
@@ -74,101 +79,354 @@
         font-size: 72px;
       }
 
+      pre {
+        width: 100%;
+      }
+
       /* tspan {
               font-size: 6px !important;
             } */
+      /* .flowchart-link {
+        stroke-dasharray: 4, 4 !important;
+        animation: flow 1s linear infinite;
+        animation: dashdraw 4.93282s linear infinite;
+        stroke-width: 2px !important;
+      } */
+
+      @keyframes dashdraw {
+        from {
+          stroke-dashoffset: 0;
+        }
+      }
+
+      /*stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation:    4.932820s linear infinite;*/
+      /* stroke-width:2;stroke-dasharray:10.000000,9.865639;stroke-dashoffset:-198.656393;animation: dashdraw 4.932820s linear infinite;*/
     </style>
   </head>
 
   <body>
-    <div class="flex">
-      <pre id="diagram" class="mermaid">
----
-  title: hello2
-  config:
-    look: handDrawn
-    layout: elk
-    elk:
-        nodePlacementStrategy: BRANDES_KOEPF
----
-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
-      >
-      <pre id="diagram" class="mermaid2">
----
-config:
-  look: handdrawn
-  flowchart:
-    htmlLabels: true
----
-flowchart
-      A[I am a long text, where do I go??? handdrawn - true]
-</pre
-      >
-    </div>
-    <div class="flex">
-      <pre id="diagram" class="mermaid2">
----
-config:
-  flowchart:
-    htmlLabels: false
----
-flowchart
-      A[I am a long text, where do I go??? classic - false]
-</pre
-      >
-      <pre id="diagram" class="mermaid2">
----
-config:
-  flowchart:
-    htmlLabels: true
----
-flowchart
-      A[I am a long text, where do I go??? classic - true]
-</pre
-      >
-    </div>
-    <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">
+    <pre id="diagram4" class="mermaid">
       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
-
+        AB["apa@apa@"] --> B(("`apa@apa`"))
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      flowchart
+        D(("for D"))
+    </pre>
+    <pre id="diagram4" class="mermaid">
+      flowchart LR
+        A e1@==> B
+        e1@{ animate: true}
+    </pre>
+    <pre id="diagram4" class="mermaid">
+flowchart LR
+  A e1@--> B
+  classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
+  class e1 animate
+    </pre>
+    <h2>infinite</h2>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+  classDef animate stroke-dasharray: 9\,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
+  class e1 animate
+    </pre>
+    <h2>Mermaid - edge-animation-slow</h2>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+e1@{ animation: fast}
+    </pre>
+    <h2>Mermaid - edge-animation-fast</h2>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  A e1@--> B
+  classDef animate stroke-dasharray: 1000,stroke-dashoffset: 1000,animation: dash 10s linear;
+  class e1 edge-animation-fast
     </pre>
 
     <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
+
+info    </pre
+    >
+    <pre id="diagram4" class="mermaid2">
+---
+config:
+  layout: elk
+---
+      flowchart LR
+      a
+      subgraph s0["APA"]
+      subgraph s8["APA"]
+      subgraph s1["APA"]
+        D{"X"}
+        E[Q]
+      end
+      subgraph s3["BAPA"]
+        F[Q]
+        I
+      end
+            D --> I
+            D --> I
+            D --> I
+
+      I{"X"}
+      end
+      end
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+---
+config:
+  layout: elk
+---
+      flowchart LR
+      a
+        D{"Use the editor"}
+
+      D -- Mermaid js --> I{"fa:fa-code Text"}
+      D-->I
+      D-->I
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+---
+config:
+  layout: elk
+---
+flowchart LR
+ subgraph s1["Untitled subgraph"]
+        n1["Evaluate"]
+        n2["Option 1"]
+        n3["Option 2"]
+        n4["fa:fa-car Option 3"]
+  end
+ subgraph s2["Untitled subgraph"]
+        n5["Evaluate"]
+        n6["Option 1"]
+        n7["Option 2"]
+        n8["fa:fa-car Option 3"]
+  end
+    A["Start"] -- Some text --> B("Continue")
+    B --> C{"Evaluate"}
+    C -- One --> D["Option 1"]
+    C -- Two --> E["Option 2"]
+    C -- Three --> F["fa:fa-car Option 3"]
+    n1 -- One --> n2
+    n1 -- Two --> n3
+    n1 -- Three --> n4
+    n5 -- One --> n6
+    n5 -- Two --> n7
+    n5 -- Three --> n8
+    n1@{ shape: diam}
+    n2@{ shape: rect}
+    n3@{ shape: rect}
+    n4@{ shape: rect}
+    n5@{ shape: diam}
+    n6@{ shape: rect}
+    n7@{ shape: rect}
+    n8@{ shape: rect}
 
     </pre>
+    <pre id="diagram4" class="mermaid2">
+---
+config:
+  layout: elk
+---
+flowchart LR
+ subgraph s1["Untitled subgraph"]
+        n1["Evaluate"]
+        n2["Option 1"]
+  end
+    n1 -- One --> n2
 
+
+
+
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+---
+config:
+  layout: elk
+---
+flowchart LR
+    A{A} --> B & C
+</pre
+    >
+    <pre id="diagram4" class="mermaid2">
+---
+config:
+  layout: elk
+---
+flowchart LR
+    A{A} --> B & C
+    subgraph "subbe"
+      A
+    end
+</pre
+    >
+    <pre id="diagram4" class="mermaid2">
+---
+config:
+  layout: elk
+---
+flowchart LR
+    n2@{ shape: rect}
+    n3@{ shape: rect}
+    n4@{ shape: rect}
+    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"]
+    %% C@{ shape: hexagon}
+
+
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+---
+config:
+  kanban:
+    ticketBaseUrl: 'https://github.com/your-repo/issues/#TICKET#'
+---
+kanban
+  Backlog
+    task1[📝 Define project requirements]@{ ticket: a101 }
+  To Do
+    task2[🔍 Research technologies]@{ ticket: a102 }
+  Review
+    task4[🔍 Code review for login feature]@{ ticket: a104 }
+  Done
+    task5[✅ Deploy initial version]@{ ticket: a105 }
+  In Progress
+    task3[💻 Develop login feature]@{ ticket: 103 }
+
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+nA[Default] --> A@{ icon: 'fa:bell', form: 'rounded' }
+
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+nA[Style] --> A@{ icon: 'fa:bell', form: 'rounded' }
+style A fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+nA[Class] --> A@{ icon: 'fa:bell', form: 'rounded' }
+A:::AClass
+classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  nA[Class] --> A@{ icon: 'logos:aws', form: 'rounded' }
+
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+nA[Default] --> A@{ icon: 'fa:bell', form: 'square' }
+
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+nA[Style] --> A@{ icon: 'fa:bell', form: 'square' }
+style A fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+nA[Class] --> A@{ icon: 'fa:bell', form: 'square' }
+A:::AClass
+classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  nA[Class] --> A@{ icon: 'logos:aws', form: 'square' }
+
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+nA[Default] --> A@{ icon: 'fa:bell', form: 'circle' }
+
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+nA[Style] --> A@{ icon: 'fa:bell', form: 'circle' }
+style A fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+nA[Class] --> A@{ icon: 'fa:bell', form: 'circle' }
+A:::AClass
+classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  nA[Class] --> A@{ icon: 'logos:aws', form: 'circle' }
+  A:::AClass
+  classDef AClass fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+flowchart LR
+  nA[Style] --> A@{ icon: 'logos:aws', form: 'circle' }
+  style A fill:#f9f,stroke:#333,stroke-width:4px
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+kanban
+  id2[In progress]
+    docs[Create Blog about the new diagram]@{ priority: 'Very Low', ticket: MC-2037, assigned: 'knsv' }
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+---
+config:
+  kanban:
+    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
+    # sectionWidth: 300
+---
+kanban
+  Todo
+    [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.]
+  id9[Ready for deploy]
+    id8[Design grammar]@{ assigned: 'knsv' }
+  id10[Ready for test]
+    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
+    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
+  id11[Done]
+    id5[define getData]
+    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
+    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
+
+  id12[Can't reproduce]
+    id3[Weird flickering in Firefox]
+    </pre>
     <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);
@@ -176,8 +434,13 @@ flowchart LR
       window.callback = function () {
         alert('A callback was triggered');
       };
-      mermaid.initialize({
+      function callback() {
+        alert('It worked');
+      }
+      await mermaid.initialize({
         // theme: 'base',
+        // theme: 'default',
+        // theme: 'forest',
         // handDrawnSeed: 12,
         // look: 'handDrawn',
         // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
@@ -186,21 +449,25 @@ flowchart LR
         // layout: 'fixed',
         // htmlLabels: false,
         flowchart: { titleTopMargin: 10 },
+
         // fontFamily: 'Caveat',
         // fontFamily: 'Kalam',
         // fontFamily: 'courier',
+        fontFamily: 'arial',
         sequence: {
           actorFontFamily: 'courier',
           noteFontFamily: 'courier',
           messageFontFamily: 'courier',
         },
+        kanban: {
+          htmlLabels: false,
+        },
         fontSize: 12,
         logLevel: 0,
         securityLevel: 'loose',
+        callback,
       });
-      function callback() {
-        alert('It worked');
-      }
+
       mermaid.parseError = function (err, hash) {
         console.error('In parse error:');
         console.error(err);

cypress/platform/per.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.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/saurabh.html

@@ -0,0 +1,141 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://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; */
+      }
+    </style>
+  </head>
+
+  <body style="display: flex; gap: 2rem; flex-direction: row">
+    <pre id="diagram4" class="mermaid">
+      flowchart
+          A --> A
+          subgraph B
+            B1 --> B1
+          end
+          subgraph C
+            subgraph C1
+              C2 --> C2
+              subgraph D
+                D1 --> D1
+              end
+              D --> D
+            end
+            C1 --> C1
+          end
+
+    </pre>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
+      mermaid.registerLayoutLoaders(layouts);
+      mermaid.registerIconPacks([
+        {
+          name: 'logos',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
+        },
+        {
+          name: 'fa',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/fa6-solid/icons.json').then((res) => res.json()),
+        },
+      ]);
+      mermaid.parseError = function (err, hash) {
+        console.error('Mermaid error: ', err);
+      };
+      window.callback = function () {
+        alert('A callback was triggered');
+      };
+      mermaid.initialize({
+        // theme: 'base',
+        // handdrawnSeed: 12,
+        look: 'classic',
+        // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
+        // 'elk.nodePlacement.strategy': 'SIMPLE',
+        // 'elk.nodePlacement.strategy': 'LAYERED',
+        // 'elk.mergeEdges': true,
+        // layout: 'dagre',
+        // layout: 'elk',
+        // layout: 'fixed',
+        // htmlLabels: false,
+        flowchart: { titleTopMargin: 10, padding: 0, htmlLabels: true },
+        // fontFamily: 'Caveat',
+        // fontFamily: 'Kalam',
+        fontFamily: 'courier',
+        sequence: {
+          actorFontFamily: 'courier',
+          noteFontFamily: 'courier',
+          messageFontFamily: 'courier',
+        },
+        themeVariables: {
+          fontSize: 50,
+          fontFamily: 'courier',
+        },
+        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/showcase_base.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.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/showcase_base_dark.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.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/showcase_dark.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.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/showcase_default.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.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/showcase_forest.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.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/showcase_neutral.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.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/state-refactor.html

@@ -3,7 +3,7 @@
 <head>
   <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
   <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css" />
   <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet" />
   <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />

cypress/platform/xss10.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.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/xss11.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.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/xss12.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.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/xss13.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.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/xss14.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.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/xss15.html

@@ -4,7 +4,7 @@
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.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"