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

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

.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,14 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'xyChart',
   'requirement',
   'mindmap',
+  'kanban',
   'timeline',
   'gitGraph',
   'c4',
   'sankey',
   'block',
   'packet',
+  'architecture',
 ] as const;
 
 /**

.changeset/angry-bags-brake.md

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

.changeset/gold-ducks-sort.md

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

.cspell/code-terms.txt

@@ -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,13 @@ Doctave
 DokuWiki
 dompurify
 elkjs
+fcose
 fontawesome
 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 },
@@ -40,7 +43,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,14 @@ 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 },
+  } = 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}`),

.github/lychee.toml

@@ -44,7 +44,10 @@ 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"
 ]
 
 # 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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         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@ff86a557419858bb967097bfc916833f5647fa8c # 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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
       - 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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
+        uses: github/codeql-action/init@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
         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@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -59,4 +62,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
+        uses: github/codeql-action/analyze@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12

.github/workflows/dependency-review.yml

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

.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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         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@d79d2d530a66e641eb4a5f227e13bc985c60b964 # v4.2.2
         id: cypress
         with:
           start: pnpm run dev

.github/workflows/e2e-timings.yml

@@ -0,0 +1,53 @@
+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
+
+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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+      - name: Setup Node.js
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        with:
+          node-version-file: '.node-version'
+      - name: Install dependencies
+        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
+        with:
+          runTests: false
+      - name: Cypress run
+        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
+        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: Commit changes
+        uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9.1.4
+        with:
+          add: 'cypress/timings.json'
+          author_name: 'github-actions[bot]'
+          author_email: '41898282+github-actions[bot]@users.noreply.github.com'
+          message: 'chore: update E2E timings'

.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,6 @@ env:
       ) || 
       github.event.before
     }}
-  shouldRunParallel: ${{ secrets.CYPRESS_RECORD_KEY != '' && !(github.event_name == 'push' && github.ref == 'refs/heads/develop') }}
 jobs:
   cache:
     runs-on: ubuntu-latest
@@ -32,15 +35,15 @@ 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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         with:
           node-version-file: '.node-version'
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache@v4
+        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
         with:
           save-always: true
           path: ./cypress/snapshots
@@ -49,13 +52,13 @@ jobs:
       # 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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
         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@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
         with:
           # just perform install
           runTests: false
@@ -76,28 +79,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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         with:
           node-version-file: '.node-version'
 
       # These cached snapshots are downloaded, providing the reference snapshots.
       - name: Cache snapshots
         id: cache-snapshot
-        uses: actions/cache/restore@v4
+        uses: actions/cache/restore@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
         with:
           path: ./cypress/snapshots
           key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
 
       - name: Install dependencies
-        uses: cypress-io/github-action@v6
+        uses: cypress-io/github-action@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
         with:
           runTests: false
 
@@ -113,11 +116,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@0da3c06ed8217b912deea9d8ee69630baed1737e # v6.7.6
         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 +125,21 @@ jobs:
           browser: chrome
           # Disable recording if we don't have an API key
           # e.g. if this action was run from a fork
-          record: ${{ env.shouldRunParallel == 'true' }}
-          parallel: ${{ env.shouldRunParallel == 'true' }}
+          record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true
           CYPRESS_COMMIT: ${{ github.sha }}
           ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
-          ARGOS_PARALLEL: ${{ env.shouldRunParallel == 'true' }}
-          ARGOS_PARALLEL_TOTAL: 4
+          ARGOS_PARALLEL: true
+          ARGOS_PARALLEL_TOTAL: ${{ strategy.job-total }}
           ARGOS_PARALLEL_INDEX: ${{ matrix.containers }}
+          SPLIT: ${{ strategy.job-total }}
+          SPLIT_INDEX: ${{ strategy.job-index }}
+          SPLIT_FILE: 'cypress/timings.json'
 
       - name: Upload Coverage to Codecov
-        uses: codecov/codecov-action@v4
+        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0
         # Run step only pushes to develop and pull_requests
         if: ${{ steps.cypress.conclusion == 'success' && (github.event_name == 'pull_request' || github.ref == 'refs/heads/develop')}}
         with:

.github/workflows/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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
       - name: Restore lychee cache
-        uses: actions/cache@v4
+        uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 # v4.0.2
         with:
           path: .lycheecache
           key: cache-lychee-${{ github.sha }}
           restore-keys: cache-lychee-
 
       - name: Link Checker
-        uses: lycheeverse/lychee-action@v1.9.3
+        uses: lycheeverse/lychee-action@c053181aa0c3d17606addfe97a9075a32723548a # v1.9.3
         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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+
+      - uses: hadolint/hadolint-action@54c9adbab1582c2ef04b2016b760714a4bfde3cf # v3.1.0
+        with:
+          verbose: true
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         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@3f0f87098bd6b5c5b9a36d49c41d998ea58f9348 # v6.0.0
         with:
           config-name: pr-labeler.yml
           disable-autolabeler: false

.github/workflows/publish-docs.yml

@@ -23,12 +23,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         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@1f0c5cde4bc74cd7e1254d0cb4de8d49e9068c7d # v4.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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
         with:
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         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@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
+
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
+        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@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         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@3de3850952bec538fde60aac71731376e57b9b57 # v1.4.8
         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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+        with:
+          persist-credentials: false
+      - name: Run analysis
+        uses: ossf/scorecard-action@dc50aa9510b46c811795eb24b2f1ba02a914e534 # v2.3.3
+        with:
+          results_file: results.sarif
+          results_format: sarif
+          publish_results: true
+      - name: Upload artifact
+        uses: actions/upload-artifact@97a0fba1372883ab732affbe8f94b823f91727db # v3.pre.node20
+        with:
+          name: SARIF file
+          path: results.sarif
+          retention-days: 5
+      - name: Upload to code-scanning
+        uses: github/codeql-action/upload-sarif@c36620d31ac7c881962c3d9dd939c40ec9434f2b # v3.26.12
+        with:
+          sarif_file: results.sarif

.github/workflows/test.yml

@@ -9,13 +9,13 @@ jobs:
   unit-test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@0a44ba7841725637a19e28fa30b79a866c81b0a6 # v4.0.4
         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@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0
         # Run step only pushes to develop and pull_requests
         if: ${{ github.event_name == 'pull_request' || github.ref == 'refs/heads/develop' }}
         with:

.github/workflows/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@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
       - run: npx update-browserslist-db@latest
       - name: Commit changes
-        uses: EndBug/add-and-commit@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@c5a7806660adbe173f04e3e038b0ccdcd758773c # v6.1.0
         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

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:20.12.2-alpine3.19@sha256:7a91aa397f2e2dfbfcdad2e2d72599f374e0b0172be1d86eeb73f1d33f36a4b2
+
+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

@@ -35,7 +35,8 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
 [![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)
 [![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/">

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';
+import { defineConfig } from 'cypress';
+import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
+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');

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 => {

cypress/integration/rendering/architecture.spec.ts

@@ -0,0 +1,233 @@
+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 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 resonable 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.spec.js

@@ -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';
 
-describe.skip('Flowchart ELK', () => {
+describe('Flowchart ELK', () => {
   it('1-elk: should render a simple flowchart', () => {
     imgSnapshotTest(
       `flowchart-elk TD
@@ -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

@@ -786,7 +786,7 @@ A ~~~ B
       `---
       title: Subgraph nodeSpacing and rankSpacing example
       config:
-        flowchart: 
+        flowchart:
           nodeSpacing: 250
           rankSpacing: 250
       ---
@@ -1052,5 +1052,28 @@ 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 } },
+        }
+      );
+    });
   });
 });

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,24 @@ graph TD
       }
     );
   });
+  it('68: should be able to render string and markdown labels (#5824)', () => {
+    imgSnapshotTest(
+      `
+flowchart TB
+    mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"\`<**1**1\`"--> fine["No bug"]
+    mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
+    subgraph subgraph1["\`How to fix **fix**\`"]
+        broken --> B["B"]
+    end
+    githost["Github, Gitlab, BitBucket, etc."]
+    githost2["\`Github, Gitlab, BitBucket, etc.\`"]
+    a["1."]
+    b["- x"]
+    `,
+      {
+        flowchart: { htmlLabels: true },
+        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/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/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/knsv2.html

@@ -10,6 +10,10 @@
       href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
       rel="stylesheet"
     />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+      rel="stylesheet"
+    />
     <link
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
@@ -34,6 +38,7 @@
         /* background: rgb(221, 208, 208); */
         /* background: #333; */
         font-family: 'Arial';
+        /* color: white; */
         /* font-size: 18px !important; */
       }
 
@@ -73,7 +78,9 @@
         font-family: monospace;
         font-size: 72px;
       }
-
+      pre {
+        width: 100%;
+      }
       /* tspan {
               font-size: 6px !important;
             } */
@@ -81,94 +88,302 @@
   </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">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
-  look: handdrawn
-  flowchart:
-    htmlLabels: true
+  layout: elk
 ---
-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">
       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
+      subgraph S2
+      subgraph s1["APA"]
+      D{"Use the editor"}
+      end
 
+
+      D -- Mermaid js --> I{"fa:fa-code Text"}
+            D --> I
+            D --> I
+
+      end
     </pre>
+    <pre id="diagram4" class="mermaid">
+---
+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="mermaid">
+---
+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">
-      stateDiagram
-    A:::foo
-    B:::bar --> C:::foobar
-    classDef foo stroke:#f00
-    classDef bar stroke:#0f0
-    style C stroke:#00f, fill:black, color:white
+---
+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="mermaid">
+---
+title: https://github.com/mermaid-js/mermaid/issues/5824
+---
+%% 6048, 5824
+flowchart TB
+    mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"`<**1**1`"--> fine["No bug"]
+    mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
+    subgraph subgraph1["`How to fix **fix**`"]
+        broken --> B["B"]
+    end
+    githost["Github, Gitlab, BitBucket, etc."]
+    githost2["`Github, Gitlab, BitBucket, etc.`"]
+    a["1."]
+    b["- x"]
+    </pre>
+    <pre id="diagram4" class="mermaid">
+---
+config:
+  layout: elk
+---
+flowchart LR
+    A{A} --> B & C
+</pre
+    >
+    <pre id="diagram4" class="mermaid">
+---
+config:
+  layout: elk
+---
+flowchart LR
+    A{A} --> B & C
+    subgraph "subbe"
+      A
+    end
+</pre
+    >
+    <pre id="diagram4" class="mermaid">
+---
+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);
@@ -178,6 +393,8 @@ flowchart LR
       };
       mermaid.initialize({
         // theme: 'base',
+        // theme: 'default',
+        // theme: 'forest',
         // handDrawnSeed: 12,
         // look: 'handDrawn',
         // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
@@ -194,6 +411,9 @@ flowchart LR
           noteFontFamily: 'courier',
           messageFontFamily: 'courier',
         },
+        kanban: {
+          htmlLabels: false,
+        },
         fontSize: 12,
         logLevel: 0,
         securityLevel: 'loose',

cypress/platform/saurabh.html

@@ -0,0 +1,174 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background: #333; */
+        font-family: 'Arial';
+        /* font-size: 18px !important; */
+      }
+
+      h1 {
+        color: grey;
+      }
+
+      .mermaid2 {
+        display: none;
+      }
+
+      .mermaid svg {
+        /* font-size: 18px !important; */
+
+        /* background-color: #efefef;
+        background-image: radial-gradient(#fff 51%, transparent 91%),
+          radial-gradient(#fff 51%, transparent 91%);
+        background-size: 20px 20px;
+        background-position:
+          0 0,
+          10px 10px;
+        background-repeat: repeat; */
+      }
+    </style>
+  </head>
+
+  <body style="display: flex; gap: 2rem; flex-direction: row">
+    <pre id="diagram4" class="mermaid">
+      flowchart LR
+      A@{ icon: "fa:window-minimize", form: circle }
+      E@{ icon: "fa:window-minimize", form: circle }
+      B@{ icon: "fa:bell", form: circle }
+      B2@{ icon: "fa:bell", form: circle }
+      C@{ icon: "fa:address-book",  form: square  }
+      D@{ icon: "fa:star-half",  form: square  }
+      A --> E
+      B --> B2
+
+
+    </pre>
+    <pre id="diagram4" class="mermaid2">
+      flowchart TB
+       A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
+       B2 --test--> C
+       D --> B2 --> E
+       style B2 fill:#f9f,stroke:#333,stroke-width:4px
+  </pre
+    >
+    <pre id="diagram43" class="mermaid2">
+      flowchart BT
+       A --test2--> B2@{ icon: "fa:bell", form: "square", label: "B2", pos: "t", h: 40, w: 30 }
+       B2 --test--> C
+       D --> B2 --> E
+  </pre
+    >
+    <pre id="diagram4" class="mermaid2">
+      flowchart BT
+       A --test2--> B2@{ icon: "fa:bell", label: "B2 awiugdawu uydgayuiwd wuydguy", pos: "b", h: 40, w: 30 }
+       B2 --test--> C
+  </pre
+    >
+    <pre id="diagram43" class="mermaid2">
+      flowchart BT
+       A --test2--> B2@{ icon: "fa:bell", label: "B2 dawuygd ayuwgd uy", pos: "t", h: 40, w: 30 }
+       B2 --test--> C
+  </pre
+    >
+    <pre id="diagram6" class="mermaid2">
+      flowchart TB
+       A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "t", w: 200, h: 100 } --> C
+  </pre
+    >
+    <pre id="diagram6" class="mermaid2">
+      flowchart TB
+       A --> B2@{ icon: "fa:bell", form: "circle", label: "test augfuyfavf ydvaubfuac", pos: "b", w: 200, h: 100 } --> C
+       D --> B2 --> E
+  </pre
+    >
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
+      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/yari.html

