chore: added changeset

chore(deps): update peter-evans/create-pull-request digest to cb4d3bf

.build/common.ts

@@ -33,4 +33,9 @@ export const packageOptions = {
     packageName: 'mermaid-layout-elk',
     file: 'layouts.ts',
   },
+  examples: {
+    name: 'mermaid-examples',
+    packageName: 'examples',
+    file: 'index.ts',
+  },
 } as const satisfies Record<string, PackageOptions>;

.build/types.ts

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

.changeset/thick-fans-run.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+docs: fix incorrect image node documentation

.cspell/code-terms.txt

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

.cspell/contributors.txt

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

.cspell/libraries.txt

@@ -26,6 +26,7 @@ dompurify
 elkjs
 fcose
 fontawesome
+Fonticons
 Forgejo
 Foswiki
 Gitea

.cspell/mermaid-terms.txt

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

.esbuild/build.ts

@@ -1,5 +1,5 @@
 import { build } from 'esbuild';
-import { mkdir, writeFile } from 'node:fs/promises';
+import { cp, mkdir, readFile, rename, writeFile } from 'node:fs/promises';
 import { packageOptions } from '../.build/common.js';
 import { generateLangium } from '../.build/generateLangium.js';
 import type { MermaidBuildOptions } from './util.js';
@@ -31,6 +31,27 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
       // mermaid.js
       { ...iifeOptions },
       // mermaid.min.js
+      { ...iifeOptions, minify: true, metafile: shouldVisualize },
+      // mermaid.tiny.min.js
+      {
+        ...iifeOptions,
+        minify: true,
+        includeLargeFeatures: false,
+        metafile: shouldVisualize,
+        sourcemap: false,
+      }
+    );
+  }
+  if (entryName === 'mermaid-zenuml') {
+    const iifeOptions: MermaidBuildOptions = {
+      ...commonOptions,
+      format: 'iife',
+      globalName: 'mermaid-zenuml',
+    };
+    buildConfigs.push(
+      // mermaid-zenuml.js
+      { ...iifeOptions },
+      // mermaid-zenuml.min.js
       { ...iifeOptions, minify: true, metafile: shouldVisualize }
     );
   }
@@ -57,6 +78,21 @@ const handler = (e) => {
   process.exit(1);
 };
 
