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

Version Packages

.build/jsonSchema.ts

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

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
+  "changelog": ["@changesets/changelog-github", { "repo": "mermaid-js/mermaid" }],
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "master",
+  "updateInternalDependencies": "patch",
+  "bumpVersionsWithWorkspaceProtocolOnly": true,
+  "ignore": ["@mermaid-js/docs", "@mermaid-js/webpack-test", "@mermaid-js/mermaid-example-diagram"]
+}

.cspell/code-terms.txt

@@ -55,6 +55,7 @@ GENERICTYPE
 getBoundarys
 grammr
 graphtype
+halign
 iife
 interp
 introdcued
@@ -66,6 +67,7 @@ Kaufmann
 keyify
 LABELPOS
 LABELTYPE
+layoutstop
 lcov
 LEFTOF
 Lexa
@@ -120,6 +122,8 @@ SUBROUTINEEND
 SUBROUTINESTART
 Subschemas
 substr
+SVGG
+SVGSVG
 TAGEND
 TAGSTART
 techn
@@ -136,6 +140,7 @@ tsdoc
 typeof
 typestr
 unshift
+urlsafe
 verifymethod
 VERIFYMTHD
 WARN_DOCSDIR_DOESNT_MATCH

.cspell/libraries.txt

@@ -20,14 +20,17 @@ dagre-d3
 Deepdwn
 Docsify
 Docsy
+Doctave
 DokuWiki
 dompurify
 elkjs
+fcose
 fontawesome
 Foswiki
 Gitea
 graphlib
 Grav
+icones
 iconify
 Inkdrop
 jiti
@@ -57,6 +60,7 @@ rehype
 roughjs
 rscratch
 shiki
+Slidev
 sparkline
 sphinxcontrib
 ssim

.cspell/mermaid-terms.txt

@@ -1,5 +1,6 @@
 Adamiecki
 arrowend
+Bendpoints
 bmatrix
 braintree
 catmull
@@ -9,7 +10,7 @@ elems
 gantt
 gitgraph
 gzipped
-handdrawn
+handDrawn
 knsv
 Knut
 marginx

.cspell/misc-terms.txt

@@ -1,6 +1,7 @@
 BRANDES
 circo
-handdrawn
+handDrawn
 KOEPF
 neato
 newbranch
+validify

.github/pull_request_template.md

@@ -15,4 +15,4 @@ Make sure you
 - [ ] :book: have read the [contribution guidelines](https://mermaid.js.org/community/contributing.html)
 - [ ] :computer: have added necessary unit/e2e tests.
 - [ ] :notebook: have added documentation. Make sure [`MERMAID_RELEASE_VERSION`](https://mermaid.js.org/community/contributing.html#update-documentation) is used for all new features.
-- [ ] :bookmark: targeted `develop` branch
+- [ ] :butterfly: If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running `pnpm changeset` and following the prompts. Changesets that add features should be `minor` and those that fix bugs should be `patch`. Please prefix changeset messages with `feat:`, `fix:`, or `chore:`.

.github/release-drafter.yml

@@ -1,36 +0,0 @@
-name-template: '$NEXT_PATCH_VERSION'
-tag-template: '$NEXT_PATCH_VERSION'
-categories:
-  - title: '🚨 **Breaking Changes**'
-    labels:
-      - 'Breaking Change'
-  - title: '🚀 Features'
-    labels:
-      - 'Type: Enhancement'
-      - 'feature' # deprecated, new PRs shouldn't have this
-  - title: '🐛 Bug Fixes'
-    labels:
-      - 'Type: Bug / Error'
-      - 'fix' # deprecated, new PRs shouldn't have this
-  - title: '🧰 Maintenance'
-    labels:
-      - 'Type: Other'
-      - 'chore' # deprecated, new PRs shouldn't have this
-  - title: '⚡️ Performance'
-    labels:
-      - 'Type: Performance'
-  - title: '📚 Documentation'
-    labels:
-      - 'Area: Documentation'
-change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
-sort-by: title
-sort-direction: ascending
-exclude-labels:
-  - 'Skip changelog'
-no-changes-template: 'This release contains minor changes and bugfixes.'
-template: |
-  # Release Notes
-
-  $CHANGES
-
-  🎉 **Thanks to all contributors helping with this release!** 🎉

.github/workflows/autofix.yml

@@ -0,0 +1,45 @@
+name: autofix.ci # needed to securely identify the workflow
+
+on:
+  pull_request:
+    branches-ignore:
+      - 'renovate/**'
+permissions:
+  contents: read
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  autofix:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+        # uses version from "packageManager" field in package.json
+
+      - name: Setup Node.js
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+        with:
+          cache: pnpm
+          node-version-file: '.node-version'
+
+      - name: Install Packages
+        run: |
+          pnpm install --frozen-lockfile
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress
+
+      - name: Fix Linting
+        shell: bash
+        run: pnpm -w run lint:fix
+
+      - name: Sync `./src/config.type.ts` with `./src/schemas/config.schema.yaml`
+        shell: bash
+        run: pnpm run --filter mermaid types:build-config
+
+      - name: Build Docs
+        working-directory: ./packages/mermaid
+        run: pnpm run docs:build
+
+      - 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@v2
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         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@v2
-        # 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@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5
         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@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5
 
       # ℹ️ 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@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5

.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@v2
+      - 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@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         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.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,6 +28,7 @@ env:
       ) || 
       github.event.before
     }}
+  shouldRunParallel: ${{ secrets.CYPRESS_RECORD_KEY != '' && !(github.event_name == 'push' && github.ref == 'refs/heads/develop') }}
 jobs:
   cache:
     runs-on: ubuntu-latest
@@ -31,15 +36,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@v2
+      - 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@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         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
@@ -48,13 +53,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@df7484c5ba85def7eef30db301afa688187bc378 # v6.7.2
         with:
           # just perform install
           runTests: false
@@ -77,26 +82,26 @@ jobs:
       matrix:
         containers: [1, 2, 3, 4]
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
 
-      - uses: pnpm/action-setup@v2
+      - 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@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         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@df7484c5ba85def7eef30db301afa688187bc378 # v6.7.2
         with:
           runTests: false
 
@@ -112,11 +117,11 @@ 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@df7484c5ba85def7eef30db301afa688187bc378 # v6.7.2
         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.CYPRESS_RECORD_KEY != '' ) || ( matrix.containers == 1 ) }}
+        if: ${{ env.shouldRunParallel == 'true' || ( matrix.containers == 1 ) }}
         with:
           install: false
           start: pnpm run dev:coverage
@@ -124,19 +129,19 @@ jobs:
           browser: chrome
           # Disable recording if we don't have an API key
           # e.g. if this action was run from a fork
-          record: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
-          parallel: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
+          record: ${{ env.shouldRunParallel == 'true' }}
+          parallel: ${{ env.shouldRunParallel == 'true' }}
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           VITEST_COVERAGE: true
           CYPRESS_COMMIT: ${{ github.sha }}
           ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }}
-          ARGOS_PARALLEL: ${{ secrets.CYPRESS_RECORD_KEY != '' }}
+          ARGOS_PARALLEL: ${{ env.shouldRunParallel == 'true' }}
           ARGOS_PARALLEL_TOTAL: 4
           ARGOS_PARALLEL_INDEX: ${{ matrix.containers }}
 
       - 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@v2
+      - 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@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -83,14 +89,9 @@ jobs:
         continue-on-error: ${{ github.event_name == 'push' }}
         run: pnpm run docs:verify
 
-      - name: Rebuild Docs
-        if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
-        working-directory: ./packages/mermaid
-        run: pnpm run docs:build
-
-      - name: Commit changes
-        uses: EndBug/add-and-commit@v9
-        if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
+      - uses: testomatio/check-tests@0ea638fcec1820cf2e7b9854fdbdd04128a55bd4 # stable
         with:
-          message: 'Update docs'
-          add: 'docs/*'
+          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@v2
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         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-draft.yml

@@ -1,23 +0,0 @@
-name: Draft Release
-
-on:
-  push:
-    branches:
-      - master
-
-permissions:
-  contents: read
-
-jobs:
-  draft-release:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write # write permission is required to create a GitHub release
-      pull-requests: read # required to read PR titles/labels
-    steps:
-      - name: Draft Release
-        uses: release-drafter/release-drafter@v6
-        with:
-          disable-autolabeler: true
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.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@v2
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         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-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@v2
-        # 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

@@ -0,0 +1,46 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - master
+
+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@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
+
+      - uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+        with:
+          cache: pnpm
+          node-version-file: '.node-version'
+
+      - name: Install Packages
+        run: pnpm install --frozen-lockfile
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@aba318e9165b45b7948c60273e0b72fce0a64eb9 # v1.4.7
+        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@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+        with:
+          persist-credentials: false
+      - name: Run analysis
+        uses: ossf/scorecard-action@0864cf19026789058feabb7e87baa5f140aac736 # v2.3.1
+        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@f0f3afee809481da311ca3a6ff1ff51d81dbeb24 # v3.26.4
+        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@v2
+      - 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@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
         with:
           cache: pnpm
           node-version-file: '.node-version'
@@ -39,7 +39,7 @@ jobs:
           pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts --coverage
 
       - 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@v2
+      - 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,10 @@
-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
+
+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/helpers/util.ts