@@ -0,0 +1,663 @@
+<html>
+  <body>
+    <h1 class="header">Class Nodes</h1>
+    <div class="node-showcase">
+      <div class="test">
+        <h2>Basic Class</h2>
+        <pre class="mermaid">
+          ---
+            config:
+              htmlLabels: false
+          ---
+          classDiagram
+          class _Duck_ {
+            +String beakColor
+            _+_swim_()a_
+            __+quack() test__
+          }
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Basic Class</h2>
+        <pre class="mermaid">
+          ---
+          config:
+            htmlLabels: false
+          ---
+          classDiagram
+          class Class10:::exClass2 {
+            int[] id
+            List~int~ ids
+            test(List~int~ ids) List~bool~
+            testArray() bool[]
+          }
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Basic Class</h2>
+        <pre class="mermaid">
+          flowchart TD
+            Start --> Stop
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Complex Class</h2>
+        <pre class="mermaid">
+                classDiagram
+                class Square~Shape~{
+                  int id
+                  List~int~ position
+                  setPoints(List~int~ points)
+                  getPoints() List~int~
+                }
+          
+          Square : -List~string~ messages
+          Square : +setMessages(List~string~ messages)
+          Square : +getMessages() List~string~
+          Square : +getDistanceMatrix() List~List~int~~
+              </pre
+        >
+      </div>
+      <div class="test">
+        <h2>No Attributes</h2>
+        <pre class="mermaid">
+          classDiagram
+          class Duck {
+            +swim()
+            +quack()
+          }
+        </pre>
+      </div>
+      <div class="test">
+        <h2>No Methods</h2>
+        <pre class="mermaid">
+          classDiagram
+          class Duck {
+            +String beakColor
+          }
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Only Class Name</h2>
+        <p>Empty line as attribute</p>
+        <pre class="mermaid">
+          ---
+            config:
+              class:
+                hideEmptyMembersBox: false
+          ---
+          classDiagram
+          class Duck {
+            
+          }
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Visibility and Types</h2>
+        <p>(Further tilde testing)</p>
+        <div class="mermaid">
+          classDiagram class Duck { ~interface~~~ +String beakColor #swim() ~quack()~~~
+          -test()~~~~~~~ +deposit(amount) bool }
+        </div>
+      </div>
+      <div class="test">
+        <h2>Additional Classifiers</h2>
+        <p>(* Abstract | $ Static)</p>
+        <div class="mermaid">
+          classDiagram class Square~Shape~ { int id* List~int~ position* setPoints(List~int~points)*
+          getPoints()* List~int~ } Square : -List~string~ messages$ Square :
+          +setMessages(List~string~ messages)* Square : +getMessages()$ List~string~ Square :
+          +getDistanceMatrix() List~List~int~~$
+        </div>
+      </div>
+      <div class="test">
+        <h2>Label</h2>
+        <pre class="mermaid">
+          classDiagram
+          class Animal~test~["Animal with a label"]
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Spacing</h2>
+        <p>(Fix ensures consistent spacing rules)</p>
+        <p>(No space or single space?)</p>
+        <pre class="mermaid">
+          classDiagram
+          class ClassName {
+          -attribute:type
+          -            attribute : type
+               test
+          
+          + GetAttribute() type                 
+          +     GetAttribute() type
+          }
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Annotation</h2>
+        <pre class="mermaid">
+          classDiagram
+          class Shape
+          &lt;&lt;interface&gt;&gt; Shape
+          Shape : noOfVertices
+          Shape : draw()
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Long Class Name Text</h2>
+        <pre class="mermaid">
+          classDiagram
+          class ThisIsATestForALongClassName {
+            &lt;&lt;interface&gt;&gt;
+            noOfLetters
+            delete()
+          }
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Long Annotation Text</h2>
+        <pre class="mermaid">
+          classDiagram
+          class Shape
+          &lt;&lt;superlongannotationtext&gt;&gt; Shape
+          Shape : noOfVertices
+          Shape : draw()
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Long Member Text</h2>
+        <pre class="mermaid">
+          classDiagram
+          class Shape
+          &lt;&lt;interface&gt;&gt; Shape
+          Shape : noOfVertices
+          Shape : longtexttestkeepgoingandgoing
+          Shape : draw()
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Link</h2>
+        <pre class="mermaid">
+          classDiagram
+          class Shape
+          link Shape "https://www.github.com" "This is a tooltip for a link"
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Click</h2>
+        <pre class="mermaid">
+          classDiagram
+          class Shape
+          click Shape href "https://www.github.com" "This is a tooltip for a link"
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Hand Drawn</h2>
+        <pre class="mermaid">
+          ---
+          config:
+            look: handDrawn
+            htmlLabels: true
+          ---
+          classDiagram
+          class Hand {
+            +String beakColor
+            +swim()
+            +quack()
+          }
+          style Hand fill:#f9f,stroke:#29f,stroke-width:2px
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Neutral Theme</h2>
+        <pre class="mermaid">
+          ---
+          config:
+            theme: neutral
+          ---
+          classDiagram
+          class Duck {
+            +String beakColor
+            +swim()
+            +quack()
+          }
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Dark Theme</h2>
+        <pre class="mermaid">
+          ---
+          config:
+            theme: dark
+          ---
+          classDiagram
+          class Duck {
+            +String beakColor
+            +swim()
+            +quack()
+          }
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Forest Theme</h2>
+        <pre class="mermaid">
+          ---
+          config:
+            theme: forest
+          ---
+          classDiagram
+          class Duck {
+            +String beakColor
+            +swim()
+            +quack()
+          }
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Base Theme</h2>
+        <pre class="mermaid">
+          ---
+          config:
+            theme: base
+          ---
+          classDiagram
+          class Duck {
+            +String beakColor
+            +swim()
+            +quack()
+          }
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Custom Theme</h2>
+        <pre class="mermaid">
+          %%{
+            init: {
+              'theme': 'base',
+              'themeVariables': {
+                'primaryColor': '#BB2528',
+                'primaryTextColor': '#fff',
+                'primaryBorderColor': '#7C0000',
+                'lineColor': '#F83d29',
+                'secondaryColor': '#006100',
+                'tertiaryColor': '#fff'
+              }
+            }
+          }%%
+          classDiagram
+          class Duck {
+            +String beakColor
+            +swim()
+            +quack()
+          }
+          Duck--Dog
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Styling within Diagram</h2>
+        <pre class="mermaid">
+          classDiagram
+          class Duck {
+            +String beakColor
+            +swim()
+            +quack()
+          }
+          style Duck fill:#f9f,stroke:#333,stroke-width:8px
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Styling with classDef Statement</h2>
+        <pre class="mermaid">
+          classDiagram
+          class Duck:::bold {
+            +String beakColor
+            +swim()
+            +quack()
+          }
+
+          class Dog {
+            +int numTeeth
+            +bark()
+          }
+
+          cssClass "Duck,Dog" pink
+
+          classDef pink fill:#f9f
+          classDef default color:#f1e
+          classDef bold stroke:#333,stroke-width:6px,color:#fff
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Styling with Class in Stylesheet</h2>
+        <pre class="mermaid">
+          classDiagram
+          class Duck {
+            +String beakColor
+            +swim()
+            +quack()
+          }
+          class Duck:::styleClass
+        </pre>
+      </div>
+    </div>
+    <h1 class="header">Diagram Testing</h1>
+    <div class="diagram-showcase">
+      <div class="test">
+        <h2>Class Nodes Only</h2>
+        <pre class="mermaid">
+          ---
+          title: Animal example
+          ---
+          classDiagram
+              Animal : +int age
+              Animal : +String gender
+              Animal: +isMammal()
+              Animal: +mate()
+              class Duck{
+                  +String beakColor
+                  +swim()
+                  +quack()
+              }
+              class Fish{
+                  -int sizeInFeet
+                  -canEat()
+              }
+              class Zebra{
+                  +bool is_wild
+                  +run()
+              }
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Class Nodes LR</h2>
+        <pre class="mermaid">
+          ---
+          title: Animal example
+          ---
+          classDiagram
+              direction LR
+              Animal : +int age
+              Animal : +String gender
+              Animal: +isMammal()
+              Animal: +mate()
+              class Duck{
+                  +String beakColor
+                  +swim()
+                  +quack()
+              }
+              class Fish{
+                  -int sizeInFeet
+                  -canEat()
+              }
+              class Zebra{
+                  +bool is_wild
+                  +run()
+              }
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Relations</h2>
+        <pre class="mermaid">
+          classDiagram
+            classA <|-- classB
+            classC *-- classD
+            classE o-- classF
+            classG <-- classH
+            classI -- classJ
+            classK <.. classL
+            classM <|.. classN
+            classO .. classP
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Two Way Relation</h2>
+        <pre class="mermaid">
+          classDiagram
+          class Animal {
+            int size
+            walk()
+          }
+          class Zebra {
+            int size
+            walk()
+          }
+            Animal o--|> Zebra
+
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Relations with Labels</h2>
+        <pre class="mermaid">
+          classDiagram
+            classA <|-- classB : implements
+            classC *-- classD : composition
+            classE o-- classF : aggregation
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Cardinality / Multiplicity</h2>
+        <pre class="mermaid">
+          classDiagram
+            Customer "1" --> "*" Ticket
+            Student "1" --> "1..*" Course
+            Galaxy --> "many" Star : Contains
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Complex Relations with Theme</h2>
+        <pre class="mermaid">
+          ---
+          config:
+            theme: forest
+            look: handDrawns
+            layout: elk
+          ---
+          classDiagram
+            direction RL
+            class Student {
+              -idCard : IdCard
+            }
+            class IdCard{
+              -id : int
+              -name : string
+            }
+            class Bike{
+              -id : int
+              -name : string
+            }
+            Student "1" o--o "1" IdCard : carries
+            Student "1" o--o "1" Bike : rides
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Notes</h2>
+        <pre class="mermaid">
+          classDiagram
+            note "This is a general note"
+            note for MyClass "This is a note for a class"
+            class MyClass
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Namespaces</h2>
+        <pre class="mermaid">
+          classDiagram
+            namespace BaseShapes {
+                class Triangle
+                class Rectangle {
+                  double width
+                  double height
+                }
+            }
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Namespaces</h2>
+        <pre class="mermaid">
+          ---
+            config:
+              layout: elk
+          ---
+          classDiagram
+          namespace Namespace1 {
+            class C1
+            class C2
+          }
+          C1 --> C2
+          class C3
+          class C4
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Full Example</h2>
+        <pre class="mermaid">
+          ---
+          title: Animal example
+          config:
+            layout: dagre
+          ---
+          classDiagram
+              note "From Duck till Zebra"
+              Animal <|--|> Duck
+              note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
+              Animal <|-- Fish
+              Animal <|--|> Zebra
+              Animal : +int age
+              Animal : +String gender
+              Animal: +isMammal()
+              Animal: +mate()
+              class Duck{
+                  +String beakColor
+                  +swim()
+                  +quack()
+              }
+              class Fish{
+                  -int sizeInFeet
+                  -canEat()
+              }
+              class Zebra{
+                  +bool is_wild
+                  +run()
+              }
+              cssClass "Duck" test
+              classDef test fill:#f71
+              %%classDef default fill:#f93
+        </pre>
+      </div>
+      <div class="test">
+        <h2>Full Example</h2>
+        <pre class="mermaid">
+          ---
+            config:
+              theme: forest
+              look: handDrawn
+          ---
+          classDiagram
+          note for Outside "Note testing"
+          namespace Test {
+              class Outside
+          }
+          namespace BaseShapes {
+              class Triangle
+              class Rectangle {
+                double width
+                double height
+              }
+          }
+          Outside <|--|> Rectangle
+          style Triangle fill:#f9f,stroke:#333,stroke-width:4px
+        </pre>
+      </div>
+      <div class="test">
+        <pre class="mermaid">
+          ---
+            config:
+              look: handDrawn
+              layout: elk
+          ---
+          classDiagram
+            Class01 "1" <|--|> "*" AveryLongClass : Cool
+            &lt;&lt;interface&gt;&gt; Class01
+            Class03 "1" *-- "*" Class04
+            Class05 "1" o-- "many" Class06
+            Class07 "1" .. "*" Class08
+            Class09 "1" --> "*" C2 : Where am i?
+            Class09 "*" --* "*" C3
+            Class09 "1" --|> "1" Class07
+            NewClass ()--() Class04
+            Class09 <|--|> AveryLongClass
+            Class07  : equals()
+            Class07  : Object[] elementData
+            Class01  : size()
+            Class01  : int chimp
+            Class01  : int gorilla
+            Class08 "1" <--> "*" C2: Cool label
+            class Class10 {
+              &lt;&lt;service&gt;&gt;
+              int id
+              test()
+            }
+            Class10 o--o AveryLongClass
+            Class10 <--> Class07
+        </pre>
+      </div>
+      <div class="test">
+        <pre class="mermaid">
+          classDiagram
+            test ()--() test2
+        </pre>
+      </div>
+    </div>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
+      mermaid.registerLayoutLoaders(layouts);
+      mermaid.parseError = function (err, hash) {
+        console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize();
+      mermaid.parseError = function (err, hash) {
+        console.error('In parse error:');
+        console.error(err);
+      };
+    </script>
+  </body>
+  <style>
+    .header {
+      text-decoration: underline;
+      text-align: center;
+    }
+    .node-showcase {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+    }
+    .test {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.4rem;
+    }
+    .test > h2 {
+      margin: 0;
+      text-align: center;
+    }
+    .test > p {
+      margin-top: -6px;
+      color: gray;
+    }
+
+    .diagram-showcase {
+      display: grid;
+      grid-template-columns: 1fr;
+    }
+
+    .styleClass > * > path {
+      fill: #ff0000 !important;
+      stroke: #ffff00 !important;
+      stroke-width: 4px !important;
+      stroke-dasharray: 2 !important;
+    }
+  </style>
+</html>

cypress/timings.json

@@ -0,0 +1,152 @@
+{
+  "durations": [
+    {
+      "spec": "cypress/integration/other/configuration.spec.js",
+      "duration": 4989
+    },
+    {
+      "spec": "cypress/integration/other/external-diagrams.spec.js",
+      "duration": 1382
+    },
+    {
+      "spec": "cypress/integration/other/ghsa.spec.js",
+      "duration": 3178
+    },
+    {
+      "spec": "cypress/integration/other/iife.spec.js",
+      "duration": 1372
+    },
+    {
+      "spec": "cypress/integration/other/interaction.spec.js",
+      "duration": 8998
+    },
+    {
+      "spec": "cypress/integration/other/rerender.spec.js",
+      "duration": 1249
+    },
+    {
+      "spec": "cypress/integration/other/xss.spec.js",
+      "duration": 25664
+    },
+    {
+      "spec": "cypress/integration/rendering/appli.spec.js",
+      "duration": 1928
+    },
+    {
+      "spec": "cypress/integration/rendering/architecture.spec.ts",
+      "duration": 2330
+    },
+    {
+      "spec": "cypress/integration/rendering/block.spec.js",
+      "duration": 11156
+    },
+    {
+      "spec": "cypress/integration/rendering/c4.spec.js",
+      "duration": 3418
+    },
+    {
+      "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
+      "duration": 14866
+    },
+    {
+      "spec": "cypress/integration/rendering/classDiagram.spec.js",
+      "duration": 9894
+    },
+    {
+      "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
+      "duration": 5778
+    },
+    {
+      "spec": "cypress/integration/rendering/current.spec.js",
+      "duration": 1690
+    },
+    {
+      "spec": "cypress/integration/rendering/erDiagram.spec.js",
+      "duration": 9144
+    },
+    {
+      "spec": "cypress/integration/rendering/errorDiagram.spec.js",
+      "duration": 1951
+    },
+    {
+      "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
+      "duration": 2196
+    },
+    {
+      "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
+      "duration": 21029
+    },
+    {
+      "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
+      "duration": 16087
+    },
+    {
+      "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
+      "duration": 27465
+    },
+    {
+      "spec": "cypress/integration/rendering/flowchart.spec.js",
+      "duration": 20035
+    },
+    {
+      "spec": "cypress/integration/rendering/gantt.spec.js",
+      "duration": 11366
+    },
+    {
+      "spec": "cypress/integration/rendering/gitGraph.spec.js",
+      "duration": 34025
+    },
+    {
+      "spec": "cypress/integration/rendering/iconShape.spec.ts",
+      "duration": 185902
+    },
+    {
+      "spec": "cypress/integration/rendering/imageShape.spec.ts",
+      "duration": 41631
+    },
+    {
+      "spec": "cypress/integration/rendering/info.spec.ts",
+      "duration": 1736
+    },
+    {
+      "spec": "cypress/integration/rendering/journey.spec.js",
+      "duration": 2247
+    },
+    {
+      "spec": "cypress/integration/rendering/katex.spec.js",
+      "duration": 2144
+    },
+    {
+      "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
+      "duration": 1646
+    },
+    {
+      "spec": "cypress/integration/rendering/mindmap.spec.ts",
+      "duration": 6406
+    },
+    {
+      "spec": "cypress/integration/rendering/newShapes.spec.ts",
+      "duration": 107219
+    },
+    {
+      "spec": "cypress/integration/rendering/stateDiagram.spec.js",
+      "duration": 15834
+    },
+    {
+      "spec": "cypress/integration/rendering/theme.spec.js",
+      "duration": 33240
+    },
+    {
+      "spec": "cypress/integration/rendering/timeline.spec.ts",
+      "duration": 7122
+    },
+    {
+      "spec": "cypress/integration/rendering/xyChart.spec.js",
+      "duration": 11127
+    },
+    {
+      "spec": "cypress/integration/rendering/zenuml.spec.js",
+      "duration": 2391
+    }
+  ]
+}

demos/architecture.html

@@ -0,0 +1,256 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Architecture Mermaid Quick 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>
+    <h1>Architecture diagram demo</h1>
+    <h2>Simple diagram with groups</h2>
+    <pre class="mermaid">
+      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
+    </pre>
+    <hr />
+
+    <h2>Groups within groups</h2>
+    <pre class="mermaid">
+      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
+    </pre>
+    <hr />
+
+    <h2>Default icon (?) from unknown icon name</h2>
+    <pre class="mermaid">
+      architecture-beta
+        service unknown(iconnamedoesntexist)[Unknown Icon]
+    </pre>
+    <hr />
+
+    <h2>Split Direction</h2>
+    <pre class="mermaid">
+      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
+    </pre>
+    <hr />
+
+    <h2>Arrow Tests</h2>
+    <pre class="mermaid">
+      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
+    </pre>
+    <pre class="mermaid">
+      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
+
+        servT:L <--> T:servL
+        servB:L <--> B:servL
+        servT:R <--> T:servR
+        servB:R <--> B:servR
+    </pre>
+    <hr />
+
+    <h2>Group Edges</h2>
+    <pre class="mermaid">
+      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}
+  </pre
+    >
+    <hr />
+
+    <h2>Edge Label Test</h2>
+    <pre class="mermaid">
+      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
+    </pre>
+    <pre class="mermaid">
+      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 that is Long]- R:servL
+        servC:R -[Label that is Long]- L:servR
+        servC:T -[Label that is Long]- B:servT
+        servC:B -[Label that is Long]- T:servB
+
+        servL:T -[Label that is Long]- L:servT
+        servL:B -[Label that is Long]- L:servB
+        servR:T -[Label that is Long]- R:servT
+        servR:B -[Label that is Long]- R:servB
+    </pre>
+
+    <hr />
+    <h2>Junction Demo</h2>
+    <pre class="mermaid">
+      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
+    </pre>
+    <hr />
+
+    <h2>Junction Demo Groups</h2>
+    <pre class="mermaid">
+      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}
+    </pre>
+    <hr />
+
+    <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.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()
+            ),
+        },
+      ]);
+    </script>
+  </body>
+</html>