+const buildTinyMermaid = async () => {
+  await mkdir('./packages/tiny/dist', { recursive: true });
+  await rename(
+    './packages/mermaid/dist/mermaid.tiny.min.js',
+    './packages/tiny/dist/mermaid.tiny.js'
+  );
+  // Copy version from mermaid's package.json to tiny's package.json
+  const mermaidPkg = JSON.parse(await readFile('./packages/mermaid/package.json', 'utf8'));
+  const tinyPkg = JSON.parse(await readFile('./packages/tiny/package.json', 'utf8'));
+  tinyPkg.version = mermaidPkg.version;
+
+  await writeFile('./packages/tiny/package.json', JSON.stringify(tinyPkg, null, 2) + '\n');
+  await cp('./packages/mermaid/CHANGELOG.md', './packages/tiny/CHANGELOG.md');
+};
+
 const main = async () => {
   await generateLangium();
   await mkdir('stats', { recursive: true });
@@ -65,6 +101,7 @@ const main = async () => {
   for (const pkg of packageNames) {
     await buildPackage(pkg).catch(handler);
   }
+  await buildTinyMermaid();
 };
 
 void main();

.esbuild/util.ts

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

.github/ISSUE_TEMPLATE/theme_proposal.yml

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

.github/lychee.toml

@@ -46,11 +46,21 @@ exclude = [
 # Drupal 403
 "https://(www.)?drupal.org",
 
-# Swimm returns 404, eventhough the link is valid
+# Phbpp 403
+"https://(www.)?phpbb.com",
+
+# Swimm returns 404, even though the link is valid
 "https://docs.swimm.io",
 
+# Certificate Error
+"https://noteshub.app",
+
 # Timeout
-"https://huehive.co"
+"https://huehive.co",
+"https://foswiki.org",
+"https://www.gnu.org",
+"https://redmine.org",
+"https://mermaid-preview.com"
 ]
 
 # Exclude all private IPs from checking.

.github/stale.yml

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

.github/workflows/autofix.yml

@@ -42,4 +42,4 @@ jobs:
         working-directory: ./packages/mermaid
         run: pnpm run docs:build
 
-      - uses: autofix-ci/action@551dded8c6cc8a1054039c8bc0b8b48c51dfc6ef # main
+      - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27 # main

.github/workflows/e2e-applitools.yml

@@ -45,13 +45,15 @@ jobs:
       - if: ${{ env.USE_APPLI }}
         name: Notify applitools of new batch
         # Copied from docs https://applitools.com/docs/topics/integrations/github-integration-ci-setup.html
-        run: curl -L -d '' -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"
         env:
           # e.g. mermaid-js/mermaid/my-branch
           APPLITOOLS_BRANCH: ${{ github.repository }}/${{ github.ref_name }}
           APPLITOOLS_PARENT_BRANCH: ${{ github.event.inputs.parent_branch }}
           APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
           APPLITOOLS_SERVER_URL: 'https://eyesapi.applitools.com'
+        uses: wei/curl@012398a392d02480afa2720780031f8621d5f94c
+        with:
+          args: -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"
 
       - name: Cypress run
         uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12

.github/workflows/e2e-timings.yml

@@ -11,6 +11,7 @@ concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 permissions:
   contents: write
+  pull-requests: write
 
 jobs:
   timings:
@@ -29,6 +30,7 @@ jobs:
         uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         with:
           runTests: false
+
       - name: Cypress run
         uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
         id: cypress
@@ -44,15 +46,25 @@ jobs:
           SPLIT: 1
           SPLIT_INDEX: 0
           SPLIT_FILE: 'cypress/timings.json'
-      - name: Commit changes
-        uses: EndBug/add-and-commit@a94899bca583c204427a224a7af87c02f9b325d5 # v9.1.4
+
+      - name: Compare timings
+        id: compare
+        run: |
+          OUTPUT=$(pnpm tsx scripts/compare-timings.ts)
+          echo "$OUTPUT" >> $GITHUB_STEP_SUMMARY
+
+          echo "output<<EOF" >> $GITHUB_OUTPUT
+          echo "$OUTPUT" >> $GITHUB_OUTPUT
+          echo "EOF" >> $GITHUB_OUTPUT
+
+      - name: Commit and create pull request
+        uses: peter-evans/create-pull-request@cb4d3bfce175d44325c6b7697f81e0afe8a79bdf
         with:
-          add: 'cypress/timings.json'
-          author_name: 'github-actions[bot]'
-          author_email: '41898282+github-actions[bot]@users.noreply.github.com'
-          message: 'chore: update E2E timings'
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v5
-        with:
-          branch: release-promotion
+          add-paths: |
+            cypress/timings.json
+          commit-message: 'chore: update E2E timings'
+          branch: update-timings
           title: Update E2E Timings
+          body: ${{ steps.compare.outputs.output }}
+          delete-branch: true
+          sign-commits: true

.github/workflows/pr-labeler.yml

@@ -29,3 +29,29 @@ jobs:
           disable-releaser: true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Add "Sponsored by MermaidChart" label
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const prNumber = context.payload.pull_request.number;
+            const { data: commits } = await github.rest.pulls.listCommits({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              pull_number: prNumber,
+            });
+
+            const isSponsored = commits.every(
+              (c) => c.commit.author.email?.endsWith('@mermaidchart.com')
+            );
+
+            if (isSponsored) {
+              console.log('PR is sponsored. Adding label.');
+              await github.rest.issues.addLabels({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: prNumber,
+                labels: ['Sponsored by MermaidChart'],
+              });
+            }

.github/workflows/validate-lockfile.yml

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

.vite/build.ts

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

CHANGELOG.md

@@ -0,0 +1 @@
+./packages/mermaid/CHANGELOG.md

README.md

@@ -44,7 +44,7 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
 
 **Thanks to all involved, people committing pull requests, people answering questions! 🙏**
 
-<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
+<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt='Banner for "The Official Guide to Mermaid.js" book'></a>
 
 ## Table of content
 
@@ -95,10 +95,6 @@ In our release process we rely heavily on visual regression tests using [applito
 
 <!-- </Main description> -->
 
-## Mermaid AI Bot
-
-[Mermaid](https://codeparrot.ai/oracle?owner=mermaid-js&repo=mermaid) Bot will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.
-
 ## Examples
 
 **The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here to jump into the [text syntax](https://mermaid.js.org/intro/syntax-reference.html).**
@@ -451,7 +447,7 @@ For public sites, it can be precarious to retrieve text from users on the intern
 
 As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing javascript in the code from being executed. This is a great step forward for better security.
 
-_Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
+_Unfortunately you cannot have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
 
 ## Reporting vulnerabilities
 

README.zh-CN.md

@@ -43,13 +43,13 @@ Mermaid
 
 **感谢所有参与进来提交 PR，解答疑问的人们! 🙏**
 
-<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
+<a href="https://mermaid.js.org/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt='Banner for "The Official Guide to Mermaid.js" book'></a>
 
 ## 关于 Mermaid
 
 <!-- <Main description>   -->
 
-Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
+Mermaid 是一个基于 JavaScript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
 
 > Doc-Rot 是 Mermaid 致力于解决的一个难题。
 

__mocks__/d3.ts

@@ -1,13 +0,0 @@
-import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.js';
-
-export const select = function () {
-  return new MockedD3();
-};
-
-export const selectAll = function () {
-  return new MockedD3();
-};
-
-export const curveBasis = 'basis';
-export const curveLinear = 'linear';
-export const curveCardinal = 'cardinal';

cypress.config.ts

@@ -26,7 +26,10 @@ export default eyesPlugin(
         config.env.useArgos = process.env.RUN_VISUAL_TEST === 'true';
 
         if (config.env.useArgos) {
-          registerArgosTask(on, config);
+          registerArgosTask(on, config, {
+            // Enable upload to Argos only when it runs on CI.
+            uploadToArgos: !!process.env.CI,
+          });
         } else {
           addMatchImageSnapshotPlugin(on, config);
         }

cypress/helpers/util.ts

@@ -14,7 +14,7 @@ interface CodeObject {
   mermaid: CypressMermaidConfig;
 }
 
-const utf8ToB64 = (str: string): string => {
+export const utf8ToB64 = (str: string): string => {
   return Buffer.from(decodeURIComponent(encodeURIComponent(str))).toString('base64');
 };
 
@@ -22,7 +22,7 @@ const batchId: string =
   'mermaid-batch-' +
   (Cypress.env('useAppli')
     ? Date.now().toString()
-    : Cypress.env('CYPRESS_COMMIT') || Date.now().toString());
+    : (Cypress.env('CYPRESS_COMMIT') ?? Date.now().toString()));
 
 export const mermaidUrl = (
   graphStr: string | string[],
@@ -61,9 +61,7 @@ export const imgSnapshotTest = (
     sequence: {
       ...(_options.sequence ?? {}),
       actorFontFamily: 'courier',
-      noteFontFamily: _options.sequence?.noteFontFamily
-        ? _options.sequence.noteFontFamily
-        : 'courier',
+      noteFontFamily: _options.sequence?.noteFontFamily ?? 'courier',
       messageFontFamily: 'courier',
     },
   };

cypress/integration/other/configuration.spec.js

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

cypress/integration/other/interaction.spec.js

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

cypress/integration/other/xss.spec.js

@@ -1,4 +1,4 @@
-import { mermaidUrl } from '../../helpers/util.ts';
+import { imgSnapshotTest, mermaidUrl, utf8ToB64 } from '../../helpers/util.ts';
 describe('XSS', () => {
   it('should handle xss in tags', () => {
     const str =
@@ -141,4 +141,37 @@ describe('XSS', () => {
     cy.wait(1000);
     cy.get('#the-malware').should('not.exist');
   });
+
+  it('should sanitize icon labels in architecture diagrams', () => {
+    const str = JSON.stringify({
+      code: `architecture-beta
+    group api(cloud)[API]
+    service db "<img src=x onerror=\\"xssAttack()\\">" [Database] in api`,
+    });
+    imgSnapshotTest(utf8ToB64(str), {}, true);
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+
+  it('should sanitize katex blocks', () => {
+    const str = JSON.stringify({
+      code: `sequenceDiagram
+    participant A as Alice<img src="x" onerror="xssAttack()">$$\\text{Alice}$$
+    A->>John: Hello John, how are you?`,
+    });
+    imgSnapshotTest(utf8ToB64(str), {}, true);
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
+
+  it('should sanitize labels', () => {
+    const str = JSON.stringify({
+      code: `erDiagram
+    "<img src=x onerror=xssAttack()>" ||--|| ENTITY2 : "<img src=x onerror=xssAttack()>"
+    `,
+    });
+    imgSnapshotTest(utf8ToB64(str), {}, true);
+    cy.wait(1000);
+    cy.get('#the-malware').should('not.exist');
+  });
 });

cypress/integration/rendering/architecture.spec.ts

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

cypress/integration/rendering/block.spec.js

@@ -14,9 +14,9 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL2: should handle colums statement in sub-blocks', () => {
+  it('BL2: should handle columns statement in sub-blocks', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
   id1["Hello"]
   block
     columns 3
@@ -30,9 +30,9 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL3: should align block widths and handle colums statement in sub-blocks', () => {
+  it('BL3: should align block widths and handle columns statement in sub-blocks', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
   block
     columns 1
     id1
@@ -46,9 +46,9 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL4: should align block widths and handle colums statements in deeper sub-blocks then 1 level', () => {
+  it('BL4: should align block widths and handle columns statements in deeper sub-blocks then 1 level', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
   columns 1
   block
     columns 1
@@ -66,9 +66,9 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL5: should align block widths and handle colums statements in deeper sub-blocks then 1 level (alt)', () => {
+  it('BL5: should align block widths and handle columns statements in deeper sub-blocks then 1 level (alt)', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
   columns 1
   block
     id1
@@ -87,7 +87,7 @@ describe('Block diagram', () => {
 
   it('BL6: should handle block arrows and spece statements', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
     columns 3
     space:3
     ida idb idc
@@ -106,7 +106,7 @@ describe('Block diagram', () => {
 
   it('BL7: should handle different types of edges', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
       columns 3
       A space:5
       A --o B
@@ -119,7 +119,7 @@ describe('Block diagram', () => {
 
   it('BL8: should handle sub-blocks without columns statements', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
       columns 2
       C A B
       block
@@ -133,7 +133,7 @@ describe('Block diagram', () => {
 
   it('BL9: should handle edges from blocks in sub blocks to other blocks', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
       columns 3
       B space
       block
@@ -147,7 +147,7 @@ describe('Block diagram', () => {
 
   it('BL10: should handle edges from composite blocks', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
       columns 3
       B space
       block BL
@@ -161,7 +161,7 @@ describe('Block diagram', () => {
 
   it('BL11: should handle edges to composite blocks', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
       columns 3
       B space
       block BL
@@ -175,7 +175,7 @@ describe('Block diagram', () => {
 
   it('BL12: edges should handle labels', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
       A
       space
       A -- "apa" --> E
@@ -186,7 +186,7 @@ describe('Block diagram', () => {
 
   it('BL13: should handle block arrows in different directions', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
       columns 3
       space blockArrowId1<["down"]>(down) space
       blockArrowId2<["right"]>(right) blockArrowId3<["Sync"]>(x, y) blockArrowId4<["left"]>(left)
@@ -199,7 +199,7 @@ describe('Block diagram', () => {
 
   it('BL14: should style statements and class statements', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
     A
     B
     classDef blue fill:#66f,stroke:#333,stroke-width:2px;
@@ -212,7 +212,7 @@ describe('Block diagram', () => {
 
   it('BL15: width alignment - D and E should share available space', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
   block
     D
     E
@@ -225,7 +225,7 @@ describe('Block diagram', () => {
 
   it('BL16: width alignment - C should be as wide as the composite block', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
   block
     A("This is the text")
     B
@@ -236,9 +236,9 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL17: width alignment - blocks shold be equal in width', () => {
+  it('BL17: width alignment - blocks should be equal in width', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
     A("This is the text")
     B
     C
@@ -249,7 +249,7 @@ describe('Block diagram', () => {
 
   it('BL18: block types 1 - square, rounded and circle', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
     A["square"]
     B("rounded")
     C(("circle"))
@@ -260,7 +260,7 @@ describe('Block diagram', () => {
 
   it('BL19: block types 2 - odd, diamond and hexagon', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
     A>"rect_left_inv_arrow"]
     B{"diamond"}
     C{{"hexagon"}}
@@ -271,7 +271,7 @@ describe('Block diagram', () => {
 
   it('BL20: block types 3 - stadium', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
     A(["stadium"])
       `,
       {}
@@ -280,7 +280,7 @@ describe('Block diagram', () => {
 
   it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
     A[/"lean right"/]
     B[\"lean left"\]
     C[/"trapezoid"\]
@@ -292,7 +292,7 @@ describe('Block diagram', () => {
 
   it('BL22: block types 1 - square, rounded and circle', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
     A["square"]
     B("rounded")
     C(("circle"))
@@ -303,7 +303,7 @@ describe('Block diagram', () => {
 
   it('BL23: sizing - it should be possible to make a block wider', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
       A("rounded"):2
       B:2
       C
@@ -314,7 +314,7 @@ describe('Block diagram', () => {
 
   it('BL24: sizing - it should be possible to make a composite block wider', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
       block:2
         A
       end
@@ -326,7 +326,7 @@ describe('Block diagram', () => {
 
   it('BL25: block in the middle with space on each side', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
         columns 3
         space
         middle["In the middle"]
@@ -337,7 +337,7 @@ describe('Block diagram', () => {
   });
   it('BL26: space and an edge', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
   columns 5
     A space B
     A --x B
@@ -347,7 +347,7 @@ describe('Block diagram', () => {
   });
   it('BL27: block sizes for regular blocks', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
   columns 3
     a["A wide one"] b:2 c:2 d
       `,
@@ -356,7 +356,7 @@ describe('Block diagram', () => {
   });
   it('BL28: composite block with a set width - f should use the available space', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
   columns 3
   a:3
   block:e:3
@@ -370,7 +370,7 @@ describe('Block diagram', () => {
 
   it('BL29: composite block with a set width - f and g should split the available space', () => {
     imgSnapshotTest(
-      `block-beta
+      `block
   columns 3
   a:3
   block:e:3
@@ -384,4 +384,28 @@ describe('Block diagram', () => {
       {}
     );
   });
+
+  it('BL30: block should overflow if too wide for columns', () => {
+    imgSnapshotTest(
+      `block-beta
+  columns 2
+  fit:2
+  overflow:3
+  short:1
+  also_overflow:2
+`,
+      {}
+    );
+  });
+
+  it('BL31: edge without arrow syntax should render with no arrowheads', () => {
+    imgSnapshotTest(
+      `block-beta
+  a
+  b
+  a --- b
+`,
+      {}
+    );
+  });
 });

cypress/integration/rendering/classDiagram.spec.js

@@ -429,7 +429,7 @@ describe('Class diagram', () => {
     classDiagram
       class \`This\nTitle\nHas\nMany\nNewlines\` {
         +String Also
-        -Stirng Many
+        -String Many
         #int Members
         +And()
         -Many()
@@ -443,7 +443,7 @@ describe('Class diagram', () => {
     classDiagram
       class \`This\nTitle\nHas\nMany\nNewlines\` {
         +String Also
-        -Stirng Many
+        -String Many
         #int Members
         +And()
         -Many()
@@ -459,7 +459,7 @@ describe('Class diagram', () => {
       namespace testingNamespace {
       class \`This\nTitle\nHas\nMany\nNewlines\` {
         +String Also
-        -Stirng Many
+        -String Many
         #int Members
         +And()
         -Many()
@@ -495,4 +495,34 @@ describe('Class diagram', () => {
       cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener');
     });
   });
+
+  describe('Include char sequence "graph" in text (#6795)', () => {
+    it('has a label with char sequence "graph"', () => {
+      imgSnapshotTest(
+        `
+        classDiagram
+          class Person {
+            +String name
+            -Int id
+            #double age
+            +Text demographicProfile
+          }
+        `,
+        { flowchart: { defaultRenderer: 'elk' } }
+      );
+    });
+  });
+
+  it('should handle backticks for namespace and class names', () => {
+    imgSnapshotTest(
+      `
+      classDiagram
+          namespace \`A::B\` {
+              class \`IPC::Sender\`
+          }
+          RenderProcessHost --|> \`IPC::Sender\`
+      `,
+      {}
+    );
+  });
 });

cypress/integration/rendering/erDiagram.spec.js

@@ -354,4 +354,19 @@ ORDER ||--|{ LINE-ITEM : contains
       { logLevel: 1 }
     );
   });
+
+  describe('Include char sequence "graph" in text (#6795)', () => {
+    it('has a label with char sequence "graph"', () => {
+      imgSnapshotTest(
+        `
+        erDiagram
+          p[Photograph] {
+            varchar(12) jobId
+            date dateCreated
+          }
+        `,
+        { flowchart: { defaultRenderer: 'elk' } }
+      );
+    });
+  });
 });

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

@@ -208,13 +208,13 @@ describe('Flowchart ELK', () => {
       `flowchart-elk TB
   internet
   nat
-  routeur
+  router
   lb1
   lb2
   compute1
   compute2
   subgraph project
-  routeur
+  router
   nat
     subgraph subnet1
       compute1
@@ -225,8 +225,8 @@ describe('Flowchart ELK', () => {
       lb2
     end
   end
-  internet --> routeur
-  routeur --> subnet1 & subnet2
+  internet --> router
+  router --> subnet1 & subnet2
   subnet1 & subnet2 --> nat --> internet
       `,
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
@@ -443,7 +443,7 @@ flowchart-elk TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('63-elk: title on subgraphs should be themable', () => {
+  it('63-elk: title on subgraphs should be themeable', () => {
     imgSnapshotTest(
       `
       %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
@@ -1053,6 +1053,21 @@ flowchart LR
       });
     });
   });
+
+  it('6647-elk: should keep node order when using elk layout unless it would add crossings', () => {
+    imgSnapshotTest(
+      `---
+config:
+  layout: elk
+---
+      flowchart TB
+        a --> a1 & a2 & a3 & a4
+        b --> b1 & b2
+        b2 --> b3
+        b1 --> b4
+      `
+    );
+  });
 });
 
 describe('Title and arrow styling #4813', () => {

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

@@ -0,0 +1,28 @@
+import { imgSnapshotTest } from '../../helpers/util.ts';
+
+const themes = ['default', 'forest', 'dark', 'base', 'neutral'];
+
+describe('when rendering flowchart with icons', () => {
+  for (const theme of themes) {
+    it(`should render icons from fontawesome library on theme ${theme}`, () => {
+      imgSnapshotTest(
+        `flowchart TD
+            A("fab:fa-twitter Twitter") --> B("fab:fa-facebook Facebook")
+            B --> C("fa:fa-coffee Coffee")
+            C --> D("fa:fa-car Car")
+            D --> E("fab:fa-github GitHub")
+        `,
+        { theme }
+      );
+    });
+
+    it(`should render registered icons on theme ${theme}`, () => {
+      imgSnapshotTest(
+        `flowchart TD
+            A("fa:fa-bell Bell") 
+        `,
+        { theme }
+      );
+    });
+  }
+});

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

@@ -99,7 +99,7 @@ describe('Flowchart v2', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.be.within(417 * 0.95, 417 * 1.05);
+      expect(maxWidthValue).to.be.within(440 * 0.95, 440 * 1.05);
     });
   });
   it('8: should render a flowchart when useMaxWidth is false', () => {
@@ -118,7 +118,7 @@ describe('Flowchart v2', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      expect(width).to.be.within(417 * 0.95, 417 * 1.05);
+      expect(width).to.be.within(440 * 0.95, 440 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -198,13 +198,13 @@ describe('Flowchart v2', () => {
       `flowchart TB
   internet
   nat
-  routeur
+  router
   lb1
   lb2
   compute1
   compute2
   subgraph project
-  routeur
+  router
   nat
     subgraph subnet1
       compute1
@@ -215,8 +215,8 @@ describe('Flowchart v2', () => {
       lb2
     end
   end
-  internet --> routeur
-  routeur --> subnet1 & subnet2
+  internet --> router
+  router --> subnet1 & subnet2
   subnet1 & subnet2 --> nat --> internet
       `,
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
@@ -433,7 +433,7 @@ flowchart TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('63: title on subgraphs should be themable', () => {
+  it('63: title on subgraphs should be themeable', () => {
     imgSnapshotTest(
       `
       %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
@@ -699,7 +699,7 @@ A --> B
       { flowchart: { titleTopMargin: 10 } }
     );
   });
-  it('3192: It should be possieble to render flowcharts with invisible edges', () => {
+  it('3192: It should be possible to render flowcharts with invisible edges', () => {
     imgSnapshotTest(
       `---
 title: Simple flowchart with invisible edges
@@ -1076,11 +1076,11 @@ end
       );
     });
   });
-  describe('New @ sytax for node metadata edge cases', () => {
+  describe('New @ syntax for node metadata edge cases', () => {
     it('should be possible to use @  syntax to add labels on multi nodes', () => {
       imgSnapshotTest(
         `flowchart TB
-       n2["label for n2"] &   n4@{ label: "labe for n4"}   & n5@{ label: "labe for n5"}
+       n2["label for n2"] &   n4@{ label: "label for n4"}   & n5@{ label: "label for n5"}
         `,
         {}
       );
@@ -1088,7 +1088,7 @@ end
     it('should be possible to use @  syntax to add labels with trail spaces and &', () => {
       imgSnapshotTest(
         `flowchart TB
-       n2["label for n2"] &   n4@{ label: "labe for n4"}   & n5@{ label: "labe for n5"}   
+       n2["label for n2"] &   n4@{ label: "label for n4"}   & n5@{ label: "label for n5"}   
         `,
         {}
       );
@@ -1097,8 +1097,8 @@ end
       imgSnapshotTest(
         `flowchart TB
        n2["label for n2"]
-       n4@{ label: "labe for n4"}
-       n5@{ label: "labe for n5"}  
+       n4@{ label: "label for n4"}
+       n5@{ label: "label for n5"}  
         `,
         {}
       );
@@ -1113,4 +1113,77 @@ end
       );
     });
   });
+  describe('Flowchart Node Shape Rendering', () => {
+    it('should render a stadium-shaped node', () => {
+      imgSnapshotTest(
+        `flowchart TB
+          A(["Start"]) --> n1["Untitled Node"]
+          A --> n2["Untitled Node"]
+        `,
+        {}
+      );
+    });
+    it('should render a diamond-shaped node using shape config', () => {
+      imgSnapshotTest(
+        `flowchart BT
+          n2["Untitled Node"] --> n1["Diamond"]
+          n1@{ shape: diam}
+        `,
+        {}
+      );
+    });
+    it('should render a rounded rectangle and a normal rectangle', () => {
+      imgSnapshotTest(
+        `flowchart BT
+        n2["Untitled Node"] --> n1["Rounded Rectangle"]
+        n3["Untitled Node"] --> n1
+        n1@{ shape: rounded}
+        n3@{ shape: rect}
+    `,
+        {}
+      );
+    });
+  });
+
+  it('6617: Per Link Curve Styling using edge Ids', () => {
+    imgSnapshotTest(
+      `flowchart TD
+      A e1@-->B e5@--> E
+      E e7@--> D
+      B e3@-->D
+      A e2@-->C e4@-->D
+      C e6@--> F
+      F e8@--> D
+      e1@{ curve: natural }
+      e2@{ curve: stepAfter }
+      e3@{ curve: monotoneY }
+      e4@{ curve: bumpY }
+      e5@{ curve: linear }
+      e6@{ curve: catmullRom }
+      e7@{ curve: cardinal }
+      `
+    );
+  });
+
+  describe('when rendering unsuported markdown', () => {
+    const graph = `flowchart TB
+    mermaid{"What is\nyourmermaid version?"} --> v10["<11"] --"\`<**1**1\`"--> fine["No bug"]
+    mermaid --> v11[">= v11"] -- ">= v11" --> broken["Affected by https://github.com/mermaid-js/mermaid/issues/5824"]
+    subgraph subgraph1["\`How to fix **fix**\`"]
+        broken --> B["B"]
+    end
+    githost["Github, Gitlab, BitBucket, etc."]
+    githost2["\`Github, Gitlab, BitBucket, etc.\`"]
+    a["1."]
+    b["- x"]
+      `;
+
+    it('should render raw strings', () => {
+      imgSnapshotTest(graph);
+    });
+
+    it('should render raw strings with htmlLabels: false', () => {
+      imgSnapshotTest(graph, { htmlLabels: false });
+    });
+  });
 });

cypress/integration/rendering/flowchart.spec.js

@@ -934,4 +934,43 @@ graph TD
       }
     );
   });
+  it('68: should honor subgraph direction when inheritDir is false', () => {
+    imgSnapshotTest(
+      `
+      %%{init: {"flowchart": { "inheritDir": false }}}%%
+      flowchart TB
+        direction LR
+        subgraph A
+          direction TB
+          a --> b
+        end
+        subgraph B
+          c --> d
+        end
+      `,
+      {
+        fontFamily: 'courier',
+      }
+    );
+  });
+
+  it('69: should inherit global direction when inheritDir is true', () => {
+    imgSnapshotTest(
+      `
+      %%{init: {"flowchart": { "inheritDir": true }}}%%
+      flowchart TB
+        direction LR
+        subgraph A
+          direction TB
+          a --> b
+        end
+        subgraph B
+          c --> d
+        end
+      `,
+      {
+        fontFamily: 'courier',
+      }
+    );
+  });
 });

cypress/integration/rendering/gantt.spec.js

@@ -117,7 +117,7 @@ describe('Gantt diagram', () => {
       {}
     );
   });
-  it('should FAIL redering a gantt chart for issue #1060 with invalid date', () => {
+  it('should FAIL rendering a gantt chart for issue #1060 with invalid date', () => {
     imgSnapshotTest(
       `
       gantt
@@ -358,6 +358,23 @@ describe('Gantt diagram', () => {
     );
   });
 
+  it('should render a gantt diagram with a vert tag', () => {
+    imgSnapshotTest(
+      `
+      gantt
+        title A Gantt Diagram
+        dateFormat   ss
+        axisFormat   %Ss
+
+        section Section
+        A task           : a1, 00, 6s
+        Milestone     : vert, 01,
+        section Another
+        Task in sec      : 06, 3s
+        another task     : 3s
+      `
+    );
+  });
   it('should render a gantt diagram with tick is 2 milliseconds', () => {
     imgSnapshotTest(
       `
@@ -548,6 +565,18 @@ describe('Gantt diagram', () => {
     );
   });
 
+  it('should render only the day when using dateFormat D', () => {
+    imgSnapshotTest(
+      `
+    gantt
+      title Test
+      dateFormat D
+      A :a, 1, 1d
+    `,
+      {}
+    );
+  });
+
   // TODO: fix it
   //
   // This test is skipped deliberately
@@ -573,7 +602,7 @@ describe('Gantt diagram', () => {
       `
     );
   });
-  it('should render a gantt diagram exculding friday and saturday', () => {
+  it('should render a gantt diagram excluding friday and saturday', () => {
     imgSnapshotTest(
       `gantt
       title A Gantt Diagram
@@ -584,7 +613,7 @@ describe('Gantt diagram', () => {
       A task :a1, 2024-02-28, 10d`
     );
   });
-  it('should render a gantt diagram exculding saturday and sunday', () => {
+  it('should render a gantt diagram excluding saturday and sunday', () => {
     imgSnapshotTest(
       `gantt
       title A Gantt Diagram
@@ -630,6 +659,49 @@ describe('Gantt diagram', () => {
     );
   });
 
+  it('should render a gantt diagram excluding a specific date in YYYY-MM-DD HH:mm:ss format', () => {
+    imgSnapshotTest(
+      `
+    gantt
+      dateFormat  YYYY-MM-DD HH:mm:ss
+      excludes    2025-07-07
+      section     Section
+      A task      :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
+      Another task:after a1, 20h
+    `,
+      {}
+    );
+  });
+
+  it('should render a gantt diagram excluding saturday and sunday in YYYY-MM-DD HH:mm:ss format', () => {
+    imgSnapshotTest(
+      `
+        gantt
+      dateFormat  YYYY-MM-DD HH:mm:ss
+      excludes    weekends
+       weekend saturday
+      section     Section
+      A task      :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
+      Another task:after a1, 20h
+    `,
+      {}
+    );
+  });
+  it('should render a gantt diagram excluding friday and saturday in YYYY-MM-DD HH:mm:ss format', () => {
+    imgSnapshotTest(
+      `
+        gantt
+      dateFormat  YYYY-MM-DD HH:mm:ss
+      excludes    weekends
+       weekend friday
+      section     Section
+      A task      :a1, 2025-07-04 20:30:30, 2025-07-08 10:30:30
+      Another task:after a1, 20h
+    `,
+      {}
+    );
+  });
+
   it("should render when there's a semicolon in the title", () => {
     imgSnapshotTest(
       `
@@ -671,7 +743,7 @@ describe('Gantt diagram', () => {
       title Gantt Digram
       dateFormat  YYYY-MM-DD
       section Section
-      ;A task with a semiclon           :a1, 2014-01-01, 30d
+      ;A task with a semicolon           :a1, 2014-01-01, 30d
       Another task     :after a1  , 20d
       section Another
       Task in sec      :2014-01-12  , 12d

cypress/integration/rendering/gitGraph.spec.js

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

cypress/integration/rendering/journey.spec.js

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

cypress/integration/rendering/kanban.spec.ts

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

cypress/integration/rendering/mindmap.spec.ts

@@ -146,7 +146,7 @@ root
       shouldHaveRoot
     );
   });
-  it('text shouhld wrap with icon', () => {
+  it('text should wrap with icon', () => {
     imgSnapshotTest(
       `mindmap
 root
@@ -246,5 +246,22 @@ Word!\`]
       );
     });
   });
+  describe('Include char sequence "graph" in text (#6795)', () => {
+    it('has a label with char sequence "graph"', () => {
+      imgSnapshotTest(
+        `
+        mindmap
+          root
+            Photograph
+              Waterfall
+              Landscape
+            Geography
+              Mountains
+              Rocks
+        `,
+        { flowchart: { defaultRenderer: 'elk' } }
+      );
+    });
+  });
   /* The end */
 });

cypress/integration/rendering/packet.spec.ts

@@ -1,7 +1,7 @@
 import { imgSnapshotTest } from '../../helpers/util';
 
 describe('packet structure', () => {
-  it('should render a simple packet diagram', () => {
+  it('should render a simple packet-beta diagram', () => {
     imgSnapshotTest(
       `packet-beta
   title Hello world
@@ -10,9 +10,18 @@ describe('packet structure', () => {
     );
   });
 
+  it('should render a simple packet diagram', () => {
+    imgSnapshotTest(
+      `packet
+  title Hello world
+  0-10: "hello"
+`
+    );
+  });
+
   it('should render a simple packet diagram without ranges', () => {
     imgSnapshotTest(
-      `packet-beta
+      `packet
   0: "h"
   1: "i"
 `
@@ -21,7 +30,7 @@ describe('packet structure', () => {
 
   it('should render a complex packet diagram', () => {
     imgSnapshotTest(
-      `packet-beta
+      `packet
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"
@@ -52,7 +61,7 @@ describe('packet structure', () => {
         packet:
           showBits: false
       ---
-      packet-beta
+      packet
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"

cypress/integration/rendering/pie.spec.ts

@@ -64,7 +64,7 @@ describe('pie chart', () => {
     });
   });
 
-  it('should render a pie diagram when textPosition is setted', () => {
+  it('should render a pie diagram when textPosition is set', () => {
     imgSnapshotTest(
       `pie
         "Dogs": 50
@@ -82,4 +82,13 @@ describe('pie chart', () => {
       `
     );
   });
+  it('should render pie slices only for non-zero values but shows all legends', () => {
+    imgSnapshotTest(
+      `   pie title Pets adopted by volunteers
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 1
+      `
+    );
+  });
 });

cypress/integration/rendering/quadrantChart.spec.js

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

cypress/integration/rendering/sankey.spec.ts

@@ -15,7 +15,7 @@ describe('Sankey Diagram', () => {
   describe('when given a linkColor', function () {
     this.beforeAll(() => {
       cy.wrap(
-        `sankey-beta
+        `sankey
       a,b,10
       `
       ).as('graph');
@@ -62,7 +62,7 @@ describe('Sankey Diagram', () => {
     this.beforeAll(() => {
       cy.wrap(
         `
-        sankey-beta
+        sankey
         
         a,b,8
         b,c,8

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

@@ -138,8 +138,8 @@ describe('State diagram', () => {
     imgSnapshotTest(
       `
     stateDiagram-v2
-    State1: This a a single line description
-    State2: This a a multi line description
+    State1: This a single line description
+    State2: This a multi line description
     State2: here comes the multi part
     [*] --> State1
     State1 --> State2
@@ -345,7 +345,7 @@ stateDiagram
       }
     );
   });
-  it('v2 width of compond state should grow with title if title is wider', () => {
+  it('v2 width of compound state should grow with title if title is wider', () => {
     imgSnapshotTest(
       `
 stateDiagram-v2
@@ -402,8 +402,8 @@ stateDiagram-v2
       `
 stateDiagram-v2
     MyState
-    note left of MyState : I am a leftie
-    note right of MyState : I am a rightie
+    note left of MyState : I am a lefty
+    note right of MyState : I am a righty
     `,
       {
         logLevel: 0,
@@ -552,7 +552,7 @@ style AState fill:#636,border:1px solid red,color:white;
         { logLevel: 0, fontFamily: 'courier' }
       );
     });
-    it(' should let styles take preceedence over classes', () => {
+    it(' should let styles take precedence over classes', () => {
       imgSnapshotTest(
         `
 stateDiagram-v2
@@ -565,7 +565,7 @@ style AState fill:#636,border:1px solid red,color:white;
         { logLevel: 0, fontFamily: 'courier' }
       );
     });
-    it(' should allow styles to take effect in stubgraphs', () => {
+    it(' should allow styles to take effect in subgraphs', () => {
       imgSnapshotTest(
         `
   stateDiagram
@@ -602,6 +602,231 @@ State1 --> [*]
       --
       55
   }
+`,
+      {}
+    );
+  });
+  it('should render edge labels correctly', () => {
+    imgSnapshotTest(
+      `---
+title: On The Way To Something Something DarkSide
+config:
+  look: default
+  theme: default
+---
+
+stateDiagram-v2
+
+   state State1_____________
+   {
+      c0
+   }
+
+   state State2_____________
+   {
+      c1
+   }
+
+   state State3_____________
+   {
+      c7
+   }
+
+   state State4_____________
+   {
+      c2
+   }
+
+   state State5_____________
+   {
+      c3
+   }
+
+   state State6_____________
+   {
+      c4
+   }
+
+   state State7_____________
+   {
+      c5
+   }
+
+   state State8_____________
+   {
+      c6
+   }
+
+
+[*] --> State1_____________
+State1_____________ --> State2_____________   : Transition1_____
+State2_____________ --> State4_____________   : Transition2_____
+State2_____________ --> State3_____________   : Transition3_____
+State3_____________ --> State2_____________
+State4_____________ --> State2_____________   : Transition5_____
+State4_____________ --> State5_____________   : Transition6_____
+State5_____________ --> State6_____________   : Transition7_____
+State6_____________ --> State4_____________   : Transition8_____
+State2_____________ --> State7_____________   : Transition4_____
+State4_____________ --> State7_____________   : Transition4_____
+State5_____________ --> State7_____________   : Transition4_____
+State6_____________ --> State7_____________   : Transition4_____
+State7_____________ --> State1_____________   : Transition9_____
+State5_____________ --> State8_____________   : Transition10____
+State8_____________ --> State5_____________   : Transition11____
+`,
+      {}
+    );
+  });
+  it('should render edge labels correctly with multiple transitions', () => {
+    imgSnapshotTest(
+      `---
+title: Multiple Transitions
+config:
+  look: default
+  theme: default
+---
+
+stateDiagram-v2
+
+   state State1_____________
+   {
+      c0
+   }
+
+   state State2_____________
+   {
+      c1
+   }
+
+   state State3_____________
+   {
+      c7
+   }
+
+   state State4_____________
+   {
+      c2
+   }
+
+   state State5_____________
+   {
+      c3
+   }
+
+   state State6_____________
+   {
+      c4
+   }
+
+   state State7_____________
+   {
+      c5
+   }
+
+   state State8_____________
+   {
+      c6
+   }
+
+   state State9_____________
+   {
+      c9
+   }
+
+[*] --> State1_____________
+State1_____________ --> State2_____________   : Transition1_____
+State2_____________ --> State4_____________   : Transition2_____
+State2_____________ --> State3_____________   : Transition3_____
+State3_____________ --> State2_____________
+State4_____________ --> State2_____________   : Transition5_____
+State4_____________ --> State5_____________   : Transition6_____
+State5_____________ --> State6_____________   : Transition7_____
+State6_____________ --> State4_____________   : Transition8_____
+State2_____________ --> State7_____________   : Transition4_____
+State4_____________ --> State7_____________   : Transition4_____
+State5_____________ --> State7_____________   : Transition4_____
+State6_____________ --> State7_____________   : Transition4_____
+State7_____________ --> State1_____________   : Transition9_____
+State5_____________ --> State8_____________   : Transition10____
+State8_____________ --> State5_____________   : Transition11____
+State9_____________ --> State8_____________   : Transition12____
+`,
+      {}
+    );
+  });
+
+  it('should render edge labels correctly with multiple states', () => {
+    imgSnapshotTest(
+      `---
+title: Multiple States
+config:
+  look: default
+  theme: default
+---
+
+stateDiagram-v2
+
+   state State1_____________
+   {
+      c0
+   }
+
+   state State2_____________
+   {
+      c1
+   }
+
+   state State3_____________
+   {
+      c7
+   }
+
+   state State4_____________
+   {
+      c2
+   }
+
+   state State5_____________
+   {
+      c3
+   }
+
+   state State6_____________
+   {
+      c4
+   }
+
+   state State7_____________
+   {
+      c5
+   }
+
+   state State8_____________
+   {
+      c6
+   }
+
+   state State9_____________
+   {
+      c9
+   }
+
+   state State10_____________
+   {
+      c10
+   }
+
+[*] --> State1_____________
+State1_____________ --> State2_____________   : Transition1_____
+State2_____________ --> State3_____________   : Transition2_____
+State3_____________ --> State4_____________   : Transition3_____
+State4_____________ --> State5_____________   : Transition4_____
+State5_____________ --> State6_____________   : Transition5_____
+State6_____________ --> State7_____________   : Transition6_____
+State7_____________ --> State8_____________   : Transition7_____
+State8_____________ --> State9_____________   : Transition8_____
+State9_____________ --> State10_____________   : Transition9_____
 `,
       {}
     );

cypress/integration/rendering/stateDiagram.spec.js

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

cypress/integration/rendering/timeline.spec.ts

@@ -7,7 +7,7 @@ describe('Timeline diagram', () => {
     title History of Social Media Platform
     2002 : LinkedIn
     2004 : Facebook : Google
-    2005 : Youtube
+    2005 : YouTube
     2006 : Twitter
       `,
       {}
@@ -35,7 +35,7 @@ describe('Timeline diagram', () => {
         section Stone Age
           7600 BC : Britain's oldest known house was built in Orkney, Scotland
           6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.
-        section Broze Age
+        section Bronze Age
           2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.
                   : New styles of pottery and ways of burying the dead appear.
           2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.
@@ -51,7 +51,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
           2006 : Twitter
       `,
       {}
@@ -68,7 +68,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -84,7 +84,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -101,7 +101,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -118,7 +118,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -135,7 +135,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -152,7 +152,7 @@ describe('Timeline diagram', () => {
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -161,4 +161,68 @@ describe('Timeline diagram', () => {
       {}
     );
   });
+
+  it('11: should render timeline with many stacked events and proper timeline line length', () => {
+    imgSnapshotTest(
+      `timeline
+        title Medical Device Lifecycle
+        section Pre-Development
+          Quality Management System : Regulatory Compliance : Risk Management
+        section Development
+          Management Responsibility : Planning Activities : Human Resources
+          Resource Management : Management Reviews : Infrastructure
+        section Post-Development
+          Product Realization Activities : Planning Activities : Customer-related Processes
+          Post-Production Activities : Feedback : Complaints : Adverse Events
+                                    : Research and Development : Purchasing Activities
+                                    : Production Activities : Installation Activities
+                                    : Servicing Activities : Post-Market Surveillance
+      `,
+      {}
+    );
+  });
+
+  it('12: should render timeline with proper vertical line lengths for all columns', () => {
+    imgSnapshotTest(
+      `---
+config:
+    theme: base
+    themeVariables:
+        fontFamily: Fira Sans
+        fontSize: 17px
+        cScale0: '#b3cde0'
+        cScale1: '#f49090'
+        cScale2: '#85d5b8'
+---
+
+timeline
+    title Medical Device Lifecycle
+    section Planning
+        Quality Management System (4): Regulatory Compliance (4.1.1)
+            : Risk Management (4.1.2)
+        Management Resposibility (5): Planning Activities (5.4)
+            : Management Reviews (5.6)
+         Resource Management (6): Human Resources (6.2)
+            : Infrastructure (6.3)
+    section Realization
+        Research and Development (7.3): RnD Planning (7.3.2)
+            : Inputs (7.3.3)
+            : Outputs (7.3.4)
+            : Review (7.3.5)
+            : Verification (7.3.6)
+            : Validation (7.3.7)
+        Purchasing (7.4): Purchasing Process (7.4.1)
+            : Purchasing Information (7.4.2)
+        Production (7.5): Production Activities (7.5.1)
+            : Production Feedback (8.2.1)
+        Installation (7.5.3): Installation Activities (7.5.3)
+        Servicing (7.5.4): Servicing Activities (7.5.4)
+    section Post-Production
+        Post-Market Activities (8): Feedback (8.2.1)
+            : Complaints (8.2.2)
+            : Adverse Events (8.2.3)
+      `,
+      {}
+    );
+  });
 });

cypress/integration/rendering/treemap.spec.ts

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

cypress/integration/rendering/xyChart.spec.js

@@ -1,7 +1,7 @@
 import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
 
 describe('XY Chart', () => {
-  it('should render the simplest possible chart', () => {
+  it('should render the simplest possible xy-beta chart', () => {
     imgSnapshotTest(
       `
       xychart-beta
@@ -10,10 +10,19 @@ describe('XY Chart', () => {
       {}
     );
   });
+  it('should render the simplest possible xy chart', () => {
+    imgSnapshotTest(
+      `
+      xychart
+        line [10, 30, 20]
+      `,
+      {}
+    );
+  });
   it('Should render a complete chart', () => {
     imgSnapshotTest(
       `
-      xychart-beta
+      xychart
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -26,7 +35,7 @@ describe('XY Chart', () => {
   it('Should render a chart without title', () => {
     imgSnapshotTest(
       `
-      xychart-beta
+      xychart
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
@@ -38,7 +47,7 @@ describe('XY Chart', () => {
   it('y-axis title not required', () => {
     imgSnapshotTest(
       `
-      xychart-beta
+      xychart
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis 4000 --> 11000
         bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
@@ -50,7 +59,7 @@ describe('XY Chart', () => {
   it('Should render a chart without y-axis with different range', () => {
     imgSnapshotTest(
       `
-      xychart-beta
+      xychart
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
         line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
@@ -61,7 +70,7 @@ describe('XY Chart', () => {
   it('x axis title not required', () => {
     imgSnapshotTest(
       `
-      xychart-beta
+      xychart
         x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
         line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
@@ -72,7 +81,7 @@ describe('XY Chart', () => {
   it('Multiple plots can be rendered', () => {
     imgSnapshotTest(
       `
-      xychart-beta
+      xychart
         line [23, 46, 77, 34]
         line [45, 32, 33, 12]
         bar [87, 54, 99, 85]
@@ -86,7 +95,7 @@ describe('XY Chart', () => {
   it('Decimals and negative numbers are supported', () => {
     imgSnapshotTest(
       `
-      xychart-beta
+      xychart
         y-axis -2.4 --> 3.5
         line [+1.3, .6, 2.4, -.34]
       `,
@@ -104,7 +113,7 @@ describe('XY Chart', () => {
           height: 20
           plotReservedSpacePercent: 100
       ---
-      xychart-beta
+      xychart
         line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
       `,
       {}
@@ -130,7 +139,7 @@ describe('XY Chart', () => {
             showTick: false
             showAxisLine: false
       ---
-      xychart-beta
+      xychart
         bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
       `,
       {}
@@ -140,7 +149,7 @@ describe('XY Chart', () => {
     imgSnapshotTest(
       `
       %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5},  "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60  }}}%%
-      xychart-beta
+      xychart
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -179,8 +188,9 @@ describe('XY Chart', () => {
             axisLineWidth: 5
           chartOrientation: horizontal
           plotReservedSpacePercent: 60
+          showDataLabel: true
       ---
-      xychart-beta
+      xychart
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -201,7 +211,7 @@ describe('XY Chart', () => {
           yAxis:
             showTitle: false
       ---
-      xychart-beta
+      xychart
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -222,7 +232,7 @@ describe('XY Chart', () => {
           yAxis:
             showLabel: false
       ---
-      xychart-beta
+      xychart
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -243,7 +253,7 @@ describe('XY Chart', () => {
           yAxis:
             showTick: false
       ---
-      xychart-beta
+      xychart
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -264,7 +274,7 @@ describe('XY Chart', () => {
           yAxis:
             showAxisLine: false
       ---
-      xychart-beta
+      xychart
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -293,7 +303,7 @@ describe('XY Chart', () => {
             xAxisLineColor: "#87ceeb"
             plotColorPalette: "#008000, #faba63"
       ---
-      xychart-beta
+      xychart
         title "Sales Revenue"
         x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
         y-axis "Revenue (in $)" 4000 --> 11000
@@ -306,7 +316,7 @@ describe('XY Chart', () => {
   it('should use the correct distances between data points', () => {
     imgSnapshotTest(
       `
-      xychart-beta
+      xychart
         x-axis 0 --> 2
         line [0, 1, 0, 1]
         bar [1, 0, 1, 0]
@@ -315,4 +325,516 @@ describe('XY Chart', () => {
     );
     cy.get('svg');
   });
+
+  it('should render vertical bar chart with labels', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+    ---
+    xychart
+      title "Sales Revenue"
+      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+      y-axis "Revenue (in $)" 4000 --> 11000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    `,
+      {}
+    );
+  });
+
+  it('should render horizontal bar chart with labels', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+        chartOrientation: horizontal
+    ---
+    xychart
+      title "Sales Revenue"
+      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+      y-axis "Revenue (in $)" 4000 --> 11000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    `,
+      {}
+    );
+  });
+
+  it('should render vertical bar chart without labels by default', () => {
+    imgSnapshotTest(
+      `
+    xychart
+      title "Sales Revenue"
+      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+      y-axis "Revenue (in $)" 4000 --> 11000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    `,
+      {}
+    );
+  });
+
+  it('should render horizontal bar chart without labels by default', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        chartOrientation: horizontal
+    ---
+    xychart
+      title "Sales Revenue"
+      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+      y-axis "Revenue (in $)" 4000 --> 11000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    `,
+      {}
+    );
+  });
+
+  it('should render multiple bar plots vertically with labels correctly', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+    ---
+      xychart
+        title "Multiple Bar Plots"
+        x-axis Categories [A, B, C]
+        y-axis "Values" 0 --> 100
+        bar [10, 50, 90]
+      `,
+      {}
+    );
+  });
+
+  it('should render multiple bar plots horizontally with labels correctly', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+        chartOrientation: horizontal
+    ---
+      xychart
+        title "Multiple Bar Plots"
+        x-axis Categories [A, B, C]
+        y-axis "Values" 0 --> 100
+        bar [10, 50, 90]
+      `,
+      {}
+    );
+  });
+
+  it('should render a single bar with label for a vertical xy-chart', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+    ---
+      xychart
+        title "Single Bar Chart"
+        x-axis Categories [A]
+        y-axis "Value" 0 --> 100
+        bar [75]
+      `,
+      {}
+    );
+  });
+
+  it('should render a single bar with label for a horizontal xy-chart', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+        chartOrientation: horizontal
+    ---
+      xychart
+        title "Single Bar Chart"
+        x-axis Categories [A]
+        y-axis "Value" 0 --> 100
+        bar [75]
+      `,
+      {}
+    );
+  });
+
+  it('should render negative and decimal values with correct labels for vertical xy-chart', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+    ---
+      xychart
+        title "Decimal and Negative Values"
+        x-axis Categories [A, B, C]
+        y-axis -10 --> 10
+        bar [ -2.5, 0.75, 5.1 ]
+      `,
+      {}
+    );
+  });
+
+  it('should render negative and decimal values with correct labels for horizontal xy-chart', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+        chartOrientation: horizontal
+    ---
+      xychart
+        title "Decimal and Negative Values"
+        x-axis Categories [A, B, C]
+        y-axis -10 --> 10
+        bar [ -2.5, 0.75, 5.1 ]
+      `,
+      {}
+    );
+  });
+
+  it('should render data labels within each bar in the vertical xy-chart', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+    ---
+    xychart
+            title "Sales Revenue"
+            x-axis Months [jan,b,c]
+            y-axis "Revenue (in $)" 4000 --> 12000
+            bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
+    `,
+      {}
+    );
+
+    cy.get('g.bar-plot-0').within(() => {
+      cy.get('rect').each(($rect, index) => {
+        // Extract bar properties
+        const barProps = {
+          x: parseFloat($rect.attr('x')),
+          y: parseFloat($rect.attr('y')),
+          width: parseFloat($rect.attr('width')),
+          height: parseFloat($rect.attr('height')),
+        };
+
+        // Get the text element corresponding to this bar by index.
+        cy.get('text')
+          .eq(index)
+          .then(($text) => {
+            const bbox = $text[0].getBBox();
+            const textProps = {
+              x: bbox.x,
+              y: bbox.y,
+              width: bbox.width,
+              height: bbox.height,
+            };
+
+            // Verify that the text label is positioned within the boundaries of the bar.
+            expect(textProps.x).to.be.greaterThan(barProps.x);
+            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
+
+            // Check horizontal alignment (within tolerance)
+            expect(textProps.x + textProps.width / 2).to.be.closeTo(
+              barProps.x + barProps.width / 2,
+              5
+            );
+
+            expect(textProps.y).to.be.greaterThan(barProps.y);
+            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
+          });
+      });
+    });
+  });
+
+  it('should render data labels within each bar in the horizontal xy-chart', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+        chartOrientation: horizontal
+    ---
+    xychart
+            title "Sales Revenue"
+            x-axis Months [jan,b,c]
+            y-axis "Revenue (in $)" 4000 --> 12000
+            bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
+    `,
+      {}
+    );
+
+    cy.get('g.bar-plot-0').within(() => {
+      cy.get('rect').each(($rect, index) => {
+        // Extract bar properties
+        const barProps = {
+          x: parseFloat($rect.attr('x')),
+          y: parseFloat($rect.attr('y')),
+          width: parseFloat($rect.attr('width')),
+          height: parseFloat($rect.attr('height')),
+        };
+
+        // Get the text element corresponding to this bar by index.
+        cy.get('text')
+          .eq(index)
+          .then(($text) => {
+            const bbox = $text[0].getBBox();
+            const textProps = {
+              x: bbox.x,
+              y: bbox.y,
+              width: bbox.width,
+              height: bbox.height,
+            };
+
+            // Verify that the text label is positioned within the boundaries of the bar.
+            expect(textProps.x).to.be.greaterThan(barProps.x);
+            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
+
+            expect(textProps.y).to.be.greaterThan(barProps.y);
+            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
+            expect(textProps.y + textProps.height / 2).to.be.closeTo(
+              barProps.y + barProps.height / 2,
+              5
+            );
+          });
+      });
+    });
+  });
+
+  it('should render data labels within each bar in the vertical xy-chart with a lot of bars of different sizes', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        xyChart:
+          showDataLabel: true
+      ---
+      xychart
+        title "Sales Revenue"
+        x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
+        y-axis "Revenue (in $)" 4000 --> 12000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
+    `,
+      {}
+    );
+
+    cy.get('g.bar-plot-0').within(() => {
+      cy.get('rect').each(($rect, index) => {
+        // Extract bar properties
+        const barProps = {
+          x: parseFloat($rect.attr('x')),
+          y: parseFloat($rect.attr('y')),
+          width: parseFloat($rect.attr('width')),
+          height: parseFloat($rect.attr('height')),
+        };
+
+        // Get the text element corresponding to this bar by index.
+        cy.get('text')
+          .eq(index)
+          .then(($text) => {
+            const bbox = $text[0].getBBox();
+            const textProps = {
+              x: bbox.x,
+              y: bbox.y,
+              width: bbox.width,
+              height: bbox.height,
+            };
+
+            // Verify that the text label is positioned within the boundaries of the bar.
+            expect(textProps.x).to.be.greaterThan(barProps.x);
+            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
+
+            // Check horizontal alignment (within tolerance)
+            expect(textProps.x + textProps.width / 2).to.be.closeTo(
+              barProps.x + barProps.width / 2,
+              5
+            );
+
+            expect(textProps.y).to.be.greaterThan(barProps.y);
+            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
+          });
+      });
+    });
+  });
+
+  it('should render data labels within each bar in the horizontal xy-chart with a lot of bars of different sizes', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+        chartOrientation: horizontal
+    ---
+    xychart
+      title "Sales Revenue"
+      x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
+      y-axis "Revenue (in $)" 4000 --> 12000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
+    `,
+      {}
+    );
+
+    cy.get('g.bar-plot-0').within(() => {
+      cy.get('rect').each(($rect, index) => {
+        // Extract bar properties
+        const barProps = {
+          x: parseFloat($rect.attr('x')),
+          y: parseFloat($rect.attr('y')),
+          width: parseFloat($rect.attr('width')),
+          height: parseFloat($rect.attr('height')),
+        };
+
+        // Get the text element corresponding to this bar by index.
+        cy.get('text')
+          .eq(index)
+          .then(($text) => {
+            const bbox = $text[0].getBBox();
+            const textProps = {
+              x: bbox.x,
+              y: bbox.y,
+              width: bbox.width,
+              height: bbox.height,
+            };
+
+            // Verify that the text label is positioned within the boundaries of the bar.
+            expect(textProps.x).to.be.greaterThan(barProps.x);
+            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
+
+            expect(textProps.y).to.be.greaterThan(barProps.y);
+            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
+            expect(textProps.y + textProps.height / 2).to.be.closeTo(
+              barProps.y + barProps.height / 2,
+              5
+            );
+          });
+      });
+    });
+  });
+
+  it('should render data labels correctly for a bar in the vertical xy-chart', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+    ---
+    xychart
+            title "Sales Revenue"
+            x-axis Months [jan]
+            y-axis "Revenue (in $)" 3000 --> 12000
+            bar [4000]
+    `,
+      {}
+    );
+
+    cy.get('g.bar-plot-0').within(() => {
+      cy.get('rect').each(($rect, index) => {
+        // Extract bar properties
+        const barProps = {
+          x: parseFloat($rect.attr('x')),
+          y: parseFloat($rect.attr('y')),
+          width: parseFloat($rect.attr('width')),
+          height: parseFloat($rect.attr('height')),
+        };
+
+        // Get the text element corresponding to this bar by index.
+        cy.get('text')
+          .eq(index)
+          .then(($text) => {
+            const bbox = $text[0].getBBox();
+            const textProps = {
+              x: bbox.x,
+              y: bbox.y,
+              width: bbox.width,
+              height: bbox.height,
+            };
+
+            // Verify that the text label is positioned within the boundaries of the bar.
+            expect(textProps.x).to.be.greaterThan(barProps.x);
+            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
+
+            // Check horizontal alignment (within tolerance)
+            expect(textProps.x + textProps.width / 2).to.be.closeTo(
+              barProps.x + barProps.width / 2,
+              5
+            );
+
+            expect(textProps.y).to.be.greaterThan(barProps.y);
+            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
+          });
+      });
+    });
+  });
+
+  it('should render data labels correctly for a bar in the horizontal xy-chart', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+        chartOrientation: horizontal
+    ---
+    xychart
+            title "Sales Revenue"
+            x-axis Months [jan]
+            y-axis "Revenue (in $)" 3000 --> 12000
+            bar [4000]
+    `,
+      {}
+    );
+
+    cy.get('g.bar-plot-0').within(() => {
+      cy.get('rect').each(($rect, index) => {
+        // Extract bar properties
+        const barProps = {
+          x: parseFloat($rect.attr('x')),
+          y: parseFloat($rect.attr('y')),
+          width: parseFloat($rect.attr('width')),
+          height: parseFloat($rect.attr('height')),
+        };
+
+        // Get the text element corresponding to this bar by index.
+        cy.get('text')
+          .eq(index)
+          .then(($text) => {
+            const bbox = $text[0].getBBox();
+            const textProps = {
+              x: bbox.x,
+              y: bbox.y,
+              width: bbox.width,
+              height: bbox.height,
+            };
+
+            // Verify that the text label is positioned within the boundaries of the bar.
+            expect(textProps.x).to.be.greaterThan(barProps.x);
+            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
+
+            expect(textProps.y).to.be.greaterThan(barProps.y);
+            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
+            expect(textProps.y + textProps.height / 2).to.be.closeTo(
+              barProps.y + barProps.height / 2,
+              5
+            );
+          });
+      });
+    });
+  });
 });

cypress/platform/ashish2.html

@@ -60,7 +60,7 @@
     <pre id="diagram" class="mermaid2">
  timeline
         title My day
-        section section with no tasks
+        section Section with no tasks
         section Go to work at the dog office
           1930 : first step : second step is a long step
                : third step
@@ -70,18 +70,18 @@
           1960 : India fights poverty, looses war to China and gets nuclear weapons from USA and USSR
           1970 : Green Revolution comes to india
         section Another section with no tasks
-          I am a big big big tasks
-          I am not so big tasks
+          I am a very, very big task
+          I am not so big task
     </pre>
     <pre id="diagram" class="mermaid">
  timeline
         title MermaidChart 2023 Timeline
         section 2023 Q1 <br> Release Personal Tier
-          Buttet 1 : sub-point 1a : sub-point 1b
+          Bullet 1 : sub-point 1a : sub-point 1b
                : sub-point 1c
           Bullet 2 : sub-point 2a : sub-point 2b
         section 2023 Q2 <br> Release XYZ Tier
-          Buttet 3 : sub-point <br> 3a : sub-point 3b
+          Bullet 3 : sub-point <br> 3a : sub-point 3b
                : sub-point 3c
           Bullet 4 : sub-point 4a : sub-point 4b
 
@@ -93,7 +93,7 @@
         section Stone Age
           7600 BC : Britain's oldest known house was built in Orkney, Scotland
           6000 BC : Sea levels rise and Britain becomes an island. The people who live here are hunter-gatherers.
-        section Broze Age
+        section Bronze Age
           2300 BC : People arrive from Europe and settle in Britain. They bring farming and metalworking.
                : New styles of pottery and ways of burying the dead appear.
           2200 BC : The last major building works are completed at Stonehenge. People now bury their dead in stone circles.
@@ -106,7 +106,7 @@
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google : Pixar
-          2005 : Youtube
+          2005 : YouTube
           2006 : Twitter
           2007 : Tumblr
           2008s : Instagram
@@ -122,7 +122,7 @@
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google : Pixar
-          2005 : Youtube
+          2005 : YouTube
           2006 : Twitter
           2007 : Tumblr
           2008s : Instagram
@@ -139,7 +139,7 @@
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
           2006 : Twitter
           2007 : Tumblr
           2008 : Instagram
@@ -152,7 +152,7 @@
         title History of Social Media Platform
           2002 : LinkedIn
           2004 : Facebook : Google
-          2005 : Youtube
+          2005 : YouTube
           2006 : Twitter
           2007 : Tumblr
           2008s : Instagram

cypress/platform/class.html

@@ -37,7 +37,7 @@
         +String owner
         +BigDecimal balance
         +deposit(amount) bool
-        +withdrawl(amount) int
+        +withdrawal(amount) int
        }
        cssClass "BankAccount" customCss
 
@@ -56,7 +56,7 @@ classE o-- classF : aggregation
           +String owner
           +BigDecimal balance
           +deposit(amount) bool
-          +withdrawl(amount) int
+          +withdrawal(amount) int
         }
           Class01~T~ <|-- AveryLongClass : Cool
           Class03~T~ *-- Class04~T~

cypress/platform/click_security_other.html

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

cypress/platform/current.html

@@ -31,7 +31,7 @@
         flowchart BT subgraph S1 sub1 -->sub2 end subgraph S2 sub4 end S1 --> S2 sub1 --> sub4
       </div>
       <div class="mermaid2" style="width: 50%; height: 200px">
-        sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had preivously
+        sequenceDiagram Alice->>Bob:Extremely utterly long line of longness which had previously
         overflown the actor box as it is much longer than what it should be Bob->>Alice: I'm short
         though
       </div>
@@ -61,9 +61,9 @@
       #quot;elit#quot;."}}
     </div>
     <div class="mermaid2" style="width: 50%; height: 50%">
-      flowchart TB internet nat routeur lb1 lb2 compute1 compute2 subgraph project routeur nat
-      subgraph subnet1 compute1 lb1 end subgraph subnet2 compute2 lb2 end end internet --> routeur
-      routeur --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
+      flowchart TB internet nat router lb1 lb2 compute1 compute2 subgraph project router nat
+      subgraph subnet1 compute1 lb1 end subgraph subnet2 compute2 lb2 end end internet --> router
+      router --> subnet1 & subnet2 subnet1 & subnet2 --> nat --> internet
     </div>
     <div class="mermaid2" style="width: 50%; height: 50%">
       flowchart TD subgraph one[One] subgraph sub_one[Sub One] _sub_one end end subgraph two[Two]

cypress/platform/darshan.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>Pie chart demos</h1>
+    <pre class="mermaid">
+     pie title Default text position: Animal adoption
+        accTitle: simple pie char demo
+        accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
+         "dogs" : -60.67
+        "rats" : 40.12
+    </pre>
+
+    <hr />
+    <script type="module">
+      import mermaid from '/mermaid.esm.mjs';
+      mermaid.initialize({
+        theme: 'forest',
+        logLevel: 3,
+        securityLevel: 'loose',
+      });
+    </script>
+  </body>
+</html>

cypress/platform/e2e.html

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

cypress/platform/git-graph.html

@@ -38,7 +38,7 @@
         +String owner
         +BigDecimal balance
         +deposit(amount) bool
-        +withdrawl(amount) int
+        +withdrawal(amount) int
        }
        cssClass "BankAccount" customCss
     </pre>

cypress/platform/knsv2.html

@@ -32,8 +32,26 @@
       href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
       rel="stylesheet"
     />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
+      rel="stylesheet"
+    />
 
     <style>
+      .recursive-mermaid {
+        font-family: 'Recursive', sans-serif;
+        font-optical-sizing: auto;
+        font-weight: 500;
+        font-style: normal;
+        font-variation-settings:
+          'slnt' 0,
+          'CASL' 0,
+          'CRSV' 0.5,
+          'MONO' 0;
+      }
+
       body {
         /* background: rgb(221, 208, 208); */
         /* background: #333; */
@@ -45,7 +63,9 @@
       h1 {
         color: grey;
       }
-
+      .mermaid {
+        border: 1px solid red;
+      }
       .mermaid2 {
         display: none;
       }
@@ -83,6 +103,11 @@
         width: 100%;
       }
 
+      .class2 {
+        fill: red;
+        fill-opacity: 1;
+      }
+
       /* tspan {
               font-size: 6px !important;
             } */
@@ -106,19 +131,79 @@
 
   <body>
     <pre id="diagram4" class="mermaid">
+---
+config:
+  layout: elk
+  elk:
+    mergeEdges: false
+    forceNodeModelOrder: false
+    considerModelOrder: NONE
+
+---
+            flowchart TB
+              a --> a1 & a2 & a3 & a4
+              b --> b1 & b2
+              b2 --> b3
+              b1 --> b4</pre
+    >
+    <pre id="diagram4" class="mermaid">
+treemap
+"Section 1"
+    "Leaf 1.1": 12
+    "Section 1.2":::class1
+      "Leaf 1.2.1": 12
+"Section 2"
+    "Leaf 2.1": 20:::class1
+    "Leaf 2.2": 25
+    "Leaf 2.3": 12
+
+classDef class1   fill:red,color:blue,stroke:#FFD600;
+
+
+</pre
+    >
+    <pre id="diagram4" class="mermaid2">
+---
+config:
+  treemap:
+    valueFormat: '$0,0'
+---
+treemap
+"Budget"
+    "Operations"
+        "Salaries": 7000
+        "Equipment": 2000
+        "Supplies": 1000
+    "Marketing"
+        "Advertising": 4000
+        "Events": 1000
+
+</pre
+    >
+    <pre id="diagram4" class="mermaid">
+    treemap
+      title Accessible Treemap Title
+      "Category A"
+          "Item A1": 10
+          "Item A2": 20
+      "Category B"
+          "Item B1": 15
+          "Item B2": 25
+    </pre>
+    <pre id="diagram4" class="mermaid2">
       flowchart LR
         AB["apa@apa@"] --> B(("`apa@apa`"))
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
       flowchart
         D(("for D"))
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
       flowchart LR
         A e1@==> B
         e1@{ animate: true}
     </pre>
-    <pre id="diagram4" class="mermaid">
+    <pre id="diagram4" class="mermaid2">
 flowchart LR
   A e1@--> B
   classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
@@ -386,7 +471,7 @@ kanban
     [Create Documentation]
     docs[Create Blog about the new diagram]
   id7[In progress]
-    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
+    id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
   id9[Ready for deploy]
     id8[Design grammar]@{ assigned: 'knsv' }
   id10[Ready for test]
@@ -438,7 +523,7 @@ kanban
         alert('It worked');
       }
       await mermaid.initialize({
-        // theme: 'base',
+        // theme: 'forest',
         // theme: 'default',
         // theme: 'forest',
         // handDrawnSeed: 12,
@@ -449,11 +534,7 @@ kanban
         // layout: 'fixed',
         // htmlLabels: false,
         flowchart: { titleTopMargin: 10 },
-
-        // fontFamily: 'Caveat',
-        // fontFamily: 'Kalam',
-        // fontFamily: 'courier',
-        fontFamily: 'arial',
+        fontFamily: "'Recursive', sans-serif",
         sequence: {
           actorFontFamily: 'courier',
           noteFontFamily: 'courier',

cypress/platform/sidv.html

@@ -41,10 +41,6 @@ graph TB
       const { svg } = await mermaid.render('d22', value);
       console.log(svg);
       el.innerHTML = svg;
-      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
-      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
-      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
     </script>
   </body>
 </html>

cypress/platform/viewer.js

@@ -14,12 +14,28 @@ function markRendered() {
   }
 }
 
+function loadFontAwesomeCSS() {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css';
+
+  document.head.appendChild(link);
+
+  return new Promise((resolve, reject) => {
+    link.onload = resolve;
+    link.onerror = () => reject(new Error('Failed to load FontAwesome'));
+  });
+}
+
 /**
  * ##contentLoaded Callback function that is called when page is loaded. This functions fetches
  * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
  * page.
  */
 const contentLoaded = async function () {
+  await loadFontAwesomeCSS();
+  await Promise.all(Array.from(document.fonts, (font) => font.load()));
+
   let pos = document.location.href.indexOf('?graph=');
   if (pos > 0) {
     pos = pos + 7;
@@ -50,8 +66,13 @@ const contentLoaded = async function () {
 
     mermaid.registerLayoutLoaders(layouts);
     mermaid.initialize(graphObj.mermaid);
+    /**
+     *  CC-BY-4.0
+     *  Copyright (c) Fonticons, Inc. - https://fontawesome.com/license/free
+     *  https://fontawesome.com/icons/bell?f=classic&s=regular
+     */
     const staticBellIconPack = {
-      prefix: 'fa6-regular',
+      prefix: 'fa',
       icons: {
         bell: {
           body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
@@ -161,7 +182,7 @@ const contentLoadedApi = async function () {
       for (let i = 0; i < numCodes; i++) {
         const { svg, bindFunctions } = await mermaid.render('newid' + i, graphObj.code[i], divs[i]);
         div.innerHTML = svg;
-        bindFunctions(div);
+        bindFunctions?.(div);
       }
     } else {
       const div = document.createElement('div');
@@ -173,7 +194,7 @@ const contentLoadedApi = async function () {
       const { svg, bindFunctions } = await mermaid.render('newid', graphObj.code, div);
       div.innerHTML = svg;
       console.log(div.innerHTML);
-      bindFunctions(div);
+      bindFunctions?.(div);
     }
   }
 };

cypress/platform/xss7.html

@@ -105,7 +105,7 @@
       let diagram = 'graph LR\n';
       diagram += " B(<a href='<";
       diagram += 'script></';
-      diagram += "script>Javascript:xssAttack`1`'>Click)";
+      diagram += "script>JavaScript:xssAttack`1`'>Click)";
       // diagram += "script\u003aalert\u0028document.domain\u0029\` src=x>\"\);\n";
       console.log(diagram);
       // document.querySelector('#diagram').innerHTML = diagram;

cypress/platform/yari.html

@@ -50,7 +50,7 @@
                   setPoints(List~int~ points)
                   getPoints() List~int~
                 }
-          
+
           Square : -List~string~ messages
           Square : +setMessages(List~string~ messages)
           Square : +getMessages() List~string~
@@ -88,7 +88,7 @@
           ---
           classDiagram
           class Duck {
-            
+
           }
         </pre>
       </div>
@@ -127,8 +127,8 @@
           -attribute:type
           -            attribute : type
                test
-          
-          + GetAttribute() type                 
+
+          + GetAttribute() type
           +     GetAttribute() type
           }
         </pre>
@@ -449,7 +449,7 @@
           ---
           config:
             theme: forest
-            look: handDrawns
+            look: handDrawn
             layout: elk
           ---
           classDiagram

cypress/platform/yari2.html

@@ -41,7 +41,7 @@
 
             CAR:::someclass
             PERSON:::anotherclass,someclass
-        
+
             classDef someclass fill:#f96
             classDef anotherclass color:blue
         </pre>
@@ -90,7 +90,7 @@
           erDiagram
             CAR ||--o{ NAMED-DRIVER : allows
             CAR {
-                test test PK "comment"
+                text text PK "comment"
                 string make
                 string model
                 string[] parts
@@ -108,7 +108,7 @@
                 string carRegistrationNumber PK, FK
                 string driverLicence PK, FK
             }
-            MANUFACTURER only one to zero or more CAR : makes      
+            MANUFACTURER only one to zero or more CAR : makes
         </pre>
       </div>
       <div class="test">
@@ -129,7 +129,7 @@
               string email
           }
           p ||--o| a : has
-           
+
         </pre>
       </div>
       <div class="test">

cypress/timings.json

@@ -2,151 +2,219 @@
   "durations": [
     {
       "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 4989
+      "duration": 6297
     },
     {
       "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 1382
+      "duration": 2187
     },
     {
       "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3178
+      "duration": 3509
     },
     {
       "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 1372
+      "duration": 2218
     },
     {
       "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 8998
+      "duration": 12104
     },
     {
       "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 1249
+      "duration": 2151
     },
     {
       "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 25664
+      "duration": 33064
     },
     {
       "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 1928
+      "duration": 3488
     },
     {
       "spec": "cypress/integration/rendering/architecture.spec.ts",
-      "duration": 2330
+      "duration": 106
     },
     {
       "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 11156
+      "duration": 18317
     },
     {
       "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 3418
+      "duration": 5592
+    },
+    {
+      "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
+      "duration": 39358
+    },
+    {
+      "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
+      "duration": 37160
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 14866
+      "duration": 23660
+    },
+    {
+      "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
+      "duration": 36866
     },
     {
       "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 9894
+      "duration": 17334
     },
     {
       "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 5778
+      "duration": 9871
     },
     {
       "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 1690
+      "duration": 2833
+    },
+    {
+      "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
+      "duration": 85321
     },
     {
       "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 9144
+      "duration": 15673
     },
     {
       "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 1951
+      "duration": 3724
     },
     {
       "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 2196
+      "duration": 41178
     },
     {
       "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 21029
+      "duration": 29966
+    },
+    {
+      "spec": "cypress/integration/rendering/flowchart-icon.spec.js",
+      "duration": 7689
     },
     {
       "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 16087
+      "duration": 24709
     },
     {
       "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 27465
+      "duration": 45565
     },
     {
       "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 20035
+      "duration": 31144
     },
     {
       "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 11366
+      "duration": 20808
     },
     {
       "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 34025
+      "duration": 49985
     },
     {
       "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 185902
+      "duration": 273272
     },
     {
       "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 41631
+      "duration": 55880
     },
     {
       "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 1736
+      "duration": 3271
     },
     {
       "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 2247
+      "duration": 7293
+    },
+    {
+      "spec": "cypress/integration/rendering/kanban.spec.ts",
+      "duration": 7861
     },
     {
       "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 2144
+      "duration": 3922
     },
     {
       "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 1646
+      "duration": 2726
     },
     {
       "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 6406
+      "duration": 11670
     },
     {
       "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 107219
+      "duration": 146020
+    },
+    {
+      "spec": "cypress/integration/rendering/oldShapes.spec.ts",
+      "duration": 114244
+    },
+    {
+      "spec": "cypress/integration/rendering/packet.spec.ts",
+      "duration": 5036
+    },
+    {
+      "spec": "cypress/integration/rendering/pie.spec.ts",
+      "duration": 6545
+    },
+    {
+      "spec": "cypress/integration/rendering/quadrantChart.spec.js",
+      "duration": 9097
+    },
+    {
+      "spec": "cypress/integration/rendering/radar.spec.js",
+      "duration": 5676
+    },
+    {
+      "spec": "cypress/integration/rendering/requirement.spec.js",
+      "duration": 2795
+    },
+    {
+      "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
+      "duration": 51660
+    },
+    {
+      "spec": "cypress/integration/rendering/sankey.spec.ts",
+      "duration": 6957
+    },
+    {
+      "spec": "cypress/integration/rendering/sequencediagram.spec.js",
+      "duration": 36026
+    },
+    {
+      "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
+      "duration": 29551
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 15834
+      "duration": 17364
     },
     {
       "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 33240
+      "duration": 30209
     },
     {
       "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 7122
+      "duration": 8699
+    },
+    {
+      "spec": "cypress/integration/rendering/treemap.spec.ts",
+      "duration": 12168
     },
     {
       "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 11127
+      "duration": 21453
     },
     {
       "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 2391
+      "duration": 3577
     }
   ]
 }

demos/block.html

@@ -10,7 +10,7 @@
   <body>
     <h1>Block diagram demos</h1>
     <pre id="diagram" class="mermaid">
-block-beta
+block
 columns 1
   db(("DB"))
   blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
@@ -26,7 +26,7 @@ columns 1
   style B fill:#f9F,stroke:#333,stroke-width:4px
     </pre>
     <pre id="diagram" class="mermaid">
-block-beta
+block
     A1["square"]
     B1("rounded")
     C1(("circle"))
@@ -36,7 +36,7 @@ block-beta
     </pre>
 
     <pre id="diagram" class="mermaid">
-block-beta
+block
     A1(["stadium"])
     A2[["subroutine"]]
     B1[("cylinder")]
@@ -48,7 +48,7 @@ block-beta
     </pre>
 
     <pre id="diagram" class="mermaid">
-block-beta
+block
   block:e:4
     columns 2
       f
@@ -57,7 +57,7 @@ block-beta
 
     </pre>
     <pre id="diagram" class="mermaid">
-block-beta
+block
   block:e:4
     columns 2
       f
@@ -67,7 +67,7 @@ block-beta
 
     </pre>
     <pre id="diagram" class="mermaid">
-block-beta
+block
   columns 3
   a:3
   block:e:3
@@ -80,7 +80,7 @@ block-beta
 
     </pre>
     <pre id="diagram" class="mermaid">
-block-beta
+block
   columns 4
   a b c d
   block:e:4
@@ -97,19 +97,19 @@ flowchart LR
   X-- "a label" -->z
     </pre>
     <pre id="diagram" class="mermaid">
-block-beta
+block
 columns 5
    A space B
    A --x B
     </pre>
     <pre id="diagram" class="mermaid">
-block-beta
+block
 columns 3
   a["A wide one"] b:2 c:2 d
     </pre>
 
     <pre id="diagram" class="mermaid">
-block-beta
+block
 columns 3
   a b c
   e:3
@@ -117,7 +117,7 @@ columns 3
     </pre>
 
     <pre id="diagram" class="mermaid">
-block-beta
+block
 
   A1:3
   A2:1

demos/c4context.html

@@ -110,7 +110,7 @@
     title Component diagram for Internet Banking System - API Application
 
     Container(spa, "Single Page Application", "javascript and angular", "Provides all the internet banking functionality to customers via their web browser.")
-    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile mobile device.")
+    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset ot the internet banking functionality to customers via their mobile device.")
     ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
     System_Ext(mbs, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
 

demos/classchart.html

@@ -148,7 +148,7 @@
     <pre class="mermaid">
     classDiagram
       class Person {
-        +Id : Guid
+        +ID : Guid
         +FirstName : string
         +LastName : string
         -privateProperty : string
@@ -218,10 +218,10 @@
           +double side
         }
       }
-      
+
       Shape <|-- Circle
       Shape <|-- Square
-      
+
       namespace Vehicles {
         class Vehicle {
           +String brand
@@ -233,12 +233,12 @@
           +boolean hasGears
         }
       }
-      
+
       Vehicle <|-- Car
       Vehicle <|-- Bike
       Car --> Circle : "Logo Shape"
       Bike --> Square : "Logo Shape"
-                  
+
     </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';

demos/er-multiline.html

@@ -0,0 +1,222 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/font-awesome.min.css"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
+      rel="stylesheet"
+    />
+
+    <style>
+      .recursive-500 {
+        font-family: 'Recursive', serif;
+        font-optical-sizing: auto;
+        font-weight: 500;
+        font-style: normal;
+        font-variation-settings:
+          'slnt' 0,
+          'CASL' 0,
+          'CRSV' 0.5,
+          'MONO' 0;
+      }
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background: #333; */
+        /* font-family: 'Arial'; */
+        font-family: 'Recursive', serif;
+        font-optical-sizing: auto;
+        font-weight: 500;
+        font-style: normal;
+        font-variation-settings:
+          'slnt' 0,
+          'CASL' 0,
+          'CRSV' 0.5,
+          'MONO' 0;
+        /* color: white; */
+        /* font-size: 18px !important; */
+      }
+      .gridify.tiny {
+        background-image:
+          linear-gradient(transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px),
+          linear-gradient(90deg, transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px);
+        background-size:
+          100% 12px,
+          12px 100%;
+      }
+
+      .gridify.dots {
+        background-image: radial-gradient(
+          circle at center,
+          rgba(220, 220, 200, 0.8) 1px,
+          transparent 1px
+        );
+        background-size: 24px 24px;
+      }
+
+      h1 {
+        color: grey;
+      }
+
+      .mermaid2 {
+        display: none;
+      }
+
+      .mermaid svg {
+        font-size: 16px !important;
+        font-family: 'Recursive', serif;
+        font-optical-sizing: auto;
+        font-weight: 500;
+        font-style: normal;
+        font-variation-settings:
+          'slnt' 0,
+          'CASL' 0,
+          'CRSV' 0.5,
+          'MONO' 0;
+      }
+
+      pre {
+        width: 100%;
+        /*box-shadow: 4px 4px 0px 0px #0000000F;*/
+      }
+    </style>
+  </head>
+
+  <body class="gridify dots">
+    <div class="w-full h-64">
+      <pre id="diagram4" class="mermaid" style="background: rgb(255, 255, 255)">
+              erDiagram
+              CAR ||--o{ NAMED-DRIVER : allows
+              CAR ::: Pine {
+                  string registrationNumber PK "Primary Key<br><strong>Unique registration number</strong>"
+                  string make "Car make<br><strong>e.g., Toyota</strong>"
+                  string model "Model of the car<br><strong>e.g., Corolla</strong>"
+                  string[] parts "List of parts<br><strong>Stored as array</strong>"
+              }
+              PERSON ||--o{ NAMED-DRIVER : is
+              PERSON ::: someclass {
+                  string driversLicense PK "The license #<br><strong>Primary Key</strong>"
+                  string(99) firstName "Only 99 characters <br>are allowed <br> <strong>e.g., Smith</strong>"
+                  string lastName "Last name of person<br><strong>e.g., Smith</strong>"
+                  string phone UK "Unique phone number<br><strong>Used for contact</strong>"
+                  int age "Age of the person<br><strong>Must be numeric</strong>"
+              }
+              NAMED-DRIVER {
+                  string carRegistrationNumber PK, FK, UK, PK "Foreign key to CAR<br><strong>Also part of PK</strong>"
+                  string driverLicence PK, FK "Foreign key to PERSON<br><strong>Also part of PK</strong>"
+              }
+              MANUFACTURER only one to zero or more CAR : makesx      
+            </pre>
+      <hr />
+      <pre class="mermaid">
+                  erDiagram
+                  _**testẽζ➕Ø😀㌕ぼ**_ {
+                    *__List~List~int~~sdfds__* **driversLicense** PK "***The l😀icense #***"
+                    string last*Name*
+                    string __phone__ UK
+                    *string(99)~T~~~~~~* firstName "Only __99__ <br>characters are a<br>llowed dsfsdfsdfsdfs"
+                  int _age_
+                  }
+                </pre>
+    </div>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
+
+      const staticBellIconPack = {
+        prefix: 'fa6-regular',
+        icons: {
+          bell: {
+            body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>',
+            width: 448,
+          },
+        },
+        width: 512,
+        height: 512,
+      };
+
+      mermaid.registerIconPacks([
+        {
+          name: 'logos',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
+        },
+        {
+          name: 'fa',
+          loader: () => staticBellIconPack,
+        },
+      ]);
+      mermaid.registerLayoutLoaders(layouts);
+      mermaid.parseError = function (err, hash) {
+        console.error('Mermaid error: ', err);
+      };
+      window.callback = function () {
+        alert('A callback was triggered');
+      };
+      function callback() {
+        alert('It worked');
+      }
+      await mermaid.initialize({
+        startOnLoad: false,
+
+        theme: 'forest',
+        look: 'classic',
+        layout: 'dagre',
+
+        // theme: 'default',
+        // look: 'classic',
+        flowchart: { titleTopMargin: 10 },
+        fontFamily: 'Recursive',
+        sequence: {
+          actorFontFamily: 'courier',
+          noteFontFamily: 'courier',
+          messageFontFamily: 'courier',
+        },
+        kanban: {
+          htmlLabels: false,
+        },
+        fontSize: 16,
+        logLevel: 0,
+        securityLevel: 'loose',
+        callback,
+      });
+      // setTimeout(() => {
+      mermaid.init(undefined, document.querySelectorAll('.mermaid'));
+      // }, 1000);
+      mermaid.parseError = function (err, hash) {
+        console.error('In parse error:');
+        console.error(err);
+      };
+    </script>
+  </body>
+</html>

demos/packet.html

@@ -17,7 +17,7 @@
 
     <div class="diagrams">
       <pre class="mermaid">
-      packet-beta
+      packet
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"
@@ -44,7 +44,7 @@
         packet:
           showBits: false
       ---
-      packet-beta
+      packet
         0-15: "Source Port"
         16-31: "Destination Port"
         32-63: "Sequence Number"
@@ -70,7 +70,7 @@
       config:
         theme: forest
       ---
-      packet-beta
+      packet
         title Forest theme
         0-15: "Source Port"
         16-31: "Destination Port"
@@ -97,7 +97,7 @@
       config:
         theme: dark
       ---
-      packet-beta
+      packet
         title Dark theme
         0-15: "Source Port"
         16-31: "Destination Port"

demos/quadrantchart.html

@@ -22,7 +22,7 @@
       y-axis Not Important --> important
       quadrant-1 Plan
       quadrant-2 Do
-      quadrant-3 Deligate
+      quadrant-3 Delegate
       quadrant-4 Delete
     </pre>
 

demos/sankey.html

@@ -20,12 +20,14 @@
           width: 800
           nodeAlignment: left
       ---
-      sankey-beta
-        Revenue,Expenses,10
-        Revenue,Profit,10
-        Expenses,Manufacturing,5
-        Expenses,Tax,3
-        Expenses,Research,2
+     sankey
+        a,b,8
+        b,c,8
+        c,d,8
+        d,e,8
+
+        x,c,4
+        c,y,4
     </pre>
 
     <h2>Energy flow</h2>
@@ -40,7 +42,7 @@
           linkColor: gradient
           nodeAlignment: justify
       ---
-      sankey-beta
+      sankey
 
       Agricultural 'waste',Bio-conversion,124.729
       Bio-conversion,Liquid,0.597

demos/timeline.html

@@ -23,6 +23,23 @@
           1940 : fourth step : fifth step
 				</pre>
 
+    <h2>Medical Device Lifecycle Timeline</h2>
+    <pre class="mermaid">
+        timeline
+        title Medical Device Lifecycle
+        section Planning
+          Quality Management System (4) : Regulatory Compliance (4.1) : Risk Management (4.1.3) : Management Review (5.6) : Infrastructure (6.3)
+          Management Responsibility (5) : Planning Activities (5.2) : Human Resources (6.2) : RnD Planning (7.3.2) : Purchasing Process (7.4.1) : Production Activities (7.5.1) : Installation Activities (7.5.3) : Servicing Activities (7.5.4)
+        section Realization
+          Research and Development (7.3) : Inputs (7.3.3) : Outputs (7.3.4) : Review (7.3.5) : Verification (7.3.6) : Validation (7.3.7)
+          Purchasing (7.4) : Purchasing Information (7.4.2) : Production Feedback (8.2.1)
+          Production (7.5) : Production Feedback (8.2.1)
+          Installation (7.5.3) : Installation Activities (7.5.3)
+          Servicing (7.5.4) : Servicing Activities (7.5.4)
+        section Post-Production
+          Post-Market Activities (8) : Feedback (8.2.1) : Complaints (8.2.2) : Adverse Events (8.2.3)
+    </pre>
+
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({

demos/treemap.html

@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Mermaid Treemap Diagram Demo</title>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <style>
+      body {
+        font-family: 'Montserrat', sans-serif;
+        margin: 0 auto;
+        max-width: 900px;
+        padding: 20px;
+      }
+      .mermaid {
+        margin: 30px 0;
+      }
+      h1,
+      h2 {
+        color: #333;
+      }
+      pre {
+        background-color: #f5f5f5;
+        padding: 15px;
+        border-radius: 5px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Treemap Diagram Demo</h1>
+    <p>This is a demo of the new treemap diagram type in Mermaid.</p>
+
+    <h2>Basic Treemap Example</h2>
+    <pre class="mermaid">
+treemap
+    "Root"
+        "Branch 1"
+            "Leaf 1.1": 10
+            "Leaf 1.2": 15
+        "Branch 2"
+            "Branch 2.1"
+                "Leaf 2.1.1": 20
+                "Leaf 2.1.2": 25
+            "Leaf 2.2": 25
+            "Leaf 2.3": 30
+    </pre>
+
+    <h2>Technology Stack Treemap Example</h2>
+    <pre class="mermaid">
+treemap
+    "Technology Stack"
+        "Frontend"
+            "React": 35
+            "CSS": 15
+            "HTML": 10
+        "Backend"
+            "Node.js": 25
+            "Express": 10
+            "MongoDB": 15
+        "DevOps"
+            "Docker": 10
+            "Kubernetes": 15
+            "CI/CD": 5
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({
+        theme: 'forest',
+        logLevel: 1,
+        securityLevel: 'loose',
+      });
+    </script>
+  </body>
+</html>

demos/xychart.html

@@ -16,7 +16,7 @@
   <body>
     <h1>XY Charts demos</h1>
     <pre class="mermaid">
-    xychart-beta
+    xychart
     title "Sales Revenue (in $)"
     x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
     y-axis "Revenue (in $)" 4000 --> 11000
@@ -26,7 +26,7 @@
     <hr />
     <h1>XY Charts horizontal</h1>
     <pre class="mermaid">
-    xychart-beta horizontal
+    xychart horizontal
     title "Basic xychart"
     x-axis "this is x axis" [category1, "category 2", category3, category4]
     y-axis yaxisText 10 --> 150
@@ -36,7 +36,7 @@
     <hr />
     <h1>XY Charts only lines and bar</h1>
     <pre class="mermaid">
-    xychart-beta
+    xychart
     line [23, 46, 77, 34]
     line [45, 32, 33, 12]
     line [87, 54, 99, 85]
@@ -48,13 +48,13 @@
     <hr />
     <h1>XY Charts with +ve and -ve numbers</h1>
     <pre class="mermaid">
-    xychart-beta
+    xychart
     line [+1.3, .6, 2.4, -.34]
     </pre>
 
     <h1>XY Charts Bar with multiple category</h1>
     <pre class="mermaid">
-    xychart-beta
+    xychart
     title "Basic xychart with many categories"
     x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
     y-axis yaxisText 10 --> 150
@@ -63,7 +63,7 @@
 
     <h1>XY Charts line with multiple category</h1>
     <pre class="mermaid">
-    xychart-beta
+    xychart
     title "Line chart with many category"
     x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
     y-axis yaxisText 10 --> 150
@@ -72,7 +72,7 @@
 
     <h1>XY Charts category with large text</h1>
     <pre class="mermaid">
-    xychart-beta
+    xychart
     title "Basic xychart with many categories with category overlap"
     x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7]
     y-axis yaxisText 10 --> 150
@@ -89,7 +89,7 @@ config:
     height: 20
     plotReservedSpacePercent: 100
 ---
-    xychart-beta
+    xychart
       line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
     </pre>
 
@@ -103,7 +103,7 @@ config:
     height: 20
     plotReservedSpacePercent: 100
 ---
-    xychart-beta
+    xychart
       bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
     </pre>
 
@@ -136,7 +136,7 @@ config:
     chartOrientation: horizontal
     plotReservedSpacePercent: 60
 ---
-    xychart-beta
+    xychart
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000
@@ -162,7 +162,7 @@ config:
       xAxisLineColor: "#87ceeb"
       plotColorPalette: "#008000, #faba63"
 ---
-    xychart-beta
+    xychart
       title "Sales Revenue"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
       y-axis "Revenue (in $)" 4000 --> 11000

demos/zenuml.html

@@ -10,16 +10,20 @@
     <h1>Zenuml demos</h1>
     <pre class="mermaid">
 		zenuml
-      title Sync Messages (Design Pattern: Adapter)
-			@Starter(Client)
-      Adapter.interfaceMethod() {
-        translateParameter(parameter)
-
-        result = Implementation.implementationMethod()
-
-        translateResult()
-        return translatedResult
-      }
+BookLibService.Borrow(id) {
+  User = Session.GetUser()
+  if(User.isActive) {
+    try {
+      BookRepository.Update(id, onLoan, User)
+      receipt = new Receipt(id, dueDate)
+    } catch (BookNotFoundException) {
+      ErrorService.onException(BookNotFoundException)
+    } finally {
+      Connection.close()
+    }
+  }
+  return receipt
+}
     </pre>
     <pre class="mermaid">
 		zenuml

docs/community/contributing.md

@@ -301,7 +301,7 @@ If you are adding a feature, you will definitely need to add tests. Depending on
 
 Unit tests are tests that test a single function or module. They are the easiest to write and the fastest to run.
 
-Unit tests are mandatory for all code except the renderers. (The renderers are tested with integration tests.)
+Unit tests are mandatory for all code except the layout tests. (The layouts are tested with integration tests.)
 
 We use [Vitest](https://vitest.dev) to run unit tests.
 
@@ -327,6 +327,30 @@ When using Docker prepend your command with `./run`:
 ./run pnpm test
 ```
 
+##### Testing the DOM
+
+One can use `jsdomIt` to test any part of Mermaid that interacts with the DOM, as long as it is not related to the layout.
+
+The function `jsdomIt` ([developed in utils.ts](../../tests/util.ts)) overrides `it` from `vitest`, and creates a pseudo-browser environment that works almost like the real deal for the duration of the test. It uses JSDOM to create a DOM, and adds objects `window` and `document` to `global` to mock the browser environment.
+
+> \[!NOTE]
+> The layout cannot work in `jsdomIt` tests because JSDOM has no rendering engine, hence the pseudo-browser environment.
+
+Example :
+
+```typescript
+import { ensureNodeFromSelector, jsdomIt } from './tests/util.js';
+
+jsdomIt('should add element "thing" in the SVG', ({ svg }) => {
+  // Code in this block runs in a pseudo-browser environment
+  addThing(svg); // The svg item is the D3 selection of the SVG node
+  const svgNode = ensureNodeFromSelector('svg'); // Retrieve the DOM node using the DOM API
+  expect(svgNode.querySelector('thing')).not.toBeNull(); // Test the structure of the SVG
+});
+```
+
+They can be used to test any method that interacts with the DOM, including for testing renderers. For renderers, additional integration testing is necessary to test the layout though.
+
 #### Integration / End-to-End (E2E) Tests
 
 These test the rendering and visual appearance of the diagrams.
@@ -497,14 +521,14 @@ This is a danger alert
 
 ### Navigation
 
-If you want to propose changes to how the documentation is _organized_, such as adding a new section or re-arranging or renaming a section, you must update the **sidebar navigation**, which is defined in [the vitepress config](../.vitepress/config.ts). The same goes to **topbar**.
+If you want to propose changes to how the documentation is _organized_, such as adding a new section or re-arranging or renaming a section, you must update the **sidebar navigation**, which is defined in [the vitepress config](../.vitepress/config.ts). The same goes for **topbar**.
 
 ### Build Docs
 
-The content of `/docs` folder is built with Github Actions.
+The content of `/docs` folder is built with GitHub Actions.
 
 > **Warning**
-> So as to allow automatic compilation of documentation pages you have to enable Github Actions on your fork first
+> So as to allow automatic compilation of documentation pages you have to enable GitHub Actions on your fork first
 
 ## Submit your pull request
 

docs/community/new-diagram.md

@@ -111,3 +111,13 @@ const themes = {
 ```
 
 The actual options and values for the colors are defined in **src/theme/theme-\[xyz].js**. If you provide the options your diagram needs in the existing theme files then the theming will work smoothly without hiccups.
+
+## Examples
+
+The `@mermaid-js/examples` package contains a collection of examples that are used by tools like mermaid.live to help users get started with the new diagram.
+
+You can duplicate an existing diagram example file, eg: `packages/examples/src/examples/flowchart.ts`, and modify it with details specific to your diagram.
+
+Then you can import the example in the `packages/examples/src/index.ts` file and add it to the `examples` array.
+
+Each diagram should have at least one example, and that should be marked as default. It is good to add more examples to showcase different features of the diagram.

docs/community/questions-and-suggestions.md

@@ -22,4 +22,4 @@ This helps the team know the relative interest in something and helps them set p
 
 You have not found anything that already addresses your request, or maybe you have come up with the new idea? Feel free to open a new issue or discussion.
 
-Log in to [GitHub.com](https://www.github.com), and use [GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues). Press \[<https://github.com/mermaid-js/mermaid/issues/new/choose>] issue, select the appropriate template and describe your problem.
+Log in to [GitHub.com](https://www.github.com), and use [GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues). Press [issue, select the appropriate template](https://github.com/mermaid-js/mermaid/issues/new/choose) and describe your problem.

docs/config/accessibility.md

@@ -251,12 +251,12 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
 
 ```
 
-##### Gitgraph
+##### GitGraph
 
 ```mermaid-example
   gitGraph
-      accTitle: My Gitgraph Accessibility Title
-      accDescr: My Gitgraph Accessibility Description
+      accTitle: My GitGraph Accessibility Title
+      accDescr: My GitGraph Accessibility Description
 
      commit
      commit
@@ -273,8 +273,8 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
 
 ```mermaid
   gitGraph
-      accTitle: My Gitgraph Accessibility Title
-      accDescr: My Gitgraph Accessibility Description
+      accTitle: My GitGraph Accessibility Title
+      accDescr: My GitGraph Accessibility Description
 
      commit
      commit

docs/config/setup/defaultConfig/variables/configKeys.md

@@ -12,4 +12,4 @@
 
 > `const` **configKeys**: `Set`<`string`>
 
-Defined in: [packages/mermaid/src/defaultConfig.ts:274](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L274)
+Defined in: [packages/mermaid/src/defaultConfig.ts:292](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L292)

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

@@ -10,7 +10,7 @@
 
 # Interface: ExternalDiagramDefinition
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L99)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L94)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/me
 
 > **detector**: `DiagramDetector`
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L101)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L96)
 
 ---
 
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:101](https://github.com/m
 
 > **id**: `string`
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L100)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L95)
 
 ---
 
@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:100](https://github.com/m
 
 > **loader**: `DiagramLoader`
 
-Defined in: [packages/mermaid/src/diagram-api/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L102)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97)

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

@@ -10,7 +10,7 @@
 
 # Interface: Mermaid
 
-Defined in: [packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418)
+Defined in: [packages/mermaid/src/mermaid.ts:429](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L429)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/
 
 > **contentLoaded**: () => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
+Defined in: [packages/mermaid/src/mermaid.ts:447](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L447)
 
 \##contentLoaded Callback function that is called when page is loaded. This functions fetches
 configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the
@@ -34,7 +34,7 @@ page.
 
 > **detectType**: (`text`, `config`?) => `string`
 
-Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
+Defined in: [packages/mermaid/src/mermaid.ts:449](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L449)
 
 Detects the type of the graph text.
 
@@ -86,11 +86,28 @@ A graph definition key
 
 ---
 
+### getRegisteredDiagramsMetadata()
+
+> **getRegisteredDiagramsMetadata**: () => `Pick`<[`ExternalDiagramDefinition`](ExternalDiagramDefinition.md), `"id"`>\[]
+
+Defined in: [packages/mermaid/src/mermaid.ts:451](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L451)
+
+Gets the metadata for all registered diagrams.
+Currently only the id is returned.
+
+#### Returns
+
+`Pick`<[`ExternalDiagramDefinition`](ExternalDiagramDefinition.md), `"id"`>\[]
+
+An array of objects with the id of the diagram.
+
+---
+
 ### ~~init()~~
 
 > **init**: (`config`?, `nodes`?, `callback`?) => `Promise`<`void`>
 
-Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
+Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
 
 ## init
 
@@ -138,7 +155,7 @@ Use [initialize](Mermaid.md#initialize) and [run](Mermaid.md#run) instead.
 
 > **initialize**: (`config`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
+Defined in: [packages/mermaid/src/mermaid.ts:446](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L446)
 
 Used to set configurations for mermaid.
 This function should be called before the run function.
@@ -161,7 +178,7 @@ Configuration object for mermaid.
 
 > **mermaidAPI**: `Readonly`<{ `defaultConfig`: [`MermaidConfig`](MermaidConfig.md); `getConfig`: () => [`MermaidConfig`](MermaidConfig.md); `getDiagramFromText`: (`text`, `metadata`) => `Promise`<`Diagram`>; `getSiteConfig`: () => [`MermaidConfig`](MermaidConfig.md); `globalReset`: () => `void`; `initialize`: (`userOptions`) => `void`; `parse`: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>; `render`: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>; `reset`: () => `void`; `setConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); `updateSiteConfig`: (`conf`) => [`MermaidConfig`](MermaidConfig.md); }>
 
-Defined in: [packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
+Defined in: [packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
 
 **`Internal`**
 
@@ -175,7 +192,7 @@ Use [parse](Mermaid.md#parse) and [render](Mermaid.md#render) instead. Please [o
 
 > **parse**: (`text`, `parseOptions`) => `Promise`<`false` | [`ParseResult`](ParseResult.md)>(`text`, `parseOptions`?) => `Promise`<[`ParseResult`](ParseResult.md)>
 
-Defined in: [packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
+Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
 
 Parse the text and validate the syntax.
 
@@ -243,7 +260,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not
 
 > `optional` **parseError**: [`ParseErrorFunction`](../type-aliases/ParseErrorFunction.md)
 
-Defined in: [packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420)
+Defined in: [packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
 
 ---
 
@@ -251,7 +268,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/
 
 > **registerExternalDiagrams**: (`diagrams`, `opts`) => `Promise`<`void`>
 
-Defined in: [packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
+Defined in: [packages/mermaid/src/mermaid.ts:445](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L445)
 
 Used to register external diagram types.
 
@@ -281,7 +298,7 @@ If opts.lazyLoad is false, the diagrams will be loaded immediately.
 
 > **registerIconPacks**: (`iconLoaders`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439)
+Defined in: [packages/mermaid/src/mermaid.ts:450](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L450)
 
 #### Parameters
 
@@ -299,7 +316,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/
 
 > **registerLayoutLoaders**: (`loaders`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
+Defined in: [packages/mermaid/src/mermaid.ts:444](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L444)
 
 #### Parameters
 
@@ -317,7 +334,7 @@ Defined in: [packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/
 
 > **render**: (`id`, `text`, `svgContainingElement`?) => `Promise`<[`RenderResult`](RenderResult.md)>
 
-Defined in: [packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
+Defined in: [packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438)
 
 #### Parameters
 
@@ -349,7 +366,7 @@ Deprecated for external use.
 
 > **run**: (`options`) => `Promise`<`void`>
 
-Defined in: [packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
+Defined in: [packages/mermaid/src/mermaid.ts:443](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L443)
 
 ## run
 
@@ -393,7 +410,7 @@ Optional runtime configs
 
 > **setParseErrorHandler**: (`parseErrorHandler`) => `void`
 
-Defined in: [packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
+Defined in: [packages/mermaid/src/mermaid.ts:448](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L448)
 
 ## setParseErrorHandler Alternative to directly setting parseError using:
 
@@ -424,4 +441,4 @@ New parseError() callback.
 
 > **startOnLoad**: `boolean`
 
-Defined in: [packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)
+Defined in: [packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)

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

@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/config.type.ts:58](https://github.com/mermaid-
 
 > `optional` **altFontFamily**: `string`
 
-Defined in: [packages/mermaid/src/config.type.ts:122](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L122)
+Defined in: [packages/mermaid/src/config.type.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L132)
 
 ---
 
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/config.type.ts:122](https://github.com/mermaid
 
 > `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)
+Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
 
 ---
 
@@ -34,7 +34,7 @@ Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid
 
 > `optional` **arrowMarkerAbsolute**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)
+Defined in: [packages/mermaid/src/config.type.ts:151](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L151)
 
 Controls whether or arrow markers in html code are absolute paths or anchors.
 This matters if you are using base tag settings.
@@ -45,7 +45,7 @@ This matters if you are using base tag settings.
 
 > `optional` **block**: `BlockDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
+Defined in: [packages/mermaid/src/config.type.ts:211](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L211)
 
 ---
 
@@ -53,7 +53,7 @@ Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid
 
 > `optional` **c4**: `C4DiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
+Defined in: [packages/mermaid/src/config.type.ts:208](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L208)
 
 ---
 
@@ -61,7 +61,7 @@ Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid
 
 > `optional` **class**: `ClassDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:187](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L187)
+Defined in: [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
 
 ---
 
@@ -69,7 +69,7 @@ Defined in: [packages/mermaid/src/config.type.ts:187](https://github.com/mermaid
 
 > `optional` **darkMode**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L113)
+Defined in: [packages/mermaid/src/config.type.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L123)
 
 ---
 
@@ -77,7 +77,7 @@ Defined in: [packages/mermaid/src/config.type.ts:113](https://github.com/mermaid
 
 > `optional` **deterministicIds**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:174](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L174)
+Defined in: [packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
 
 This option controls if the generated ids of nodes in the SVG are
 generated randomly or based on a seed.
@@ -93,7 +93,7 @@ should not change unless content is changed.
 
 > `optional` **deterministicIDSeed**: `string`
 
-Defined in: [packages/mermaid/src/config.type.ts:181](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L181)
+Defined in: [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
 
 This option is the optional seed for deterministic ids.
 If set to `undefined` but deterministicIds is `true`, a simple number iterator is used.
@@ -105,7 +105,7 @@ You can set this attribute to base the seed on a static string.
 
 > `optional` **dompurifyConfig**: `Config`
 
-Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
+Defined in: [packages/mermaid/src/config.type.ts:213](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L213)
 
 ---
 
@@ -115,12 +115,24 @@ Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid
 
 Defined in: [packages/mermaid/src/config.type.ts:91](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L91)
 
+#### considerModelOrder?
+
+> `optional` **considerModelOrder**: `"NONE"` | `"NODES_AND_EDGES"` | `"PREFER_EDGES"` | `"PREFER_NODES"`
+
+Preserves the order of nodes and edges in the model file if this does not lead to additional edge crossings. Depending on the strategy this is not always possible since the node and edge order might be conflicting.
+
 #### cycleBreakingStrategy?
 
 > `optional` **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.
 
+#### forceNodeModelOrder?
+
+> `optional` **forceNodeModelOrder**: `boolean`
+
+The node order given by the model does not change to produce a better layout. E.g. if node A is before node B in the model this is not changed during crossing minimization. This assumes that the node model order is already respected before crossing minimization. This can be achieved by setting considerModelOrder.strategy to NODES_AND_EDGES.
+
 #### mergeEdges?
 
 > `optional` **mergeEdges**: `boolean`
@@ -139,7 +151,7 @@ Elk specific option affecting how nodes are placed.
 
 > `optional` **er**: `ErDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:189](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L189)
+Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
 
 ---
 
@@ -147,7 +159,7 @@ Defined in: [packages/mermaid/src/config.type.ts:189](https://github.com/mermaid
 
 > `optional` **flowchart**: `FlowchartDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:182](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L182)
+Defined in: [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)
 
 ---
 
@@ -155,7 +167,7 @@ Defined in: [packages/mermaid/src/config.type.ts:182](https://github.com/mermaid
 
 > `optional` **fontFamily**: `string`
 
-Defined in: [packages/mermaid/src/config.type.ts:121](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L121)
+Defined in: [packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
 
 Specifies the font to be used in the rendered diagrams.
 Can be any possible CSS `font-family`.
@@ -167,7 +179,7 @@ See <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>
 
 > `optional` **fontSize**: `number`
 
-Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)
+Defined in: [packages/mermaid/src/config.type.ts:215](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L215)
 
 ---
 
@@ -175,7 +187,7 @@ Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid
 
 > `optional` **forceLegacyMathML**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:163](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L163)
+Defined in: [packages/mermaid/src/config.type.ts:173](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L173)
 
 This option forces Mermaid to rely on KaTeX's own stylesheet for rendering MathML. Due to differences between OS
 fonts and browser's MathML implementation, this option is recommended if consistent rendering is important.
@@ -187,7 +199,7 @@ If set to true, ignores legacyMathML.
 
 > `optional` **gantt**: `GanttDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L184)
+Defined in: [packages/mermaid/src/config.type.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L194)
 
 ---
 
@@ -195,7 +207,7 @@ Defined in: [packages/mermaid/src/config.type.ts:184](https://github.com/mermaid
 
 > `optional` **gitGraph**: `GitGraphDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:197](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L197)
+Defined in: [packages/mermaid/src/config.type.ts:207](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L207)
 
 ---
 
@@ -213,7 +225,7 @@ Defines the seed to be used when using handDrawn look. This is important for the
 
 > `optional` **htmlLabels**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L114)
+Defined in: [packages/mermaid/src/config.type.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L124)
 
 ---
 
@@ -221,7 +233,7 @@ Defined in: [packages/mermaid/src/config.type.ts:114](https://github.com/mermaid
 
 > `optional` **journey**: `JourneyDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L185)
+Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)
 
 ---
 
@@ -229,7 +241,7 @@ Defined in: [packages/mermaid/src/config.type.ts:185](https://github.com/mermaid
 
 > `optional` **kanban**: `KanbanDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
+Defined in: [packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206)
 
 ---
 
@@ -247,7 +259,7 @@ Defines which layout algorithm to use for rendering the diagram.
 
 > `optional` **legacyMathML**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L156)
+Defined in: [packages/mermaid/src/config.type.ts:166](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L166)
 
 This option specifies if Mermaid can expect the dependent to include KaTeX stylesheets for browsers
 without their own MathML implementation. If this option is disabled and MathML is not supported, the math
@@ -260,7 +272,7 @@ fall back to legacy rendering for KaTeX.
 
 > `optional` **logLevel**: `0` | `2` | `1` | `"trace"` | `"debug"` | `"info"` | `"warn"` | `"error"` | `"fatal"` | `3` | `4` | `5`
 
-Defined in: [packages/mermaid/src/config.type.ts:127](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L127)
+Defined in: [packages/mermaid/src/config.type.ts:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L137)
 
 This option decides the amount of logging to be used by mermaid.
 
@@ -280,7 +292,7 @@ Defines which main look to use for the diagram.
 
 > `optional` **markdownAutoWrap**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:206](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L206)
+Defined in: [packages/mermaid/src/config.type.ts:216](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L216)
 
 ---
 
@@ -308,7 +320,7 @@ The maximum allowed size of the users text diagram
 
 > `optional` **mindmap**: `MindmapDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L195)
+Defined in: [packages/mermaid/src/config.type.ts:205](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L205)
 
 ---
 
@@ -316,7 +328,7 @@ Defined in: [packages/mermaid/src/config.type.ts:195](https://github.com/mermaid
 
 > `optional` **packet**: `PacketDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
+Defined in: [packages/mermaid/src/config.type.ts:210](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L210)
 
 ---
 
@@ -324,7 +336,7 @@ Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid
 
 > `optional` **pie**: `PieDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:190](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L190)
+Defined in: [packages/mermaid/src/config.type.ts:200](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L200)
 
 ---
 
@@ -332,7 +344,7 @@ Defined in: [packages/mermaid/src/config.type.ts:190](https://github.com/mermaid
 
 > `optional` **quadrantChart**: `QuadrantChartConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L191)
+Defined in: [packages/mermaid/src/config.type.ts:201](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L201)
 
 ---
 
@@ -340,7 +352,7 @@ Defined in: [packages/mermaid/src/config.type.ts:191](https://github.com/mermaid
 
 > `optional` **radar**: `RadarDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)
+Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212)
 
 ---
 
@@ -348,7 +360,7 @@ Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid
 
 > `optional` **requirement**: `RequirementDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
+Defined in: [packages/mermaid/src/config.type.ts:203](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L203)
 
 ---
 
@@ -356,7 +368,7 @@ Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid
 
 > `optional` **sankey**: `SankeyDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L199)
+Defined in: [packages/mermaid/src/config.type.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L209)
 
 ---
 
@@ -364,7 +376,7 @@ Defined in: [packages/mermaid/src/config.type.ts:199](https://github.com/mermaid
 
 > `optional` **secure**: `string`\[]
 
-Defined in: [packages/mermaid/src/config.type.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L148)
+Defined in: [packages/mermaid/src/config.type.ts:158](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L158)
 
 This option controls which `currentConfig` keys are considered secure and
 can only be changed via call to `mermaid.initialize`.
@@ -376,7 +388,7 @@ This prevents malicious graph directives from overriding a site's default securi
 
 > `optional` **securityLevel**: `"strict"` | `"loose"` | `"antiscript"` | `"sandbox"`
 
-Defined in: [packages/mermaid/src/config.type.ts:131](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L131)
+Defined in: [packages/mermaid/src/config.type.ts:141](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L141)
 
 Level of trust for parsed diagram
 
@@ -386,7 +398,7 @@ Level of trust for parsed diagram
 
 > `optional` **sequence**: `SequenceDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:183](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L183)
+Defined in: [packages/mermaid/src/config.type.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L193)
 
 ---
 
@@ -394,7 +406,7 @@ Defined in: [packages/mermaid/src/config.type.ts:183](https://github.com/mermaid
 
 > `optional` **startOnLoad**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L135)
+Defined in: [packages/mermaid/src/config.type.ts:145](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L145)
 
 Dictates whether mermaid starts on Page load
 
@@ -404,7 +416,7 @@ Dictates whether mermaid starts on Page load
 
 > `optional` **state**: `StateDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:188](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L188)
+Defined in: [packages/mermaid/src/config.type.ts:198](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L198)
 
 ---
 
@@ -412,7 +424,7 @@ Defined in: [packages/mermaid/src/config.type.ts:188](https://github.com/mermaid
 
 > `optional` **suppressErrorRendering**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L212)
+Defined in: [packages/mermaid/src/config.type.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L222)
 
 Suppresses inserting 'Syntax error' diagram in the DOM.
 This is useful when you want to control how to handle syntax errors in your application.
@@ -450,7 +462,7 @@ Defined in: [packages/mermaid/src/config.type.ts:65](https://github.com/mermaid-
 
 > `optional` **timeline**: `TimelineDiagramConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L186)
+Defined in: [packages/mermaid/src/config.type.ts:196](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L196)
 
 ---
 
@@ -458,7 +470,7 @@ Defined in: [packages/mermaid/src/config.type.ts:186](https://github.com/mermaid
 
 > `optional` **wrap**: `boolean`
 
-Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L204)
+Defined in: [packages/mermaid/src/config.type.ts:214](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L214)
 
 ---
 
@@ -466,4 +478,4 @@ Defined in: [packages/mermaid/src/config.type.ts:204](https://github.com/mermaid
 
 > `optional` **xyChart**: `XYChartConfig`
 
-Defined in: [packages/mermaid/src/config.type.ts:192](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L192)
+Defined in: [packages/mermaid/src/config.type.ts:202](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts#L202)

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

@@ -10,7 +10,7 @@
 
 # Interface: ParseOptions
 
-Defined in: [packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L59)
+Defined in: [packages/mermaid/src/types.ts:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L72)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:59](https://github.com/mermaid-js/mer
 
 > `optional` **suppressErrors**: `boolean`
 
-Defined in: [packages/mermaid/src/types.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L64)
+Defined in: [packages/mermaid/src/types.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L77)
 
 If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
 The `parseError` function will not be called.

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

@@ -10,7 +10,7 @@
 
 # Interface: ParseResult
 
-Defined in: [packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L67)
+Defined in: [packages/mermaid/src/types.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L80)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:67](https://github.com/mermaid-js/mer
 
 > **config**: [`MermaidConfig`](MermaidConfig.md)
 
-Defined in: [packages/mermaid/src/types.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L75)
+Defined in: [packages/mermaid/src/types.ts:88](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L88)
 
 The config passed as YAML frontmatter or directives
 
@@ -28,6 +28,6 @@ The config passed as YAML frontmatter or directives
 
 > **diagramType**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:71](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L71)
+Defined in: [packages/mermaid/src/types.ts:84](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L84)
 
 The diagram type, e.g. 'flowchart', 'sequence', etc.

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

@@ -10,7 +10,7 @@
 
 # Interface: RenderResult
 
-Defined in: [packages/mermaid/src/types.ts:85](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L85)
+Defined in: [packages/mermaid/src/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L98)
 
 ## Properties
 
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:85](https://github.com/mermaid-js/mer
 
 > `optional` **bindFunctions**: (`element`) => `void`
 
-Defined in: [packages/mermaid/src/types.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L103)
+Defined in: [packages/mermaid/src/types.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L116)
 
 Bind function to be called after the svg has been inserted into the DOM.
 This is necessary for adding event listeners to the elements in the svg.
@@ -45,7 +45,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 > **diagramType**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:93](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L93)
+Defined in: [packages/mermaid/src/types.ts:106](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L106)
 
 The diagram type, e.g. 'flowchart', 'sequence', etc.
 
@@ -55,6 +55,6 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
 
 > **svg**: `string`
 
-Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)
+Defined in: [packages/mermaid/src/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L102)
 
 The svg code for the rendered graph.

docs/config/setup/mermaid/type-aliases/SVG.md

@@ -12,4 +12,4 @@
 
 > **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)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L126)

docs/config/setup/mermaid/type-aliases/SVGGroup.md

@@ -12,4 +12,4 @@
 
 > **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)
+Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128)

docs/config/setup/mermaid/variables/default.md

@@ -12,4 +12,4 @@
 
 > `const` **default**: [`Mermaid`](../interfaces/Mermaid.md)
 
-Defined in: [packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
+Defined in: [packages/mermaid/src/mermaid.ts:454](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L454)

docs/config/theming.md

@@ -8,7 +8,7 @@
 
 Dynamic and integrated theme configuration was introduced in Mermaid version 8.7.0.
 
-Themes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the `initialize` call is used. For diagram specific customization, the `init` directive is used.
+Themes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the `initialize` call is used. For diagram specific customization, frontmatter config is used.
 
 ## Available Themes
 
@@ -37,30 +37,24 @@ mermaid.initialize({
 
 ## Diagram-specific Themes
 
-To customize the theme of an individual diagram, use the `init` directive.
+To customize the theme of an individual diagram, use frontmatter config.
 
-Example of `init` directive setting the `theme` to `forest`:
+Example of frontmatter config setting the `theme` to `forest`:
 
 ```mermaid-example
-%%{init: {'theme':'forest'}}%%
+---
+config:
+  theme: 'forest'
+---
   graph TD
     a --> b
 ```
 
 ```mermaid
-%%{init: {'theme':'forest'}}%%
-  graph TD
-    a --> b
-```
-
-```mermaid-example
-%%{init: {'theme':'forest'}}%%
-  graph TD
-    a --> b
-```
-
-```mermaid
-%%{init: {'theme':'forest'}}%%
+---
+config:
+  theme: 'forest'
+---
   graph TD
     a --> b
 ```
@@ -69,30 +63,28 @@ Example of `init` directive setting the `theme` to `forest`:
 
 ## Customizing Themes with `themeVariables`
 
-To make a custom theme, modify `themeVariables` via `init`.
+To make a custom theme, modify `themeVariables` via frontmatter config.
 
 You will need to use the [base](#available-themes) theme as it is the only modifiable theme.
 
-| Parameter      | Description                          | Type   | Properties                                                                          |
-| -------------- | ------------------------------------ | ------ | ----------------------------------------------------------------------------------- |
-| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |
+| Parameter      | Description                        | Type   | Properties                                                                          |
+| -------------- | ---------------------------------- | ------ | ----------------------------------------------------------------------------------- |
+| themeVariables | Modifiable with frontmatter config | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables)) |
 
-Example of modifying `themeVariables` using the `init` directive:
+Example of modifying `themeVariables` using frontmatter config:
 
 ```mermaid-example
-%%{
-  init: {
-    'theme': 'base',
-    'themeVariables': {
-      'primaryColor': '#BB2528',
-      'primaryTextColor': '#fff',
-      'primaryBorderColor': '#7C0000',
-      'lineColor': '#F8B229',
-      'secondaryColor': '#006100',
-      'tertiaryColor': '#fff'
-    }
-  }
-}%%
+---
+config:
+  theme: 'base'
+  themeVariables:
+    primaryColor: '#BB2528'
+    primaryTextColor: '#fff'
+    primaryBorderColor: '#7C0000'
+    lineColor: '#F8B229'
+    secondaryColor: '#006100'
+    tertiaryColor: '#fff'
+---
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
           B --> C{Let me think}
@@ -110,79 +102,17 @@ Example of modifying `themeVariables` using the `init` directive:
 ```
 
 ```mermaid
-%%{
-  init: {
-    'theme': 'base',
-    'themeVariables': {
-      'primaryColor': '#BB2528',
-      'primaryTextColor': '#fff',
-      'primaryBorderColor': '#7C0000',
-      'lineColor': '#F8B229',
-      'secondaryColor': '#006100',
-      'tertiaryColor': '#fff'
-    }
-  }
-}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-```mermaid-example
-%%{
-  init: {
-    'theme': 'base',
-    'themeVariables': {
-      'primaryColor': '#BB2528',
-      'primaryTextColor': '#fff',
-      'primaryBorderColor': '#7C0000',
-      'lineColor': '#F8B229',
-      'secondaryColor': '#006100',
-      'tertiaryColor': '#fff'
-    }
-  }
-}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-```mermaid
-%%{
-  init: {
-    'theme': 'base',
-    'themeVariables': {
-      'primaryColor': '#BB2528',
-      'primaryTextColor': '#fff',
-      'primaryBorderColor': '#7C0000',
-      'lineColor': '#F8B229',
-      'secondaryColor': '#006100',
-      'tertiaryColor': '#fff'
-    }
-  }
-}%%
+---
+config:
+  theme: 'base'
+  themeVariables:
+    primaryColor: '#BB2528'
+    primaryTextColor: '#fff'
+    primaryBorderColor: '#7C0000'
+    lineColor: '#F8B229'
+    secondaryColor: '#006100'
+    tertiaryColor: '#fff'
+---
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
           B --> C{Let me think}
@@ -211,7 +141,7 @@ The theming engine will only recognize hex colors and not color names. So, the v
 | -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
 | darkMode             | false                              | Affects how derived colors are calculated. Set value to `true` for dark mode.                                                    |
 | background           | #f4f4f4                            | Used to calculate color for items that should either be background colored or contrasting to the background                      |
-| fontFamily           | trebuchet ms, verdana, arial       |                                                                                                                                  |
+| fontFamily           | trebuchet ms, verdana, arial       | Font family for diagram text                                                                                                     |
 | fontSize             | 16px                               | Font size in pixels                                                                                                              |
 | primaryColor         | #fff4dd                            | Color to be used as background in nodes, other colors will be derived from this                                                  |
 | primaryTextColor     | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor`                                                                     |

docs/config/usage.md

@@ -98,6 +98,12 @@ Mermaid can load multiple diagrams, in the same page.
 > Try it out, save this code as HTML and load it using any browser.
 > (Except Internet Explorer, please don't use Internet Explorer.)
 
+## Tiny Mermaid
+
+We offer a smaller version of Mermaid that's approximately half the size of the full library. This tiny version doesn't support Mindmap Diagrams, Architecture Diagrams, KaTeX rendering, or lazy loading.
+
+If you need a more lightweight version without these features, you can use [Mermaid Tiny](https://github.com/mermaid-js/mermaid/tree/develop/packages/tiny).
+
 ## Enabling Click Event and Tags in Nodes
 
 A `securityLevel` configuration has to first be cleared. `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduced in version 8.2 as a security improvement, aimed at preventing malicious use.

docs/diagrams/flowchart-code-flow.mmd

@@ -0,0 +1,189 @@
+---
+references:
+  - "File: /packages/mermaid/src/diagrams/flowchart/flowDiagram.ts"
+  - "File: /packages/mermaid/src/diagrams/flowchart/flowDb.ts"
+  - "File: /packages/mermaid/src/diagrams/flowchart/flowDetector.ts"
+  - "File: /packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts"
+  - "File: /packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts"
+  - "File: /packages/mermaid/src/diagrams/flowchart/styles.ts"
+  - "File: /packages/mermaid/src/diagrams/flowchart/types.ts"
+  - "File: /packages/mermaid/src/diagrams/flowchart/flowChartShapes.js"
+  - "File: /packages/mermaid/src/diagrams/flowchart/parser/flowParser.ts"
+  - "File: /packages/mermaid/src/diagrams/flowchart/elk/detector.ts"
+generationTime: 2025-07-23T10:31:53.266Z
+---
+flowchart TD
+    %% Entry Points and Detection
+    Input["User Input Text"] --> Detection{Detection Phase}
+    
+    Detection --> flowDetector["flowDetector.ts<br/>detector(txt, config)"]
+    Detection --> flowDetectorV2["flowDetector-v2.ts<br/>detector(txt, config)"]
+    Detection --> elkDetector["elk/detector.ts<br/>detector(txt, config)"]
+    
+    flowDetector --> |"Checks /^\s*graph/"| DetectLegacy{Legacy Flowchart?}
+    flowDetectorV2 --> |"Checks /^\s*flowchart/"| DetectNew{New Flowchart?}
+    elkDetector --> |"Checks /^\s*flowchart-elk/"| DetectElk{ELK Layout?}
+    
+    DetectLegacy --> |Yes| LoadDiagram
+    DetectNew --> |Yes| LoadDiagram
+    DetectElk --> |Yes| LoadDiagram
+    
+    %% Loading Phase
+    LoadDiagram["loader() function"] --> flowDiagram["flowDiagram.ts<br/>diagram object"]
+    
+    flowDiagram --> DiagramStructure{Diagram Components}
+    DiagramStructure --> Parser["parser: flowParser"]
+    DiagramStructure --> Database["db: new FlowDB()"]
+    DiagramStructure --> Renderer["renderer: flowRenderer-v3-unified"]
+    DiagramStructure --> Styles["styles: flowStyles"]
+    DiagramStructure --> Init["init: (cnf: MermaidConfig)"]
+    
+    %% Parser Phase
+    Parser --> flowParser["parser/flowParser.ts<br/>newParser.parse(src)"]
+    flowParser --> |"Preprocesses src"| RemoveWhitespace["Remove trailing whitespace<br/>src.replace(/}\s*\n/g, '}\n')"]
+    RemoveWhitespace --> flowJison["parser/flow.jison<br/>flowJisonParser.parse(newSrc)"]
+    
+    flowJison --> ParseGraph["Parse Graph Structure"]
+    ParseGraph --> ParseVertices["Parse Vertices"]
+    ParseGraph --> ParseEdges["Parse Edges"]
+    ParseGraph --> ParseSubgraphs["Parse Subgraphs"]
+    ParseGraph --> ParseClasses["Parse Classes"]
+    ParseGraph --> ParseStyles["Parse Styles"]
+    
+    %% Database Phase - FlowDB Class
+    Database --> FlowDBClass["flowDb.ts<br/>FlowDB class"]
+    
+    FlowDBClass --> DBInit["constructor()<br/>- Initialize counters<br/>- Bind methods<br/>- Setup toolTips<br/>- Call clear()"]
+    
+    DBInit --> DBMethods{FlowDB Methods}
+    
+    DBMethods --> addVertex["addVertex(id, textObj, type, style,<br/>classes, dir, props, metadata)"]
+    DBMethods --> addLink["addLink(_start[], _end[], linkData)"]
+    DBMethods --> addSingleLink["addSingleLink(_start, _end, type, id)"]
+    DBMethods --> setDirection["setDirection(dir)"]
+    DBMethods --> addSubGraph["addSubGraph(nodes[], id, title)"]
+    DBMethods --> addClass["addClass(id, style)"]
+    DBMethods --> setClass["setClass(ids, className)"]
+    DBMethods --> setTooltip["setTooltip(ids, tooltip)"]
+    DBMethods --> setClickEvent["setClickEvent(id, functionName, args)"]
+    DBMethods --> setClickFun["setClickFun(id, functionName, args)"]
+    
+    %% Vertex Processing
+    addVertex --> VertexProcess{Vertex Processing}
+    VertexProcess --> CreateVertex["Create FlowVertex object<br/>- id, labelType, domId<br/>- styles[], classes[]"]
+    VertexProcess --> SanitizeText["sanitizeText(textObj.text)"]
+    VertexProcess --> ParseMetadata["Parse YAML metadata<br/>yaml.load(yamlData)"]
+    VertexProcess --> SetVertexProps["Set vertex properties<br/>- shape, label, icon, form<br/>- pos, img, constraint, w, h"]
+    
+    %% Edge Processing  
+    addSingleLink --> EdgeProcess{Edge Processing}
+    EdgeProcess --> CreateEdge["Create FlowEdge object<br/>- start, end, type, text<br/>- labelType, classes[]"]
+    EdgeProcess --> ProcessLinkText["Process link text<br/>- sanitizeText()<br/>- strip quotes"]
+    EdgeProcess --> SetEdgeProps["Set edge properties<br/>- type, stroke, length"]
+    EdgeProcess --> GenerateEdgeId["Generate edge ID<br/>getEdgeId(start, end, counter)"]
+    EdgeProcess --> ValidateEdgeLimit["Validate edge limit<br/>maxEdges check"]
+    
+    %% Data Collection
+    DBMethods --> GetData["getData()"]
+    GetData --> CollectNodes["Collect nodes[] from vertices"]
+    GetData --> CollectEdges["Collect edges[] from edges"]
+    GetData --> ProcessSubGraphs["Process subgraphs<br/>- parentDB Map<br/>- subGraphDB Map"]
+    GetData --> AddNodeFromVertex["addNodeFromVertex()<br/>for each vertex"]
+    GetData --> ProcessEdgeTypes["destructEdgeType()<br/>arrowTypeStart, arrowTypeEnd"]
+    
+    %% Node Creation
+    AddNodeFromVertex --> NodeCreation{Node Creation}
+    NodeCreation --> FindExistingNode["findNode(nodes, vertex.id)"]
+    NodeCreation --> CreateBaseNode["Create base node<br/>- id, label, parentId<br/>- cssStyles, cssClasses<br/>- shape, domId, tooltip"]
+    NodeCreation --> GetCompiledStyles["getCompiledStyles(classDefs)"]
+    NodeCreation --> GetTypeFromVertex["getTypeFromVertex(vertex)"]
+    
+    %% Rendering Phase
+    Renderer --> flowRendererV3["flowRenderer-v3-unified.ts<br/>draw(text, id, version, diag)"]
+    
+    flowRendererV3 --> RenderInit["Initialize rendering<br/>- getConfig()<br/>- handle securityLevel<br/>- getDiagramElement()"]
+    
+    RenderInit --> GetLayoutData["diag.db.getData()<br/>as LayoutData"]
+    GetLayoutData --> SetupLayoutData["Setup layout data<br/>- type, layoutAlgorithm<br/>- direction, spacing<br/>- markers, diagramId"]
+    
+    SetupLayoutData --> CallRender["render(data4Layout, svg)"]
+    CallRender --> SetupViewPort["setupViewPortForSVG(svg, padding)"]
+    SetupViewPort --> ProcessLinks["Process vertex links<br/>- create anchor elements<br/>- handle click events"]
+    
+    %% Shape Rendering
+    CallRender --> ShapeSystem["flowChartShapes.js<br/>Shape Functions"]
+    
+    ShapeSystem --> ShapeFunctions{Shape Functions}
+    ShapeFunctions --> question["question(parent, bbox, node)"]
+    ShapeFunctions --> hexagon["hexagon(parent, bbox, node)"]
+    ShapeFunctions --> rect_left_inv_arrow["rect_left_inv_arrow(parent, bbox, node)"]
+    ShapeFunctions --> lean_right["lean_right(parent, bbox, node)"]
+    ShapeFunctions --> lean_left["lean_left(parent, bbox, node)"]
+    
+    ShapeFunctions --> insertPolygonShape["insertPolygonShape(parent, w, h, points)"]
+    ShapeFunctions --> intersectPolygon["intersectPolygon(node, points, point)"]
+    ShapeFunctions --> intersectRect["intersectRect(node, point)"]
+    
+    %% Styling System
+    Styles --> stylesTS["styles.ts<br/>getStyles(options)"]
+    stylesTS --> StyleOptions["FlowChartStyleOptions<br/>- arrowheadColor, border2<br/>- clusterBkg, mainBkg<br/>- fontFamily, textColor"]
+    
+    StyleOptions --> GenerateCSS["Generate CSS styles<br/>- .label, .cluster-label<br/>- .node, .edgePath<br/>- .flowchart-link, .edgeLabel"]
+    GenerateCSS --> GetIconStyles["getIconStyles()"]
+    
+    %% Type System
+    Parser --> TypeSystem["types.ts<br/>Type Definitions"]
+    TypeSystem --> FlowVertex["FlowVertex interface"]
+    TypeSystem --> FlowEdge["FlowEdge interface"]
+    TypeSystem --> FlowClass["FlowClass interface"]
+    TypeSystem --> FlowSubGraph["FlowSubGraph interface"]
+    TypeSystem --> FlowVertexTypeParam["FlowVertexTypeParam<br/>Shape types"]
+    
+    %% Utility Functions
+    DBMethods --> UtilityFunctions{Utility Functions}
+    UtilityFunctions --> lookUpDomId["lookUpDomId(id)"]
+    UtilityFunctions --> getClasses["getClasses()"]
+    UtilityFunctions --> getDirection["getDirection()"]
+    UtilityFunctions --> getVertices["getVertices()"]
+    UtilityFunctions --> getEdges["getEdges()"]
+    UtilityFunctions --> getSubGraphs["getSubGraphs()"]
+    UtilityFunctions --> clear["clear()"]
+    UtilityFunctions --> defaultConfig["defaultConfig()"]
+    
+    %% Event Handling
+    ProcessLinks --> EventHandling{Event Handling}
+    EventHandling --> setupToolTips["setupToolTips(element)"]
+    EventHandling --> bindFunctions["bindFunctions(element)"]
+    EventHandling --> runFunc["utils.runFunc(functionName, args)"]
+    
+    %% Common Database Functions
+    DBMethods --> CommonDB["commonDb.js functions"]
+    CommonDB --> setAccTitle["setAccTitle()"]
+    CommonDB --> getAccTitle["getAccTitle()"]
+    CommonDB --> setAccDescription["setAccDescription()"]
+    CommonDB --> getAccDescription["getAccDescription()"]
+    CommonDB --> setDiagramTitle["setDiagramTitle()"]
+    CommonDB --> getDiagramTitle["getDiagramTitle()"]
+    CommonDB --> commonClear["clear()"]
+    
+    %% Final Output
+    ProcessLinks --> FinalSVG["Final SVG Output"]
+    
+    %% Layout Algorithm Selection
+    SetupLayoutData --> LayoutAlgorithm{Layout Algorithm}
+    LayoutAlgorithm --> Dagre["dagre<br/>(default)"]
+    LayoutAlgorithm --> DagreWrapper["dagre-wrapper<br/>(v2 renderer)"]
+    LayoutAlgorithm --> ELK["elk<br/>(external package)"]
+    
+    %% Testing Components
+    FlowDBClass --> TestFiles["Test Files"]
+    TestFiles --> flowDbSpec["flowDb.spec.ts"]
+    TestFiles --> flowChartShapesSpec["flowChartShapes.spec.js"]
+    TestFiles --> ParserTests["parser/*.spec.js files<br/>- flow-text.spec.js<br/>- flow-edges.spec.js<br/>- flow-style.spec.js<br/>- subgraph.spec.js"]
+    
+    %% Configuration
+    Init --> ConfigSetup["Configuration Setup"]
+    ConfigSetup --> FlowchartConfig["cnf.flowchart config"]
+    ConfigSetup --> ArrowMarkers["arrowMarkerAbsolute"]
+    ConfigSetup --> LayoutConfig["layout config"]
+    ConfigSetup --> SetConfig["setConfig() calls"]

docs/diagrams/mermaid-api-sequence.mmd

@@ -0,0 +1,307 @@
+---
+references:
+  - "File: /packages/mermaid/src/mermaidAPI.ts"
+  - "File: /packages/mermaid/src/mermaid.ts"
+generationTime: 2025-01-28T16:30:00.000Z
+---
+sequenceDiagram
+    participant User as User/Browser
+    participant Mermaid as mermaid.ts
+    participant Queue as executionQueue
+    participant API as mermaidAPI.ts
+    participant Config as configApi
+    participant Preprocessor as preprocessDiagram
+    participant DiagramAPI as diagram-api
+    participant Diagram as Diagram.fromText
+    participant Renderer as diagram.renderer
+    participant Styles as Styling System
+    participant DOM as DOM/SVG
+
+    Note over User, DOM: Mermaid Complete API Flow
+
+    %% Initialization Phase
+    User->>+Mermaid: mermaid.initialize(config)
+    Mermaid->>+API: mermaidAPI.initialize(config)
+    
+    API->>API: assignWithDepth({}, userOptions)
+    API->>API: handle legacy fontFamily config
+    API->>Config: saveConfigFromInitialize(options)
+    
+    alt Theme Configuration Available
+        API->>API: check if theme in theme object
+        API->>API: set themeVariables from theme
+    else Default Theme
+        API->>API: use default theme variables
+    end
+    
+    API->>Config: setSiteConfig(options) or getSiteConfig()
+    API->>API: setLogLevel(config.logLevel)
+    API->>DiagramAPI: addDiagrams()
+    
+    API-->>-Mermaid: initialization complete
+    Mermaid-->>-User: ready to render
+
+    %% Content Loaded Event
+    User->>DOM: document.load event
+    DOM->>+Mermaid: contentLoaded()
+    
+    opt startOnLoad is true
+        Mermaid->>Config: getConfig()
+        Config-->>Mermaid: { startOnLoad: true }
+        Mermaid->>Mermaid: run()
+    end
+    
+    Mermaid-->>-DOM: event handling complete
+
+    %% Main Run Function
+    User->>+Mermaid: mermaid.run(options)
+    
+    Mermaid->>Mermaid: runThrowsErrors(options)
+    Mermaid->>Config: getConfig()
+    Config-->>Mermaid: configuration object
+    
+    alt nodes provided
+        Mermaid->>Mermaid: use provided nodes
+    else querySelector provided
+        Mermaid->>DOM: document.querySelectorAll(querySelector)
+        DOM-->>Mermaid: nodesToProcess
+    end
+    
+    Mermaid->>Mermaid: new InitIDGenerator(deterministicIds, seed)
+    
+    loop For each diagram element
+        Mermaid->>DOM: check element.getAttribute('data-processed')
+        
+        opt not processed
+            Mermaid->>DOM: element.setAttribute('data-processed', 'true')
+            Mermaid->>Mermaid: generate unique id
+            Mermaid->>DOM: get element.innerHTML
+            Mermaid->>Mermaid: entityDecode and clean text
+            Mermaid->>Mermaid: detectInit(txt)
+            
+            Mermaid->>Queue: render(id, txt, element)
+        end
+    end
+    
+    Mermaid-->>-User: processing initiated
+
+    %% Render Function (Queued)
+    activate Queue
+    Queue->>+API: mermaidAPI.render(id, text, container)
+    
+    API->>DiagramAPI: addDiagrams()
+    API->>+Preprocessor: processAndSetConfigs(text)
+    
+    Preprocessor->>Preprocessor: preprocessDiagram(text)
+    Preprocessor->>Config: reset()
+    Preprocessor->>Config: addDirective(processed.config)
+    Preprocessor-->>-API: { code, config }
+    
+    API->>Config: getConfig()
+    Config-->>API: current configuration
+    
+    opt text length > maxTextSize
+        API->>API: text = MAX_TEXTLENGTH_EXCEEDED_MSG
+    end
+    
+    API->>API: setup id selectors and element IDs
+    API->>API: determine security level (sandbox/loose)
+
+    %% DOM Setup
+    alt svgContainingElement provided
+        alt isSandboxed
+            API->>DOM: sandboxedIframe(select(svgContainingElement), iFrameID)
+            API->>DOM: select iframe contentDocument body
+        else
+            API->>DOM: select(svgContainingElement)
+        end
+    else no container
+        API->>API: removeExistingElements(document, id, divId, iFrameId)
+        alt isSandboxed
+            API->>DOM: sandboxedIframe(select('body'), iFrameID)
+        else
+            API->>DOM: select('body')
+        end
+    end
+    
+    API->>DOM: appendDivSvgG(root, id, enclosingDivID, fontFamily, XMLNS_XLINK_STD)
+
+    %% Diagram Creation
+    API->>+Diagram: Diagram.fromText(text, { title: processed.title })
+    
+    Diagram->>DiagramAPI: detect diagram type
+    Diagram->>DiagramAPI: load appropriate diagram
+    Diagram-->>-API: diagram instance
+    
+    opt parsing error occurred
+        API->>+Diagram: Diagram.fromText('error')
+        Diagram-->>-API: error diagram
+        API->>API: store parseEncounteredException
+    end
+
+    %% Style Generation
+    API->>DOM: get svg element and firstChild
+    API->>Renderer: diag.renderer.getClasses(text, diag)
+    Renderer-->>API: diagramClassDefs
+    
+    API->>+Styles: createUserStyles(config, diagramType, diagramClassDefs, idSelector)
+    
+    Styles->>Styles: createCssStyles(config, classDefs)
+    
+    opt config.themeCSS defined
+        Styles->>Styles: append themeCSS
+    end
+    
+    opt fontFamily configured
+        Styles->>Styles: add CSS variables for fonts
+    end
+    
+    opt classDefs exist
+        loop For each styleClassDef
+            opt has styles
+                Styles->>Styles: cssImportantStyles for each CSS element
+            end
+            opt has textStyles
+                Styles->>Styles: cssImportantStyles for tspan elements
+            end
+        end
+    end
+    
+    Styles->>Styles: getStyles(graphType, userCSSstyles, themeVariables)
+    Styles->>Styles: serialize(compile(svgId{allStyles}), stringify)
+    Styles-->>-API: compiled CSS rules
+    
+    API->>DOM: create style element
+    API->>DOM: style.innerHTML = rules
+    API->>DOM: svg.insertBefore(style, firstChild)
+
+    %% Diagram Rendering
+    API->>+Renderer: diag.renderer.draw(text, id, version, diag)
+    
+    Renderer->>Renderer: diagram-specific rendering logic
+    Renderer->>DOM: create SVG elements
+    Renderer->>DOM: apply positioning and styling
+    Renderer-->>-API: rendered diagram
+    
+    opt rendering error
+        alt suppressErrorRendering
+            API->>API: removeTempElements()
+            API->>Mermaid: throw error
+        else
+            API->>Renderer: errorRenderer.draw(text, id, version)
+        end
+    end
+
+    %% Accessibility and Cleanup
+    API->>DOM: select svg element
+    API->>Diagram: diag.db.getAccTitle()
+    API->>Diagram: diag.db.getAccDescription()
+    API->>API: addA11yInfo(diagramType, svgNode, a11yTitle, a11yDescr)
+    
+    API->>DOM: set xmlns for foreignobject elements
+    API->>DOM: get innerHTML from enclosing div
+    
+    API->>+API: cleanUpSvgCode(svgCode, isSandboxed, arrowMarkerAbsolute)
+    
+    opt not useArrowMarkerUrls and not sandboxed
+        API->>API: replace marker-end URLs with anchors
+    end
+    
+    API->>API: decodeEntities(svgCode)
+    API->>API: replace <br> with <br/>
+    API-->>-API: cleaned SVG code
+    
+    alt isSandboxed
+        API->>+API: putIntoIFrame(svgCode, svgEl)
+        API->>API: calculate iframe height
+        API->>API: toBase64 encode SVG content
+        API->>API: create iframe with sandbox attributes
+        API-->>-API: iframe HTML
+    else not loose security
+        API->>API: DOMPurify.sanitize(svgCode, options)
+    end
+    
+    API->>API: attachFunctions()
+    API->>API: removeTempElements()
+    
+    opt parseEncounteredException
+        API->>Mermaid: throw parseEncounteredException
+    end
+    
+    API-->>-Queue: { diagramType, svg: svgCode, bindFunctions }
+
+    %% Return to Web Integration
+    activate Mermaid
+    Queue-->>Mermaid: render result
+    Mermaid->>DOM: element.innerHTML = svg
+    
+    opt postRenderCallback
+        Mermaid->>User: postRenderCallback(id)
+    end
+    
+    opt bindFunctions exist
+        Mermaid->>DOM: bindFunctions(element)
+    end
+    deactivate Mermaid
+
+    %% Parse Function Flow
+    User->>+Mermaid: mermaid.parse(text, parseOptions)
+    activate Queue
+    
+    Queue->>+API: mermaidAPI.parse(text, parseOptions)
+    
+    API->>DiagramAPI: addDiagrams()
+    API->>Preprocessor: processAndSetConfigs(text)
+    Preprocessor-->>API: { code, config }
+    API->>Diagram: getDiagramFromText(code)
+    Diagram-->>API: diagram instance
+    API-->>-Queue: { diagramType: diagram.type, config }
+    
+    Queue-->>-Mermaid: parse result
+    Mermaid-->>-User: ParseResult or false
+
+    %% External Diagram Registration
+    User->>+Mermaid: registerExternalDiagrams(diagrams, options)
+    
+    Mermaid->>DiagramAPI: addDiagrams()
+    Mermaid->>DiagramAPI: registerLazyLoadedDiagrams(...diagrams)
+    
+    opt lazyLoad is false
+        Mermaid->>DiagramAPI: loadRegisteredDiagrams()
+    end
+    
+    Mermaid-->>-User: registration complete
+
+    %% Error Handling
+    Note over Mermaid, API: Error Handling Throughout
+    alt Error occurs
+        API->>Mermaid: throw error
+        Mermaid->>+Mermaid: handleError(error, errors, parseError)
+        
+        Mermaid->>Mermaid: log.warn(error)
+        
+        alt isDetailedError
+            Mermaid->>User: parseError(error.str, error.hash)
+        else
+            Mermaid->>User: parseError(error)
+        end
+        
+        opt not suppressErrors
+            Mermaid->>User: throw error
+        end
+        
+        Mermaid-->>-User: error handled
+    end
+
+    %% Configuration Details
+    Note over Config: Configuration Functions
+    Note right of Config: Functions:<br/>- reset()<br/>- getConfig()<br/>- setConfig()<br/>- getSiteConfig()<br/>- updateSiteConfig()<br/>- saveConfigFromInitialize()
+    
+    Note over Styles: CSS Generation
+    Note right of Styles: Features:<br/>- createCssStyles()<br/>- createUserStyles()<br/>- cssImportantStyles()<br/>- Theme integration<br/>- Class definitions
+    
+    Note over API: Security Levels
+    Note right of API: Modes:<br/>- sandbox: iframe isolation<br/>- loose: minimal sanitization<br/>- default: DOMPurify sanitization
+    
+    Note over API: Helper Functions
+    Note right of API: Utilities:<br/>- cleanUpSvgCode()<br/>- putIntoIFrame()<br/>- appendDivSvgG()<br/>- removeExistingElements() 

docs/diagrams/mindmap-implementation-sequence.mmd

@@ -0,0 +1,180 @@
+---
+references:
+  - "File: /packages/mermaid/src/diagrams/mindmap/mindmap-definition.ts"
+  - "File: /packages/mermaid/src/diagrams/mindmap/mindmapDb.ts"
+  - "File: /packages/mermaid/src/diagrams/mindmap/detector.ts"
+  - "File: /packages/mermaid/src/diagrams/mindmap/mindmapTypes.ts"
+  - "File: /packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts"
+  - "File: /packages/mermaid/src/diagrams/mindmap/styles.ts"
+  - "File: /packages/mermaid/src/diagrams/mindmap/svgDraw.ts"
+generationTime: 2025-01-28T16:00:00.000Z
+---
+sequenceDiagram
+    participant User as User Input Text
+    participant Detector as detector.ts
+    participant Loader as DiagramLoader
+    participant Definition as mindmap-definition.ts
+    participant Parser as parser/mindmap.jison
+    participant DB as MindmapDB
+    participant Renderer as mindmapRenderer.ts
+    participant Cytoscape as cytoscape.js
+    participant SVGDraw as svgDraw.ts
+    participant Styles as styles.ts
+    participant Output as Final SVG
+
+    Note over User, Output: Mindmap Implementation Flow
+
+    %% Detection Phase
+    User->>Detector: /^\s*mindmap/ text input
+    activate Detector
+    Detector->>Detector: detector(txt) validates pattern
+    Detector->>Loader: loader() function called
+    deactivate Detector
+    
+    activate Loader
+    Loader->>Definition: import mindmap-definition.js
+    deactivate Loader
+
+    %% Core Structure Setup
+    activate Definition
+    Definition->>DB: get db() → new MindmapDB()
+    Definition->>Renderer: setup renderer
+    Definition->>Parser: setup parser
+    Definition->>Styles: setup styles
+    deactivate Definition
+
+    %% Database Initialization
+    activate DB
+    Note over DB: MindmapDB Constructor
+    DB->>DB: initialize nodes array
+    DB->>DB: setup nodeType constants
+    DB->>DB: bind methods
+    DB->>DB: clear() state
+    
+    %% Parsing Phase
+    activate Parser
+    User->>Parser: mindmap syntax text
+    
+    loop For each node in hierarchy
+        Parser->>DB: addNode(level, id, descr, type)
+        activate DB
+        DB->>DB: sanitizeText(id, descr)
+        DB->>DB: getType(startStr, endStr)
+        Note right of DB: Shape Detection:<br/>[ → RECT<br/>( → ROUNDED_RECT<br/>(( → CIRCLE<br/>)) → BANG<br/>{{ → HEXAGON
+        DB->>DB: getParent(level)
+        DB->>DB: create MindmapNode
+        DB->>DB: add to hierarchy
+        deactivate DB
+    end
+
+    opt Icon/Class Decoration
+        Parser->>DB: decorateNode(decoration)
+        DB->>DB: set icon/class properties
+    end
+    deactivate Parser
+
+    %% Data Preparation
+    Renderer->>DB: getData() for layout
+    activate DB
+    DB->>DB: collect all nodes
+    DB->>DB: build parent-child relationships
+    DB-->>Renderer: return node hierarchy
+    deactivate DB
+
+    %% Rendering Pipeline
+    activate Renderer
+    Note over Renderer: Rendering Phase
+    
+    Renderer->>Cytoscape: initialize cytoscape
+    activate Cytoscape
+    
+    loop For each node in mindmap
+        Renderer->>Cytoscape: addNodes(mindmap, cy, conf, level)
+        Cytoscape->>Cytoscape: create node data
+        Cytoscape->>Cytoscape: set position (x, y)
+    end
+
+    loop For parent-child relationships
+        Renderer->>Cytoscape: add edges
+        Cytoscape->>Cytoscape: create edge data
+    end
+
+    Renderer->>Cytoscape: configure cose-bilkent layout
+    Cytoscape->>Cytoscape: calculate optimal positions
+    Cytoscape-->>Renderer: return positioned graph
+    deactivate Cytoscape
+
+    %% SVG Generation
+    Renderer->>SVGDraw: drawNodes(db, svg, mindmap, section, conf)
+    activate SVGDraw
+    
+    loop For each node recursively
+        SVGDraw->>SVGDraw: select shape function
+        
+        alt Default Shape
+            SVGDraw->>SVGDraw: defaultBkg() - rounded rectangle
+        else Rectangle Shape
+            SVGDraw->>SVGDraw: rectBkg() - sharp corners
+        else Circle Shape
+            SVGDraw->>SVGDraw: circleBkg() - perfect circle
+        else Cloud Shape
+            SVGDraw->>SVGDraw: cloudBkg() - organic curves
+        else Bang Shape
+            SVGDraw->>SVGDraw: bangBkg() - explosion style
+        else Hexagon Shape
+            SVGDraw->>SVGDraw: hexagonBkg() - six sides
+        end
+        
+        SVGDraw->>SVGDraw: create SVG elements
+        SVGDraw->>SVGDraw: add text labels
+        SVGDraw->>SVGDraw: position node
+        
+        opt Node has children
+            SVGDraw->>SVGDraw: drawNodes() recursive call
+        end
+    end
+    deactivate SVGDraw
+
+    %% Edge Rendering
+    Renderer->>Renderer: drawEdges(edgesEl, cy)
+    loop For each edge
+        Renderer->>Renderer: extract edge bounds
+        Renderer->>Renderer: draw SVG path
+    end
+
+    %% Styling Application
+    Renderer->>Styles: getStyles(options)
+    activate Styles
+    
+    Styles->>Styles: genSections(options)
+    loop For THEME_COLOR_LIMIT sections
+        Styles->>Styles: generate color scale
+        Styles->>Styles: create CSS rules
+        Note right of Styles: .section-X fills<br/>.edge-depth-X widths<br/>.node-icon-X colors
+    end
+    
+    Styles->>Styles: apply theme integration
+    Styles-->>Renderer: return compiled CSS
+    deactivate Styles
+
+    %% Final Assembly
+    Renderer->>Output: selectSvgElement()
+    Renderer->>Output: setupGraphViewbox()
+    Renderer->>Output: apply styles
+    Renderer->>Output: add interactive elements
+    deactivate Renderer
+
+    activate Output
+    Note over Output: Final Mindmap Features
+    Output->>Output: responsive layout
+    Output->>Output: accessibility attributes
+    Output->>Output: hover effects
+    Output->>Output: click handling
+    Output-->>User: rendered mindmap
+    deactivate Output
+
+    %% Configuration Details
+    Note over DB, Styles: Configuration Options
+    Note right of DB: Padding Calculations:<br/>Base padding from config<br/>RECT: ×2 padding<br/>ROUNDED_RECT: ×2 padding<br/>HEXAGON: ×2 padding
+    Note right of Styles: Section Management:<br/>MAX_SECTIONS = 12<br/>Dynamic color generation<br/>Git theme integration
+    Note right of Renderer: Layout Parameters:<br/>Cytoscape configuration<br/>coseBilkent settings<br/>Node spacing rules 

docs/ecosystem/integrations-community.md

@@ -40,6 +40,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
   - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
   - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
   - [CloudScript.io Mermaid Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
+  - [Mermaid plus for Confluence](https://marketplace.atlassian.com/apps/1236814/mermaid-plus-for-confluence?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/) ✅
@@ -72,7 +73,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 - [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
 - [Outline](https://docs.getoutline.com/s/guide/doc/diagrams-KQiKoT4wzK) ✅
 - [Redmine](https://redmine.org)
-  - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
+  - [Mermaid Macro](https://redmine.org/plugins/redmine_mermaid_macro)
   - [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)
@@ -83,6 +84,7 @@ To add an integration to this list, see the [Integrations - create page](./integ
 LLM integrations to create mermaid diagrams using AI from text descriptions.
 
 - [HueHive - Create mermaid diagrams with text](https://huehive.co/tools/diagrams)
+- [MCP Server Mermaid](https://github.com/hustcc/mcp-mermaid) - Generate mermaid diagram and chart with AI MCP dynamically.
 
 ### CRM/ERP
 
@@ -102,6 +104,7 @@ Blogging frameworks and platforms
   - [Mermaid](https://nextra.site/docs/guide/mermaid)
 - [WordPress](https://wordpress.org)
   - [MerPRess](https://wordpress.org/plugins/merpress/)
+  - [WP Documentation](https://wordpress.org/themes/wp-documentation/)
 
 ### CMS/ECM
 
@@ -114,6 +117,8 @@ Content Management Systems/Enterprise Content Management
 - [Grav CMS](https://getgrav.org/)
   - [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
   - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
+- [Tiki Wiki CMS Groupware](https://tiki.org)
+  - [Tracker Entity Relationship Diagram](https://doc.tiki.org/Tracker-Entity-Relationship-Diagram)
 - [VitePress](https://vitepress.vuejs.org/)
   - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
 - [VuePress](https://vuepress.vuejs.org/)
@@ -242,7 +247,7 @@ Communication tools and platforms
 | GitHub + Mermaid         | -                                                                                                           | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/)               | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)                                       |
 | Asciidoctor Live Preview | [🎡🔗](https://chromewebstore.google.com/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | -                                                                              | -                                                                              | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -                                                                                                    |
 | Diagram Tab              | -                                                                                                           | -                                                                              | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/khafast/diagramtab)                                                        |
-| Markdown Diagrams        | [🎡🔗](https://chromewebstore.google.com/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel)         | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/)      | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/)      | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe)                 | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
+| Markdown Diagrams        | [🎡🔗](https://chromewebstore.google.com/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel)         | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/)      | -                                                                              | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe)                 | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
 | Markdown Viewer          | -                                                                                                           | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/simov/markdown-viewer)                                                     |
 | Extensions for Mermaid   | -                                                                                                           | -                                                                              | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | -                                                                                                                            | [🐙🔗](https://github.com/Stefan-S/mermaid-extension)                                                |
 | Chrome Diagrammer        | [🎡🔗](https://chromewebstore.google.com/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
@@ -267,7 +272,6 @@ Communication tools and platforms
   - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
 - [Reveal CK](https://github.com/jedcn/reveal-ck)
   - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
-- [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
-- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
+- [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)
 
 <!--- cspell:ignore Blazorade HueHive --->

docs/ecosystem/integrations-create.md

@@ -16,9 +16,7 @@ Applications that support Mermaid files [SHOULD](https://datatracker.ietf.org/do
 
 ### MIME Type
 
-The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for Mermaid media is `text/vnd.mermaid`.
-
-Currently pending [IANA](https://www.iana.org/) recognition.
+The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for Mermaid media is [`text/vnd.mermaid`](https://www.iana.org/assignments/media-types/application/vnd.mermaid).
 
 ## Showcase
 

docs/ecosystem/mermaid-chart.md

@@ -30,7 +30,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
 
   Official Mermaid Chart plugins:
 
-  - [Mermaid Chart GPT](https://chat.openai.com/g/g-1IRFKwq4G-mermaid-chart)
+  - [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts)
   - [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
   - [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)
   - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)

docs/intro/index.md

@@ -49,7 +49,7 @@ For a more detailed introduction to Mermaid and some of its more basic uses, loo
 
 🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/contributing.md) | 🔌 [Plug-Ins](../ecosystem/integrations-community.md)
 
-> 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/mermaid-js/mermaid/issues/866).
+> 🖖 Keep a steady pulse: [mermaid needs more Collaborators](https://github.com/mermaid-js/mermaid/issues/866).
 
 :trophy: **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees) in the category "The most exciting use of technology"!!!**
 
@@ -354,6 +354,7 @@ To Deploy Mermaid:
 
 - [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
 - [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli)
+- [Mermaid Tiny](https://github.com/mermaid-js/mermaid/tree/develop/packages/tiny)
 - [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo)
 - [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo)
 
@@ -437,7 +438,7 @@ For public sites, it can be precarious to retrieve text from users on the intern
 
 As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security.
 
-_Unfortunately you can not have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
+_Unfortunately you cannot have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
 
 ## Reporting vulnerabilities
 

docs/intro/syntax-reference.md

@@ -14,7 +14,11 @@ Diagram Examples can be found in the [Mermaid Live Editor](https://mermaid.live)
 
 ## Syntax Structure
 
-One would notice that all **Diagrams definitions begin** with a declaration of the **diagram type**, followed by the definitions of the diagram and its contents. This declaration notifies the parser which kind of diagram the code is supposed to generate.
+One would notice that all **Diagrams definitions begin** with a declaration of the **diagram type**, followed by the definitions of the diagram and its contents. This declaration notifies the parser which kind of diagram the code is supposed to generate. The only exception to this a [Frontmatter](#frontmatter-for-diagram-code) configuration.
+
+Line comments can ignore anything on the line after '%% '.
+
+Unknown words and misspellings will break a diagram, while parameters silently fail.
 
 **Example** : The code below is for an Entity Relationship Diagram, specified by the `erDiagram` declaration. What follows is the definition of the different `Entities` represented in it.
 
@@ -72,10 +76,50 @@ The following are the most commonly used methods, and they are all tied to Merma
 
 Here you can edit certain values to change the behavior and appearance of the diagram.
 
+Each of these techniques are functionally equivalent, but better for different deployments.
+
 ### [The initialize() call](./getting-started.md#_3-calling-the-javascript-api)
 
 Used when Mermaid is called via an API, or through a `<script>` tag.
 
+### Frontmatter for diagram code
+
+Frontmatter is the term for adding YAML metadata at the start of code. This allows for reconfiguration of a diagram before it is rendered. You can pass metadata Frontmatter with your definition by adding `---` to the lines before and after the definition. This 'triple dash' MUST be the only character on the first line.
+
+Frontmatter uses YAML syntax. It requires any indentation to be consistent and settings are case sensitive. Mermaid will silently ignore misspelling, but badly formed parameters will break the diagram.
+
+```mermaid-example
+---
+title: Frontmatter Example
+displayMode: compact
+config:
+  theme: forest
+gantt:
+    useWidth: 400
+    compact: true
+---
+gantt
+    section Waffle
+        Iron  : 1982, 3y
+        House : 1986, 3y
+```
+
+```mermaid
+---
+title: Frontmatter Example
+displayMode: compact
+config:
+  theme: forest
+gantt:
+    useWidth: 400
+    compact: true
+---
+gantt
+    section Waffle
+        Iron  : 1982, 3y
+        House : 1986, 3y
+```
+
 ### [Directives](../config/directives.md)
 
 Allows for the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`. It can be done either above or below your diagram definition.
@@ -192,9 +236,10 @@ flowchart LR
   B -->|Option 1| C[Path 1]
   B -->|Option 2| D[Path 2]
 
-#### Using Dagre Layout with Classic Look:
 ```
 
+#### Using Dagre Layout with Classic Look:
+
 Another example:
 
 ```