@@ -73,7 +73,7 @@ export const imgSnapshotTest = (
 
 export const urlSnapshotTest = (
   url: string,
-  options: CypressMermaidConfig,
+  options: CypressMermaidConfig = {},
   _api = false,
   validation?: any
 ): void => {
@@ -97,7 +97,7 @@ export const openURLAndVerifyRendering = (
   const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
 
   cy.visit(url);
-  // cy.window().should('have.property', 'rendered', true);
+  cy.window().should('have.property', 'rendered', true);
   cy.get('svg').should('be.visible');
 
   if (validation) {
@@ -124,7 +124,9 @@ export const verifyScreenshot = (name: string): void => {
     cy.log(`Closing eyes ${Cypress.spec.name}`);
     cy.eyesClose();
   } else if (useArgos) {
-    cy.argosScreenshot(name);
+    cy.argosScreenshot(name, {
+      threshold: 0.01,
+    });
   } else {
     cy.matchImageSnapshot(name);
   }

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

@@ -1,14 +0,0 @@
-import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.ts';
-
-describe('Flowchart elk', () => {
-  it('should use dagre as fallback', () => {
-    urlSnapshotTest('http://localhost:9000/flow-elk.html', {
-      name: 'flow-elk fallback to dagre',
-    });
-  });
-  it('should allow overriding with external package', () => {
-    urlSnapshotTest('http://localhost:9000/flow-elk.html?elk=true', {
-      name: 'flow-elk overriding dagre with elk',
-    });
-  });
-});

cypress/integration/rendering/architecture.spec.ts

@@ -0,0 +1,180 @@
+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}
+            `
+    );
+  });
+});
+
+describe('architecture - external', () => {
+  it('should allow adding external icons', () => {
+    urlSnapshotTest('http://localhost:9000/architecture-external.html');
+  });
+});

cypress/integration/rendering/block.spec.js

@@ -236,7 +236,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL16: width alignment - blocks shold be equal in width', () => {
+  it('BL17: width alignment - blocks shold be equal in width', () => {
     imgSnapshotTest(
       `block-beta
     A("This is the text")
@@ -247,7 +247,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL17: block types 1 - square, rounded and circle', () => {
+  it('BL18: block types 1 - square, rounded and circle', () => {
     imgSnapshotTest(
       `block-beta
     A["square"]
@@ -258,7 +258,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL18: block types 2 - odd, diamond and hexagon', () => {
+  it('BL19: block types 2 - odd, diamond and hexagon', () => {
     imgSnapshotTest(
       `block-beta
     A>"rect_left_inv_arrow"]
@@ -269,7 +269,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL19: block types 3 - stadium', () => {
+  it('BL20: block types 3 - stadium', () => {
     imgSnapshotTest(
       `block-beta
     A(["stadium"])
@@ -278,7 +278,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL20: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
+  it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
     imgSnapshotTest(
       `block-beta
     A[/"lean right"/]
@@ -290,7 +290,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL21: block types 1 - square, rounded and circle', () => {
+  it('BL22: block types 1 - square, rounded and circle', () => {
     imgSnapshotTest(
       `block-beta
     A["square"]
@@ -301,7 +301,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL22: sizing - it should be possible to make a block wider', () => {
+  it('BL23: sizing - it should be possible to make a block wider', () => {
     imgSnapshotTest(
       `block-beta
       A("rounded"):2
@@ -312,7 +312,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL23: sizing - it should be possible to make a composite block wider', () => {
+  it('BL24: sizing - it should be possible to make a composite block wider', () => {
     imgSnapshotTest(
       `block-beta
       block:2
@@ -324,7 +324,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL24: block in the middle with space on each side', () => {
+  it('BL25: block in the middle with space on each side', () => {
     imgSnapshotTest(
       `block-beta
         columns 3
@@ -335,7 +335,7 @@ describe('Block diagram', () => {
       {}
     );
   });
-  it('BL25: space and an edge', () => {
+  it('BL26: space and an edge', () => {
     imgSnapshotTest(
       `block-beta
   columns 5
@@ -345,7 +345,7 @@ describe('Block diagram', () => {
       {}
     );
   });
-  it('BL26: block sizes for regular blocks', () => {
+  it('BL27: block sizes for regular blocks', () => {
     imgSnapshotTest(
       `block-beta
   columns 3
@@ -354,7 +354,7 @@ describe('Block diagram', () => {
       {}
     );
   });
-  it('BL27: composite block with a set width - f should use the available space', () => {
+  it('BL28: composite block with a set width - f should use the available space', () => {
     imgSnapshotTest(
       `block-beta
   columns 3
@@ -363,11 +363,12 @@ describe('Block diagram', () => {
       f
   end
   g
-      `,
+  `,
       {}
     );
   });
-  it('BL23: composite block with a set width - f and g should split the available space', () => {
+
+  it('BL29: composite block with a set width - f and g should split the available space', () => {
     imgSnapshotTest(
       `block-beta
   columns 3
@@ -379,7 +380,7 @@ describe('Block diagram', () => {
   h
   i
   j
-      `,
+  `,
       {}
     );
   });

cypress/integration/rendering/c4.spec.js

@@ -1,7 +1,7 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('C4 diagram', () => {
-  it('should render a simple C4Context diagram', () => {
+  it('C4.1 should render a simple C4Context diagram', () => {
     imgSnapshotTest(
       `
       C4Context
@@ -31,7 +31,7 @@ describe('C4 diagram', () => {
       {}
     );
   });
-  it('should render a simple C4Container diagram', () => {
+  it('C4.2 should render a simple C4Container diagram', () => {
     imgSnapshotTest(
       `
       C4Container
@@ -50,7 +50,7 @@ describe('C4 diagram', () => {
       {}
     );
   });
-  it('should render a simple C4Component diagram', () => {
+  it('C4.3 should render a simple C4Component diagram', () => {
     imgSnapshotTest(
       `
       C4Component
@@ -68,7 +68,7 @@ describe('C4 diagram', () => {
       {}
     );
   });
-  it('should render a simple C4Dynamic diagram', () => {
+  it('C4.4 should render a simple C4Dynamic diagram', () => {
     imgSnapshotTest(
       `
       C4Dynamic
@@ -91,7 +91,7 @@ describe('C4 diagram', () => {
       {}
     );
   });
-  it('should render a simple C4Deployment diagram', () => {
+  it('C4.5 should render a simple C4Deployment diagram', () => {
     imgSnapshotTest(
       `
       C4Deployment

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

@@ -76,7 +76,7 @@ describe('Class diagram V2', () => {
     );
   });
 
-  it('should render a simple class diagram with different visibilities', () => {
+  it('2.1 should render a simple class diagram with different visibilities', () => {
     imgSnapshotTest(
       `
     classDiagram-v2
@@ -93,7 +93,7 @@ describe('Class diagram V2', () => {
     );
   });
 
-  it('should render multiple class diagrams', () => {
+  it('3: should render multiple class diagrams', () => {
     imgSnapshotTest(
       [
         `

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

@@ -3,7 +3,7 @@ import { imgSnapshotTest } from '../../helpers/util';
 describe('Error Diagrams', () => {
   beforeEach(() => {
     cy.on('uncaught:exception', (err) => {
-      expect(err.message).to.include('Parse error');
+      expect(err.message).to.include('error');
       // return false to prevent the error from
       // failing this test
       return false;

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

@@ -837,6 +837,26 @@ subgraph "\`**Two**\`"
   in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
 end
 
+`,
+          { flowchart: { titleTopMargin: 0 } }
+        );
+      });
+      it('Sub graphs and markdown strings', () => {
+        imgSnapshotTest(
+          `---
+config:
+  layout: elk
+---
+
+flowchart LR
+ subgraph subgraph_ko6czgs5u["Untitled subgraph"]
+        D["Option 1"]
+  end
+    C{"Evaluate"} -- One --> D
+    C -- Two --> E(("Option 2"))
+    D --> E
+      A["A"]
+
 `,
           { flowchart: { titleTopMargin: 0 } }
         );
@@ -855,7 +875,7 @@ describe('Title and arrow styling #4813', () => {
       flowchart LR
       A-->B
       A-->C`,
-      { flowchart: { defaultRenderer: 'elk' } }
+      { layout: 'elk' }
     );
     cy.get('svg').should((svg) => {
       const title = svg[0].querySelector('text');
@@ -871,15 +891,14 @@ describe('Title and arrow styling #4813', () => {
       B-.-oC
       C==xD
       D ~~~ A`,
-      { flowchart: { defaultRenderer: 'elk' } }
+      { layout: 'elk' }
     );
     cy.get('svg').should((svg) => {
       const edges = svg[0].querySelectorAll('.edges path');
-      console.log(edges);
-      expect(edges[0]).to.have.attr('pattern', 'solid');
-      expect(edges[1]).to.have.attr('pattern', 'dotted');
-      expect(edges[2]).to.have.css('stroke-width', '3.5px');
-      expect(edges[3]).to.have.css('stroke-width', '1.5px');
+      expect(edges[0].getAttribute('class')).to.contain('edge-pattern-solid');
+      expect(edges[1].getAttribute('class')).to.contain('edge-pattern-dotted');
+      expect(edges[2].getAttribute('class')).to.contain('edge-thickness-thick');
+      expect(edges[3].getAttribute('class')).to.contain('edge-thickness-invisible');
     });
   });
 });

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

@@ -99,7 +99,7 @@ describe('Flowchart v2', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.be.within(290 * 0.95 - 1, 290 * 1.05);
+      expect(maxWidthValue).to.be.within(417 * 0.95, 417 * 1.05);
     });
   });
   it('8: should render a flowchart when useMaxWidth is false', () => {
@@ -118,7 +118,7 @@ describe('Flowchart v2', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      expect(width).to.be.within(290 * 0.95 - 1, 290 * 1.05);
+      expect(width).to.be.within(417 * 0.95, 417 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -1047,7 +1047,9 @@ end
           A --lb3--> TOP --lb4--> B
           B1 --lb5--> B2
         `,
-        { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
+        {
+          flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } },
+        }
       );
     });
   });

cypress/integration/rendering/flowchart.spec.js

@@ -733,7 +733,7 @@ describe('Graph', () => {
   });
   it('38: should render a flowchart when useMaxWidth is true (default)', () => {
     renderGraph(
-      `graph TD
+      `flowchart TD
       A[Christmas] -->|Get money| B(Go shopping)
       B --> C{Let me think}
       C -->|One| D[Laptop]
@@ -751,7 +751,7 @@ describe('Graph', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.be.within(300 * 0.9, 300 * 1.1);
+      expect(maxWidthValue).to.be.within(446 * 0.9, 446 * 1.1);
     });
   });
   it('39: should render a flowchart when useMaxWidth is false', () => {
@@ -770,7 +770,7 @@ describe('Graph', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±10%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      expect(width).to.be.within(300 * 0.9, 300 * 1.1);
+      expect(width).to.be.within(446 * 0.9, 446 * 1.1);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -905,13 +905,16 @@ graph TD
   it('67: should be able to style default node independently', () => {
     imgSnapshotTest(
       `
-    flowchart TD
+      flowchart TD
       classDef default fill:#a34
       hello --> default
 
       style default stroke:#000,stroke-width:4px
     `,
-      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+      {
+        flowchart: { htmlLabels: true },
+        securityLevel: 'loose',
+      }
     );
   });
 });

cypress/integration/rendering/gitGraph.spec.js

@@ -1532,5 +1532,41 @@ gitGraph TB:
         {}
       );
     });
+    it('75: should render a gitGraph with multiple tags on a merge commit on bottom-to-top orientation', () => {
+      imgSnapshotTest(
+        `gitGraph BT:
+        commit id: "ZERO"
+        branch develop
+        commit id:"A"
+        checkout main
+        commit id:"ONE"
+        checkout develop
+        commit id:"B"
+        checkout main
+        merge develop id:"Release 1.0" type:HIGHLIGHT tag: "SAML v2.0" tag: "OpenID v1.1"
+        commit id:"TWO"
+        checkout develop
+        commit id:"C"`,
+        {}
+      );
+    });
+  });
+  it('76: should render a gitGraph with multiple tags on a merge commit on left-to-right orientation', () => {
+    imgSnapshotTest(
+      `gitGraph
+    commit id: "ZERO"
+    branch develop
+    commit id:"A"
+    checkout main
+    commit id:"ONE"
+    checkout develop
+    commit id:"B"
+    checkout main
+    merge develop id:"Release 1.0" type:HIGHLIGHT tag: "SAML v2.0" tag: "OpenID v1.1"
+    commit id:"TWO"
+    checkout develop
+    commit id:"C"`,
+      {}
+    );
   });
 });

cypress/integration/rendering/packet.spec.ts

@@ -10,6 +10,15 @@ describe('packet structure', () => {
     );
   });
 
+  it('should render a simple packet diagram without ranges', () => {
+    imgSnapshotTest(
+      `packet-beta
+  0: "h"
+  1: "i"
+`
+    );
+  });
+
   it('should render a complex packet diagram', () => {
     imgSnapshotTest(
       `packet-beta

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

@@ -588,6 +588,20 @@ title: simple state diagram
 stateDiagram-v2
 [*] --> State1
 State1 --> [*]
+`,
+      {}
+    );
+  });
+  it('should align dividers correctly', () => {
+    imgSnapshotTest(
+      `stateDiagram-v2
+  state s2 {
+      s3
+      --
+      s4
+      --
+      55
+  }
 `,
       {}
     );

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/flowchart-refactor.html

@@ -134,7 +134,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 flowchart LR
     id1([This is the text in the box])
       </pre
@@ -142,7 +142,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
 flowchart LR
     id1([This is the text in the box])
       </pre
@@ -150,7 +150,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
 flowchart LR
     id1([This is the text in the box])
       </pre
@@ -185,7 +185,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram6" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 flowchart LR
     id1[[This is the text in the box]]
       </pre
@@ -193,7 +193,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram7" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
 flowchart LR
     id1[[This is the text in the box]]
       </pre
@@ -201,7 +201,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram8" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
 flowchart LR
     id1[[This is the text in the box]]
       </pre
@@ -236,7 +236,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram10" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart LR
     id1[(Database)]
       </pre
@@ -244,7 +244,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram11" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1[(Database)]
       </pre
@@ -252,7 +252,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram12" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart LR
     id1[(Database)]
       </pre
@@ -287,7 +287,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram14" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart LR
     id1((This is the text in the circle))
       </pre
@@ -295,7 +295,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram15" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1((This is the text in the circle))
       </pre
@@ -303,7 +303,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram16" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart LR
     id1((This is the text in the circle))
       </pre
@@ -338,7 +338,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram18" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart TD
     id1(((This is the text in the circle)))
       </pre
@@ -346,7 +346,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram19" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart TD
     id1(((This is the text in the circle)))
       </pre
@@ -354,7 +354,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram20" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart TD
     id1(((This is the text in the circle)))
       </pre
@@ -389,7 +389,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram22" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart LR
     id1>This is the text in the box]  
       </pre
@@ -397,7 +397,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram23" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1>This is the text in the box]  
       </pre
@@ -405,7 +405,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram24" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart LR
     id1>This is the text in the box]
       </pre
@@ -440,7 +440,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram26" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart LR
     id1{This is the text in the box}
       </pre
@@ -448,7 +448,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram27" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1{This is the text in the box}
       </pre
@@ -456,7 +456,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram28" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart LR
     id1{This is the text in the box}
       </pre
@@ -491,7 +491,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram31" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1{{This is the text in the box}}
       </pre
@@ -499,7 +499,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram32" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart LR
     id1{{This is the text in the box}}
       </pre
@@ -534,7 +534,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram34" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart TD
     id1[/This is the text in the box/]  
       </pre
@@ -542,7 +542,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram35" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart TD
     id1[/This is the text in the box/] 
       </pre
@@ -550,7 +550,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram36" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart TD
     id1[/This is the text in the box/]
       </pre
@@ -585,7 +585,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram38" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart TD
     id1[\This is the text in the box\]
       </pre
@@ -593,7 +593,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram39" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart TD
     id1[\This is the text in the box\]
       </pre
@@ -601,7 +601,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram40" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart TD
     id1[\This is the text in the box\]
 
@@ -637,7 +637,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram42" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart TD
     A[/Christmas\]
       </pre
@@ -645,7 +645,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram43" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart TD
     A[/Christmas\]
       </pre
@@ -653,7 +653,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram44" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart TD
     A[/Christmas\]
       </pre
@@ -688,7 +688,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram46" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart TD
     A[\Christmas/]
       </pre
@@ -696,7 +696,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram47" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart TD
     A[\Christmas/]
       </pre
@@ -704,7 +704,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram48" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart TD
     A[\Christmas/]  
       </pre
@@ -739,7 +739,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram50" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart LR
     id1(This is the text in the box)
       </pre
@@ -747,7 +747,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram51" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1(This is the text in the box)
       </pre
@@ -755,7 +755,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram52" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart LR
     id1(This is the text in the box) 
       </pre
@@ -790,7 +790,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram54" class="mermaid">
-          %%{init: {"look": "handdrawn"} }%%
+          %%{init: {"look": "handDrawn"} }%%
           flowchart LR
     id1[This is the text in the box]
       </pre
@@ -798,7 +798,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram55" class="mermaid">
-          %%{init: {"handdrawn": false, "layout": "elk"} }%%
+          %%{init: {"handDrawn": false, "layout": "elk"} }%%
           flowchart LR
     id1[This is the text in the box]
       </pre
@@ -806,7 +806,7 @@ flowchart LR
         </td>
         <td>
           <pre id="diagram56" class="mermaid">
-          %%{init: {"look": "handdrawn", "layout": "elk"} }%%
+          %%{init: {"look": "handDrawn", "layout": "elk"} }%%
           flowchart LR
     id1[This is the text in the box]
       </pre
@@ -822,12 +822,12 @@ flowchart LR
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      import { layouts } from './mermaid-layout-elk.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
       mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {};
 
       mermaid.initialize({
-        handdrawn: false,
+        handDrawn: false,
         mergeEdges: true,
         layout: 'dagre',
         flowchart: { titleTopMargin: 10 },

cypress/platform/flowchart-sate.html

@@ -125,7 +125,7 @@
         </th>
         <td>
           <pre id="diagram1" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 stateDiagram-v2
     stateA
 
@@ -134,7 +134,7 @@ stateDiagram-v2
         </td>
         <td>
           <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 flowchart LR
     id1[[This is the text in the box]]
 
@@ -147,12 +147,12 @@ flowchart LR
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      import { layouts } from './mermaid-layout-elk.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
       mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {};
 
       mermaid.initialize({
-        handdrawn: false,
+        handDrawn: false,
         mergeEdges: true,
         layout: 'dagre',
         flowchart: { titleTopMargin: 10 },

cypress/platform/knsv2.html

@@ -36,12 +36,15 @@
         font-family: 'Arial';
         /* font-size: 18px !important; */
       }
+
       h1 {
         color: grey;
       }
+
       .mermaid2 {
         display: none;
       }
+
       .mermaid svg {
         /* font-size: 18px !important; */
 
@@ -54,6 +57,7 @@
           10px 10px;
         background-repeat: repeat; */
       }
+
       .malware {
         position: fixed;
         bottom: 0;
@@ -69,32 +73,266 @@
         font-family: monospace;
         font-size: 72px;
       }
+      pre {
+        width: 100%;
+      }
       /* tspan {
               font-size: 6px !important;
             } */
     </style>
   </head>
+
   <body>
-    <pre id="diagram" class="mermaid">
+    <div class="flex">
+      <pre id="diagram" class="mermaid">
+---
+  title: hello2
+  config:
+    look: handDrawn
+    layout: elk
+    elk:
+        <!-- nodePlacementStrategy: INTERACTIVE -->
+        <!-- mergeEdges: true -->
+---
+stateDiagram-v2
+    direction LR
+    accTitle: An idealized Open Source supply-chain graph
+
+    %%
+    state "🟦 Importer" as author_importer
+    state "🟥 Supplier, Owner" as author_owner
+    state "🟨🟥 Maintainer, Author\n🟨 Custodian" as author
+    state "🟩 Distributor" as repository_distributor
+    state "🟦 Importer" as language_importer
+    state "🟦🟨 Packager" as language_packager
+    state "🟦🟨 OSS Steward" as language_steward
+    state "🟨 Curator" as language_curator
+    state "🟩 Distributor" as language_distributor
+    state "🟦 Contributor" as contributor
+    state "🟦 Importer" as package_importer
+    state "🟨 Patcher" as package_patcher
+    state "🟨🟦 Builder\n🟨🟦 Packager\n🟨🟦 Containerizer" as package_packager
+    state "🟨 Curator" as package_curator
+    state "🟩 Distributor" as package_distributor
+    state "🟦 Importer" as integrator_importer
+    state "🟥 Supplier, Manufacturer, Owner" as integrator_owner
+    state "🟦🟨🟥 Integrator, Developer" as integrator_developer
+    state "🟩🟨 SBOM Redactor\n🟩 Publisher" as integrator_publisher
+    state "🟦🟨 Builder" as integrator_builder
+    state "🟨 Deployer" as deployer
+    state "🟦 Vuln. Checker" as integrator_checker
+    state "🟩🟨 SBOM Redactor" as redactor
+    state "🟦 Consumer\n🟦  User" as consumer
+    state "🟦 Auditor" as auditor_internal
+    state "🟦 Auditor" as auditor_external
+
+    %%
+    classDef createsSBOM stroke:red,stroke-width:3px;
+    classDef updatesSBOM stroke:yellow,stroke-width:3px;
+    classDef assemblesSBOM stroke:yellow,stroke-width:3px;
+    classDef distributesSBOM stroke:green,stroke-width:3px;
+    classDef verifiesSBOM stroke:#07f,stroke-width:3px;
+
+    %%
+    class author_importer verifiesSBOM
+    class author_owner createsSBOM
+    class manufacturer_owner createsSBOM
+    class author assemblesSBOM
+    class package_importer verifiesSBOM
+    class package_patcher updatesSBOM
+    class package_packager assemblesSBOM
+    class package_curator distributesSBOM
+    class package_distributor distributesSBOM
+    class language_importer verifiesSBOM
+    class language_packager assemblesSBOM
+    class language_steward updatesSBOM
+    class language_curator distributesSBOM
+    class language_distributor distributesSBOM
+    class repository_distributor distributesSBOM
+    class integrator_importer verifiesSBOM
+    class integrator_owner createsSBOM
+    class integrator_developer assemblesSBOM
+    class integrator_publisher distributesSBOM
+    class integrator_builder assemblesSBOM
+    class integrator_checker verifiesSBOM
+    class deployer assemblesSBOM
+    class redactor distributesSBOM
+    class auditor_internal verifiesSBOM
+    class auditor_external verifiesSBOM
+
+    state "Maintainer Environment" as environment_maintainer {
+        [*] --> author_importer
+        [*] --> author
+        author_importer --> author
+        author_owner --> author
+        author       --> language_packager
+    }
+
+    [*] --> environment_maintainer
+
+    state "Language Ecosystem" as ecosystem_lang {
+        [*] --> language_importer
+        [*] --> language_steward
+        [*] --> language_curator
+        [*] --> language_distributor
+        language_importer --> language_distributor
+        language_importer --> language_curator
+        language_steward --> language_curator
+        language_curator --> language_distributor
+    }
+
+    language_packager --> ecosystem_lang
+    ecosystem_lang    --> ecosystem_lang
+
+    state "Public Collaboration Ecosystem" as ecosystem_repo {
+        [*] --> repository_distributor
+    }
+
+    author         --> ecosystem_repo
+    ecosystem_repo --> author
+
+    repository_distributor --> contributor
+    contributor            --> repository_distributor
+
+    state "Package Ecosystem" as ecosystem_package {
+        [*] --> package_importer
+        [*] --> package_packager
+        [*] --> package_patcher
+        package_importer --> package_patcher
+        package_importer --> package_packager
+        package_patcher  --> package_packager
+        package_packager --> package_curator
+        package_packager --> package_distributor
+        package_curator  --> package_distributor
+    }
+
+    repository_distributor --> ecosystem_package
+    language_distributor   --> ecosystem_package
+    ecosystem_package      --> ecosystem_package
+
+    state "Integrator Environment" as environment_integrator {
+        [*] --> integrator_developer
+        [*] --> integrator_importer
+        integrator_importer  --> integrator_developer
+        integrator_owner     --> integrator_developer
+        integrator_builder   --> integrator_publisher
+        integrator_developer --> integrator_checker
+        integrator_checker   --> integrator_developer
+        auditor_internal     --> integrator_developer
+        integrator_developer --> integrator_builder
+        integrator_developer --> auditor_internal
+    }
+
+    repository_distributor --> environment_integrator
+    language_distributor   --> environment_integrator
+    package_distributor    --> environment_integrator
+
+    state "Production Environment" as environment_prod {
+        [*] --> deployer
+        deployer --> redactor
+    }
+
+    integrator_publisher --> [*]
+    integrator_developer --> environment_prod
+    integrator_builder   --> environment_prod
+    integrator_publisher --> environment_prod
+
+    deployer --> auditor_external
+    deployer --> consumer
+    redactor --> consumer
+
+
+
+</pre>
+      <pre id="diagram" class="mermaid2">
+---
+  title: hello2
+  config:
+    look: handDrawn
+    layout: dagre
+    elk:
+        nodePlacementStrategy: BRANDES_KOEPF
+---
+stateDiagram-v2
+  A --> A
+  state A {
+    B --> D
+    state B {
+      C
+    }
+    state D {
+      E
+    }
+  }
+
+
+</pre
+      >
+      <pre id="diagram" class="mermaid2">
+---
+  title: hello2
+  config:
+    look: handDrawn
+    layout: dagre
+    elk:
+        nodePlacementStrategy: BRANDES_KOEPF
+---
 flowchart
-   a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
-        a_a --> c --> d_d --> c_c
-        classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
-        class a_a apa;
-        click a_a "http://www.aftonbladet.se" "bookmark"
-        click c_c callback "new tooltip"
-      </pre
-    >
-    <pre id="diagram2" class="mermaid">
+  A --> A
+  subgraph A
+    B --> B
+    subgraph B
+      C
+    end
+  end
+
+
+</pre
+      >
+      <pre id="diagram" class="mermaid2">
+---
+config:
+  look: handdrawn
+  flowchart:
+    htmlLabels: true
+---
+flowchart
+      A[I am a long text, where do I go??? handdrawn - true]
+</pre
+      >
+    </div>
+    <div class="flex">
+      <pre id="diagram" class="mermaid2">
+---
+config:
+  flowchart:
+    htmlLabels: false
+---
+flowchart
+      A[I am a long text, where do I go??? classic - false]
+</pre
+      >
+      <pre id="diagram" class="mermaid2">
+---
+config:
+  flowchart:
+    htmlLabels: true
+---
+flowchart
+      A[I am a long text, where do I go??? classic - true]
+</pre
+      >
+    </div>
+    <pre id="diagram2" class="mermaid2">
 flowchart LR
     id1(Start)-->id2(Stop)
     style id1 fill:#f9f,stroke:#333,stroke-width:4px
     style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 
-      
+
     </pre>
 
-    <pre id="diagram3" class="mermaid">
+    <pre id="diagram3" class="mermaid2">
       flowchart LR
     A:::foo & B:::bar --> C:::foobar
     classDef foo stroke:#f00
@@ -105,9 +343,9 @@ flowchart LR
 
     </pre>
 
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
       stateDiagram
-    A:::foo 
+    A:::foo
     B:::bar --> C:::foobar
     classDef foo stroke:#f00
     classDef bar stroke:#0f0
@@ -117,8 +355,8 @@ flowchart LR
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      // import { layouts } from './mermaid-layout-elk.esm.mjs';
-      // mermaid.registerLayoutLoaders(layouts);
+      import layouts from './mermaid-layout-elk.esm.mjs';
+      mermaid.registerLayoutLoaders(layouts);
       mermaid.parseError = function (err, hash) {
         console.error('Mermaid error: ', err);
       };
@@ -127,8 +365,8 @@ flowchart LR
       };
       mermaid.initialize({
         // theme: 'base',
-        // handdrawnSeed: 12,
-        // look: 'handdrawn',
+        // handDrawnSeed: 12,
+        // look: 'handDrawn',
         // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
         // layout: 'dagre',
         // layout: 'elk',
@@ -144,7 +382,7 @@ flowchart LR
           messageFontFamily: 'courier',
         },
         fontSize: 12,
-        logLevel: 0,
+        logLevel: 3,
         securityLevel: 'loose',
       });
       function callback() {

cypress/platform/state-refactor.html

@@ -115,7 +115,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 stateDiagram-v2
     stateId
 
@@ -123,7 +123,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
     stateId
 
@@ -131,7 +131,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
 stateDiagram-v2
     stateId
 
@@ -162,21 +162,21 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 stateDiagram-v2
     state "This is a state description" as s3
       </pre>
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
     state "This is a state description" as s4
       </pre>
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
 stateDiagram-v2
     state "This is a state description" as s5
       </pre>
@@ -206,7 +206,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 stateDiagram-v2
     s22 : This is a state description
 
@@ -214,7 +214,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
     s23 : This is a state description
 
@@ -222,7 +222,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
 stateDiagram-v2
     s24 : This is a state description
 
@@ -258,7 +258,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 
    stateDiagram-v2
     s41 --> s42
@@ -268,7 +268,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
     s51 --> s52
 
@@ -277,7 +277,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
 stateDiagram-v2
     s61 --> s62
 
@@ -316,7 +316,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 
    stateDiagram-v2
     a3 --> a4: A transition
@@ -326,7 +326,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
     a5 --> a6: A transition
 
@@ -335,7 +335,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
 stateDiagram-v2
    a7 --> a8: A transition
 
@@ -376,7 +376,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 
    stateDiagram-v2
        [*] --> test
@@ -387,7 +387,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
        [*] --> test
     test --> [*]
@@ -397,7 +397,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
 stateDiagram-v2
       [*] --> test
     test --> [*]
@@ -445,7 +445,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 
    stateDiagram-v2
        [*] --> First
@@ -459,7 +459,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
 stateDiagram-v2
        [*] --> First
     state First {
@@ -472,7 +472,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
 stateDiagram-v2
       [*] --> First
     state First {
@@ -547,7 +547,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 
    stateDiagram-v2
     [*] --> Level1
@@ -572,7 +572,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
  stateDiagram-v2
     [*] --> Level1
 
@@ -595,7 +595,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
  stateDiagram-v2
     [*] --> Level1
 
@@ -676,7 +676,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 
    stateDiagram-v2
    [*] --> B1
@@ -699,7 +699,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
  stateDiagram-v2
   [*] --> B1
     B1 --> B2
@@ -722,7 +722,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
  stateDiagram-v2
 [*] --> B1
     B1 --> B2
@@ -784,7 +784,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
 
    stateDiagram-v2
    state if_state <<choice>>
@@ -796,7 +796,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
  stateDiagram-v2
    state if_state <<choice>>
     [*] --> IsPositive
@@ -807,7 +807,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
  stateDiagram-v2
  state if_state <<choice>>
     [*] --> IsPositive
@@ -865,7 +865,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
    stateDiagram-v2
     state fork_state <<fork>>
       [*] --> fork_state
@@ -882,7 +882,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
    stateDiagram-v2
     state fork_state <<fork>>
       [*] --> fork_state
@@ -899,7 +899,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
    stateDiagram-v2
     state fork_state <<fork>>
       [*] --> fork_state
@@ -955,7 +955,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
    stateDiagram-v2
      TN3: The state with a note
         note right of TN3
@@ -968,7 +968,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
    stateDiagram-v2
      TN5: The state with a note
         note right of TN5
@@ -982,7 +982,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
    stateDiagram-v2
      TN7: The state with a note
         note right of TN7
@@ -1052,7 +1052,7 @@ state Active {
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
      stateDiagram-v2
     [*] --> Active
 
@@ -1073,7 +1073,7 @@ state Active {
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
      stateDiagram-v2
     [*] --> Active
 
@@ -1095,7 +1095,7 @@ state Active {
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
      stateDiagram-v2
     [*] --> Active
 
@@ -1159,7 +1159,7 @@ direction LR
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"look": "handdrawn"} }%%
+%%{init: {"look": "handDrawn"} }%%
      stateDiagram-v2
    direction LR
     [*] --> D1
@@ -1174,7 +1174,7 @@ direction LR
       </td>
       <td>
         <pre id="diagram3" class="mermaid">
-%%{init: {"handdrawn": false, "layout": "elk"} }%%
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
      stateDiagram-v2
     direction LR
     [*] --> D1
@@ -1189,7 +1189,7 @@ direction LR
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"look": "handdrawn", "layout": "elk"} }%%
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
      stateDiagram-v2
     direction LR
     [*] --> D1
@@ -1222,14 +1222,14 @@ direction LR
 
   <script type="module">
     import mermaid from './mermaid.esm.mjs';
-    import { layouts } from './mermaid-layout-elk.esm.mjs';
+    import layouts from './mermaid-layout-elk.esm.mjs';
     mermaid.registerLayoutLoaders(layouts);
     mermaid.parseError = function (err, hash) {
 
     };
 
     mermaid.initialize({
-      handdrawn: false,
+      handDrawn: false,
       mergeEdges: true,
       layout: 'dagre',
       flowchart: { titleTopMargin: 10 },
@@ -1254,7 +1254,7 @@ direction LR
 
     let coll = document.getElementsByClassName("collapsible");
     for (const element of coll) {
-  element.addEventListener("click", function () {
+      element.addEventListener("click", function () {
         this.classList.toggle("active");
         let content = this.nextElementSibling;
         if (content.style.maxHeight) {
@@ -1268,4 +1268,4 @@ direction LR
   </script>
 </body>
 
-</html>
+</html>

cypress/platform/viewer.js

@@ -1,7 +1,7 @@
-import mermaid from './mermaid.esm.mjs';
-// import flowchartELK from './mermaid-flowchart-elk.esm.mjs';
 import externalExample from './mermaid-example-diagram.esm.mjs';
+import layouts from './mermaid-layout-elk.esm.mjs';
 import zenUml from './mermaid-zenuml.esm.mjs';
+import mermaid from './mermaid.esm.mjs';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));
@@ -9,7 +9,6 @@ function b64ToUtf8(str) {
 
 // Adds a rendered flag to window when rendering is done, so cypress can wait for it.
 function markRendered() {
-  console.log('Done rendering');
   if (window.Cypress) {
     window.rendered = true;
   }
@@ -47,8 +46,9 @@ const contentLoaded = async function () {
       document.getElementsByTagName('body')[0].appendChild(div);
     }
 
-    // await mermaid.registerExternalDiagrams([externalExample, zenUml, flowchartELK]);
     await mermaid.registerExternalDiagrams([externalExample, zenUml]);
+
+    mermaid.registerLayoutLoaders(layouts);
     mermaid.initialize(graphObj.mermaid);
     await mermaid.run();
   }

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/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/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/setup/interfaces/mermaid.LayoutData.md

@@ -0,0 +1,43 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.LayoutData.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.LayoutData.md).
+
+# Interface: LayoutData
+
+[mermaid](../modules/mermaid.md).LayoutData
+
+## Indexable
+
+▪ \[key: `string`]: `any`
+
+## Properties
+
+### config
+
+• **config**: `MermaidConfig`
+
+#### 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)
+
+---
+
+### edges
+
+• **edges**: `Edge`\[]
+
+#### 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)
+
+---
+
+### nodes
+
+• **nodes**: `Node`\[]
+
+#### 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)

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

@@ -16,7 +16,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/render.ts:9](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L9)
+[packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
 
 ---
 
@@ -26,7 +26,7 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/render.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L8)
+[packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)
 
 ---
 
@@ -36,4 +36,4 @@
 
 #### Defined in
 
-[packages/mermaid/src/rendering-util/render.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L7)
+[packages/mermaid/src/rendering-util/render.ts:22](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L22)

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

@@ -28,7 +28,7 @@ page.
 
 #### 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: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:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
+[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:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
+[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
 
 ---
 
@@ -116,56 +116,13 @@ This function should be called before the run function.
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:429](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L429)
-
----
-
-### internalHelpers
-
-• **internalHelpers**: `Object`
-
-Internal helpers for mermaid
-
-**`Deprecated`**
-
-- This should not be used by external packages, as the definitions will change without notice.
-
-#### Type declaration
-
-| Name                         | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| :--------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `common`                     | { `evaluate`: (`val?`: `string` \| `boolean`) => `boolean` ; `getMax`: (...`values`: `number`\[]) => `number` ; `getMin`: (...`values`: `number`\[]) => `number` ; `getRows`: (`s?`: `string`) => `string`\[] ; `getUrl`: (`useAbsolute`: `boolean`) => `string` ; `hasBreaks`: (`text`: `string`) => `boolean` ; `lineBreakRegex`: `RegExp` ; `removeScript`: (`txt`: `string`) => `string` ; `sanitizeText`: (`text`: `string`, `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` ; `sanitizeTextOrArray`: (`a`: `string` \| `string`\[] \| `string`\[]\[], `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` \| `string`\[] ; `splitBreaks`: (`text`: `string`) => `string`\[] } |
-| `common.evaluate`            | (`val?`: `string` \| `boolean`) => `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
-| `common.getMax`              | (...`values`: `number`\[]) => `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `common.getMin`              | (...`values`: `number`\[]) => `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `common.getRows`             | (`s?`: `string`) => `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `common.getUrl`              | (`useAbsolute`: `boolean`) => `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| `common.hasBreaks`           | (`text`: `string`) => `boolean`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `common.lineBreakRegex`      | `RegExp`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| `common.removeScript`        | (`txt`: `string`) => `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| `common.sanitizeText`        | (`text`: `string`, `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `common.sanitizeTextOrArray` | (`a`: `string` \| `string`\[] \| `string`\[]\[], `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` \| `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `common.splitBreaks`         | (`text`: `string`) => `string`\[]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `getConfig`                  | () => [`MermaidConfig`](mermaid.MermaidConfig.md)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `insertCluster`              | (`elem`: `any`, `node`: `any`) => `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| `insertEdge`                 | (`elem`: `any`, `edge`: `any`, `clusterDb`: `any`, `diagramType`: `any`, `startNode`: `any`, `endNode`: `any`, `id`: `any`) => { `originalPath`: `any` ; `updatedPath`: `any` }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `insertEdgeLabel`            | (`elem`: `any`, `edge`: `any`) => `Promise`<`any`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| `insertMarkers`              | (`elem`: `any`, `markerArray`: `any`, `type`: `any`, `id`: `any`) => `void`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `insertNode`                 | (`elem`: `any`, `node`: `any`, `dir`: `any`) => `Promise`<`any`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| `interpolateToCurve`         | (`interpolate`: `undefined` \| `string`, `defaultCurve`: `CurveFactory`) => `CurveFactory`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `labelHelper`                | (`parent`: `any`, `node`: `any`, `_classes`: `any`) => `Promise`<{ `bbox`: `any` ; `halfPadding`: `number` ; `label`: `any` = labelEl; `shapeSvg`: `any` }>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `log`                        | `Record`<`LogLevel`, (...`data`: `any`\[]) => `void`(`message?`: `any`, ...`optionalParams`: `any`\[]) => `void`>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `positionEdgeLabel`          | (`edge`: `any`, `paths`: `any`) => `void`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-
-#### 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:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
 
 ---
 
 ### mermaidAPI
 
-• **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.defaultConfig; `getConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.setConfig; `updateSiteConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.updateSiteConfig }>
+• **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.defaultConfig; `getConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getConfig; `getDiagramFromText`: (`text`: `string`, `metadata`: `Pick`<`DiagramMetadata`, `"title"`>) => `Promise`<`Diagram`> ; `getSiteConfig`: () => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`userOptions`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `void` ; `parse`: (`text`: `string`, `parseOptions`: [`ParseOptions`](mermaid.ParseOptions.md) & { `suppressErrors`: `true` }) => `Promise`<[`ParseResult`](mermaid.ParseResult.md) | `false`>(`text`: `string`, `parseOptions?`: [`ParseOptions`](mermaid.ParseOptions.md)) => `Promise`<[`ParseResult`](mermaid.ParseResult.md)> ; `render`: (`id`: `string`, `text`: `string`, `svgContainingElement?`: `Element`) => `Promise`<[`RenderResult`](mermaid.RenderResult.md)> ; `reset`: () => `void` ; `setConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.setConfig; `updateSiteConfig`: (`conf`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => [`MermaidConfig`](mermaid.MermaidConfig.md) = configApi.updateSiteConfig }>
 
 **`Deprecated`**
 
@@ -173,7 +130,7 @@ Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) in
 
 #### 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:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
 
 ---
 
@@ -223,7 +180,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420)
+[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
 
 ---
 
@@ -233,7 +190,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:414](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L414)
+[packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420)
 
 ---
 
@@ -261,7 +218,31 @@ Used to register external diagram types.
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:428](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L428)
+[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)
 
 ---
 
@@ -285,7 +266,7 @@ Used to register external diagram types.
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
+[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
 
 ---
 
@@ -311,7 +292,7 @@ Used to register external diagram types.
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:421](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L421)
+[packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
 
 ---
 
@@ -359,7 +340,7 @@ Renders the mermaid diagrams
 
 #### 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:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
 
 ---
 
@@ -394,7 +375,7 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me
 
 #### 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:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
 
 ---
 
@@ -404,4 +385,4 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me
 
 #### Defined in
 
-[packages/mermaid/src/mermaid.ts:413](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L413)
+[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:110](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L110)
+[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:129](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L129)
+[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:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)
+[packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
 
 ---
 
@@ -49,7 +59,7 @@ This matters if you are using base tag settings.
 
 #### 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:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
 
 ---
 
@@ -59,7 +69,7 @@ This matters if you are using base tag settings.
 
 #### 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: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:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L101)
+[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:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L169)
+[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:162](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L162)
+[packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)
 
 ---
 
@@ -111,31 +121,25 @@ should not change unless content is changed.
 
 #### 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:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
 
 ---
 
-### elk.mergeEdges
+### elk
 
-• `Optional` **elk.mergeEdges**: `boolean`
+• `Optional` **elk**: `Object`
 
-Elk specific option that allows egdes to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram.
+#### Type declaration
+
+| 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
 
-[packages/mermaid/src/config.type.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L95)
-
----
-
-### elk.nodePlacement.strategy
-
-• `Optional` **elk.nodePlacement.strategy**: `"SIMPLE"` | `"NETWORK_SIMPLEX"` | `"LINEAR_SEGMENTS"` | `"BRANDES_KOEPF"`
-
-Elk specific option affedcting how nodes are placed.
-
-#### Defined in
-
-[packages/mermaid/src/config.type.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L100)
+[packages/mermaid/src/config.type.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L91)
 
 ---
 
@@ -145,7 +149,7 @@ Elk specific option affedcting how nodes are placed.
 
 #### 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:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)
 
 ---
 
@@ -155,7 +159,7 @@ Elk specific option affedcting how nodes are placed.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L170)
+[packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)
 
 ---
 
@@ -169,7 +173,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:109](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L109)
+[packages/mermaid/src/config.type.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L121)
 
 ---
 
@@ -179,7 +183,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
 
 #### 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:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
 
 ---
 
@@ -193,7 +197,7 @@ If set to true, ignores legacyMathML.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L151)
+[packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)
 
 ---
 
@@ -203,7 +207,7 @@ If set to true, ignores legacyMathML.
 
 #### 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:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
 
 ---
 
@@ -213,15 +217,15 @@ If set to true, ignores legacyMathML.
 
 #### 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:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
 
 ---
 
-### handdrawnSeed
+### handDrawnSeed
 
-• `Optional` **handdrawnSeed**: `number`
+• `Optional` **handDrawnSeed**: `number`
 
-Defines the seed to be used when using handdrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
+Defines the seed to be used when using handDrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
 
 #### Defined in
 
@@ -235,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:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L102)
+[packages/mermaid/src/config.type.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L114)
 
 ---
 
@@ -245,7 +249,7 @@ Defines the seed to be used when using handdrawn look. This is important for the
 
 #### 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:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)
 
 ---
 
@@ -272,7 +276,7 @@ fall back to legacy rendering for KaTeX.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:144](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L144)
+[packages/mermaid/src/config.type.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L156)
 
 ---
 
@@ -284,13 +288,13 @@ This option decides the amount of logging to be used by mermaid.
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L115)
+[packages/mermaid/src/config.type.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L127)
 
 ---
 
 ### look
 
-• `Optional` **look**: `"classic"` | `"handdrawn"`
+• `Optional` **look**: `"classic"` | `"handDrawn"`
 
 Defines which main look to use for the diagram.
 
@@ -306,7 +310,7 @@ Defines which main look to use for the diagram.
 
 #### 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:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
 
 ---
 
@@ -340,7 +344,7 @@ The maximum allowed size of the users text diagram
 
 #### 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:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)
 
 ---
 
@@ -350,7 +354,7 @@ The maximum allowed size of the users text diagram
 
 #### 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:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
 
 ---
 
@@ -360,7 +364,7 @@ The maximum allowed size of the users text diagram
 
 #### 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:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)
 
 ---
 
@@ -370,7 +374,7 @@ The maximum allowed size of the users text diagram
 
 #### 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:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
 
 ---
 
@@ -380,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:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
 
 ---
 
@@ -390,7 +394,7 @@ The maximum allowed size of the users text diagram
 
 #### 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:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
 
 ---
 
@@ -404,7 +408,7 @@ This prevents malicious graph directives from overriding a site's default securi
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:136](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L136)
+[packages/mermaid/src/config.type.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L148)
 
 ---
 
@@ -416,7 +420,7 @@ Level of trust for parsed diagram
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:119](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L119)
+[packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
 
 ---
 
@@ -426,7 +430,7 @@ Level of trust for parsed diagram
 
 #### 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:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)
 
 ---
 
@@ -438,7 +442,7 @@ Dictates whether mermaid starts on Page load
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L123)
+[packages/mermaid/src/config.type.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L135)
 
 ---
 
@@ -448,7 +452,7 @@ Dictates whether mermaid starts on Page load
 
 #### 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:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)
 
 ---
 
@@ -461,13 +465,13 @@ This is useful when you want to control how to handle syntax errors in your appl
 
 #### Defined in
 
-[packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
+[packages/mermaid/src/config.type.ts:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210)
 
 ---
 
 ### theme
 
-• `Optional` **theme**: `"default"` | `"forest"` | `"dark"` | `"neutral"` | `"null"`
+• `Optional` **theme**: `"default"` | `"base"` | `"dark"` | `"forest"` | `"neutral"` | `"null"`
 
 Theme, the CSS style sheet.
 You may also use `themeCSS` to override this value.
@@ -504,7 +508,7 @@ You may also use `themeCSS` to override this value.
 
 #### 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:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)
 
 ---
 
@@ -514,7 +518,7 @@ You may also use `themeCSS` to override this value.
 
 #### 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:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
 
 ---
 
@@ -524,4 +528,4 @@ You may also use `themeCSS` to override this value.
 
 #### 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:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)

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

@@ -0,0 +1,19 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderOptions.md).
+
+# Interface: RenderOptions
+
+[mermaid](../modules/mermaid.md).RenderOptions
+
+## Properties
+
+### algorithm
+
+• `Optional` **algorithm**: `string`
+
+#### Defined in
+
+[packages/mermaid/src/rendering-util/render.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L8)

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:43](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L43)
+[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:47](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L47)
+[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:39](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L39)
+[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:51](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L51)
+[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:275](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L275)
+[packages/mermaid/src/defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266)
 
 ---
 

docs/config/setup/modules/mermaid.md

@@ -14,16 +14,28 @@
 
 - [DetailedError](../interfaces/mermaid.DetailedError.md)
 - [ExternalDiagramDefinition](../interfaces/mermaid.ExternalDiagramDefinition.md)
+- [LayoutData](../interfaces/mermaid.LayoutData.md)
 - [LayoutLoaderDefinition](../interfaces/mermaid.LayoutLoaderDefinition.md)
 - [Mermaid](../interfaces/mermaid.Mermaid.md)
 - [MermaidConfig](../interfaces/mermaid.MermaidConfig.md)
 - [ParseOptions](../interfaces/mermaid.ParseOptions.md)
 - [ParseResult](../interfaces/mermaid.ParseResult.md)
+- [RenderOptions](../interfaces/mermaid.RenderOptions.md)
 - [RenderResult](../interfaces/mermaid.RenderResult.md)
 - [RunOptions](../interfaces/mermaid.RunOptions.md)
 
 ## Type Aliases
 
+### InternalHelpers
+
+Ƭ **InternalHelpers**: typeof `internalHelpers`
+
+#### Defined in
+
+[packages/mermaid/src/internals.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/internals.ts#L33)
+
+---
+
 ### ParseErrorFunction
 
 Ƭ **ParseErrorFunction**: (`err`: `string` | [`DetailedError`](../interfaces/mermaid.DetailedError.md) | `unknown`, `hash?`: `any`) => `void`
@@ -47,6 +59,26 @@
 
 [packages/mermaid/src/Diagram.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/Diagram.ts#L10)
 
+---
+
+### SVG
+
+Ƭ **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
+
+#### Defined in
+
+[packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)
+
+---
+
+### SVGGroup
+
+Ƭ **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
+
+#### Defined in
+
+[packages/mermaid/src/diagram-api/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L132)
+
 ## Variables
 
 ### default
@@ -55,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

@@ -42,6 +42,8 @@ To add an integration to this list, see the [Integrations - create page](./integ
   - [CloudScript.io Mermaid Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
 - [Azure Devops](https://learn.microsoft.com/en-us/azure/devops/project/wiki/markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
 - [Deepdwn](https://billiam.itch.io/deepdwn) ✅
+- [Doctave](https://www.doctave.com/) ✅
+  - [Mermaid in Markdown code blocks](https://docs.doctave.com/components/mermaid) ✅
 - [GitBook](https://gitbook.com)
   - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
   - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
@@ -54,8 +56,10 @@ To add an integration to this list, see the [Integrations - create page](./integ
   - [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
 - [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
 - [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
+- [MonsterWriter](https://www.monsterwriter.com/) ✅
 - [Joplin](https://joplinapp.org) ✅
 - [LiveBook](https://livebook.dev) ✅
+- [Slidev](https://sli.dev) ✅
 - [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
 - [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
 - [Mermerd](https://github.com/KarnerTh/mermerd)
@@ -70,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
 
@@ -131,7 +136,7 @@ Communication tools and platforms
 ### Wikis
 
 - [DokuWiki](https://dokuwiki.org)
-  - [ComboStrap](https://combostrap.com/mermaid)
+  - [ComboStrap](https://combostrap.com/utility/create-diagram-with-mermaid-vh3ab9yj)
   - [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
 - [Foswiki](https://foswiki.org)
   - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
@@ -206,6 +211,7 @@ Communication tools and platforms
   - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
 - [JSDoc](https://jsdoc.app/)
   - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
+- [Madness](https://madness.dannyb.co/)
 - [mdBook](https://rust-lang.github.io/mdBook/index.html)
   - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
 - [MkDocs](https://www.mkdocs.org)

docs/ecosystem/mermaid-chart.md

@@ -12,7 +12,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 
 <br />
 
-<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+<a href="https://www.producthunt.com/products/mermaid-chart?utm_source=badge-follow&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=552855&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 
 ## About
 

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

@@ -83,3 +83,139 @@ Allows for the limited reconfiguration of a diagram just before it is rendered.
 ### [Theme Manipulation](../config/theming.md)
 
 An application of using Directives to change [Themes](../config/theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.
+
+### Layout and look
+
+We've restructured how Mermaid renders diagrams, enabling new features like selecting layout and look. **Currently, this is supported for flowcharts and state diagrams**, with plans to extend support to all diagram types.
+
+### Selecting Diagram Looks
+
+Mermaid offers a variety of styles or “looks” for your diagrams, allowing you to tailor the visual appearance to match your specific needs or preferences. Whether you prefer a hand-drawn or classic style, you can easily customize your diagrams.
+
+**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.
+```
+
+**How to Select a Look:**
+
+You can select a look by adding the look parameter in the metadata section of your Mermaid diagram code. Here’s an example:
+
+```mermaid-example
+---
+config:
+  look: handDrawn
+  theme: neutral
+---
+flowchart LR
+  A[Start] --> B{Decision}
+  B -->|Yes| C[Continue]
+  B -->|No| D[Stop]
+```
+
+```mermaid
+---
+config:
+  look: handDrawn
+  theme: neutral
+---
+flowchart LR
+  A[Start] --> B{Decision}
+  B -->|Yes| C[Continue]
+  B -->|No| D[Stop]
+```
+
+#### Selecting Layout Algorithms
+
+In addition to customizing the look of your diagrams, Mermaid Chart now allows you to choose different layout algorithms to better organize and present your diagrams, especially when dealing with more complex structures. The layout algorithm dictates how nodes and edges are arranged on the page.
+
+#### 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.
+```
+
+#### How to Select a Layout Algorithm:
+
+You can specify the layout algorithm directly in the metadata section of your Mermaid diagram code. Here’s an example:
+
+```mermaid-example
+---
+config:
+  layout: elk
+  look: handDrawn
+  theme: dark
+---
+flowchart TB
+  A[Start] --> B{Decision}
+  B -->|Yes| C[Continue]
+  B -->|No| D[Stop]
+```
+
+```mermaid
+---
+config:
+  layout: elk
+  look: handDrawn
+  theme: dark
+---
+flowchart TB
+  A[Start] --> B{Decision}
+  B -->|Yes| C[Continue]
+  B -->|No| D[Stop]
+```
+
+In this example, the `layout: elk` line configures the diagram to use the ELK layout algorithm, along with the hand drawn look and forest theme.
+
+#### Customizing ELK Layout:
+
+When using the ELK layout, you can further refine the diagram’s configuration, such as how nodes are placed and whether parallel edges should be combined:
+
+- To combine parallel edges, use mergeEdges: true | false.
+- To configure node placement, use nodePlacementStrategy with the following options:
+  - SIMPLE
+  - NETWORK_SIMPLEX
+  - LINEAR_SEGMENTS
+  - BRANDES_KOEPF (default)
+
+**Example configuration:**
+
+```
+---
+config:
+  layout: elk
+  elk:
+    mergeEdges: true
+    nodePlacementStrategy: LINEAR_SEGMENTS
+---
+flowchart LR
+  A[Start] --> B{Choose Path}
+  B -->|Option 1| C[Path 1]
+  B -->|Option 2| D[Path 2]
+
+#### Using Dagre Layout with Classic Look:
+```
+
+Another example:
+
+```
+---
+config:
+  layout: dagre
+  look: classic
+  theme: default
+---
+
+flowchart LR
+A[Start] --> B{Choose Path}
+B -->|Option 1| C[Path 1]
+B -->|Option 2| D[Path 2]
+
+```
+
+These options give you the flexibility to create diagrams that not only look great but are also arranged to best suit your data’s structure and flow.
+
+When integrating Mermaid, you can include look and layout configuration with the initialize call. This is also where you add the loading of elk.

docs/news/blog.md

@@ -6,6 +6,48 @@
 
 # Blog
 
+## [Mermaid v11 is out!](https://www.mermaidchart.com/blog/posts/mermaid-v11/)
+
+23 August 2024 · 2 mins
+
+Mermaid v11 introduces advanced layout options, new diagram types, and enhanced customization features, thanks to the incredible contributions from our community.
+
+## [Mermaid Innovation - Introducing New Looks for Mermaid Diagrams](https://www.mermaidchart.com/blog/posts/mermaid-innovation-introducing-new-looks-for-mermaid-diagrams/)
+
+6 August 2024 ·3 mins
+
+Discover the fresh new and unique Neo and Hand-Drawn looks for Mermaid Diagrams, while still offering the classic look you love.
+
+## [The Mermaid Chart Plugin for Jira: A How-To User Guide](https://www.mermaidchart.com/blog/posts/the-mermaid-chart-plugin-for-jira-a-how-to-user-guide/)
+
+31 July 2024 · 5 mins
+
+The Mermaid Chart plugin for Jira has arrived!
+
+## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://www.mermaidchart.com/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
+
+22 July 2024 · 5 mins
+
+The Mermaid AI chat interface
+
+## [How to Make a Sequence Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
+
+8 July 2024 · 6 mins
+
+Sequence diagrams are important for communicating complex systems in a clear and concise manner.
+
+## [How to Use the New “Comments” Feature in Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
+
+2 July 2024 · 3 mins
+
+How to Use the New Comments Feature in Mermaid Chart
+
+## [How to Use the official Mermaid Chart for Confluence app](https://www.mermaidchart.com/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
+
+21 May 2024 · 4 mins
+
+It doesn’t matter if you’re a data enthusiast, software engineer, or visual storyteller; our Confluence app can allow you to embed Mermaid Chart diagrams — and dynamically edit them — within your Confluence pages.
+
 ## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)
 
 7 May 2024 · 5 mins

docs/syntax/architecture.md

@@ -0,0 +1,275 @@
+> **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 database(db)[Database]
+```
+
+creates the service identified as `database`, using the icon `db`, with the label `Database`.
+
+If the service belongs to a group, it can be placed inside it through the optional `in` keyword
+
+```
+service database(db)[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 below.
+
+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/icons.json').then((res) => res.json()),
+  },
+]);
+```
+
+Using packages and a bundler:
+
+```bash
+npm install @iconify-json/logos
+```
+
+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,
+  },
+]);
+```
+
+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/entityRelationshipDiagram.md

@@ -136,7 +136,7 @@ Cardinality is a property that describes how many elements of another entity can
 |      1+      |      1+       | One or more  |
 | zero or more | zero or more  | Zero or more |
 | zero or many | zero or many  | Zero or more |
-|   many(0)    |    many(1)    | Zero or more |
+|   many(0)    |    many(0)    | Zero or more |
 |      0+      |      0+       | Zero or more |
 |   only one   |   only one    | Exactly one  |
 |      1       |       1       | Exactly one  |
@@ -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/gantt.md

@@ -172,7 +172,7 @@ The `title` is an _optional_ string to be displayed at the top of the Gantt char
 The `excludes` is an _optional_ attribute that accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".
 These date will be marked on the graph, and be excluded from the duration calculation of tasks. Meaning that if there are excluded dates during a task interval, the number of 'skipped' days will be added to the end of the task to ensure the duration is as specified in the code.
 
-#### Weekend (v\<MERMAID_RELEASE_VERSION>+)
+#### Weekend (v\11.0.0+)
 
 When excluding weekends, it is possible to configure the weekends to be either Friday and Saturday or Saturday and Sunday. By default weekends are Saturday and Sunday.
 To define the weekend start day, there is an _optional_ attribute `weekend` that can be added in a new line followed by either `friday` or `saturday`.

docs/syntax/gitgraph.md

@@ -918,7 +918,7 @@ Usage example:
        commit
 ```
 
-### Bottom to Top (`BT:`) (v\<MERMAID_RELEASE_VERSION>+)
+### Bottom to Top (`BT:`) (v11.0.0+)
 
 In `BT` (**Bottom-to-Top**) orientation, the commits run from bottom to top of the graph and branches are arranged side-by-side.
 

docs/syntax/packet.md

@@ -4,7 +4,7 @@
 >
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/packet.md](../../packages/mermaid/src/docs/syntax/packet.md).
 
-# Packet Diagram (v\<MERMAID_RELEASE_VERSION>+)
+# Packet Diagram (v11.0.0+)
 
 ## Introduction
 
@@ -12,7 +12,7 @@ A packet diagram is a visual representation used to illustrate the structure and
 
 ## Usage
 
-This diagram type is particularly useful for network engineers, educators, and students who require a clear and concise way to represent the structure of network packets.
+This diagram type is particularly useful for developers, network engineers, educators, and students who require a clear and concise way to represent the structure of network packets.
 
 ## Syntax
 

docs/syntax/sequenceDiagram.md

@@ -208,18 +208,18 @@ Messages can be of two displayed either solid or with a dotted line.
 
 There are ten types of arrows currently supported:
 
-| Type     | Description                                                              |
-| -------- | ------------------------------------------------------------------------ |
-| `->`     | Solid line without arrow                                                 |
-| `-->`    | Dotted line without arrow                                                |
-| `->>`    | Solid line with arrowhead                                                |
-| `-->>`   | Dotted line with arrowhead                                               |
-| `<<->>`  | Solid line with bidirectional arrowheads (v\<MERMAID_RELEASE_VERSION>+)  |
-| `<<-->>` | Dotted line with bidirectional arrowheads (v\<MERMAID_RELEASE_VERSION>+) |
-| `-x`     | Solid 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)                         |
+| Type     | Description                                          |
+| -------- | ---------------------------------------------------- |
+| `->`     | Solid line without arrow                             |
+| `-->`    | Dotted line without arrow                            |
+| `->>`    | Solid line with arrowhead                            |
+| `-->>`   | Dotted line with arrowhead                           |
+| `<<->>`  | 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.                 |
+| `-)`     | Solid line with an open arrow at the end (async)     |
+| `--)`    | Dotted line with a open arrow at the end (async)     |
 
 ## Activations
 

docs/syntax/stateDiagram.md

@@ -483,8 +483,8 @@ a _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by
 
 Here is an example of a classDef with just one property-value pair:
 
-```
-    classDef movement font-style:italic;
+```txt
+classDef movement font-style:italic;
 ```
 
 where
@@ -496,8 +496,8 @@ If you want to have more than one _property-value pair_ then you put a comma (`,
 
 Here is an example with three property-value pairs:
 
-```
-    classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+```txt
+classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
 ```
 
 where
@@ -522,7 +522,7 @@ There are two ways to apply a `classDef` style to a state:
 A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:
 
 ```txt
-    class [one or more state names, separated by commas] [name of a style defined with classDef]
+class [one or more state names, separated by commas] [name of a style defined with classDef]
 ```
 
 Here is an example applying the `badBadEvent` style to a state named `Crash`:

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.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a",
+  "packageManager": "pnpm@9.9.0+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1",
   "keywords": [
     "diagram",
     "markdown",
@@ -24,7 +24,9 @@
     "dev": "tsx .esbuild/server.ts",
     "dev:vite": "tsx .vite/server.ts",
     "dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev:vite",
-    "release": "pnpm build",
+    "copy-readme": "cpy './README.*' ./packages/mermaid/ --cwd=.",
+    "changeset:version": "changeset version && pnpm build && pnpm --filter mermaid run docs:release-version && pnpm --filter mermaid run docs:build && git add --all",
+    "changeset:publish": "pnpm copy-readme && changeset publish",
     "lint": "eslint --quiet --stats --cache --cache-strategy content . && pnpm lint:jison && prettier --cache --check .",
     "lint:fix": "eslint --cache --cache-strategy content --fix . && prettier --write . && tsx scripts/fixCSpell.ts",
     "lint:jison": "tsx ./scripts/jison/lint.mts",
@@ -40,8 +42,7 @@
     "test": "pnpm lint && vitest run",
     "test:watch": "vitest --watch",
     "test:coverage": "vitest --coverage",
-    "prepublishOnly": "pnpm build && pnpm test",
-    "prepare": "husky install && pnpm build",
+    "prepare": "husky && pnpm build",
     "pre-commit": "lint-staged"
   },
   "repository": {
@@ -62,7 +63,9 @@
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.44.4",
-    "@argos-ci/cypress": "^2.0.5",
+    "@argos-ci/cypress": "^2.1.0",
+    "@changesets/changelog-github": "^0.5.0",
+    "@changesets/cli": "^2.27.7",
     "@cspell/eslint-plugin": "^8.8.4",
     "@cypress/code-coverage": "^3.12.30",
     "@eslint/js": "^9.4.0",
@@ -82,9 +85,10 @@
     "chokidar": "^3.6.0",
     "concurrently": "^8.2.2",
     "cors": "^2.8.5",
+    "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",
     "esbuild": "^0.21.5",
     "eslint": "^9.4.0",
@@ -98,7 +102,7 @@
     "eslint-plugin-markdown": "^5.0.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-tsdoc": "^0.3.0",
-    "eslint-plugin-unicorn": "^53.0.0",
+    "eslint-plugin-unicorn": "^55.0.0",
     "express": "^4.19.1",
     "globals": "^15.4.0",
     "globby": "^14.0.1",
@@ -112,7 +116,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",

packages/mermaid-example-diagram/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@mermaid-js/mermaid-example-diagram",
   "version": "9.3.0",
+  "private": true,
   "description": "Example of external diagram module for MermaidJS.",
   "module": "dist/mermaid-example-diagram.core.mjs",
   "types": "dist/detector.d.ts",
@@ -18,9 +19,7 @@
     "example",
     "mermaid"
   ],
-  "scripts": {
-    "prepublishOnly": "pnpm -w run build"
-  },
+  "scripts": {},
   "repository": {
     "type": "git",
     "url": "https://github.com/mermaid-js/mermaid"

packages/mermaid-flowchart-elk/package.json

@@ -1,45 +0,0 @@
-{
-  "name": "@mermaid-js/flowchart-elk",
-  "version": "1.0.0-rc.1",
-  "description": "Flowchart plugin for mermaid with ELK layout",
-  "module": "dist/mermaid-flowchart-elk.core.mjs",
-  "types": "dist/packages/mermaid-flowchart-elk/src/detector.d.ts",
-  "type": "module",
-  "exports": {
-    ".": {
-      "import": "./dist/mermaid-flowchart-elk.core.mjs",
-      "types": "./dist/packages/mermaid-flowchart-elk/src/detector.d.ts"
-    },
-    "./*": "./*"
-  },
-  "keywords": [
-    "diagram",
-    "markdown",
-    "flowchart",
-    "elk",
-    "mermaid"
-  ],
-  "scripts": {
-    "prepublishOnly": "pnpm -w run build"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mermaid-js/mermaid"
-  },
-  "author": "Knut Sveidqvist",
-  "license": "MIT",
-  "dependencies": {
-    "d3": "^7.9.0",
-    "dagre-d3-es": "7.0.10",
-    "elkjs": "^0.9.2",
-    "khroma": "^2.1.0"
-  },
-  "devDependencies": {
-    "concurrently": "^8.2.2",
-    "mermaid": "workspace:^",
-    "rimraf": "^5.0.5"
-  },
-  "files": [
-    "dist"
-  ]
-}

packages/mermaid-flowchart-elk/src/detector.spec.ts

@@ -1,75 +0,0 @@
-import plugin from './detector.js';
-import { describe, it } from 'vitest';
-
-const { detector } = plugin;
-
-describe('flowchart-elk detector', () => {
-  it('should fail for dagre-d3', () => {
-    expect(
-      detector('flowchart', {
-        flowchart: {
-          defaultRenderer: 'dagre-d3',
-        },
-      })
-    ).toBe(false);
-  });
-  it('should fail for dagre-wrapper', () => {
-    expect(
-      detector('flowchart', {
-        flowchart: {
-          defaultRenderer: 'dagre-wrapper',
-        },
-      })
-    ).toBe(false);
-  });
-  it('should succeed for elk', () => {
-    expect(
-      detector('flowchart', {
-        flowchart: {
-          defaultRenderer: 'elk',
-        },
-      })
-    ).toBe(true);
-    expect(
-      detector('graph', {
-        flowchart: {
-          defaultRenderer: 'elk',
-        },
-      })
-    ).toBe(true);
-  });
-
-  // The error from the issue was reproduced with mindmap, so this is just an example
-  // what matters is the keyword somewhere inside graph definition
-  it('should check only the beginning of the line in search of keywords', () => {
-    expect(
-      detector('mindmap ["Descendant node in flowchart"]', {
-        flowchart: {
-          defaultRenderer: 'elk',
-        },
-      })
-    ).toBe(false);
-
-    expect(
-      detector('mindmap ["Descendant node in graph"]', {
-        flowchart: {
-          defaultRenderer: 'elk',
-        },
-      })
-    ).toBe(false);
-  });
-
-  it('should detect flowchart-elk', () => {
-    expect(detector('flowchart-elk')).toBe(true);
-  });
-
-  it('should not detect class with defaultRenderer set to elk', () => {
-    expect(
-      detector('class', {
-        flowchart: {
-          defaultRenderer: 'elk',
-        },
-      })
-    ).toBe(false);
-  });
-});

packages/mermaid-flowchart-elk/src/detector.ts

@@ -1,32 +0,0 @@
-import type {
-  ExternalDiagramDefinition,
-  DiagramDetector,
-  DiagramLoader,
-} from '../../mermaid/src/diagram-api/types.js';
-
-const id = 'flowchart-elk';
-
-const detector: DiagramDetector = (txt, config): boolean => {
-  if (
-    // If diagram explicitly states flowchart-elk
-    /^\s*flowchart-elk/.test(txt) ||
-    // If a flowchart/graph diagram has their default renderer set to elk
-    (/^\s*(flowchart|graph)/.test(txt) && config?.flowchart?.defaultRenderer === 'elk')
-  ) {
-    return true;
-  }
-  return false;
-};
-
-const loader: DiagramLoader = async () => {
-  const { diagram } = await import('./diagram-definition.js');
-  return { id, diagram };
-};
-
-const plugin: ExternalDiagramDefinition = {
-  id,
-  detector,
-  loader,
-};
-
-export default plugin;

packages/mermaid-flowchart-elk/src/diagram-definition.ts

@@ -1,12 +0,0 @@
-// @ts-ignore: JISON typing missing
-import parser from '../../mermaid/src/diagrams/flowchart/parser/flow.jison';
-import db from '../../mermaid/src/diagrams/flowchart/flowDb.js';
-import styles from '../../mermaid/src/diagrams/flowchart/styles.js';
-import renderer from './flowRenderer-elk.js';
-
-export const diagram = {
-  db,
-  renderer,
-  parser,
-  styles,
-};

packages/mermaid-flowchart-elk/src/flowRenderer-elk.js

@@ -1,888 +0,0 @@
-import { select, line, curveLinear } from 'd3';
-import { insertNode } from '../../mermaid/src/dagre-wrapper/nodes.js';
-import insertMarkers from '../../mermaid/src/dagre-wrapper/markers.js';
-import { insertEdgeLabel } from '../../mermaid/src/dagre-wrapper/edges.js';
-import { findCommonAncestor } from './render-utils.js';
-import { labelHelper } from '../../mermaid/src/dagre-wrapper/shapes/util.js';
-import { getConfig } from '../../mermaid/src/config.js';
-import { log } from '../../mermaid/src/logger.js';
-import utils from '../../mermaid/src/utils.js';
-import { setupGraphViewbox } from '../../mermaid/src/setupGraphViewbox.js';
-import common from '../../mermaid/src/diagrams/common/common.js';
-import { interpolateToCurve, getStylesFromArray } from '../../mermaid/src/utils.js';
-import ELK from 'elkjs/lib/elk.bundled.js';
-import { getLineFunctionsWithOffset } from '../../mermaid/src/utils/lineWithOffset.js';
-import { addEdgeMarkers } from '../../mermaid/src/dagre-wrapper/edgeMarker.js';
-
-const elk = new ELK();
-
-let portPos = {};
-
-const conf = {};
-export const setConf = function (cnf) {
-  const keys = Object.keys(cnf);
-  for (const key of keys) {
-    conf[key] = cnf[key];
-  }
-};
-
-let nodeDb = {};
-
-// /**
-//  * Function that adds the vertices found during parsing to the graph to be rendered.
-//  *
-//  * @param vert Object containing the vertices.
-//  * @param g The graph that is to be drawn.
-//  * @param svgId
-//  * @param root
-//  * @param doc
-//  * @param diagObj
-//  */
-export const addVertices = async function (vert, svgId, root, doc, diagObj, parentLookupDb, graph) {
-  const svg = root.select(`[id="${svgId}"]`);
-  const nodes = svg.insert('g').attr('class', 'nodes');
-  const keys = [...vert.keys()];
-
-  // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
-  await Promise.all(
-    keys.map(async function (id) {
-      const vertex = vert.get(id);
-
-      /**
-       * Variable for storing the classes for the vertex
-       *
-       * @type {string}
-       */
-      let classStr = 'default';
-      if (vertex.classes.length > 0) {
-        classStr = vertex.classes.join(' ');
-      }
-      classStr = classStr + ' flowchart-label';
-      const styles = getStylesFromArray(vertex.styles);
-
-      // Use vertex id as text in the box if no text is provided by the graph definition
-      let vertexText = vertex.text !== undefined ? vertex.text : vertex.id;
-
-      // We create a SVG label, either by delegating to addHtmlLabel or manually
-      const labelData = { width: 0, height: 0 };
-
-      const ports = [
-        {
-          id: vertex.id + '-west',
-          layoutOptions: {
-            'port.side': 'WEST',
-          },
-        },
-        {
-          id: vertex.id + '-east',
-          layoutOptions: {
-            'port.side': 'EAST',
-          },
-        },
-        {
-          id: vertex.id + '-south',
-          layoutOptions: {
-            'port.side': 'SOUTH',
-          },
-        },
-        {
-          id: vertex.id + '-north',
-          layoutOptions: {
-            'port.side': 'NORTH',
-          },
-        },
-      ];
-
-      let radius = 0;
-      let _shape = '';
-      let layoutOptions = {};
-      // Set the shape based parameters
-      switch (vertex.type) {
-        case 'round':
-          radius = 5;
-          _shape = 'rect';
-          break;
-        case 'square':
-          _shape = 'rect';
-          break;
-        case 'diamond':
-          _shape = 'question';
-          layoutOptions = {
-            portConstraints: 'FIXED_SIDE',
-          };
-          break;
-        case 'hexagon':
-          _shape = 'hexagon';
-          break;
-        case 'odd':
-          _shape = 'rect_left_inv_arrow';
-          break;
-        case 'lean_right':
-          _shape = 'lean_right';
-          break;
-        case 'lean_left':
-          _shape = 'lean_left';
-          break;
-        case 'trapezoid':
-          _shape = 'trapezoid';
-          break;
-        case 'inv_trapezoid':
-          _shape = 'inv_trapezoid';
-          break;
-        case 'odd_right':
-          _shape = 'rect_left_inv_arrow';
-          break;
-        case 'circle':
-          _shape = 'circle';
-          break;
-        case 'ellipse':
-          _shape = 'ellipse';
-          break;
-        case 'stadium':
-          _shape = 'stadium';
-          break;
-        case 'subroutine':
-          _shape = 'subroutine';
-          break;
-        case 'cylinder':
-          _shape = 'cylinder';
-          break;
-        case 'group':
-          _shape = 'rect';
-          break;
-        case 'doublecircle':
-          _shape = 'doublecircle';
-          break;
-        default:
-          _shape = 'rect';
-      }
-
-      // Add the node
-      const node = {
-        labelStyle: styles.labelStyle,
-        shape: _shape,
-        labelText: vertexText,
-        labelType: vertex.labelType,
-        rx: radius,
-        ry: radius,
-        class: classStr,
-        style: styles.style,
-        id: vertex.id,
-        link: vertex.link,
-        linkTarget: vertex.linkTarget,
-        tooltip: diagObj.db.getTooltip(vertex.id) || '',
-        domId: diagObj.db.lookUpDomId(vertex.id),
-        haveCallback: vertex.haveCallback,
-        width: vertex.type === 'group' ? 500 : undefined,
-        dir: vertex.dir,
-        type: vertex.type,
-        props: vertex.props,
-        padding: getConfig().flowchart.padding,
-      };
-      let boundingBox;
-      let nodeEl;
-
-      // Add the element to the DOM
-      if (node.type !== 'group') {
-        nodeEl = await insertNode(nodes, node, vertex.dir);
-        boundingBox = nodeEl.node().getBBox();
-      } else {
-        const { shapeSvg, bbox } = await labelHelper(nodes, node, undefined, true);
-        labelData.width = bbox.width;
-        labelData.wrappingWidth = getConfig().flowchart.wrappingWidth;
-        labelData.height = bbox.height;
-        labelData.labelNode = shapeSvg.node();
-        node.labelData = labelData;
-      }
-      // const { shapeSvg, bbox } = await labelHelper(svg, node, undefined, true);
-
-      const data = {
-        id: vertex.id,
-        ports: vertex.type === 'diamond' ? ports : [],
-        // labelStyle: styles.labelStyle,
-        // shape: _shape,
-        layoutOptions,
-        labelText: vertexText,
-        labelData,
-        // labels: [{ text: vertexText }],
-        // rx: radius,
-        // ry: radius,
-        // class: classStr,
-        // style: styles.style,
-        // link: vertex.link,
-        // linkTarget: vertex.linkTarget,
-        // tooltip: diagObj.db.getTooltip(vertex.id) || '',
-        domId: diagObj.db.lookUpDomId(vertex.id),
-        // haveCallback: vertex.haveCallback,
-        width: boundingBox?.width,
-        height: boundingBox?.height,
-        // dir: vertex.dir,
-        type: vertex.type,
-        // props: vertex.props,
-        // padding: getConfig().flowchart.padding,
-        // boundingBox,
-        el: nodeEl,
-        parent: parentLookupDb.parentById[vertex.id],
-      };
-      // if (!Object.keys(parentLookupDb.childrenById).includes(vertex.id)) {
-      // graph.children.push({
-      //   ...data,
-      // });
-      // }
-      nodeDb[node.id] = data;
-      // log.trace('setNode', {
-      //   labelStyle: styles.labelStyle,
-      //   shape: _shape,
-      //   labelText: vertexText,
-      //   rx: radius,
-      //   ry: radius,
-      //   class: classStr,
-      //   style: styles.style,
-      //   id: vertex.id,
-      //   domId: diagObj.db.lookUpDomId(vertex.id),
-      //   width: vertex.type === 'group' ? 500 : undefined,
-      //   type: vertex.type,
-      //   dir: vertex.dir,
-      //   props: vertex.props,
-      //   padding: getConfig().flowchart.padding,
-      //   parent: parentLookupDb.parentById[vertex.id],
-      // });
-    })
-  );
-  return graph;
-};
-
-const getNextPosition = (position, edgeDirection, graphDirection) => {
-  const portPos = {
-    TB: {
-      in: {
-        north: 'north',
-      },
-      out: {
-        south: 'west',
-        west: 'east',
-        east: 'south',
-      },
-    },
-    LR: {
-      in: {
-        west: 'west',
-      },
-      out: {
-        east: 'south',
-        south: 'north',
-        north: 'east',
-      },
-    },
-    RL: {
-      in: {
-        east: 'east',
-      },
-      out: {
-        west: 'north',
-        north: 'south',
-        south: 'west',
-      },
-    },
-    BT: {
-      in: {
-        south: 'south',
-      },
-      out: {
-        north: 'east',
-        east: 'west',
-        west: 'north',
-      },
-    },
-  };
-  portPos.TD = portPos.TB;
-  return portPos[graphDirection][edgeDirection][position];
-  // return 'south';
-};
-
-const getNextPort = (node, edgeDirection, graphDirection) => {
-  log.info('getNextPort', { node, edgeDirection, graphDirection });
-  if (!portPos[node]) {
-    switch (graphDirection) {
-      case 'TB':
-      case 'TD':
-        portPos[node] = {
-          inPosition: 'north',
-          outPosition: 'south',
-        };
-        break;
-      case 'BT':
-        portPos[node] = {
-          inPosition: 'south',
-          outPosition: 'north',
-        };
-        break;
-      case 'RL':
-        portPos[node] = {
-          inPosition: 'east',
-          outPosition: 'west',
-        };
-        break;
-      case 'LR':
-        portPos[node] = {
-          inPosition: 'west',
-          outPosition: 'east',
-        };
-        break;
-    }
-  }
-  const result = edgeDirection === 'in' ? portPos[node].inPosition : portPos[node].outPosition;
-
-  if (edgeDirection === 'in') {
-    portPos[node].inPosition = getNextPosition(
-      portPos[node].inPosition,
-      edgeDirection,
-      graphDirection
-    );
-  } else {
-    portPos[node].outPosition = getNextPosition(
-      portPos[node].outPosition,
-      edgeDirection,
-      graphDirection
-    );
-  }
-  return result;
-};
-
-const getEdgeStartEndPoint = (edge, dir) => {
-  let source = edge.start;
-  let target = edge.end;
-
-  // Save the original source and target
-  const sourceId = source;
-  const targetId = target;
-
-  const startNode = nodeDb[source];
-  const endNode = nodeDb[target];
-
-  if (!startNode || !endNode) {
-    return { source, target };
-  }
-
-  if (startNode.type === 'diamond') {
-    source = `${source}-${getNextPort(source, 'out', dir)}`;
-  }
-
-  if (endNode.type === 'diamond') {
-    target = `${target}-${getNextPort(target, 'in', dir)}`;
-  }
-
-  // Add the edge to the graph
-  return { source, target, sourceId, targetId };
-};
-
-/**
- * Add edges to graph based on parsed graph definition
- *
- * @param {object} edges The edges to add to the graph
- * @param {object} g The graph object
- * @param cy
- * @param diagObj
- * @param graph
- * @param svg
- */
-export const addEdges = function (edges, diagObj, graph, svg) {
-  log.info('abc78 edges = ', edges);
-  const labelsEl = svg.insert('g').attr('class', 'edgeLabels');
-  let linkIdCnt = {};
-  let dir = diagObj.db.getDirection();
-  let defaultStyle;
-  let defaultLabelStyle;
-
-  if (edges.defaultStyle !== undefined) {
-    const defaultStyles = getStylesFromArray(edges.defaultStyle);
-    defaultStyle = defaultStyles.style;
-    defaultLabelStyle = defaultStyles.labelStyle;
-  }
-
-  edges.forEach(function (edge) {
-    // Identify Link
-    const linkIdBase = 'L-' + edge.start + '-' + edge.end;
-    // count the links from+to the same node to give unique id
-    if (linkIdCnt[linkIdBase] === undefined) {
-      linkIdCnt[linkIdBase] = 0;
-      log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
-    } else {
-      linkIdCnt[linkIdBase]++;
-      log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
-    }
-    let linkId = linkIdBase + '-' + linkIdCnt[linkIdBase];
-    log.info('abc78 new link id to be used is', linkIdBase, linkId, linkIdCnt[linkIdBase]);
-    const linkNameStart = 'LS-' + edge.start;
-    const linkNameEnd = 'LE-' + edge.end;
-
-    const edgeData = { style: '', labelStyle: '' };
-    edgeData.minlen = edge.length || 1;
-    //edgeData.id = 'id' + cnt;
-
-    // Set link type for rendering
-    if (edge.type === 'arrow_open') {
-      edgeData.arrowhead = 'none';
-    } else {
-      edgeData.arrowhead = 'normal';
-    }
-
-    // Check of arrow types, placed here in order not to break old rendering
-    edgeData.arrowTypeStart = 'arrow_open';
-    edgeData.arrowTypeEnd = 'arrow_open';
-
-    /* eslint-disable no-fallthrough */
-    switch (edge.type) {
-      case 'double_arrow_cross':
-        edgeData.arrowTypeStart = 'arrow_cross';
-      case 'arrow_cross':
-        edgeData.arrowTypeEnd = 'arrow_cross';
-        break;
-      case 'double_arrow_point':
-        edgeData.arrowTypeStart = 'arrow_point';
-      case 'arrow_point':
-        edgeData.arrowTypeEnd = 'arrow_point';
-        break;
-      case 'double_arrow_circle':
-        edgeData.arrowTypeStart = 'arrow_circle';
-      case 'arrow_circle':
-        edgeData.arrowTypeEnd = 'arrow_circle';
-        break;
-    }
-
-    let style = '';
-    let labelStyle = '';
-
-    switch (edge.stroke) {
-      case 'normal':
-        style = 'fill:none;';
-        if (defaultStyle !== undefined) {
-          style = defaultStyle;
-        }
-        if (defaultLabelStyle !== undefined) {
-          labelStyle = defaultLabelStyle;
-        }
-        edgeData.thickness = 'normal';
-        edgeData.pattern = 'solid';
-        break;
-      case 'dotted':
-        edgeData.thickness = 'normal';
-        edgeData.pattern = 'dotted';
-        edgeData.style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';
-        break;
-      case 'thick':
-        edgeData.thickness = 'thick';
-        edgeData.pattern = 'solid';
-        edgeData.style = 'stroke-width: 3.5px;fill:none;';
-        break;
-    }
-    if (edge.style !== undefined) {
-      const styles = getStylesFromArray(edge.style);
-      style = styles.style;
-      labelStyle = styles.labelStyle;
-    }
-
-    edgeData.style = edgeData.style += style;
-    edgeData.labelStyle = edgeData.labelStyle += labelStyle;
-
-    if (edge.interpolate !== undefined) {
-      edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
-    } else if (edges.defaultInterpolate !== undefined) {
-      edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
-    } else {
-      edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
-    }
-
-    if (edge.text === undefined) {
-      if (edge.style !== undefined) {
-        edgeData.arrowheadStyle = 'fill: #333';
-      }
-    } else {
-      edgeData.arrowheadStyle = 'fill: #333';
-      edgeData.labelpos = 'c';
-    }
-
-    edgeData.labelType = edge.labelType;
-    edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
-
-    if (edge.style === undefined) {
-      edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';
-    }
-
-    edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');
-
-    edgeData.id = linkId;
-    edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;
-
-    const labelEl = insertEdgeLabel(labelsEl, edgeData);
-
-    // calculate start and end points of the edge, note that the source and target
-    // can be modified for shapes that have ports
-    const { source, target, sourceId, targetId } = getEdgeStartEndPoint(edge, dir);
-    log.debug('abc78 source and target', source, target);
-    // Add the edge to the graph
-    graph.edges.push({
-      id: 'e' + edge.start + edge.end,
-      sources: [source],
-      targets: [target],
-      sourceId,
-      targetId,
-      labelEl: labelEl,
-      labels: [
-        {
-          width: edgeData.width,
-          height: edgeData.height,
-          orgWidth: edgeData.width,
-          orgHeight: edgeData.height,
-          text: edgeData.label,
-          layoutOptions: {
-            'edgeLabels.inline': 'true',
-            'edgeLabels.placement': 'CENTER',
-          },
-        },
-      ],
-      edgeData,
-    });
-  });
-  return graph;
-};
-
-// TODO: break out and share with dagre wrapper. The current code in dagre wrapper also adds
-// adds the line to the graph, but we don't need that here. This is why we can't use the dagre
-// wrapper directly for this
-/**
- * Add the markers to the edge depending on the type of arrow is
- * @param svgPath
- * @param edgeData
- * @param diagramType
- * @param arrowMarkerAbsolute
- * @param id
- */
-const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAbsolute, id) {
-  let url = '';
-  // Check configuration for absolute path
-  if (arrowMarkerAbsolute) {
-    url =
-      window.location.protocol +
-      '//' +
-      window.location.host +
-      window.location.pathname +
-      window.location.search;
-    url = url.replace(/\(/g, '\\(');
-    url = url.replace(/\)/g, '\\)');
-  }
-
-  // look in edge data and decide which marker to use
-  addEdgeMarkers(svgPath, edgeData, url, id, diagramType);
-};
-
-/**
- * Returns the all the styles from classDef statements in the graph definition.
- *
- * @param text
- * @param diagObj
- * @returns {Map<string, import('../../mermaid/src/diagram-api/types.js').DiagramStyleClassDef>} ClassDef styles
- */
-export const getClasses = function (text, diagObj) {
-  log.info('Extracting classes');
-  return diagObj.db.getClasses();
-};
-
-const addSubGraphs = function (db) {
-  const parentLookupDb = { parentById: {}, childrenById: {} };
-  const subgraphs = db.getSubGraphs();
-  log.info('Subgraphs - ', subgraphs);
-  subgraphs.forEach(function (subgraph) {
-    subgraph.nodes.forEach(function (node) {
-      parentLookupDb.parentById[node] = subgraph.id;
-      if (parentLookupDb.childrenById[subgraph.id] === undefined) {
-        parentLookupDb.childrenById[subgraph.id] = [];
-      }
-      parentLookupDb.childrenById[subgraph.id].push(node);
-    });
-  });
-
-  subgraphs.forEach(function (subgraph) {
-    const data = { id: subgraph.id };
-    if (parentLookupDb.parentById[subgraph.id] !== undefined) {
-      data.parent = parentLookupDb.parentById[subgraph.id];
-    }
-  });
-  return parentLookupDb;
-};
-
-const calcOffset = function (src, dest, parentLookupDb) {
-  const ancestor = findCommonAncestor(src, dest, parentLookupDb);
-  if (ancestor === undefined || ancestor === 'root') {
-    return { x: 0, y: 0 };
-  }
-
-  const ancestorOffset = nodeDb[ancestor].offset;
-  return { x: ancestorOffset.posX, y: ancestorOffset.posY };
-};
-
-const insertEdge = function (edgesEl, edge, edgeData, diagObj, parentLookupDb, id) {
-  const offset = calcOffset(edge.sourceId, edge.targetId, parentLookupDb);
-
-  const src = edge.sections[0].startPoint;
-  const dest = edge.sections[0].endPoint;
-  const segments = edge.sections[0].bendPoints ? edge.sections[0].bendPoints : [];
-
-  const segPoints = segments.map((segment) => [segment.x + offset.x, segment.y + offset.y]);
-  const points = [
-    [src.x + offset.x, src.y + offset.y],
-    ...segPoints,
-    [dest.x + offset.x, dest.y + offset.y],
-  ];
-
-  const { x, y } = getLineFunctionsWithOffset(edge.edgeData);
-  const curve = line().x(x).y(y).curve(curveLinear);
-  const edgePath = edgesEl
-    .insert('path')
-    .attr('d', curve(points))
-    .attr('class', 'path ' + edgeData.classes)
-    .attr('fill', 'none');
-  Object.entries(edgeData).forEach(([key, value]) => {
-    if (key !== 'classes') {
-      edgePath.attr(key, value);
-    }
-  });
-  const edgeG = edgesEl.insert('g').attr('class', 'edgeLabel');
-  const edgeWithLabel = select(edgeG.node().appendChild(edge.labelEl));
-  const box = edgeWithLabel.node().firstChild.getBoundingClientRect();
-  edgeWithLabel.attr('width', box.width);
-  edgeWithLabel.attr('height', box.height);
-
-  edgeG.attr(
-    'transform',
-    `translate(${edge.labels[0].x + offset.x}, ${edge.labels[0].y + offset.y})`
-  );
-  addMarkersToEdge(edgePath, edgeData, diagObj.type, diagObj.arrowMarkerAbsolute, id);
-};
-
-/**
- * Recursive function that iterates over an array of nodes and inserts the children of each node.
- * It also recursively populates the inserts the children of the children and so on.
- * @param nodeArray
- * @param parentLookupDb
- */
-const insertChildren = (nodeArray, parentLookupDb) => {
-  nodeArray.forEach((node) => {
-    // Check if we have reached the end of the tree
-    if (!node.children) {
-      node.children = [];
-    }
-    // Check if the node has children
-    const childIds = parentLookupDb.childrenById[node.id];
-    // If the node has children, add them to the node
-    if (childIds) {
-      childIds.forEach((childId) => {
-        node.children.push(nodeDb[childId]);
-      });
-    }
-    // Recursive call
-    insertChildren(node.children, parentLookupDb);
-  });
-};
-
-/**
- * Draws a flowchart in the tag with id: id based on the graph definition in text.
- *
- * @param text
- * @param id
- */
-
-export const draw = async function (text, id, _version, diagObj) {
-  const { securityLevel, flowchart: conf } = getConfig();
-  nodeDb = {};
-  portPos = {};
-  const renderEl = select('body').append('div').attr('style', 'height:400px').attr('id', 'cy');
-  let graph = {
-    id: 'root',
-    layoutOptions: {
-      'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
-      'elk.layered.spacing.edgeNodeBetweenLayers': conf?.nodeSpacing ? `${conf.nodeSpacing}` : '30',
-      // 'elk.layered.mergeEdges': 'true',
-      'elk.direction': 'DOWN',
-      // 'elk.ports.sameLayerEdges': true,
-      // 'nodePlacement.strategy': 'SIMPLE',
-    },
-    children: [],
-    edges: [],
-  };
-  log.info('Drawing flowchart using v3 renderer', elk);
-
-  // Set the direction,
-  // Fetch the default direction, use TD if none was found
-  let dir = diagObj.db.getDirection();
-  switch (dir) {
-    case 'BT':
-      graph.layoutOptions['elk.direction'] = 'UP';
-      break;
-    case 'TB':
-      graph.layoutOptions['elk.direction'] = 'DOWN';
-      break;
-    case 'LR':
-      graph.layoutOptions['elk.direction'] = 'RIGHT';
-      break;
-    case 'RL':
-      graph.layoutOptions['elk.direction'] = 'LEFT';
-      break;
-  }
-
-  // Find the root dom node to ne used in rendering
-  // Handle root and document for when rendering in sandbox mode
-  let sandboxElement;
-  if (securityLevel === 'sandbox') {
-    sandboxElement = select('#i' + id);
-  }
-  const root =
-    securityLevel === 'sandbox'
-      ? select(sandboxElement.nodes()[0].contentDocument.body)
-      : select('body');
-  const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
-
-  const svg = root.select(`[id="${id}"]`);
-  // Define the supported markers for the diagram
-  const markers = ['point', 'circle', 'cross'];
-
-  // Add the marker definitions to the svg as marker tags
-  insertMarkers(svg, markers, diagObj.type, id);
-
-  // Fetch the vertices/nodes and edges/links from the parsed graph definition
-  const vert = diagObj.db.getVertices();
-
-  // Setup nodes from the subgraphs with type group, these will be used
-  // as nodes with children in the subgraph
-  let subG;
-  const subGraphs = diagObj.db.getSubGraphs();
-  log.info('Subgraphs - ', subGraphs);
-  for (let i = subGraphs.length - 1; i >= 0; i--) {
-    subG = subGraphs[i];
-    diagObj.db.addVertex(
-      subG.id,
-      { text: subG.title, type: subG.labelType },
-      'group',
-      undefined,
-      subG.classes,
-      subG.dir
-    );
-  }
-
-  // debugger;
-  // Add an element in the svg to be used to hold the subgraphs container
-  // elements
-  const subGraphsEl = svg.insert('g').attr('class', 'subgraphs');
-
-  // Create the lookup db for the subgraphs and their children to used when creating
-  // the tree structured graph
-  const parentLookupDb = addSubGraphs(diagObj.db);
-
-  // Add the nodes to the graph, this will entail creating the actual nodes
-  // in order to get the size of the node. You can't get the size of a node
-  // that is not in the dom so we need to add it to the dom, get the size
-  // we will position the nodes when we get the layout from elkjs
-  graph = await addVertices(vert, id, root, doc, diagObj, parentLookupDb, graph);
-
-  // Time for the edges, we start with adding an element in the node to hold the edges
-  const edgesEl = svg.insert('g').attr('class', 'edges edgePath');
-  // Fetch the edges form the parsed graph definition
-  const edges = diagObj.db.getEdges();
-
-  // Add the edges to the graph, this will entail creating the actual edges
-  graph = addEdges(edges, diagObj, graph, svg);
-
-  // Iterate through all nodes and add the top level nodes to the graph
-  const nodes = Object.keys(nodeDb);
-  nodes.forEach((nodeId) => {
-    const node = nodeDb[nodeId];
-    if (!node.parent) {
-      graph.children.push(node);
-    }
-    // Subgraph
-    if (parentLookupDb.childrenById[nodeId] !== undefined) {
-      node.labels = [
-        {
-          text: node.labelText,
-          layoutOptions: {
-            'nodeLabels.placement': '[H_CENTER, V_TOP, INSIDE]',
-          },
-          width: node.labelData.width,
-          height: node.labelData.height,
-          // width: 100,
-          // height: 100,
-        },
-      ];
-      delete node.x;
-      delete node.y;
-      delete node.width;
-      delete node.height;
-    }
-  });
-
-  insertChildren(graph.children, parentLookupDb);
-  log.info('after layout', JSON.stringify(graph, null, 2));
-  const g = await elk.layout(graph);
-  drawNodes(0, 0, g.children, svg, subGraphsEl, diagObj, 0);
-  utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle());
-  log.info('after layout', g);
-  g.edges?.map((edge) => {
-    insertEdge(edgesEl, edge, edge.edgeData, diagObj, parentLookupDb, id);
-  });
-  setupGraphViewbox({}, svg, conf.diagramPadding, conf.useMaxWidth);
-  // Remove element after layout
-  renderEl.remove();
-};
-
-const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, diagObj, depth) => {
-  nodeArray.forEach(function (node) {
-    if (node) {
-      nodeDb[node.id].offset = {
-        posX: node.x + relX,
-        posY: node.y + relY,
-        x: relX,
-        y: relY,
-        depth,
-        width: node.width,
-        height: node.height,
-      };
-      if (node.type === 'group') {
-        const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph');
-        subgraphEl
-          .insert('rect')
-          .attr('class', 'subgraph subgraph-lvl-' + (depth % 5) + ' node')
-          .attr('x', node.x + relX)
-          .attr('y', node.y + relY)
-          .attr('width', node.width)
-          .attr('height', node.height);
-        const label = subgraphEl.insert('g').attr('class', 'label');
-        const labelCentering = getConfig().flowchart.htmlLabels ? node.labelData.width / 2 : 0;
-        label.attr(
-          'transform',
-          `translate(${node.labels[0].x + relX + node.x + labelCentering}, ${
-            node.labels[0].y + relY + node.y + 3
-          })`
-        );
-        label.node().appendChild(node.labelData.labelNode);
-
-        log.info('Id (UGH)= ', node.type, node.labels);
-      } else {
-        log.info('Id (UGH)= ', node.id);
-        node.el.attr(
-          'transform',
-          `translate(${node.x + relX + node.width / 2}, ${node.y + relY + node.height / 2})`
-        );
-      }
-    }
-  });
-  nodeArray.forEach(function (node) {
-    if (node && node.type === 'group') {
-      drawNodes(relX + node.x, relY + node.y, node.children, svg, subgraphsEl, diagObj, depth + 1);
-    }
-  });
-};
-
-export default {
-  getClasses,
-  draw,
-};

packages/mermaid-flowchart-elk/src/render-utils.spec.ts

@@ -1,41 +0,0 @@
-import type { TreeData } from './render-utils.js';
-import { findCommonAncestor } from './render-utils.js';
-describe('when rendering a flowchart using elk ', () => {
-  let lookupDb: TreeData;
-  beforeEach(() => {
-    lookupDb = {
-      parentById: {
-        B4: 'inner',
-        B5: 'inner',
-        C4: 'inner2',
-        C5: 'inner2',
-        B2: 'Ugge',
-        B3: 'Ugge',
-        inner: 'Ugge',
-        inner2: 'Ugge',
-        B6: 'outer',
-      },
-      childrenById: {
-        inner: ['B4', 'B5'],
-        inner2: ['C4', 'C5'],
-        Ugge: ['B2', 'B3', 'inner', 'inner2'],
-        outer: ['B6'],
-      },
-    };
-  });
-  it('to find parent of siblings in a subgraph', () => {
-    expect(findCommonAncestor('B4', 'B5', lookupDb)).toBe('inner');
-  });
-  it('to find an uncle', () => {
-    expect(findCommonAncestor('B4', 'B2', lookupDb)).toBe('Ugge');
-  });
-  it('to find a cousin', () => {
-    expect(findCommonAncestor('B4', 'C4', lookupDb)).toBe('Ugge');
-  });
-  it('to find a grandparent', () => {
-    expect(findCommonAncestor('B4', 'B6', lookupDb)).toBe('root');
-  });
-  it('to find ancestor of siblings in the root', () => {
-    expect(findCommonAncestor('B1', 'outer', lookupDb)).toBe('root');
-  });
-});

packages/mermaid-flowchart-elk/src/render-utils.ts

@@ -1,25 +0,0 @@
-export interface TreeData {
-  parentById: Record<string, string>;
-  childrenById: Record<string, string[]>;
-}
-
-export const findCommonAncestor = (id1: string, id2: string, treeData: TreeData) => {
-  const { parentById } = treeData;
-  const visited = new Set();
-  let currentId = id1;
-  while (currentId) {
-    visited.add(currentId);
-    if (currentId === id2) {
-      return currentId;
-    }
-    currentId = parentById[currentId];
-  }
-  currentId = id2;
-  while (currentId) {
-    if (visited.has(currentId)) {
-      return currentId;
-    }
-    currentId = parentById[currentId];
-  }
-  return 'root';
-};

packages/mermaid-flowchart-elk/src/styles.ts

@@ -1,143 +0,0 @@
-/** Returns the styles given options */
-export interface FlowChartStyleOptions {
-  arrowheadColor: string;
-  border2: string;
-  clusterBkg: string;
-  clusterBorder: string;
-  edgeLabelBackground: string;
-  fontFamily: string;
-  lineColor: string;
-  mainBkg: string;
-  nodeBorder: string;
-  nodeTextColor: string;
-  tertiaryColor: string;
-  textColor: string;
-  titleColor: string;
-  [key: string]: string;
-}
-
-const genSections = (options: FlowChartStyleOptions) => {
-  let sections = '';
-
-  for (let i = 0; i < 5; i++) {
-    sections += `
-      .subgraph-lvl-${i} {
-        fill: ${options[`surface${i}`]};
-        stroke: ${options[`surfacePeer${i}`]};
-      }
-    `;
-  }
-  return sections;
-};
-
-const getStyles = (options: FlowChartStyleOptions) =>
-  `.label {
-    font-family: ${options.fontFamily};
-    color: ${options.nodeTextColor || options.textColor};
-  }
-  .cluster-label text {
-    fill: ${options.titleColor};
-  }
-  .cluster-label span {
-    color: ${options.titleColor};
-  }
-
-  .label text,span {
-    fill: ${options.nodeTextColor || options.textColor};
-    color: ${options.nodeTextColor || options.textColor};
-  }
-
-  .node rect,
-  .node circle,
-  .node ellipse,
-  .node polygon,
-  .node path {
-    fill: ${options.mainBkg};
-    stroke: ${options.nodeBorder};
-    stroke-width: 1px;
-  }
-
-  .node .label {
-    text-align: center;
-  }
-  .node.clickable {
-    cursor: pointer;
-  }
-
-  .arrowheadPath {
-    fill: ${options.arrowheadColor};
-  }
-
-  .edgePath .path {
-    stroke: ${options.lineColor};
-    stroke-width: 2.0px;
-  }
-
-  .flowchart-link {
-    stroke: ${options.lineColor};
-    fill: none;
-  }
-
-  .edgeLabel {
-    background-color: ${options.edgeLabelBackground};
-    rect {
-      opacity: 0.85;
-      background-color: ${options.edgeLabelBackground};
-      fill: ${options.edgeLabelBackground};
-    }
-    text-align: center;
-  }
-
-  .cluster rect {
-    fill: ${options.clusterBkg};
-    stroke: ${options.clusterBorder};
-    stroke-width: 1px;
-  }
-
-  .cluster text {
-    fill: ${options.titleColor};
-  }
-
-  .cluster span {
-    color: ${options.titleColor};
-  }
-  /* .cluster div {
-    color: ${options.titleColor};
-  } */
-
-  div.mermaidTooltip {
-    position: absolute;
-    text-align: center;
-    max-width: 200px;
-    padding: 2px;
-    font-family: ${options.fontFamily};
-    font-size: 12px;
-    background: ${options.tertiaryColor};
-    border: 1px solid ${options.border2};
-    border-radius: 2px;
-    pointer-events: none;
-    z-index: 100;
-  }
-
-  .flowchartTitleText {
-    text-anchor: middle;
-    font-size: 18px;
-    fill: ${options.textColor};
-  }
-  .subgraph {
-    stroke-width:2;
-    rx:3;
-  }
-  // .subgraph-lvl-1 {
-  //   fill:#ccc;
-  //   // stroke:black;
-  // }
-
-  .flowchart-label text {
-    text-anchor: middle;
-  }
-
-  ${genSections(options)}
-`;
-
-export default getStyles;

packages/mermaid-flowchart-elk/tsconfig.json

@@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "../..",
-    "outDir": "./dist",
-    "types": ["vitest/importMeta", "vitest/globals"]
-  },
-  "include": ["./src/**/*.ts"],
-  "typeRoots": ["./src/types"]
-}

packages/mermaid-layout-elk/CHANGELOG.md

@@ -0,0 +1,25 @@
+# @mermaid-js/layout-elk
+
+## 0.1.3
+
+### Patch Changes
+
+- [#2](https://github.com/calvinvette/mermaid/pull/2) [`10795b1`](https://github.com/mermaid-js/mermaid/commit/10795b1d89ecdf43a6414baa2cb37f585549b989) Thanks [@calvinvette](https://github.com/calvinvette)! - fix: Updates to the default elk configuration
+  feat: exposing cycleBreakingStrategy to the configuration so that it can be modified suing the configuration.
+- Updated dependencies [[`10795b1`](https://github.com/mermaid-js/mermaid/commit/10795b1d89ecdf43a6414baa2cb37f585549b989), [`10795b1`](https://github.com/mermaid-js/mermaid/commit/10795b1d89ecdf43a6414baa2cb37f585549b989), [`10795b1`](https://github.com/mermaid-js/mermaid/commit/10795b1d89ecdf43a6414baa2cb37f585549b989), [`10795b1`](https://github.com/mermaid-js/mermaid/commit/10795b1d89ecdf43a6414baa2cb37f585549b989), [`10795b1`](https://github.com/mermaid-js/mermaid/commit/10795b1d89ecdf43a6414baa2cb37f585549b989)]:
+  - mermaid@11.1.0
+
+## 0.1.2
+
+### Patch Changes
+
+- [#5761](https://github.com/mermaid-js/mermaid/pull/5761) [`b34dfe8`](https://github.com/mermaid-js/mermaid/commit/b34dfe8f45eded31da10965ced7ea40fde1ca76c) Thanks [@sidharthv96](https://github.com/sidharthv96)! - Fix type file path
+
+## 0.1.1
+
+### Patch Changes
+
+- [#5758](https://github.com/mermaid-js/mermaid/pull/5758) [`501a55d`](https://github.com/mermaid-js/mermaid/commit/501a55d8f225901ba345c498dec4298490a0196e) Thanks [@sidharthv96](https://github.com/sidharthv96)! - fix: Types path
+
+- Updated dependencies [[`5deaef4`](https://github.com/mermaid-js/mermaid/commit/5deaef456e74d796866431c26f69360e4e74dbff)]:
+  - mermaid@11.0.2

packages/mermaid-layout-elk/README.md

@@ -0,0 +1,72 @@
+# @mermaid-js/layout-elk
+
+This package provides a layout engine for Mermaid based on the [ELK](https://www.eclipse.org/elk/) layout engine.
+
+> [!NOTE]  
+> The ELK Layout engine will not be available in all providers that support mermaid by default.
+> The websites will have to install the `@mermaid-js/layout-elk` package to use the ELK layout engine.
+
+## Usage
+
+```
+flowchart-elk TD
+  A --> B
+  A --> C
+```
+
+```
+---
+config:
+  layout: elk
+---
+
+flowchart TD
+  A --> B
+  A --> C
+```
+
+```
+---
+config:
+  layout: elk.stress
+---
+
+flowchart TD
+  A --> B
+  A --> C
+```
+
+### With bundlers
+
+```sh
+npm install @mermaid-js/layout-elk
+```
+
+```ts
+import mermaid from 'mermaid';
+import elkLayouts from '@mermaid-js/layout-elk';
+
+mermaid.registerLayoutLoaders(elkLayouts);
+```
+
+### With CDN
+
+```html
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+  import elkLayouts from 'https://cdn.jsdelivr.net/npm/@mermaid-js/layout-elk@11/dist/mermaid-layout-elk.esm.min.mjs';
+
+  mermaid.registerLayoutLoaders(elkLayouts);
+</script>
+```
+
+## Supported layouts
+
+- `elk`: The default layout, which is `elk.layered`.
+- `elk.layered`: Layered layout
+- `elk.stress`: Stress layout
+- `elk.force`: Force layout
+- `elk.mrtree`: Multi-root tree layout
+- `elk.sporeOverlap`: Spore overlap layout
+
+<!-- TODO: Add images for these layouts, as GitHub doesn't support natively -->

packages/mermaid-layout-elk/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@mermaid-js/layout-elk",
-  "version": "0.0.1",
+  "version": "0.1.3",
   "description": "ELK layout engine for mermaid",
   "module": "dist/mermaid-layout-elk.core.mjs",
-  "types": "dist/packages/mermaid-layout-elk/src/index.d.ts",
+  "types": "dist/layouts.d.ts",
   "type": "module",
   "exports": {
     ".": {
       "import": "./dist/mermaid-layout-elk.core.mjs",
-      "types": "./dist/packages/mermaid-layout-elk/src/index.d.ts"
+      "types": "./dist/layouts.d.ts"
     },
     "./*": "./*"
   },
@@ -18,9 +18,7 @@
     "elk",
     "mermaid"
   ],
-  "scripts": {
-    "prepublishOnly": "pnpm -w run build"
-  },
+  "scripts": {},
   "repository": {
     "type": "git",
     "url": "https://github.com/mermaid-js/mermaid"
@@ -31,11 +29,15 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "elkjs": "^0.9.3",
-    "d3": "^7.9.0"
+    "d3": "^7.9.0",
+    "elkjs": "^0.9.3"
+  },
+  "devDependencies": {
+    "@types/d3": "^7.4.3",
+    "mermaid": "workspace:^"
   },
   "peerDependencies": {
-    "mermaid": "workspace:^"
+    "mermaid": "^11.0.0"
   },
   "files": [
     "dist"

packages/mermaid-layout-elk/src/find-common-ancestor.ts

@@ -3,8 +3,7 @@ export interface TreeData {
   childrenById: Record<string, string[]>;
 }
 
-export const findCommonAncestor = (id1: string, id2: string, treeData: TreeData) => {
-  const { parentById } = treeData;
+export const findCommonAncestor = (id1: string, id2: string, { parentById }: TreeData) => {
   const visited = new Set();
   let currentId = id1;
 
@@ -20,6 +19,7 @@ export const findCommonAncestor = (id1: string, id2: string, treeData: TreeData)
     }
     currentId = parentById[currentId];
   }
+
   currentId = id2;
   while (currentId) {
     if (visited.has(currentId)) {
@@ -27,5 +27,6 @@ export const findCommonAncestor = (id1: string, id2: string, treeData: TreeData)
     }
     currentId = parentById[currentId];
   }
+
   return 'root';
 };

packages/mermaid-layout-elk/src/layouts.ts

@@ -3,7 +3,7 @@ import type { LayoutLoaderDefinition } from 'mermaid';
 const loader = async () => await import(`./render.js`);
 const algos = ['elk.stress', 'elk.force', 'elk.mrtree', 'elk.sporeOverlap'];
 
-export const layouts: LayoutLoaderDefinition[] = [
+const layouts: LayoutLoaderDefinition[] = [
   {
     name: 'elk',
     loader,
@@ -15,3 +15,5 @@ export const layouts: LayoutLoaderDefinition[] = [
     algorithm: algo,
   })),
 ];
+
+export default layouts;