demos/classchart.html

@@ -159,30 +159,87 @@
       class People List~List~Person~~
     </pre>
     <hr />
-
     <pre class="mermaid">
     classDiagram
-      A1 --> B1
-      namespace A {
-        class A1 {
-          +foo : string
-        }
-        class A2 {
-          +bar : int
+      namespace Company.Project.Module {
+        class GenericClass~T~ {
+          +addItem(item: T)
+          +getItem() T
         }
       }
-      namespace B {
-        class B1 {
-          +foo : bool
-        }
-        class B2 {
-          +bar : float
-        }
-      }
-      A2 --> B2
     </pre>
     <hr />
-
+    <pre class="mermaid">
+    classDiagram
+      namespace Company.Project.Module.SubModule {
+        class Report {
+          +generatePDF(data: List)
+          +generateCSV(data: List)
+        }
+      }
+      namespace Company.Project.Module {
+        class Admin {
+          +generateReport()
+        }
+      }
+      Admin --> Report : generates
+    </pre>
+    <pre class="mermaid">
+    classDiagram
+      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
+    </pre>
+    <hr />
+    <pre class="mermaid">
+    classDiagram
+      namespace Shapes {
+        class Shape {
+          +calculateArea() double
+        }
+        class Circle {
+          +double radius
+        }
+        class Square {
+          +double side
+        }
+      }
+      
+      Shape <|-- Circle
+      Shape <|-- Square
+      
+      namespace Vehicles {
+        class Vehicle {
+          +String brand
+        }
+        class Car {
+          +int horsepower
+        }
+        class Bike {
+          +boolean hasGears
+        }
+      }
+      
+      Vehicle <|-- Car
+      Vehicle <|-- Bike
+      Car --> Circle : "Logo Shape"
+      Bike --> Square : "Logo Shape"
+                  
+    </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({

demos/dev/example.html

@@ -39,8 +39,8 @@ graph TB
 
     <script type="module">
       import mermaid from '/mermaid.esm.mjs';
-      import flowchartELK from '/mermaid-flowchart-elk.esm.mjs';
-      await mermaid.registerExternalDiagrams([flowchartELK]);
+      import layouts from '/mermaid-layout-elk.esm.mjs';
+      mermaid.registerLayoutLoaders(layouts);
       async function render(str) {
         const { svg } = await mermaid.render('dynamic', str);
         document.getElementById('dynamicDiagram').innerHTML = svg;

demos/er.html

@@ -125,6 +125,35 @@
     </pre>
     <hr />
 
+    <pre class="mermaid">
+    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"
+    </pre>
+    <hr />
+
     <pre class="mermaid">
     erDiagram
       _customer_order {

demos/index.html

@@ -88,6 +88,9 @@
       <li>
         <h2><a href="./block.html">Layered Blocks</a></h2>
       </li>
+      <li>
+        <h2><a href="./architecture.html">Architecture</a></h2>
+      </li>
     </ul>
   </body>
 </html>

docker-compose.yml

@@ -7,9 +7,6 @@ services:
     tty: true
     working_dir: /mermaid
     mem_limit: '8G'
-    entrypoint: ./docker-entrypoint.sh
-    environment:
-      - NODE_OPTIONS=--max_old_space_size=8192
     volumes:
       - ./:/mermaid
       - root_cache:/root/.cache

docker-entrypoint.sh

@@ -1,3 +0,0 @@
-#!/bin/sh
-source /root/.shrc
-exec "$@"

docs/adding-new-shape.md

@@ -0,0 +1,233 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/adding-new-shape.md](../packages/mermaid/src/docs/adding-new-shape.md).
+
+# Custom SVG Shapes Library
+
+This library provides a collection of custom SVG shapes, utilities, and helpers for generating diagram components. The shapes are designed to be used within an SVG container and include a variety of common and complex shapes.
+
+## Overview
+
+## Shape Helpers and Utilities
+
+Before starting with shape creation, it's essential to familiarize yourself with the utilities provided in the `utils.ts` file from `packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js`. These utilities are designed to assist with various aspects of SVG shape manipulation and ensure consistent and accurate rendering.
+
+## Available Utilities
+
+### 1. `labelHelper`
+
+- **Purpose**: This function creates and inserts labels inside SVG shapes.
+- **Features**:
+  - Handles both HTML labels and plain text.
+  - Calculates the bounding box dimensions of the label.
+  - Ensures proper positioning of labels within shapes.
+
+### 2. `updateNodeBounds`
+
+- **Purpose**: Updates the bounding box dimensions (width and height) of a node.
+- **Usage**:
+  - Adjusts the size of the node to fit the content or shape.
+  - Useful for ensuring that shapes resize appropriately based on their content.
+
+### 3. `insertPolygonShape`
+
+- **Purpose**: Inserts a polygon shape into an SVG container.
+- **Features**:
+  - Handles the creation and insertion of complex polygonal shapes.
+  - Configures the shape's appearance and positioning within the SVG container.
+
+### 4. `getNodeClasses`
+
+- **Purpose**: Returns the appropriate CSS classes for a node based on its configuration.
+- **Usage**:
+  - Dynamically applies CSS classes to nodes for styling purposes.
+  - Ensures that nodes adhere to the desired design and theme.
+
+### 5. `createPathFromPoints`
+
+- **Purpose**: Generates an SVG path string from an array of points.
+- **Usage**:
+  - Converts a list of points into a smooth path.
+  - Useful for creating custom shapes or paths within the SVG.
+
+### 6. `generateFullSineWavePoints`
+
+- **Purpose**: Generates points for a sine wave, useful for creating wavy-edged shapes.
+- **Usage**:
+  - Facilitates the creation of shapes with wavy or sine-wave edges.
+  - Can be used to add decorative or dynamic edges to shapes.
+
+## Getting Started
+
+To utilize these utilities, simply import them from the `utils.ts` file into your shape creation script. These helpers will streamline the process of building and customizing SVG shapes, ensuring consistent results across your projects.
+
+```typescript
+import {
+  labelHelper,
+  updateNodeBounds,
+  insertPolygonShape,
+  getNodeClasses,
+  createPathFromPoints,
+  generateFullSineWavePoints,
+} from './utils.ts';
+```
+
+## Example Usage
+
+Here’s a basic example of how you might use some of these utilities:
+
+```typescript
+import { labelHelper, insertPolygonShape } from './utils.ts';
+
+const svgContainer = document.getElementById('svgContainer');
+
+// Insert a polygon shape
+insertPolygonShape(svgContainer /* shape-specific parameters */);
+
+// Create and insert a label inside the shape
+labelHelper(svgContainer /* label-specific parameters */);
+```
+
+## Adding New Shapes
+
+### 1. Create the Shape Function
+
+To add a new shape:
+
+- **Create the shape function**: Create a new file of name of the shape and export a function in the `shapes` directory that generates your shape. The file and function should follow the pattern used in existing shapes and return an SVG element.
+
+- **Example**:
+
+  ```typescript
+  import { Node, RenderOptions } from '../../types.ts';
+
+  export const myNewShape = async (
+    parent: SVGAElement,
+    node: Node,
+    renderOptions: RenderOptions
+  ) => {
+    // Create your shape here
+    const shape = parent.insert('g').attr('class', 'my-new-shape');
+    // Add other elements or styles as needed
+    return shape;
+  };
+  ```
+
+### 2. Register the Shape
+
+- **Register the shape**: Add your shape to the `shapes` object in the [main shapes module](../rendering-util/rendering-elements/shapes.ts). This allows your shape to be recognized and used within the system.
+
+- **Example**:
+
+  ```typescript
+  import { myNewShape } from './shapes/myNewShape';
+
+  const shapes = {
+    ...,
+    {
+      semanticName: 'My Shape',
+      name: 'Shape Name',
+      shortName: '<short-name>',
+      description: '<Description for the shape>',
+      aliases: ['<alias-one>', '<al-on>', '<alias-two>', '<al-two>'],
+      handler: myNewShape,
+    },
+  };
+  ```
+
+# Shape Intersection Algorithms
+
+This contains algorithms and utilities for calculating intersection points for various shapes in SVG. Arrow intersection points are crucial for accurately determining where arrows connect with shapes. Ensuring precise intersection points enhances the clarity and accuracy of flowcharts and diagrams.
+
+## Shape Intersection Functions
+
+### 1. `Ellipse`
+
+Calculates the intersection points for an ellipse.
+
+**Usage**:
+
+```javascript
+import intersectEllipse from './intersect-ellipse.js';
+
+const intersection = intersectEllipse(node, rx, ry, point);
+```
+
+- **Parameters**:
+  - `node`: The SVG node element.
+  - `rx`: The x-radius of the ellipse.
+  - `ry`: The y-radius of the ellipse.
+  - `point`: The point from which the intersection is calculated.
+
+### 2. `intersectRect`
+
+Calculates the intersection points for a rectangle.
+
+**Usage**:
+
+```javascript
+import intersectRect from './intersect-rect.js';
+
+const intersection = intersectRect(node, point);
+```
+
+- **Parameters**:
+  - `node`: The SVG node element.
+  - `point`: The point from which the intersection is calculated.
+
+### 3. `intersectPolygon`
+
+Calculates the intersection points for a polygon.
+
+**Usage**:
+
+```javascript
+import intersectPolygon from './intersect-polygon.js';
+
+const intersection = intersectPolygon(node, polyPoints, point);
+```
+
+- **Parameters**:
+  - `node`: The SVG node element.
+  - `polyPoints`: Array of points defining the polygon.
+  - `point`: The point from which the intersection is calculated.
+
+## Cypress Tests
+
+To ensure the robustness of the flowchart shapes, there are implementation of comprehensive Cypress test cases in `newShapes.spec.ts` file. These tests cover various aspects such as:
+
+- **Shapes**: Testing new shapes like `bowTieRect`, `waveRectangle`, `trapezoidalPentagon`, etc.
+- **Looks**: Verifying shapes under different visual styles (`classic` and `handDrawn`).
+- **Directions**: Ensuring correct rendering in all flow directions of arrows :
+  - `TB` `(Top -> Bottom)`
+  - `BT` `(Bottom -> Top)`
+  - `LR` `(Left -> Right)`
+  - `RL` `(Right -> Left)`
+- **Labels**: Testing shapes with different labels, including:
+  - No labels
+  - Short labels
+  - Very long labels
+  - Markdown with `htmlLabels:true` and `htmlLabels:false`
+- **Styles**: Applying custom styles to shapes and verifying correct rendering.
+- **Class Definitions**: Using `classDef` to apply custom classes and testing their impact.
+
+### Running the Tests
+
+To run the Cypress tests, follow these steps:
+
+1. Ensure you have all dependencies installed by running:
+
+   ```bash
+   pnpm install
+   ```
+
+2. Start the Cypress test runner:
+
+   ```bash
+   cypress open --env updateSnapshots=true
+
+   ```
+
+3. Select the test suite from the Cypress interface to run all the flowchart shape tests.

docs/community/contributing.md

@@ -370,9 +370,9 @@ If the users have no way to know that things have changed, then you haven't real
 Likewise, if users don't know that there is a new feature that you've implemented, it will forever remain unknown and unused.
 
 The documentation has to be updated for users to know that things have been changed and added!
-If you are adding a new feature, add `(v10.8.0+)` in the title or description. It will be replaced automatically with the current version number when the release happens.
+If you are adding a new feature, add `(v<MERMAID_RELEASE_VERSION>+)` in the title or description. It will be replaced automatically with the current version number when the release happens.
 
-eg: `# Feature Name (v10.8.0+)`
+eg: `# Feature Name (v<MERMAID_RELEASE_VERSION>+)`
 
 We know it can sometimes be hard to code _and_ write user documentation.
 

docs/config/icons.md

@@ -0,0 +1,55 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/icons.md](../../packages/mermaid/src/docs/config/icons.md).
+
+# Registering icon pack in mermaid
+
+The icon packs available can be found at [icones.js.org](https://icones.js.org/).
+We use the name defined when registering the icon pack, to override the prefix field of the iconify pack. This allows the user to use shorter names for the icons. It also allows us to load a particular pack only when it is used in a diagram.
+
+Using JSON file directly from CDN:
+
+```js
+import mermaid from 'CDN/mermaid.esm.mjs';
+mermaid.registerIconPacks([
+  {
+    name: 'logos',
+    loader: () =>
+      fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
+  },
+]);
+```
+
+Using packages and a bundler:
+
+```bash
+npm install @iconify-json/logos@1
+```
+
+With lazy loading
+
+```js
+import mermaid from 'mermaid';
+
+mermaid.registerIconPacks([
+  {
+    name: 'logos',
+    loader: () => import('@iconify-json/logos').then((module) => module.icons),
+  },
+]);
+```
+
+Without lazy loading
+
+```js
+import mermaid from 'mermaid';
+import { icons } from '@iconify-json/logos';
+mermaid.registerIconPacks([
+  {
+    name: icons.prefix, // To use the prefix defined in the icon pack
+    icons,
+  },
+]);
+```

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

@@ -127,7 +127,7 @@ Error.prepareStackTrace
 
 #### Defined in
 
-node_modules/@types/node/globals.d.ts:28
+node_modules/.pnpm/@types+node\@20.16.11/node_modules/@types/node/globals.d.ts:98
 
 ---
 
@@ -141,7 +141,7 @@ Error.stackTraceLimit
 
 #### Defined in
 
-node_modules/@types/node/globals.d.ts:30
+node_modules/.pnpm/@types+node\@20.16.11/node_modules/@types/node/globals.d.ts:100
 
 ## Methods
 
@@ -168,4 +168,4 @@ Error.captureStackTrace
 
 #### Defined in
 
-node_modules/@types/node/globals.d.ts:21
+node_modules/.pnpm/@types+node\@20.16.11/node_modules/@types/node/globals.d.ts:91

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

@@ -16,11 +16,11 @@
 
 ### config
 
-• **config**: `MermaidConfig`
+• **config**: [`MermaidConfig`](mermaid.MermaidConfig.md)
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/types.d.ts:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.d.ts#L118)
+[packages/mermaid/src/rendering-util/types.ts:144](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L144)
 
 ---
 
@@ -30,7 +30,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/types.d.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.d.ts#L117)
+[packages/mermaid/src/rendering-util/types.ts:143](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L143)
 
 ---
 
@@ -40,4 +40,4 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/types.d.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.d.ts#L116)
+[packages/mermaid/src/rendering-util/types.ts:142](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L142)

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

@@ -28,7 +28,7 @@ page.
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
+[packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
 
 ---
 
@@ -59,7 +59,7 @@ A graph definition key
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
+[packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
 
 ---
 
@@ -89,7 +89,7 @@ Use [initialize](mermaid.Mermaid.md#initialize) and [run](mermaid.Mermaid.md#run
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)
+[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
 
 ---
 
@@ -116,7 +116,7 @@ This function should be called before the run function.
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
+[packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
 
 ---
 
@@ -130,7 +130,7 @@ Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) in
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:424](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L424)
+[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
 
 ---
 
@@ -180,7 +180,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
+[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
 
 ---
 
@@ -190,7 +190,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)
+[packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420)
 
 ---
 
@@ -218,7 +218,31 @@ Used to register external diagram types.
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
+[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
+
+---
+
+### registerIconPacks
+
+• **registerIconPacks**: (`iconLoaders`: `IconLoader`\[]) => `void`
+
+#### Type declaration
+
+▸ (`iconLoaders`): `void`
+
+##### Parameters
+
+| Name          | Type            |
+| :------------ | :-------------- |
+| `iconLoaders` | `IconLoader`\[] |
+
+##### Returns
+
+`void`
+
+#### Defined in
+
+[packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439)
 
 ---
 
@@ -242,7 +266,7 @@ Used to register external diagram types.
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
+[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
 
 ---
 
@@ -268,7 +292,7 @@ Used to register external diagram types.
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
+[packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
 
 ---
 
@@ -316,7 +340,7 @@ Renders the mermaid diagrams
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
+[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
 
 ---
 
@@ -351,7 +375,7 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
+[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
 
 ---
 
@@ -361,4 +385,4 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418)
+[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)

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

@@ -16,7 +16,17 @@
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:112](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L112)
+[packages/mermaid/src/config.type.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L122)
+
+---
+
+### architecture
+
+• `Optional` **architecture**: `ArchitectureDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)
 
 ---
 
@@ -29,7 +39,7 @@ This matters if you are using base tag settings.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
+[packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)
 
 ---
 
@@ -39,7 +49,7 @@ This matters if you are using base tag settings.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)
+[packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
 
 ---
 
@@ -49,7 +59,7 @@ This matters if you are using base tag settings.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)
+[packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
 
 ---
 
@@ -59,7 +69,7 @@ This matters if you are using base tag settings.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:177](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L177)
+[packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)
 
 ---
 
@@ -69,7 +79,7 @@ This matters if you are using base tag settings.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L103)
+[packages/mermaid/src/config.type.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L113)
 
 ---
 
@@ -83,7 +93,7 @@ You can set this attribute to base the seed on a static string.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L171)
+[packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181)
 
 ---
 
@@ -101,7 +111,7 @@ should not change unless content is changed.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:164](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L164)
+[packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)
 
 ---
 
@@ -111,7 +121,7 @@ should not change unless content is changed.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)
+[packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
 
 ---
 
@@ -121,10 +131,11 @@ should not change unless content is changed.
 
 #### Type declaration
 
-| Name                     | Type                                                                          | Description                                                                                                                                               |
-| :----------------------- | :---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `mergeEdges?`            | `boolean`                                                                     | Elk specific option that allows edges to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram. |
-| `nodePlacementStrategy?` | `"SIMPLE"` \| `"NETWORK_SIMPLEX"` \| `"LINEAR_SEGMENTS"` \| `"BRANDES_KOEPF"` | Elk specific option affecting how nodes are placed.                                                                                                       |
+| Name                     | Type                                                                                          | Description                                                                                                                                               |
+| :----------------------- | :-------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `cycleBreakingStrategy?` | `"GREEDY"` \| `"DEPTH_FIRST"` \| `"INTERACTIVE"` \| `"MODEL_ORDER"` \| `"GREEDY_MODEL_ORDER"` | This strategy decides how to find cycles in the graph and deciding which edges need adjustment to break loops.                                            |
+| `mergeEdges?`            | `boolean`                                                                                     | Elk specific option that allows edges to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram. |
+| `nodePlacementStrategy?` | `"SIMPLE"` \| `"NETWORK_SIMPLEX"` \| `"LINEAR_SEGMENTS"` \| `"BRANDES_KOEPF"`                 | Elk specific option affecting how nodes are placed.                                                                                                       |
 
 #### Defined in
 
@@ -138,7 +149,7 @@ should not change unless content is changed.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:179](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L179)
+[packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)
 
 ---
 
@@ -148,7 +159,7 @@ should not change unless content is changed.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L172)
+[packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)
 
 ---
 
@@ -162,7 +173,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:111](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L111)
+[packages/mermaid/src/config.type.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L121)
 
 ---
 
@@ -172,7 +183,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)
+[packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
 
 ---
 
@@ -186,7 +197,7 @@ If set to true, ignores legacyMathML.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L153)
+[packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)
 
 ---
 
@@ -196,7 +207,7 @@ If set to true, ignores legacyMathML.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)
+[packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
 
 ---
 
@@ -206,7 +217,7 @@ If set to true, ignores legacyMathML.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)
+[packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
 
 ---
 
@@ -228,7 +239,7 @@ Defines the seed to be used when using handDrawn look. This is important for the
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L104)
+[packages/mermaid/src/config.type.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L114)
 
 ---
 
@@ -238,7 +249,17 @@ Defines the seed to be used when using handDrawn look. This is important for the
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:175](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L175)
+[packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)
+
+---
+
+### kanban
+
+• `Optional` **kanban**: `KanbanDiagramConfig`
+
+#### Defined in
+
+[packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
 
 ---
 
@@ -265,7 +286,7 @@ fall back to legacy rendering for KaTeX.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L146)
+[packages/mermaid/src/config.type.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L156)
 
 ---
 
@@ -277,7 +298,7 @@ This option decides the amount of logging to be used by mermaid.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L117)
+[packages/mermaid/src/config.type.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L127)
 
 ---
 
@@ -299,7 +320,7 @@ Defines which main look to use for the diagram.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
+[packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)
 
 ---
 
@@ -333,7 +354,7 @@ The maximum allowed size of the users text diagram
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
+[packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)
 
 ---
 
@@ -343,7 +364,7 @@ The maximum allowed size of the users text diagram
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)
+[packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
 
 ---
 
@@ -353,7 +374,7 @@ The maximum allowed size of the users text diagram
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:180](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L180)
+[packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)
 
 ---
 
@@ -363,7 +384,7 @@ The maximum allowed size of the users text diagram
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181)
+[packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
 
 ---
 
@@ -373,7 +394,7 @@ The maximum allowed size of the users text diagram
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)
+[packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
 
 ---
 
@@ -383,7 +404,7 @@ The maximum allowed size of the users text diagram
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)
+[packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
 
 ---
 
@@ -397,7 +418,7 @@ This prevents malicious graph directives from overriding a site's default securi
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L138)
+[packages/mermaid/src/config.type.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L148)
 
 ---
 
@@ -409,7 +430,7 @@ Level of trust for parsed diagram
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L121)
+[packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
 
 ---
 
@@ -419,7 +440,7 @@ Level of trust for parsed diagram
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L173)
+[packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)
 
 ---
 
@@ -431,7 +452,7 @@ Dictates whether mermaid starts on Page load
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:125](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L125)
+[packages/mermaid/src/config.type.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L135)
 
 ---
 
@@ -441,7 +462,7 @@ Dictates whether mermaid starts on Page load
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:178](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L178)
+[packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)
 
 ---
 
@@ -454,7 +475,7 @@ This is useful when you want to control how to handle syntax errors in your appl
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
+[packages/mermaid/src/config.type.ts:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211)
 
 ---
 
@@ -497,7 +518,7 @@ You may also use `themeCSS` to override this value.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:176](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L176)
+[packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)
 
 ---
 
@@ -507,7 +528,7 @@ You may also use `themeCSS` to override this value.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
+[packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
 
 ---
 
@@ -517,4 +538,4 @@ You may also use `themeCSS` to override this value.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)
+[packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)

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

@@ -19,4 +19,4 @@ The `parseError` function will not be called.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:43](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L43)
+[packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59)

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

@@ -10,6 +10,18 @@
 
 ## Properties
 
+### config
+
+• **config**: [`MermaidConfig`](mermaid.MermaidConfig.md)
+
+The config passed as YAML frontmatter or directives
+
+#### Defined in
+
+[packages/mermaid/src/types.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L70)
+
+---
+
 ### diagramType
 
 • **diagramType**: `string`
@@ -18,4 +30,4 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:50](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L50)
+[packages/mermaid/src/types.ts:66](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L66)

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

@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:73](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L73)
+[packages/mermaid/src/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L98)
 
 ---
 
@@ -51,7 +51,7 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L63)
+[packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
 
 ---
 
@@ -63,4 +63,4 @@ The svg code for the rendered graph.
 
 #### Defined in
 
-[packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59)
+[packages/mermaid/src/types.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L84)

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

@@ -18,7 +18,7 @@ The nodes to render. If this is set, `querySelector` will be ignored.
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:48](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L48)
+[packages/mermaid/src/mermaid.ts:49](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L49)
 
 ---
 
@@ -44,7 +44,7 @@ A callback to call after each diagram is rendered.
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:52](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L52)
+[packages/mermaid/src/mermaid.ts:53](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L53)
 
 ---
 
@@ -56,7 +56,7 @@ The query selector to use when finding elements to render. Default: `".mermaid"`
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:44](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L44)
+[packages/mermaid/src/mermaid.ts:45](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L45)
 
 ---
 
@@ -68,4 +68,4 @@ If `true`, errors will be logged to the console, but not thrown. Default: `false
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L56)
+[packages/mermaid/src/mermaid.ts:57](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L57)

docs/config/setup/modules/defaultConfig.md

@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266)
+[packages/mermaid/src/defaultConfig.ts:270](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L270)
 
 ---
 

docs/config/setup/modules/mermaid.md

@@ -87,4 +87,4 @@
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:440](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L440)
+[packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)

docs/ecosystem/integrations-community.md

@@ -64,7 +64,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
 - [Mermerd](https://github.com/KarnerTh/mermerd)
 - [Slab](https://slab.com) ✅
-- [Swimm](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-) ✅
+- [Swimm](https://docs.swimm.io/features/diagrams-and-charts) ✅
 - [NotesHub](https://noteshub.app) ✅
 - [Notion](https://notion.so) ✅
 - [Observable](https://observablehq.com/@observablehq/mermaid) ✅
@@ -74,6 +74,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
   - [Markdown for mermaid plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
   - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
 - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
+- [Microsoft Loop](https://loop.cloud.microsoft) ✅
 
 ### LLM integrations
 
@@ -144,7 +145,7 @@ Communication tools and platforms
   - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
 - [PmWiki](https://www.pmwiki.org)
   - [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs)
-- [Semantic Media Wiki](https://semantic-mediawiki.org)
+- [Semantic Media Wiki](https://www.semantic-mediawiki.org)
   - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
 - [TiddlyWiki](https://tiddlywiki.com/)
   - [mermaid-tw5: wrapper for Mermaid Live](https://github.com/efurlanm/mermaid-tw5)
@@ -184,8 +185,6 @@ Communication tools and platforms
   - [=Diagram block](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
 - [Standard Notes](https://standardnotes.com/)
   - [Mermaid Extension](https://github.com/nienow/sn-mermaid)
-- [Sublime Text 3](https://sublimetext.com)
-  - [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
 - [VS Code](https://code.visualstudio.com/)
   - [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
   - [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)
@@ -199,15 +198,22 @@ Communication tools and platforms
 - [Vim](https://www.vim.org)
   - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
   - [Official Vim Syntax and ft plugin](https://github.com/craigmac/vim-mermaid)
+- [Zed](https://zed.dev)
+  - [zed-mermaid](https://github.com/gabeidx/zed-mermaid)
 
 ### Document Generation
 
+- [Astro](https://astro.build/)
+  - [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/)
 - [Codedoc](https://codedoc.cc/)
   - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
 - [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) ✅
 - [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
 - [Gatsby](https://www.gatsbyjs.com/)
   - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
+- [Jekyll](https://jekyllrb.com/)
+  - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
+  - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
 - [JSDoc](https://jsdoc.app/)
   - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
 - [Madness](https://madness.dannyb.co/)
@@ -216,7 +222,7 @@ Communication tools and platforms
 - [MkDocs](https://www.mkdocs.org)
   - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
   - [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
-  - [Quarto](https://quarto.org/)
+- [Quarto](https://quarto.org/) ✅
 - [rehype](https://github.com/rehypejs/rehype)
   - [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid)
 - [remark](https://remark.js.org/)
@@ -245,17 +251,12 @@ Communication tools and platforms
 
 ### Other
 
-- [Astro](https://astro.build/)
-  - [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/)
 - [Bisheng](https://www.npmjs.com/package/bisheng)
   - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
 - [Blazorade Mermaid: Render Mermaid diagrams in Blazor applications](https://github.com/Blazorade/Blazorade-Mermaid/wiki)
 - [Codemia: A tool to practice system design problems](https://codemia.io) ✅
 - [ExDoc](https://github.com/elixir-lang/ex_doc)
   - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
-- [Jekyll](https://jekyllrb.com/)
-  - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
-  - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
 - [MarkChart: Preview Mermaid diagrams on macOS](https://markchart.app/)
 - [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
 - [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)

docs/ecosystem/mermaid-chart.md

@@ -22,17 +22,20 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 
 - **Editor** - A web based editor for creating and editing Mermaid diagrams.
 
-- **Visual Editor** - The Visual Editor enables users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
+- **Mermaid AI** - Use our embedded AI Chat to generate diagrams from natural language descriptions.
 
-- **AI Chat** - Use our embedded AI Chat to generate diagrams from natural language descriptions.
+- **Whiteboard** - A virtual whiteboard for creating and editing Mermaid diagrams.
 
 - **Plugins** - A plugin system for extending the functionality of Mermaid.
 
   Official Mermaid Chart plugins:
 
   - [Mermaid Chart GPT](https://chat.openai.com/g/g-1IRFKwq4G-mermaid-chart)
+  - [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
+  - [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)
   - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)
   - [JetBrains IDE](https://plugins.jetbrains.com/plugin/23043-mermaid-chart)
+  - [Google Docs](https://gsuite.google.com/marketplace/app/mermaidchart/947683068472)
   - [Microsoft PowerPoint and Word](https://appsource.microsoft.com/en-us/product/office/WA200006214?tab=Overview)
 
   Visit our [Plugins](https://www.mermaidchart.com/plugins) page for more information.

docs/ecosystem/tutorials.md

@@ -63,7 +63,7 @@ import matplotlib.pyplot as plt
 
 def mm(graph):
     graphbytes = graph.encode("utf8")
-    base64_bytes = base64.b64encode(graphbytes)
+    base64_bytes = base64.urlsafe_b64encode(graphbytes)
     base64_string = base64_bytes.decode("ascii")
     display(Image(url="https://mermaid.ink/img/" + base64_string))
 

docs/intro/index.md

@@ -55,6 +55,10 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo
 
 **Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project 🙏**
 
+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/">

docs/intro/syntax-reference.md

@@ -94,10 +94,8 @@ Mermaid offers a variety of styles or “looks” for your diagrams, allowing yo
 
 **Available Looks:**
 
-```
-•	Hand-Drawn Look: For a more personal, creative touch, the hand-drawn look brings a sketch-like quality to your diagrams. This style is perfect for informal settings or when you want to add a bit of personality to your diagrams.
-•	Classic Look: If you prefer the traditional Mermaid style, the classic look maintains the original appearance that many users are familiar with. It’s great for consistency across projects or when you want to keep the familiar aesthetic.
-```
+- Hand-Drawn Look: For a more personal, creative touch, the hand-drawn look brings a sketch-like quality to your diagrams. This style is perfect for informal settings or when you want to add a bit of personality to your diagrams.
+- Classic Look: If you prefer the traditional Mermaid style, the classic look maintains the original appearance that many users are familiar with. It’s great for consistency across projects or when you want to keep the familiar aesthetic.
 
 **How to Select a Look:**
 
@@ -133,10 +131,8 @@ In addition to customizing the look of your diagrams, Mermaid Chart now allows y
 
 #### Supported Layout Algorithms:
 
-```
-•	Dagre (default): This is the classic layout algorithm that has been used in Mermaid for a long time. It provides a good balance of simplicity and visual clarity, making it ideal for most diagrams.
-•	ELK: For those who need more sophisticated layout capabilities, especially when working with large or intricate diagrams, the ELK (Eclipse Layout Kernel) layout offers advanced options. It provides a more optimized arrangement, potentially reducing overlapping and improving readability. This is not included out the box but needs to be added when integrating mermaid for sites/applications that want to have elk support.
-```
+- Dagre (default): This is the classic layout algorithm that has been used in Mermaid for a long time. It provides a good balance of simplicity and visual clarity, making it ideal for most diagrams.
+- ELK: For those who need more sophisticated layout capabilities, especially when working with large or intricate diagrams, the ELK (Eclipse Layout Kernel) layout offers advanced options. It provides a more optimized arrangement, potentially reducing overlapping and improving readability. This is not included out the box but needs to be added when integrating mermaid for sites/applications that want to have elk support.
 
 #### How to Select a Layout Algorithm:
 

docs/news/blog.md

@@ -6,6 +6,30 @@
 
 # Blog
 
+## [Mermaid 11.4 is out: New Features and Kanban Diagramming](https://www.mermaidchart.com/blog/posts/mermaid-11-4-is-out-new-features-and-kanban-diagramming)
+
+Mermaid 11.4 brings enhanced functionality with the introduction of Kanban diagrams, allowing users to create visual workflows with status columns and task details.
+
+October 31, 2024 · 2 mins
+
+## [How To Build an ER Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-build-an-er-diagram-with-mermaid-chart)
+
+An entity relationship (ER) diagram acts like a blueprint for your database. This makes ER diagrams effective tools for anyone dealing with complex databases, data modeling, and AI model training.
+
+October 24, 2024 · 4 mins
+
+## [Expanding the Horizons of Mermaid Flowcharts: Introducing 30 New Shapes!](https://www.mermaidchart.com/blog/posts/new-mermaid-flowchart-shapes/)
+
+24 September 2024 · 5 mins
+
+Discover 30 new shapes in Mermaid flowcharts, offering enhanced clarity, customization, and versatility for more dynamic and expressive visualizations.
+
+## [Introducing Architecture Diagrams in Mermaid](https://www.mermaidchart.com/blog/posts/mermaid-supports-architecture-diagrams/)
+
+2 September 2024 · 2 mins
+
+Discover the fresh new and unique Neo and Hand-Drawn looks for Mermaid Diagrams, while still offering the classic look you love.
+
 ## [Mermaid v11 is out!](https://www.mermaidchart.com/blog/posts/mermaid-v11/)
 
 23 August 2024 · 2 mins

docs/syntax/architecture.md

@@ -0,0 +1,227 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/architecture.md](../../packages/mermaid/src/docs/syntax/architecture.md).
+
+# Architecture Diagrams Documentation (v11.1.0+)
+
+> In the context of mermaid-js, the architecture diagram is used to show the relationship between services and resources commonly found within the Cloud or CI/CD deployments. In an architecture diagram, services (nodes) are connected by edges. Related services can be placed within groups to better illustrate how they are organized.
+
+## Example
+
+```mermaid-example
+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
+
+    db:L -- R:server
+    disk1:T -- B:server
+    disk2:T -- B:db
+```
+
+```mermaid
+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
+
+    db:L -- R:server
+    disk1:T -- B:server
+    disk2:T -- B:db
+```
+
+## Syntax
+
+The building blocks of an architecture are `groups`, `services`, `edges`, and `junctions`.
+
+For supporting components, icons are declared by surrounding the icon name with `()`, while labels are declared by surrounding the text with `[]`.
+
+To begin an architecture diagram, use the keyword `architecture-beta`, followed by your groups, services, edges, and junctions. While each of the 3 building blocks can be declared in any order, care must be taken to ensure the identifier was previously declared by another component.
+
+### Groups
+
+The syntax for declaring a group is:
+
+```
+group {group id}({icon name})[{title}] (in {parent id})?
+```
+
+Put together:
+
+```
+group public_api(cloud)[Public API]
+```
+
+creates a group identified as `public_api`, uses the icon `cloud`, and has the label `Public API`.
+
+Additionally, groups can be placed within a group using the optional `in` keyword
+
+```
+group private_api(cloud)[Private API] in public_api
+```
+
+### Services
+
+The syntax for declaring a service is:
+
+```
+service {service id}({icon name})[{title}] (in {parent id})?
+```
+
+Put together:
+
+```
+service database1(database)[My Database]
+```
+
+creates the service identified as `database1`, using the icon `database`, with the label `My Database`.
+
+If the service belongs to a group, it can be placed inside it through the optional `in` keyword
+
+```
+service database1(database)[My Database] in private_api
+```
+
+### Edges
+
+The syntax for declaring an edge is:
+
+```
+{serviceId}{{group}}?:{T|B|L|R} {<}?--{>}? {T|B|L|R}:{serviceId}{{group}}?
+```
+
+#### Edge Direction
+
+The side of the service the edge comes out of is specified by adding a colon (`:`) to the side of the service connecting to the arrow and adding `L|R|T|B`
+
+For example:
+
+```
+db:R -- L:server
+```
+
+creates an edge between the services `db` and `server`, with the edge coming out of the right of `db` and the left of `server`.
+
+```
+db:T -- L:server
+```
+
+creates a 90 degree edge between the services `db` and `server`, with the edge coming out of the top of `db` and the left of `server`.
+
+#### Arrows
+
+Arrows can be added to each side of an edge by adding `<` before the direction on the left, and/or `>` after the direction on the right.
+
+For example:
+
+```
+subnet:R --> L:gateway
+```
+
+creates an edge with the arrow going into the `gateway` service
+
+#### Edges out of Groups
+
+To have an edge go from a group to another group or service within another group, the `{group}` modifier can be added after the `serviceId`.
+
+For example:
+
+```
+service server[Server] in groupOne
+service subnet[Subnet] in groupTwo
+
+server{group}:B --> T:subnet{group}
+```
+
+creates an edge going out of `groupOne`, adjacent to `server`, and into `groupTwo`, adjacent to `subnet`.
+
+It's important to note that `groupId`s cannot be used for specifying edges and the `{group}` modifier can only be used for services within a group.
+
+### Junctions
+
+Junctions are a special type of node which acts as a potential 4-way split between edges.
+
+The syntax for declaring a junction is:
+
+```
+junction {junction id} (in {parent id})?
+```
+
+```mermaid-example
+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 junctionCenter
+    junction junctionRight
+
+    left_disk:R -- L:junctionCenter
+    top_disk:B -- T:junctionCenter
+    bottom_disk:T -- B:junctionCenter
+    junctionCenter:R -- L:junctionRight
+    top_gateway:B -- T:junctionRight
+    bottom_gateway:T -- B:junctionRight
+```
+
+```mermaid
+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 junctionCenter
+    junction junctionRight
+
+    left_disk:R -- L:junctionCenter
+    top_disk:B -- T:junctionCenter
+    bottom_disk:T -- B:junctionCenter
+    junctionCenter:R -- L:junctionRight
+    top_gateway:B -- T:junctionRight
+    bottom_gateway:T -- B:junctionRight
+```
+
+## Icons
+
+By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
+Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps [here](../config/icons.md).
+
+After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.
+
+```mermaid-example
+architecture-beta
+    group api(logos:aws-lambda)[API]
+
+    service db(logos:aws-aurora)[Database] in api
+    service disk1(logos:aws-glacier)[Storage] in api
+    service disk2(logos:aws-s3)[Storage] in api
+    service server(logos:aws-ec2)[Server] in api
+
+    db:L -- R:server
+    disk1:T -- B:server
+    disk2:T -- B:db
+```
+
+```mermaid
+architecture-beta
+    group api(logos:aws-lambda)[API]
+
+    service db(logos:aws-aurora)[Database] in api
+    service disk1(logos:aws-glacier)[Storage] in api
+    service disk2(logos:aws-s3)[Storage] in api
+    service server(logos:aws-ec2)[Server] in api
+
+    db:L -- R:server
+    disk1:T -- B:server
+    disk2:T -- B:db
+```

docs/syntax/block.md

@@ -141,7 +141,7 @@ block-beta
   a["A label"] b:2 c:2 d
 ```
 
-In this example, the block labeled "A wide one" spans two columns, while blocks 'b', 'c', and 'd' are allocated their own columns. This flexibility in block sizing is crucial for accurately representing systems with components of varying significance or size.
+In this example, the block labeled "A labels" spans one column, while blocks 'b', 'c' span 2 columns, and 'd' is again allocated its own column. This flexibility in block sizing is crucial for accurately representing systems with components of varying significance or size.
 
 ### Creating Composite Blocks
 
@@ -211,6 +211,27 @@ block-beta
 
 This example demonstrates how Mermaid dynamically adjusts the width of the columns to accommodate the widest block, in this case, 'a' and the composite block 'e'. This dynamic adjustment is essential for creating visually balanced and easy-to-understand diagrams.
 
+**Merging Blocks Horizontally:**
+In scenarios where you need to stack blocks horizontally, you can use column width to accomplish the task. Blocks can be arranged vertically by putting them in a single column. Here is how you can create a block diagram in which 4 blocks are stacked on top of each other:
+
+```mermaid-example
+block-beta
+  block
+    columns 1
+    a["A label"] b c d
+  end
+```
+
+```mermaid
+block-beta
+  block
+    columns 1
+    a["A label"] b c d
+  end
+```
+
+In this example, the width of the merged block dynamically adjusts to the width of the largest child block.
+
 With these advanced configuration options, Mermaid's block diagrams can be tailored to represent a wide array of complex systems and structures. The flexibility offered by these features enables users to create diagrams that are both informative and visually appealing. In the following sections, we will explore further capabilities, including different block shapes and linking options.
 
 ## 4. Block Varieties and Shapes

docs/syntax/classDiagram.md

@@ -427,6 +427,51 @@ And `Link` can be one of:
 | --   | Solid       |
 | ..   | Dashed      |
 
+### Lollipop Interfaces
+
+Classes can also be given a special relation type that defines a lollipop interface on the class. A lollipop interface is defined using the following syntax:
+
+- `bar ()-- foo`
+- `foo --() bar`
+
+The interface (bar) with the lollipop connects to the class (foo).
+
+Note: Each interface that is defined is unique and is meant to not be shared between classes / have multiple edges connecting to it.
+
+```mermaid-example
+classDiagram
+  bar ()-- foo
+```
+
+```mermaid
+classDiagram
+  bar ()-- foo
+```
+
+```mermaid-example
+classDiagram
+  class Class01 {
+    int amount
+    draw()
+  }
+  Class01 --() bar
+  Class02 --() bar
+
+  foo ()-- Class01
+```
+
+```mermaid
+classDiagram
+  class Class01 {
+    int amount
+    draw()
+  }
+  Class01 --() bar
+  Class02 --() bar
+
+  foo ()-- Class01
+```
+
 ## Define Namespace
 
 A namespace groups classes.
@@ -776,10 +821,12 @@ Beginner's tip—a full example using interactive links in an HTML page:
 
 ## Styling
 
-### Styling a node (v10.7.0+)
+### Styling a node
 
 It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.
 
+Note that notes and namespaces cannot be styled individually but do support themes.
+
 ```mermaid-example
 classDiagram
   class Animal
@@ -799,11 +846,102 @@ classDiagram
 #### Classes
 
 More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that
-should have a different look. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
+should have a different look.
+
+A class definition looks like the example below:
+
+```
+classDef className fill:#f9f,stroke:#333,stroke-width:4px;
+```
+
+Also, it is possible to define style to multiple classes in one statement:
+
+```
+classDef firstClassName,secondClassName font-size:12pt;
+```
+
+Attachment of a class to a node is done as per below:
+
+```
+cssClass "nodeId1" className;
+```
+
+It is also possible to attach a class to a list of nodes in one statement:
+
+```
+cssClass "nodeId1,nodeId2" className;
+```
+
+A shorter form of adding a class is to attach the classname to the node using the `:::` operator:
+
+```mermaid-example
+classDiagram
+    class Animal:::someclass
+    classDef someclass fill:#f96
+```
+
+```mermaid
+classDiagram
+    class Animal:::someclass
+    classDef someclass fill:#f96
+```
+
+Or:
+
+```mermaid-example
+classDiagram
+    class Animal:::someclass {
+        -int sizeInFeet
+        -canEat()
+    }
+    classDef someclass fill:#f96
+```
+
+```mermaid
+classDiagram
+    class Animal:::someclass {
+        -int sizeInFeet
+        -canEat()
+    }
+    classDef someclass fill:#f96
+```
+
+### Default class
+
+If a class is named default it will be applied to all nodes. Specific styles and classes should be defined afterwards to override the applied default styling.
+
+```
+classDef default fill:#f9f,stroke:#333,stroke-width:4px;
+```
+
+```mermaid-example
+classDiagram
+  class Animal:::pink
+  class Mineral
+
+  classDef default fill:#f96,color:red
+  classDef pink color:#f9f
+```
+
+```mermaid
+classDiagram
+  class Animal:::pink
+  class Mineral
+
+  classDef default fill:#f96,color:red
+  classDef pink color:#f9f
+```
+
+### CSS Classes
+
+It is also possible to predefine classes in CSS styles that can be applied from the graph definition as in the example
+below:
+
+**Example style**
 
 ```html
 <style>
-  .styleClass > rect {
+  .styleClass > * > g {
     fill: #ff0000;
     stroke: #ffff00;
     stroke-width: 4px;
@@ -811,19 +949,7 @@ should have a different look. This is done by predefining classes in css styles
 </style>
 ```
 
-Then attaching that class to a specific node:
-
-```
-    cssClass "nodeId1" styleClass;
-```
-
-It is also possible to attach a class to a list of nodes in one statement:
-
-```
-    cssClass "nodeId1,nodeId2" styleClass;
-```
-
-A shorter form of adding a class is to attach the classname to the node using the `:::` operator:
+**Example definition**
 
 ```mermaid-example
 classDiagram
@@ -835,136 +961,32 @@ classDiagram
     class Animal:::styleClass
 ```
 
-Or:
-
-```mermaid-example
-classDiagram
-    class Animal:::styleClass {
-        -int sizeInFeet
-        -canEat()
-    }
-```
-
-```mermaid
-classDiagram
-    class Animal:::styleClass {
-        -int sizeInFeet
-        -canEat()
-    }
-```
-
-?> cssClasses cannot be added using this shorthand method at the same time as a relation statement.
-
-?> Due to limitations with existing markup for class diagrams, it is not currently possible to define css classes within the diagram itself. **_Coming soon!_**
-
-### Default Styles
-
-The main styling of the class diagram is done with a preset number of css classes. During rendering these classes are extracted from the file located at src/themes/class.scss. The classes used here are described below:
-
-| Class              | Description                                                       |
-| ------------------ | ----------------------------------------------------------------- |
-| g.classGroup text  | Styles for general class text                                     |
-| classGroup .title  | Styles for general class title                                    |
-| g.classGroup rect  | Styles for class diagram rectangle                                |
-| g.classGroup line  | Styles for class diagram line                                     |
-| .classLabel .box   | Styles for class label box                                        |
-| .classLabel .label | Styles for class label text                                       |
-| composition        | Styles for composition arrow head and arrow line                  |
-| aggregation        | Styles for aggregation arrow head and arrow line(dashed or solid) |
-| dependency         | Styles for dependency arrow head and arrow line                   |
-
-#### Sample stylesheet
-
-```scss
-body {
-  background: white;
-}
-
-g.classGroup text {
-  fill: $nodeBorder;
-  stroke: none;
-  font-family: 'trebuchet ms', verdana, arial;
-  font-family: var(--mermaid-font-family);
-  font-size: 10px;
-
-  .title {
-    font-weight: bolder;
-  }
-}
-
-g.classGroup rect {
-  fill: $nodeBkg;
-  stroke: $nodeBorder;
-}
-
-g.classGroup line {
-  stroke: $nodeBorder;
-  stroke-width: 1;
-}
-
-.classLabel .box {
-  stroke: none;
-  stroke-width: 0;
-  fill: $nodeBkg;
-  opacity: 0.5;
-}
-
-.classLabel .label {
-  fill: $nodeBorder;
-  font-size: 10px;
-}
-
-.relation {
-  stroke: $nodeBorder;
-  stroke-width: 1;
-  fill: none;
-}
-
-@mixin composition {
-  fill: $nodeBorder;
-  stroke: $nodeBorder;
-  stroke-width: 1;
-}
-
-#compositionStart {
-  @include composition;
-}
-
-#compositionEnd {
-  @include composition;
-}
-
-@mixin aggregation {
-  fill: $nodeBkg;
-  stroke: $nodeBorder;
-  stroke-width: 1;
-}
-
-#aggregationStart {
-  @include aggregation;
-}
-
-#aggregationEnd {
-  @include aggregation;
-}
-
-#dependencyStart {
-  @include composition;
-}
-
-#dependencyEnd {
-  @include composition;
-}
-
-#extensionStart {
-  @include composition;
-}
-
-#extensionEnd {
-  @include composition;
-}
-```
+> cssClasses cannot be added using this shorthand method at the same time as a relation statement.
 
 ## Configuration
 
-`Coming soon!`
+### Members Box
+
+It is possible to hide the empty members box of a class node.
+
+This is done by changing the **hideEmptyMembersBox** value of the class diagram configuration. For more information on how to edit the Mermaid configuration see the [configuration page.](https://mermaid.js.org/config/configuration.html)
+
+```mermaid-example
+---
+  config:
+    class:
+      hideEmptyMembersBox: true
+---
+classDiagram
+  class Duck
+```
+
+```mermaid
+---
+  config:
+    class:
+      hideEmptyMembersBox: true
+---
+classDiagram
+  class Duck
+```

docs/syntax/entityRelationshipDiagram.md

@@ -286,6 +286,7 @@ erDiagram
 
 - If you want the relationship label to be more than one word, you must use double quotes around the phrase
 - If you don't want a label at all on a relationship, you must use an empty double-quoted string
+- (v11.1.0+) If you want a multi-line label on a relationship, use `<br />` between the two lines (`"first line<br />second line"`)
 
 ## Styling
 

docs/syntax/flowchart.md

@@ -298,6 +298,694 @@ flowchart TD
     id1(((This is the text in the circle)))
 ```
 
+## Expanded Node Shapes in Mermaid Flowcharts (v11.3.0+)
+
+Mermaid introduces 30 new shapes to enhance the flexibility and precision of flowchart creation. These new shapes provide more options to represent processes, decisions, events, data storage visually, and other elements within your flowcharts, improving clarity and semantic meaning.
+
+New Syntax for Shape Definition
+
+Mermaid now supports a general syntax for defining shape types to accommodate the growing number of shapes. This syntax allows you to assign specific shapes to nodes using a clear and flexible format:
+
+```
+A@{ shape: rect }
+```
+
+This syntax creates a node A as a rectangle. It renders in the same way as `A["A"]`, or `A`.
+
+### Complete List of New Shapes
+
+Below is a comprehensive list of the newly introduced shapes and their corresponding semantic meanings, short names, and aliases:
+
+| **Semantic Name**                 | **Shape Name**         | **Short Name** | **Description**                | **Alias Supported**                                              |
+| --------------------------------- | ---------------------- | -------------- | ------------------------------ | ---------------------------------------------------------------- |
+| Card                              | Notched Rectangle      | `notch-rect`   | Represents a card              | `card`, `notched-rectangle`                                      |
+| Collate                           | Hourglass              | `hourglass`    | Represents a collate operation | `collate`, `hourglass`                                           |
+| Com Link                          | Lightning Bolt         | `bolt`         | Communication link             | `com-link`, `lightning-bolt`                                     |
+| Comment                           | Curly Brace            | `brace`        | Adds a comment                 | `brace-l`, `comment`                                             |
+| Comment Right                     | Curly Brace            | `brace-r`      | Adds a comment                 |                                                                  |
+| Comment with braces on both sides | Curly Braces           | `braces`       | Adds a comment                 |                                                                  |
+| Data Input/Output                 | Lean Right             | `lean-r`       | Represents input or output     | `in-out`, `lean-right`                                           |
+| Data Input/Output                 | Lean Left              | `lean-l`       | Represents output or input     | `lean-left`, `out-in`                                            |
+| Database                          | Cylinder               | `cyl`          | Database storage               | `cylinder`, `database`, `db`                                     |
+| Decision                          | Diamond                | `diam`         | Decision-making step           | `decision`, `diamond`, `question`                                |
+| Delay                             | Half-Rounded Rectangle | `delay`        | Represents a delay             | `half-rounded-rectangle`                                         |
+| Direct Access Storage             | Horizontal Cylinder    | `h-cyl`        | Direct access storage          | `das`, `horizontal-cylinder`                                     |
+| Disk Storage                      | Lined Cylinder         | `lin-cyl`      | Disk storage                   | `disk`, `lined-cylinder`                                         |
+| Display                           | Curved Trapezoid       | `curv-trap`    | Represents a display           | `curved-trapezoid`, `display`                                    |
+| Divided Process                   | Divided Rectangle      | `div-rect`     | Divided process shape          | `div-proc`, `divided-process`, `divided-rectangle`               |
+| Document                          | Document               | `doc`          | Represents a document          | `doc`, `document`                                                |
+| Event                             | Rounded Rectangle      | `rounded`      | Represents an event            | `event`                                                          |
+| Extract                           | Triangle               | `tri`          | Extraction process             | `extract`, `triangle`                                            |
+| Fork/Join                         | Filled Rectangle       | `fork`         | Fork or join in process flow   | `join`                                                           |
+| Internal Storage                  | Window Pane            | `win-pane`     | Internal storage               | `internal-storage`, `window-pane`                                |
+| Junction                          | Filled Circle          | `f-circ`       | Junction point                 | `filled-circle`, `junction`                                      |
+| Lined Document                    | Lined Document         | `lin-doc`      | Lined document                 | `lined-document`                                                 |
+| Lined/Shaded Process              | Lined Rectangle        | `lin-rect`     | Lined process shape            | `lin-proc`, `lined-process`, `lined-rectangle`, `shaded-process` |
+| Loop Limit                        | Trapezoidal Pentagon   | `notch-pent`   | Loop limit step                | `loop-limit`, `notched-pentagon`                                 |
+| Manual File                       | Flipped Triangle       | `flip-tri`     | Manual file operation          | `flipped-triangle`, `manual-file`                                |
+| Manual Input                      | Sloped Rectangle       | `sl-rect`      | Manual input step              | `manual-input`, `sloped-rectangle`                               |
+| Manual Operation                  | Trapezoid Base Top     | `trap-t`       | Represents a manual task       | `inv-trapezoid`, `manual`, `trapezoid-top`                       |
+| Multi-Document                    | Stacked Document       | `docs`         | Multiple documents             | `documents`, `st-doc`, `stacked-document`                        |
+| Multi-Process                     | Stacked Rectangle      | `st-rect`      | Multiple processes             | `processes`, `procs`, `stacked-rectangle`                        |
+| Odd                               | Odd                    | `odd`          | Odd shape                      |                                                                  |
+| Paper Tape                        | Flag                   | `flag`         | Paper tape                     | `paper-tape`                                                     |
+| Prepare Conditional               | Hexagon                | `hex`          | Preparation or condition step  | `hexagon`, `prepare`                                             |
+| Priority Action                   | Trapezoid Base Bottom  | `trap-b`       | Priority action                | `priority`, `trapezoid`, `trapezoid-bottom`                      |
+| Process                           | Rectangle              | `rect`         | Standard process shape         | `proc`, `process`, `rectangle`                                   |
+| Start                             | Circle                 | `circle`       | Starting point                 | `circ`                                                           |
+| Start                             | Small Circle           | `sm-circ`      | Small starting point           | `small-circle`, `start`                                          |
+| Stop                              | Double Circle          | `dbl-circ`     | Represents a stop point        | `double-circle`                                                  |
+| Stop                              | Framed Circle          | `fr-circ`      | Stop point                     | `framed-circle`, `stop`                                          |
+| Stored Data                       | Bow Tie Rectangle      | `bow-rect`     | Stored data                    | `bow-tie-rectangle`, `stored-data`                               |
+| Subprocess                        | Framed Rectangle       | `fr-rect`      | Subprocess                     | `framed-rectangle`, `subproc`, `subprocess`, `subroutine`        |
+| Summary                           | Crossed Circle         | `cross-circ`   | Summary                        | `crossed-circle`, `summary`                                      |
+| Tagged Document                   | Tagged Document        | `tag-doc`      | Tagged document                | `tag-doc`, `tagged-document`                                     |
+| Tagged Process                    | Tagged Rectangle       | `tag-rect`     | Tagged process                 | `tag-proc`, `tagged-process`, `tagged-rectangle`                 |
+| Terminal Point                    | Stadium                | `stadium`      | Terminal point                 | `pill`, `terminal`                                               |
+| Text Block                        | Text Block             | `text`         | Text block                     |                                                                  |
+
+### Example Flowchart with New Shapes
+
+Here’s an example flowchart that utilizes some of the newly introduced shapes:
+
+```mermaid-example
+flowchart RL
+    A@{ shape: manual-file, label: "File Handling"}
+    B@{ shape: manual-input, label: "User Input"}
+    C@{ shape: docs, label: "Multiple Documents"}
+    D@{ shape: procs, label: "Process Automation"}
+    E@{ shape: paper-tape, label: "Paper Records"}
+```
+
+```mermaid
+flowchart RL
+    A@{ shape: manual-file, label: "File Handling"}
+    B@{ shape: manual-input, label: "User Input"}
+    C@{ shape: docs, label: "Multiple Documents"}
+    D@{ shape: procs, label: "Process Automation"}
+    E@{ shape: paper-tape, label: "Paper Records"}
+```
+
+### Process
+
+```mermaid-example
+flowchart TD
+    A@{ shape: rect, label: "This is a process" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: rect, label: "This is a process" }
+```
+
+### Event
+
+```mermaid-example
+flowchart TD
+    A@{ shape: rounded, label: "This is an event" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: rounded, label: "This is an event" }
+```
+
+### Terminal Point (Stadium)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: stadium, label: "Terminal point" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: stadium, label: "Terminal point" }
+```
+
+### Subprocess
+
+```mermaid-example
+flowchart TD
+    A@{ shape: subproc, label: "This is a subprocess" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: subproc, label: "This is a subprocess" }
+```
+
+### Database (Cylinder)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: cyl, label: "Database" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: cyl, label: "Database" }
+```
+
+### Start (Circle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: circle, label: "Start" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: circle, label: "Start" }
+```
+
+### Odd
+
+```mermaid-example
+flowchart TD
+    A@{ shape: odd, label: "Odd shape" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: odd, label: "Odd shape" }
+```
+
+### Decision (Diamond)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: diamond, label: "Decision" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: diamond, label: "Decision" }
+```
+
+### Prepare Conditional (Hexagon)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: hex, label: "Prepare conditional" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: hex, label: "Prepare conditional" }
+```
+
+### Data Input/Output (Lean Right)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: lean-r, label: "Input/Output" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: lean-r, label: "Input/Output" }
+```
+
+### Data Input/Output (Lean Left)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: lean-l, label: "Output/Input" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: lean-l, label: "Output/Input" }
+```
+
+### Priority Action (Trapezoid Base Bottom)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: trap-b, label: "Priority action" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: trap-b, label: "Priority action" }
+```
+
+### Manual Operation (Trapezoid Base Top)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: trap-t, label: "Manual operation" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: trap-t, label: "Manual operation" }
+```
+
+### Stop (Double Circle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: dbl-circ, label: "Stop" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: dbl-circ, label: "Stop" }
+```
+
+### Text Block
+
+```mermaid-example
+flowchart TD
+    A@{ shape: text, label: "This is a text block" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: text, label: "This is a text block" }
+```
+
+### Card (Notched Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: notch-rect, label: "Card" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: notch-rect, label: "Card" }
+```
+
+### Lined/Shaded Process
+
+```mermaid-example
+flowchart TD
+    A@{ shape: lin-rect, label: "Lined process" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: lin-rect, label: "Lined process" }
+```
+
+### Start (Small Circle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: sm-circ, label: "Small start" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: sm-circ, label: "Small start" }
+```
+
+### Stop (Framed Circle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: framed-circle, label: "Stop" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: framed-circle, label: "Stop" }
+```
+
+### Fork/Join (Long Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: fork, label: "Fork or Join" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: fork, label: "Fork or Join" }
+```
+
+### Collate (Hourglass)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: hourglass, label: "Collate" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: hourglass, label: "Collate" }
+```
+
+### Comment (Curly Brace)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: comment, label: "Comment" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: comment, label: "Comment" }
+```
+
+### Comment Right (Curly Brace Right)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: brace-r, label: "Comment" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: brace-r, label: "Comment" }
+```
+
+### Comment with braces on both sides
+
+```mermaid-example
+flowchart TD
+    A@{ shape: braces, label: "Comment" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: braces, label: "Comment" }
+```
+
+### Com Link (Lightning Bolt)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: bolt, label: "Communication link" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: bolt, label: "Communication link" }
+```
+
+### Document
+
+```mermaid-example
+flowchart TD
+    A@{ shape: doc, label: "Document" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: doc, label: "Document" }
+```
+
+### Delay (Half-Rounded Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: delay, label: "Delay" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: delay, label: "Delay" }
+```
+
+### Direct Access Storage (Horizontal Cylinder)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: das, label: "Direct access storage" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: das, label: "Direct access storage" }
+```
+
+### Disk Storage (Lined Cylinder)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: lin-cyl, label: "Disk storage" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: lin-cyl, label: "Disk storage" }
+```
+
+### Display (Curved Trapezoid)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: curv-trap, label: "Display" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: curv-trap, label: "Display" }
+```
+
+### Divided Process (Divided Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: div-rect, label: "Divided process" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: div-rect, label: "Divided process" }
+```
+
+### Extract (Small Triangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: tri, label: "Extract" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: tri, label: "Extract" }
+```
+
+### Internal Storage (Window Pane)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: win-pane, label: "Internal storage" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: win-pane, label: "Internal storage" }
+```
+
+### Junction (Filled Circle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: f-circ, label: "Junction" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: f-circ, label: "Junction" }
+```
+
+### Lined Document
+
+```mermaid-example
+flowchart TD
+    A@{ shape: lin-doc, label: "Lined document" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: lin-doc, label: "Lined document" }
+```
+
+### Loop Limit (Notched Pentagon)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: notch-pent, label: "Loop limit" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: notch-pent, label: "Loop limit" }
+```
+
+### Manual File (Flipped Triangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: flip-tri, label: "Manual file" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: flip-tri, label: "Manual file" }
+```
+
+### Manual Input (Sloped Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: sl-rect, label: "Manual input" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: sl-rect, label: "Manual input" }
+```
+
+### Multi-Document (Stacked Document)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: docs, label: "Multiple documents" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: docs, label: "Multiple documents" }
+```
+
+### Multi-Process (Stacked Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: processes, label: "Multiple processes" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: processes, label: "Multiple processes" }
+```
+
+### Paper Tape (Flag)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: flag, label: "Paper tape" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: flag, label: "Paper tape" }
+```
+
+### Stored Data (Bow Tie Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: bow-rect, label: "Stored data" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: bow-rect, label: "Stored data" }
+```
+
+### Summary (Crossed Circle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: cross-circ, label: "Summary" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: cross-circ, label: "Summary" }
+```
+
+### Tagged Document
+
+```mermaid-example
+flowchart TD
+    A@{ shape: tag-doc, label: "Tagged document" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: tag-doc, label: "Tagged document" }
+```
+
+### Tagged Process (Tagged Rectangle)
+
+```mermaid-example
+flowchart TD
+    A@{ shape: tag-rect, label: "Tagged process" }
+```
+
+```mermaid
+flowchart TD
+    A@{ shape: tag-rect, label: "Tagged process" }
+```
+
+## Special shapes in Mermaid Flowcharts (v11.3.0+)
+
+Mermaid also introduces 2 special shapes to enhance your flowcharts: **icon** and **image**. These shapes allow you to include icons and images directly within your flowcharts, providing more visual context and clarity.
+
+### Icon Shape
+
+You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions provided [here](../config/icons.md). The syntax for defining an icon shape is as follows:
+
+```mermaid-example
+flowchart TD
+    A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }
+```
+
+```mermaid
+flowchart TD
+    A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }
+```
+
+### Parameters
+
+- **icon**: The name of the icon from the registered icon pack.
+- **form**: Specifies the background shape of the icon. If not defined there will be no background to icon. Options include:
+  - `square`
+  - `circle`
+  - `rounded`
+- **label**: The text label associated with the icon. This can be any string. If not defined, no label will be displayed.
+- **pos**: The position of the label. If not defined label will default to bottom of icon. Possible values are:
+  - `t`
+  - `b`
+- **h**: The height of the icon. If not defined this will default to 48 which is minimum.
+
+### Image Shape
+
+You can use the `image` shape to include an image in your flowchart. The syntax for defining an image shape is as follows:
+
+```mermaid-example
+flowchart TD
+    A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
+```
+
+```mermaid
+flowchart TD
+    A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
+```
+
+### Parameters
+
+- **img**: The URL of the image to be displayed.
+- **label**: The text label associated with the image. This can be any string. If not defined, no label will be displayed.
+- **pos**: The position of the label. If not defined, the label will default to the bottom of the image. Possible values are:
+  - `t`
+  - `b`
+- **w**: The width of the image. If not defined, this will default to the natural width of the image.
+- **h**: The height of the image. If not defined, this will default to the natural height of the image.
+- **constraint**: Determines if the image should constrain the node size. This setting also ensures the image maintains its original aspect ratio, adjusting the height (`h`) accordingly to the width (`w`). If not defined, this will default to `off` Possible values are:
+  - `on`
+  - `off`
+
+These new shapes provide additional flexibility and visual appeal to your flowcharts, making them more informative and engaging.
+
 ## Links between nodes
 
 Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.

docs/syntax/gantt.md

@@ -500,7 +500,7 @@ mermaid.ganttConfig = {
   sectionFontSize: 24, // Font size for sections
   numberSectionStyles: 1, // The number of alternating section styles
   axisFormat: '%d/%m', // Date/time format of the axis
-  tickInterval: '1 week', // Axis ticks
+  tickInterval: '1week', // Axis ticks
   topAxis: true, // When this flag is set, date labels will be added to the top of the chart
   displayMode: 'compact', // Turns compact mode on
   weekday: 'sunday', // On which day a week-based interval should start

docs/syntax/kanban.md

@@ -0,0 +1,161 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/kanban.md](../../packages/mermaid/src/docs/syntax/kanban.md).
+
+# Mermaid Kanban Diagram Documentation
+
+Mermaid’s Kanban diagram allows you to create visual representations of tasks moving through different stages of a workflow. This guide explains how to use the Kanban diagram syntax, based on the provided example.
+
+## Overview
+
+A Kanban diagram in Mermaid starts with the kanban keyword, followed by the definition of columns (stages) and tasks within those columns.
+
+```mermaid-example
+kanban
+  column1[Column Title]
+    task1[Task Description]
+```
+
+```mermaid
+kanban
+  column1[Column Title]
+    task1[Task Description]
+```
+
+## Defining Columns
+
+Columns represent the different stages in your workflow, such as “Todo,” “In Progress,” “Done,” etc. Each column is defined using a unique identifier and a title enclosed in square brackets.
+
+**Syntax:**
+
+```
+columnId[Column Title]
+```
+
+- columnId: A unique identifier for the column.
+- \[Column Title]: The title displayed on the column header.
+
+Like this `id1[Todo]`
+
+## Adding Tasks to Columns
+
+Tasks are listed under their respective columns with an indentation. Each task also has a unique identifier and a description enclosed in square brackets.
+
+**Syntax:**
+
+```
+taskId[Task Description]
+```
+
+```
+•	taskId: A unique identifier for the task.
+•	[Task Description]: The description of the task.
+```
+
+**Example:**
+
+```
+docs[Create Documentation]
+```
+
+## Adding Metadata to Tasks
+
+You can include additional metadata for each task using the @{ ... } syntax. Metadata can contain key-value pairs like assigned, ticket, priority, etc. This will be rendered added to the rendering of the node.
+
+## Supported Metadata Keys
+
+```
+•	assigned: Specifies who is responsible for the task.
+•	ticket: Links the task to a ticket or issue number.
+•	priority: Indicates the urgency of the task. Allowed values: 'Very High', 'High', 'Low' and 'Very Low'
+```
+
+```mermaid-example
+kanban
+todo[Todo]
+  id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
+```
+
+```mermaid
+kanban
+todo[Todo]
+  id3[Update Database Function]@{ ticket: MC-2037, assigned: 'knsv', priority: 'High' }
+```
+
+## Configuration Options
+
+You can customize the Kanban diagram using a configuration block at the beginning of your markdown file. This is useful for setting global settings like a base URL for tickets. Currently there is one configuration option for kanban diagrams `ticketBaseUrl`. This can be set as in the the following example:
+
+```yaml
+---
+config:
+  kanban:
+    ticketBaseUrl: 'https://yourproject.atlassian.net/browse/#TICKET#'
+---
+```
+
+When the kanban item has an assigned ticket number the ticket number in the diagram will have a link to an external system where the ticket is defined. The `ticketBaseUrl` sets the base URL to the external system and #TICKET# is replaced with the ticket value from task metadata to create a valid link.
+
+## Full Example
+
+Below is the full Kanban diagram based on the provided example:
+
+```mermaid-example
+---
+config:
+  kanban:
+    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
+---
+kanban
+  Todo
+    [Create Documentation]
+    docs[Create Blog about the new diagram]
+  [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]
+```
+
+```mermaid
+---
+config:
+  kanban:
+    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
+---
+kanban
+  Todo
+    [Create Documentation]
+    docs[Create Blog about the new diagram]
+  [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]
+```
+
+In conclusion, creating a Kanban diagram in Mermaid is a straightforward process that effectively visualizes your workflow. Start by using the kanban keyword to initiate the diagram. Define your columns with unique identifiers and titles to represent different stages of your project. Under each column, list your tasks—also with unique identifiers—and provide detailed descriptions as needed. Remember that proper indentation is crucial; tasks must be indented under their parent columns to maintain the correct structure.
+
+You can enhance your diagram by adding optional metadata to tasks using the @{ ... } syntax, which allows you to include additional context such as assignee, ticket numbers, and priority levels. For further customization, utilize the configuration block at the top of your file to set global options like ticketBaseUrl for linking tickets directly from your diagram.
+
+By adhering to these guidelines—ensuring unique identifiers, proper indentation, and utilizing metadata and configuration options—you can create a comprehensive and customized Kanban board that effectively maps out your project’s workflow using Mermaid.

docs/syntax/sequenceDiagram.md

@@ -155,6 +155,9 @@ end
 box rgb(33,66,99)
 ... actors ...
 end
+box rgba(33,66,99,0.5)
+... actors ...
+end
 ```
 
 > **Note**
@@ -217,7 +220,7 @@ There are ten types of arrows currently supported:
 | `<<->>`  | Solid line with bidirectional arrowheads (v11.0.0+)  |
 | `<<-->>` | Dotted line with bidirectional arrowheads (v11.0.0+) |
 | `-x`     | Solid line with a cross at the end                   |
-| `--x`    | Dotted line with a cross at the end.                 |
+| `--x`    | Dotted line with a cross at the end                  |
 | `-)`     | Solid line with an open arrow at the end (async)     |
 | `--)`    | Dotted line with a open arrow at the end (async)     |
 
@@ -580,6 +583,12 @@ sequenceDiagram
 
 It is possible to highlight flows by providing colored background rects. This is done by the notation
 
+```
+rect COLOR
+... content ...
+end
+```
+
 The colors are defined using rgb and rgba syntax.
 
 ```

eslint.config.js

@@ -23,6 +23,7 @@ export default tseslint.config(
       '**/generated/',
       '**/coverage/',
       'packages/mermaid/src/config.type.ts',
+      'packages/mermaid/src/docs/.vitepress/components.d.ts',
     ],
   },
   {

package.json

@@ -4,7 +4,7 @@
   "version": "10.2.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@9.7.1+sha512.faf344af2d6ca65c4c5c8c2224ea77a81a5e8859cbc4e06b1511ddce2f0151512431dd19e6aff31f2c6a8f5f2aced9bd2273e1fed7dd4de1868984059d2c4247",
+  "packageManager": "pnpm@9.9.0+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1",
   "keywords": [
     "diagram",
     "markdown",
@@ -42,7 +42,8 @@
     "test": "pnpm lint && vitest run",
     "test:watch": "vitest --watch",
     "test:coverage": "vitest --coverage",
-    "prepare": "husky install && pnpm build",
+    "test:check:tsc": "tsx scripts/tsc-check.ts",
+    "prepare": "husky && pnpm build",
     "pre-commit": "lint-staged"
   },
   "repository": {
@@ -63,7 +64,7 @@
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.44.4",
-    "@argos-ci/cypress": "^2.1.0",
+    "@argos-ci/cypress": "^2.2.2",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.7",
     "@cspell/eslint-plugin": "^8.8.4",
@@ -88,21 +89,22 @@
     "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
     "cspell": "^8.6.0",
-    "cypress": "^13.11.0",
+    "cypress": "^13.14.1",
     "cypress-image-snapshot": "^4.0.1",
+    "cypress-split": "^1.24.0",
     "esbuild": "^0.21.5",
     "eslint": "^9.4.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^3.3.0",
     "eslint-plugin-html": "^8.1.1",
     "eslint-plugin-jest": "^28.6.0",
-    "eslint-plugin-jsdoc": "^48.2.9",
+    "eslint-plugin-jsdoc": "^50.0.0",
     "eslint-plugin-json": "^4.0.0",
     "eslint-plugin-lodash": "^8.0.0",
     "eslint-plugin-markdown": "^5.0.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-tsdoc": "^0.3.0",
-    "eslint-plugin-unicorn": "^55.0.0",
+    "eslint-plugin-unicorn": "^56.0.0",
     "express": "^4.19.1",
     "globals": "^15.4.0",
     "globby": "^14.0.1",
@@ -116,7 +118,6 @@
     "markdown-table": "^3.0.3",
     "nyc": "^15.1.0",
     "path-browserify": "^1.0.1",
-    "pnpm": "^8.15.5",
     "prettier": "^3.2.5",
     "prettier-plugin-jsdoc": "^1.3.0",
     "rimraf": "^5.0.5",
@@ -131,5 +132,10 @@
   },
   "nyc": {
     "report-dir": "coverage/cypress"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "roughjs": "patches/roughjs.patch"
+    }
   }
 }