Handling of animation classes

docs: fix preview errors in the flowchart documentation

.changeset/add-vert-tag-bar-chart.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: Add Vertical Line To Gantt Plot At Specified Time

.changeset/bitter-colts-remain.md

@@ -0,0 +1,5 @@
+---
+'@mermaid-js/mermaid-zenuml': major
+---
+
+Upgraded the dependency @zenuml/core

.changeset/curly-coats-tell.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+Fix stroke styles for ER diagram to correctly apply path and row-specific styles

.changeset/eleven-wolves-deny.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+chore: Convert StateDB into TypeScript

.changeset/gold-shoes-camp.md

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

.changeset/honest-trees-dress.md

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

.changeset/neat-moose-compare.md

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

.changeset/proud-seahorses-wash.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+FontAwesome icons can now be embedded as SVGs in flowcharts if they are registered via `mermaid.registerIconPacks`.

.changeset/public-things-stare.md

@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+Added support for the click directive in stateDiagram syntax

.changeset/quiet-hotels-shine.md

@@ -0,0 +1,6 @@
+---
+'mermaid': minor
+'@mermaid-js/parser': minor
+---
+
+feat: Add shorter `+<count>: Label` syntax in packet diagram

.changeset/sad-mails-accept.md

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

.changeset/sixty-deer-tell.md

@@ -0,0 +1,5 @@
+---
+'mermaid': major
+---
+
+fix: allow sequence diagram arrows with a trailing colon but no message

.changeset/soft-readers-tan.md

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

.changeset/ten-lamps-trade.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: allow colons in events

.changeset/yellow-mirrors-change.md

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

.changeset/yellow-walls-fry.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Fix incomplete string escaping in URL manipulation logic when `arrowMarkerAbsolute: true` by ensuring all unsafe characters are escaped.

.cspell/code-terms.txt

@@ -53,7 +53,6 @@ frontmatter
 funs
 gantt
 GENERICTYPE
-getBoundarys
 grammr
 graphtype
 halign

.cspell/libraries.txt

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

.esbuild/build.ts

@@ -1,5 +1,5 @@
 import { build } from 'esbuild';
-import { mkdir, writeFile } from 'node:fs/promises';
+import { 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,20 @@ 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');
+};
+
 const main = async () => {
   await generateLangium();
   await mkdir('stats', { recursive: true });
@@ -65,6 +100,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,13 @@ exclude = [
 # Drupal 403
 "https://(www.)?drupal.org",
 
-# Swimm returns 404, eventhough the link is valid
+# Swimm returns 404, even though the link is valid
 "https://docs.swimm.io",
 
 # Timeout
-"https://huehive.co"
+"https://huehive.co",
+"https://foswiki.org",
+"https://www.gnu.org",
 ]
 
 # 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/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@889dce9eaba7900ce30494f5e1ac7220b27e5c81
         with:
-          add: 'cypress/timings.json'
-          author_name: 'github-actions[bot]'
-          author_email: '41898282+github-actions[bot]@users.noreply.github.com'
-          message: 'chore: update E2E timings'
-      - 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

.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

@@ -256,7 +256,7 @@ mermaid.run({
 - Problem showing graph with php on localhost [\#502](https://github.com/knsv/mermaid/issues/502)
 - logLevel's option doesnt work at 7.0.0 [\#501](https://github.com/knsv/mermaid/issues/501)
 - How do I get the log for a render or parse attempt? [\#500](https://github.com/knsv/mermaid/issues/500)
-- Mermaid neutral style style to built in latest release [\#499](https://github.com/knsv/mermaid/issues/499)
+- Mermaid neutral style to built in latest release [\#499](https://github.com/knsv/mermaid/issues/499)
 - Any plans for adding a typescript definition file? [\#495](https://github.com/knsv/mermaid/issues/495)
 - Gantt diagrams too narrow [\#493](https://github.com/knsv/mermaid/issues/493)
 - Flowchart edge labels placement [\#490](https://github.com/knsv/mermaid/issues/490)
@@ -833,7 +833,7 @@ mermaid.run({
 - Merge pull request \#1 from knsv/master [\#96](https://github.com/knsv/mermaid/pull/96) ([gkchic](https://github.com/gkchic))
 - Removed duplicated section in flowchart docs [\#94](https://github.com/knsv/mermaid/pull/94) ([kaime](https://github.com/kaime))
 - Grammar changes to sequence page [\#93](https://github.com/knsv/mermaid/pull/93) ([gkchic](https://github.com/gkchic))
-- Github buttons [\#89](https://github.com/knsv/mermaid/pull/89) ([gkchic](https://github.com/gkchic))
+- GitHub buttons [\#89](https://github.com/knsv/mermaid/pull/89) ([gkchic](https://github.com/gkchic))
 - Template change [\#88](https://github.com/knsv/mermaid/pull/88) ([gkchic](https://github.com/gkchic))
 
 ## [0.3.1](https://github.com/knsv/mermaid/tree/0.3.1) (2015-01-05)
@@ -1002,4 +1002,4 @@ mermaid.run({
 
 ## [0.1.0](https://github.com/knsv/mermaid/tree/0.1.0) (2014-11-16)
 
-\* _This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/Github-Changelog-Generator)_
+\* _This Change Log was automatically generated by [github_changelog_generator](https://github.com/skywinder/GitHub-Changelog-Generator)_

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
 
@@ -451,7 +451,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 致力于解决的一个难题。
 

cypress/integration/other/configuration.spec.js

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

cypress/integration/other/interaction.spec.js

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

cypress/integration/rendering/architecture.spec.ts

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

cypress/integration/rendering/block.spec.js

@@ -14,7 +14,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL2: should handle colums statement in sub-blocks', () => {
+  it('BL2: should handle columns statement in sub-blocks', () => {
     imgSnapshotTest(
       `block-beta
   id1["Hello"]
@@ -30,7 +30,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL3: should align block widths and handle colums statement in sub-blocks', () => {
+  it('BL3: should align block widths and handle columns statement in sub-blocks', () => {
     imgSnapshotTest(
       `block-beta
   block
@@ -46,7 +46,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL4: should align block widths and handle colums statements in deeper sub-blocks then 1 level', () => {
+  it('BL4: should align block widths and handle columns statements in deeper sub-blocks then 1 level', () => {
     imgSnapshotTest(
       `block-beta
   columns 1
@@ -66,7 +66,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL5: should align block widths and handle colums statements in deeper sub-blocks then 1 level (alt)', () => {
+  it('BL5: should align block widths and handle columns statements in deeper sub-blocks then 1 level (alt)', () => {
     imgSnapshotTest(
       `block-beta
   columns 1
@@ -236,7 +236,7 @@ describe('Block diagram', () => {
     );
   });
 
-  it('BL17: width alignment - blocks shold be equal in width', () => {
+  it('BL17: width alignment - blocks should be equal in width', () => {
     imgSnapshotTest(
       `block-beta
     A("This is the text")

cypress/integration/rendering/classDiagram.spec.js

@@ -429,7 +429,7 @@ describe('Class diagram', () => {
     classDiagram
       class \`This\nTitle\nHas\nMany\nNewlines\` {
         +String Also
-        -Stirng Many
+        -String Many
         #int Members
         +And()
         -Many()
@@ -443,7 +443,7 @@ describe('Class diagram', () => {
     classDiagram
       class \`This\nTitle\nHas\nMany\nNewlines\` {
         +String Also
-        -Stirng Many
+        -String Many
         #int Members
         +And()
         -Many()
@@ -459,7 +459,7 @@ describe('Class diagram', () => {
       namespace testingNamespace {
       class \`This\nTitle\nHas\nMany\nNewlines\` {
         +String Also
-        -Stirng Many
+        -String Many
         #int Members
         +And()
         -Many()

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

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

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

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

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

@@ -99,7 +99,7 @@ describe('Flowchart v2', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.be.within(417 * 0.95, 417 * 1.05);
+      expect(maxWidthValue).to.be.within(440 * 0.95, 440 * 1.05);
     });
   });
   it('8: should render a flowchart when useMaxWidth is false', () => {
@@ -118,7 +118,7 @@ describe('Flowchart v2', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
-      expect(width).to.be.within(417 * 0.95, 417 * 1.05);
+      expect(width).to.be.within(440 * 0.95, 440 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -198,13 +198,13 @@ describe('Flowchart v2', () => {
       `flowchart TB
   internet
   nat
-  routeur
+  router
   lb1
   lb2
   compute1
   compute2
   subgraph project
-  routeur
+  router
   nat
     subgraph subnet1
       compute1
@@ -215,8 +215,8 @@ describe('Flowchart v2', () => {
       lb2
     end
   end
-  internet --> routeur
-  routeur --> subnet1 & subnet2
+  internet --> router
+  router --> subnet1 & subnet2
   subnet1 & subnet2 --> nat --> internet
       `,
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
@@ -433,7 +433,7 @@ flowchart TD
       { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
     );
   });
-  it('63: title on subgraphs should be themable', () => {
+  it('63: title on subgraphs should be themeable', () => {
     imgSnapshotTest(
       `
       %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
@@ -699,7 +699,7 @@ A --> B
       { flowchart: { titleTopMargin: 10 } }
     );
   });
-  it('3192: It should be possieble to render flowcharts with invisible edges', () => {
+  it('3192: It should be possible to render flowcharts with invisible edges', () => {
     imgSnapshotTest(
       `---
 title: Simple flowchart with invisible edges
@@ -1076,11 +1076,11 @@ end
       );
     });
   });
-  describe('New @ sytax for node metadata edge cases', () => {
+  describe('New @ syntax for node metadata edge cases', () => {
     it('should be possible to use @  syntax to add labels on multi nodes', () => {
       imgSnapshotTest(
         `flowchart TB
-       n2["label for n2"] &   n4@{ label: "labe for n4"}   & n5@{ label: "labe for n5"}
+       n2["label for n2"] &   n4@{ label: "label for n4"}   & n5@{ label: "label for n5"}
         `,
         {}
       );
@@ -1088,7 +1088,7 @@ end
     it('should be possible to use @  syntax to add labels with trail spaces and &', () => {
       imgSnapshotTest(
         `flowchart TB
-       n2["label for n2"] &   n4@{ label: "labe for n4"}   & n5@{ label: "labe for n5"}   
+       n2["label for n2"] &   n4@{ label: "label for n4"}   & n5@{ label: "label for n5"}   
         `,
         {}
       );
@@ -1097,8 +1097,8 @@ end
       imgSnapshotTest(
         `flowchart TB
        n2["label for n2"]
-       n4@{ label: "labe for n4"}
-       n5@{ label: "labe for n5"}  
+       n4@{ label: "label for n4"}
+       n5@{ label: "label for n5"}  
         `,
         {}
       );

cypress/integration/rendering/flowchart.spec.js

@@ -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(
       `
@@ -573,7 +590,7 @@ describe('Gantt diagram', () => {
       `
     );
   });
-  it('should render a gantt diagram exculding friday and saturday', () => {
+  it('should render a gantt diagram excluding friday and saturday', () => {
     imgSnapshotTest(
       `gantt
       title A Gantt Diagram
@@ -584,7 +601,7 @@ describe('Gantt diagram', () => {
       A task :a1, 2024-02-28, 10d`
     );
   });
-  it('should render a gantt diagram exculding saturday and sunday', () => {
+  it('should render a gantt diagram excluding saturday and sunday', () => {
     imgSnapshotTest(
       `gantt
       title A Gantt Diagram
@@ -671,7 +688,7 @@ describe('Gantt diagram', () => {
       title Gantt Digram
       dateFormat  YYYY-MM-DD
       section Section
-      ;A task with a semiclon           :a1, 2014-01-01, 30d
+      ;A task with a semicolon           :a1, 2014-01-01, 30d
       Another task     :after a1  , 20d
       section Another
       Task in sec      :2014-01-12  , 12d

cypress/integration/rendering/gitGraph.spec.js

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

cypress/integration/rendering/journey.spec.js

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

cypress/integration/rendering/kanban.spec.ts

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

cypress/integration/rendering/mindmap.spec.ts

@@ -146,7 +146,7 @@ root
       shouldHaveRoot
     );
   });
-  it('text shouhld wrap with icon', () => {
+  it('text should wrap with icon', () => {
     imgSnapshotTest(
       `mindmap
 root

cypress/integration/rendering/pie.spec.ts

@@ -64,7 +64,7 @@ describe('pie chart', () => {
     });
   });
 
-  it('should render a pie diagram when textPosition is setted', () => {
+  it('should render a pie diagram when textPosition is set', () => {
     imgSnapshotTest(
       `pie
         "Dogs": 50

cypress/integration/rendering/quadrantChart.spec.js

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

cypress/integration/rendering/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

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

cypress/integration/rendering/xyChart.spec.js

@@ -179,6 +179,7 @@ describe('XY Chart', () => {
             axisLineWidth: 5
           chartOrientation: horizontal
           plotReservedSpacePercent: 60
+          showDataLabel: true
       ---
       xychart-beta
         title "Sales Revenue"
@@ -315,4 +316,516 @@ describe('XY Chart', () => {
     );
     cy.get('svg');
   });
+
+  it('should render vertical bar chart with labels', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+    ---
+    xychart-beta
+      title "Sales Revenue"
+      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+      y-axis "Revenue (in $)" 4000 --> 11000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    `,
+      {}
+    );
+  });
+
+  it('should render horizontal bar chart with labels', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+        chartOrientation: horizontal
+    ---
+    xychart-beta
+      title "Sales Revenue"
+      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+      y-axis "Revenue (in $)" 4000 --> 11000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    `,
+      {}
+    );
+  });
+
+  it('should render vertical bar chart without labels by default', () => {
+    imgSnapshotTest(
+      `
+    xychart-beta
+      title "Sales Revenue"
+      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+      y-axis "Revenue (in $)" 4000 --> 11000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    `,
+      {}
+    );
+  });
+
+  it('should render horizontal bar chart without labels by default', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        chartOrientation: horizontal
+    ---
+    xychart-beta
+      title "Sales Revenue"
+      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+      y-axis "Revenue (in $)" 4000 --> 11000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    `,
+      {}
+    );
+  });
+
+  it('should render multiple bar plots vertically with labels correctly', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+    ---
+      xychart-beta
+        title "Multiple Bar Plots"
+        x-axis Categories [A, B, C]
+        y-axis "Values" 0 --> 100
+        bar [10, 50, 90]
+      `,
+      {}
+    );
+  });
+
+  it('should render multiple bar plots horizontally with labels correctly', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+        chartOrientation: horizontal
+    ---
+      xychart-beta
+        title "Multiple Bar Plots"
+        x-axis Categories [A, B, C]
+        y-axis "Values" 0 --> 100
+        bar [10, 50, 90]
+      `,
+      {}
+    );
+  });
+
+  it('should render a single bar with label for a vertical xy-chart', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+    ---
+      xychart-beta
+        title "Single Bar Chart"
+        x-axis Categories [A]
+        y-axis "Value" 0 --> 100
+        bar [75]
+      `,
+      {}
+    );
+  });
+
+  it('should render a single bar with label for a horizontal xy-chart', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+        chartOrientation: horizontal
+    ---
+      xychart-beta
+        title "Single Bar Chart"
+        x-axis Categories [A]
+        y-axis "Value" 0 --> 100
+        bar [75]
+      `,
+      {}
+    );
+  });
+
+  it('should render negative and decimal values with correct labels for vertical xy-chart', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+    ---
+      xychart-beta
+        title "Decimal and Negative Values"
+        x-axis Categories [A, B, C]
+        y-axis -10 --> 10
+        bar [ -2.5, 0.75, 5.1 ]
+      `,
+      {}
+    );
+  });
+
+  it('should render negative and decimal values with correct labels for horizontal xy-chart', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+        chartOrientation: horizontal
+    ---
+      xychart-beta
+        title "Decimal and Negative Values"
+        x-axis Categories [A, B, C]
+        y-axis -10 --> 10
+        bar [ -2.5, 0.75, 5.1 ]
+      `,
+      {}
+    );
+  });
+
+  it('should render data labels within each bar in the vertical xy-chart', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+    ---
+    xychart-beta
+            title "Sales Revenue"
+            x-axis Months [jan,b,c]
+            y-axis "Revenue (in $)" 4000 --> 12000
+            bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
+    `,
+      {}
+    );
+
+    cy.get('g.bar-plot-0').within(() => {
+      cy.get('rect').each(($rect, index) => {
+        // Extract bar properties
+        const barProps = {
+          x: parseFloat($rect.attr('x')),
+          y: parseFloat($rect.attr('y')),
+          width: parseFloat($rect.attr('width')),
+          height: parseFloat($rect.attr('height')),
+        };
+
+        // Get the text element corresponding to this bar by index.
+        cy.get('text')
+          .eq(index)
+          .then(($text) => {
+            const bbox = $text[0].getBBox();
+            const textProps = {
+              x: bbox.x,
+              y: bbox.y,
+              width: bbox.width,
+              height: bbox.height,
+            };
+
+            // Verify that the text label is positioned within the boundaries of the bar.
+            expect(textProps.x).to.be.greaterThan(barProps.x);
+            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
+
+            // Check horizontal alignment (within tolerance)
+            expect(textProps.x + textProps.width / 2).to.be.closeTo(
+              barProps.x + barProps.width / 2,
+              5
+            );
+
+            expect(textProps.y).to.be.greaterThan(barProps.y);
+            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
+          });
+      });
+    });
+  });
+
+  it('should render data labels within each bar in the horizontal xy-chart', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+        chartOrientation: horizontal
+    ---
+    xychart-beta
+            title "Sales Revenue"
+            x-axis Months [jan,b,c]
+            y-axis "Revenue (in $)" 4000 --> 12000
+            bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 3000, 2000, 500, 2000, 3000, 11000, 5000, 6000]
+    `,
+      {}
+    );
+
+    cy.get('g.bar-plot-0').within(() => {
+      cy.get('rect').each(($rect, index) => {
+        // Extract bar properties
+        const barProps = {
+          x: parseFloat($rect.attr('x')),
+          y: parseFloat($rect.attr('y')),
+          width: parseFloat($rect.attr('width')),
+          height: parseFloat($rect.attr('height')),
+        };
+
+        // Get the text element corresponding to this bar by index.
+        cy.get('text')
+          .eq(index)
+          .then(($text) => {
+            const bbox = $text[0].getBBox();
+            const textProps = {
+              x: bbox.x,
+              y: bbox.y,
+              width: bbox.width,
+              height: bbox.height,
+            };
+
+            // Verify that the text label is positioned within the boundaries of the bar.
+            expect(textProps.x).to.be.greaterThan(barProps.x);
+            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
+
+            expect(textProps.y).to.be.greaterThan(barProps.y);
+            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
+            expect(textProps.y + textProps.height / 2).to.be.closeTo(
+              barProps.y + barProps.height / 2,
+              5
+            );
+          });
+      });
+    });
+  });
+
+  it('should render data labels within each bar in the vertical xy-chart with a lot of bars of different sizes', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        xyChart:
+          showDataLabel: true
+      ---
+      xychart-beta
+        title "Sales Revenue"
+        x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
+        y-axis "Revenue (in $)" 4000 --> 12000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
+    `,
+      {}
+    );
+
+    cy.get('g.bar-plot-0').within(() => {
+      cy.get('rect').each(($rect, index) => {
+        // Extract bar properties
+        const barProps = {
+          x: parseFloat($rect.attr('x')),
+          y: parseFloat($rect.attr('y')),
+          width: parseFloat($rect.attr('width')),
+          height: parseFloat($rect.attr('height')),
+        };
+
+        // Get the text element corresponding to this bar by index.
+        cy.get('text')
+          .eq(index)
+          .then(($text) => {
+            const bbox = $text[0].getBBox();
+            const textProps = {
+              x: bbox.x,
+              y: bbox.y,
+              width: bbox.width,
+              height: bbox.height,
+            };
+
+            // Verify that the text label is positioned within the boundaries of the bar.
+            expect(textProps.x).to.be.greaterThan(barProps.x);
+            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
+
+            // Check horizontal alignment (within tolerance)
+            expect(textProps.x + textProps.width / 2).to.be.closeTo(
+              barProps.x + barProps.width / 2,
+              5
+            );
+
+            expect(textProps.y).to.be.greaterThan(barProps.y);
+            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
+          });
+      });
+    });
+  });
+
+  it('should render data labels within each bar in the horizontal xy-chart with a lot of bars of different sizes', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+        chartOrientation: horizontal
+    ---
+    xychart-beta
+      title "Sales Revenue"
+      x-axis Months [jan,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s]
+      y-axis "Revenue (in $)" 4000 --> 12000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000, 8000, 10000, 5000, 7600, 4999,11000 ,5000,6000]
+    `,
+      {}
+    );
+
+    cy.get('g.bar-plot-0').within(() => {
+      cy.get('rect').each(($rect, index) => {
+        // Extract bar properties
+        const barProps = {
+          x: parseFloat($rect.attr('x')),
+          y: parseFloat($rect.attr('y')),
+          width: parseFloat($rect.attr('width')),
+          height: parseFloat($rect.attr('height')),
+        };
+
+        // Get the text element corresponding to this bar by index.
+        cy.get('text')
+          .eq(index)
+          .then(($text) => {
+            const bbox = $text[0].getBBox();
+            const textProps = {
+              x: bbox.x,
+              y: bbox.y,
+              width: bbox.width,
+              height: bbox.height,
+            };
+
+            // Verify that the text label is positioned within the boundaries of the bar.
+            expect(textProps.x).to.be.greaterThan(barProps.x);
+            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
+
+            expect(textProps.y).to.be.greaterThan(barProps.y);
+            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
+            expect(textProps.y + textProps.height / 2).to.be.closeTo(
+              barProps.y + barProps.height / 2,
+              5
+            );
+          });
+      });
+    });
+  });
+
+  it('should render data labels correctly for a bar in the vertical xy-chart', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+    ---
+    xychart-beta
+            title "Sales Revenue"
+            x-axis Months [jan]
+            y-axis "Revenue (in $)" 3000 --> 12000
+            bar [4000]
+    `,
+      {}
+    );
+
+    cy.get('g.bar-plot-0').within(() => {
+      cy.get('rect').each(($rect, index) => {
+        // Extract bar properties
+        const barProps = {
+          x: parseFloat($rect.attr('x')),
+          y: parseFloat($rect.attr('y')),
+          width: parseFloat($rect.attr('width')),
+          height: parseFloat($rect.attr('height')),
+        };
+
+        // Get the text element corresponding to this bar by index.
+        cy.get('text')
+          .eq(index)
+          .then(($text) => {
+            const bbox = $text[0].getBBox();
+            const textProps = {
+              x: bbox.x,
+              y: bbox.y,
+              width: bbox.width,
+              height: bbox.height,
+            };
+
+            // Verify that the text label is positioned within the boundaries of the bar.
+            expect(textProps.x).to.be.greaterThan(barProps.x);
+            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
+
+            // Check horizontal alignment (within tolerance)
+            expect(textProps.x + textProps.width / 2).to.be.closeTo(
+              barProps.x + barProps.width / 2,
+              5
+            );
+
+            expect(textProps.y).to.be.greaterThan(barProps.y);
+            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
+          });
+      });
+    });
+  });
+
+  it('should render data labels correctly for a bar in the horizontal xy-chart', () => {
+    imgSnapshotTest(
+      `
+    ---
+    config:
+      xyChart:
+        showDataLabel: true
+        chartOrientation: horizontal
+    ---
+    xychart-beta
+            title "Sales Revenue"
+            x-axis Months [jan]
+            y-axis "Revenue (in $)" 3000 --> 12000
+            bar [4000]
+    `,
+      {}
+    );
+
+    cy.get('g.bar-plot-0').within(() => {
+      cy.get('rect').each(($rect, index) => {
+        // Extract bar properties
+        const barProps = {
+          x: parseFloat($rect.attr('x')),
+          y: parseFloat($rect.attr('y')),
+          width: parseFloat($rect.attr('width')),
+          height: parseFloat($rect.attr('height')),
+        };
+
+        // Get the text element corresponding to this bar by index.
+        cy.get('text')
+          .eq(index)
+          .then(($text) => {
+            const bbox = $text[0].getBBox();
+            const textProps = {
+              x: bbox.x,
+              y: bbox.y,
+              width: bbox.width,
+              height: bbox.height,
+            };
+
+            // Verify that the text label is positioned within the boundaries of the bar.
+            expect(textProps.x).to.be.greaterThan(barProps.x);
+            expect(textProps.x + textProps.width).to.be.lessThan(barProps.x + barProps.width);
+
+            expect(textProps.y).to.be.greaterThan(barProps.y);
+            expect(textProps.y + textProps.height).to.be.lessThan(barProps.y + barProps.height);
+            expect(textProps.y + textProps.height / 2).to.be.closeTo(
+              barProps.y + barProps.height / 2,
+              5
+            );
+          });
+      });
+    });
+  });
 });

cypress/platform/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/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

@@ -106,13 +106,15 @@
 
   <body>
     <pre id="diagram4" class="mermaid">
-      flowchart LR
+      flowchart RL
         AB["apa@apa@"] --> B(("`apa@apa`"))
     </pre>
+
     <pre id="diagram4" class="mermaid">
       flowchart
         D(("for D"))
     </pre>
+    <h1>below</h1>
     <pre id="diagram4" class="mermaid">
       flowchart LR
         A e1@==> B
@@ -251,7 +253,7 @@ flowchart LR
     A{A} --> B & C
 </pre
     >
-    <pre id="diagram4" class="mermaid2">
+    <pre id="diagram4" class="mermaid">
 ---
 config:
   layout: elk
@@ -386,7 +388,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]

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"/>',

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,215 @@
   "durations": [
     {
       "spec": "cypress/integration/other/configuration.spec.js",
-      "duration": 4989
+      "duration": 6130
     },
     {
       "spec": "cypress/integration/other/external-diagrams.spec.js",
-      "duration": 1382
+      "duration": 1974
     },
     {
       "spec": "cypress/integration/other/ghsa.spec.js",
-      "duration": 3178
+      "duration": 3308
     },
     {
       "spec": "cypress/integration/other/iife.spec.js",
-      "duration": 1372
+      "duration": 1877
     },
     {
       "spec": "cypress/integration/other/interaction.spec.js",
-      "duration": 8998
+      "duration": 10902
     },
     {
       "spec": "cypress/integration/other/rerender.spec.js",
-      "duration": 1249
+      "duration": 1836
     },
     {
       "spec": "cypress/integration/other/xss.spec.js",
-      "duration": 25664
+      "duration": 26467
     },
     {
       "spec": "cypress/integration/rendering/appli.spec.js",
-      "duration": 1928
+      "duration": 3129
     },
     {
       "spec": "cypress/integration/rendering/architecture.spec.ts",
-      "duration": 2330
+      "duration": 104
     },
     {
       "spec": "cypress/integration/rendering/block.spec.js",
-      "duration": 11156
+      "duration": 16230
     },
     {
       "spec": "cypress/integration/rendering/c4.spec.js",
-      "duration": 3418
+      "duration": 5231
+    },
+    {
+      "spec": "cypress/integration/rendering/classDiagram-elk-v3.spec.js",
+      "duration": 38113
+    },
+    {
+      "spec": "cypress/integration/rendering/classDiagram-handDrawn-v3.spec.js",
+      "duration": 36423
     },
     {
       "spec": "cypress/integration/rendering/classDiagram-v2.spec.js",
-      "duration": 14866
+      "duration": 22509
+    },
+    {
+      "spec": "cypress/integration/rendering/classDiagram-v3.spec.js",
+      "duration": 34933
     },
     {
       "spec": "cypress/integration/rendering/classDiagram.spec.js",
-      "duration": 9894
+      "duration": 14681
     },
     {
       "spec": "cypress/integration/rendering/conf-and-directives.spec.js",
-      "duration": 5778
+      "duration": 8877
     },
     {
       "spec": "cypress/integration/rendering/current.spec.js",
-      "duration": 1690
+      "duration": 2517
+    },
+    {
+      "spec": "cypress/integration/rendering/erDiagram-unified.spec.js",
+      "duration": 81226
     },
     {
       "spec": "cypress/integration/rendering/erDiagram.spec.js",
-      "duration": 9144
+      "duration": 14211
     },
     {
       "spec": "cypress/integration/rendering/errorDiagram.spec.js",
-      "duration": 1951
+      "duration": 3355
     },
     {
       "spec": "cypress/integration/rendering/flowchart-elk.spec.js",
-      "duration": 2196
+      "duration": 38857
     },
     {
       "spec": "cypress/integration/rendering/flowchart-handDrawn.spec.js",
-      "duration": 21029
+      "duration": 28570
+    },
+    {
+      "spec": "cypress/integration/rendering/flowchart-icon.spec.js",
+      "duration": 6902
     },
     {
       "spec": "cypress/integration/rendering/flowchart-shape-alias.spec.ts",
-      "duration": 16087
+      "duration": 23075
     },
     {
       "spec": "cypress/integration/rendering/flowchart-v2.spec.js",
-      "duration": 27465
+      "duration": 40514
     },
     {
       "spec": "cypress/integration/rendering/flowchart.spec.js",
-      "duration": 20035
+      "duration": 28611
     },
     {
       "spec": "cypress/integration/rendering/gantt.spec.js",
-      "duration": 11366
+      "duration": 16605
     },
     {
       "spec": "cypress/integration/rendering/gitGraph.spec.js",
-      "duration": 34025
+      "duration": 47636
     },
     {
       "spec": "cypress/integration/rendering/iconShape.spec.ts",
-      "duration": 185902
+      "duration": 262219
     },
     {
       "spec": "cypress/integration/rendering/imageShape.spec.ts",
-      "duration": 41631
+      "duration": 54111
     },
     {
       "spec": "cypress/integration/rendering/info.spec.ts",
-      "duration": 1736
+      "duration": 3006
     },
     {
       "spec": "cypress/integration/rendering/journey.spec.js",
-      "duration": 2247
+      "duration": 6858
+    },
+    {
+      "spec": "cypress/integration/rendering/kanban.spec.ts",
+      "duration": 7281
     },
     {
       "spec": "cypress/integration/rendering/katex.spec.js",
-      "duration": 2144
+      "duration": 3579
     },
     {
       "spec": "cypress/integration/rendering/marker_unique_id.spec.js",
-      "duration": 1646
+      "duration": 2448
     },
     {
       "spec": "cypress/integration/rendering/mindmap.spec.ts",
-      "duration": 6406
+      "duration": 10618
     },
     {
       "spec": "cypress/integration/rendering/newShapes.spec.ts",
-      "duration": 107219
+      "duration": 140874
+    },
+    {
+      "spec": "cypress/integration/rendering/oldShapes.spec.ts",
+      "duration": 108015
+    },
+    {
+      "spec": "cypress/integration/rendering/packet.spec.ts",
+      "duration": 4241
+    },
+    {
+      "spec": "cypress/integration/rendering/pie.spec.ts",
+      "duration": 5645
+    },
+    {
+      "spec": "cypress/integration/rendering/quadrantChart.spec.js",
+      "duration": 8524
+    },
+    {
+      "spec": "cypress/integration/rendering/radar.spec.js",
+      "duration": 5203
+    },
+    {
+      "spec": "cypress/integration/rendering/requirement.spec.js",
+      "duration": 2635
+    },
+    {
+      "spec": "cypress/integration/rendering/requirementDiagram-unified.spec.js",
+      "duration": 50512
+    },
+    {
+      "spec": "cypress/integration/rendering/sankey.spec.ts",
+      "duration": 6692
+    },
+    {
+      "spec": "cypress/integration/rendering/sequencediagram.spec.js",
+      "duration": 34559
+    },
+    {
+      "spec": "cypress/integration/rendering/stateDiagram-v2.spec.js",
+      "duration": 24421
     },
     {
       "spec": "cypress/integration/rendering/stateDiagram.spec.js",
-      "duration": 15834
+      "duration": 15316
     },
     {
       "spec": "cypress/integration/rendering/theme.spec.js",
-      "duration": 33240
+      "duration": 28240
     },
     {
       "spec": "cypress/integration/rendering/timeline.spec.ts",
-      "duration": 7122
+      "duration": 6808
     },
     {
       "spec": "cypress/integration/rendering/xyChart.spec.js",
-      "duration": 11127
+      "duration": 19359
     },
     {
       "spec": "cypress/integration/rendering/zenuml.spec.js",
-      "duration": 2391
+      "duration": 3164
     }
   ]
 }

debug-edge-parsing.js

@@ -0,0 +1,31 @@
+import { FlowDB } from './packages/mermaid/src/diagrams/flowchart/flowDb.ts';
+import flow from './packages/mermaid/src/diagrams/flowchart/parser/flowParserAdapter.ts';
+
+// Set up the test environment
+flow.yy = new FlowDB();
+flow.yy.clear();
+
+console.log('=== Testing basic edge parsing ===');
+console.log('Input: "graph TD;A-->B;"');
+
+try {
+  const result = flow.parse('graph TD;A-->B;');
+  console.log('Parse result:', result);
+
+  const vertices = flow.yy.getVertices();
+  const edges = flow.yy.getEdges();
+
+  console.log('Vertices:', vertices);
+  console.log('Vertices size:', vertices.size);
+  console.log('Vertices keys:', Array.from(vertices.keys()));
+
+  console.log('Edges:', edges);
+  console.log('Edges length:', edges.length);
+
+  // Check specific vertices
+  console.log('Vertex A:', vertices.get('A'));
+  console.log('Vertex B:', vertices.get('B'));
+} catch (error) {
+  console.error('Parse error:', error);
+  console.error('Error stack:', error.stack);
+}

debug-interpolate.js

@@ -0,0 +1,27 @@
+// Debug script for interpolate functionality
+import { FlowDB } from './packages/mermaid/src/diagrams/flowchart/flowDb.js';
+import flow from './packages/mermaid/src/diagrams/flowchart/parser/flowParserAdapter.js';
+
+// Set up test
+flow.yy = new FlowDB();
+flow.yy.clear();
+
+console.log('Testing interpolate functionality...');
+
+try {
+  const input = 'graph TD\nA-->B\nlinkStyle default interpolate basis';
+  console.log('Input:', input);
+  
+  const result = flow.parse(input);
+  console.log('Parse result:', result);
+  
+  const edges = flow.yy.getEdges();
+  console.log('Edges:', edges);
+  console.log('edges.defaultInterpolate:', edges.defaultInterpolate);
+  
+  // Check if updateLinkInterpolate method exists
+  console.log('updateLinkInterpolate method exists:', typeof flow.yy.updateLinkInterpolate);
+  
+} catch (error) {
+  console.error('Error:', error);
+}

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/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
+      rel="stylesheet"
+    />
+
+    <style>
+      .recursive-500 {
+        font-family: 'Recursive', serif;
+        font-optical-sizing: auto;
+        font-weight: 500;
+        font-style: normal;
+        font-variation-settings:
+          'slnt' 0,
+          'CASL' 0,
+          'CRSV' 0.5,
+          'MONO' 0;
+      }
+      body {
+        /* background: rgb(221, 208, 208); */
+        /* background: #333; */
+        /* font-family: 'Arial'; */
+        font-family: 'Recursive', serif;
+        font-optical-sizing: auto;
+        font-weight: 500;
+        font-style: normal;
+        font-variation-settings:
+          'slnt' 0,
+          'CASL' 0,
+          'CRSV' 0.5,
+          'MONO' 0;
+        /* color: white; */
+        /* font-size: 18px !important; */
+      }
+      .gridify.tiny {
+        background-image:
+          linear-gradient(transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px),
+          linear-gradient(90deg, transparent 11px, rgba(220, 220, 200, 0.8) 12px, transparent 12px);
+        background-size:
+          100% 12px,
+          12px 100%;
+      }
+
+      .gridify.dots {
+        background-image: radial-gradient(
+          circle at center,
+          rgba(220, 220, 200, 0.8) 1px,
+          transparent 1px
+        );
+        background-size: 24px 24px;
+      }
+
+      h1 {
+        color: grey;
+      }
+
+      .mermaid2 {
+        display: none;
+      }
+
+      .mermaid svg {
+        font-size: 16px !important;
+        font-family: 'Recursive', serif;
+        font-optical-sizing: auto;
+        font-weight: 500;
+        font-style: normal;
+        font-variation-settings:
+          'slnt' 0,
+          'CASL' 0,
+          'CRSV' 0.5,
+          'MONO' 0;
+      }
+
+      pre {
+        width: 100%;
+        /*box-shadow: 4px 4px 0px 0px #0000000F;*/
+      }
+    </style>
+  </head>
+
+  <body class="gridify dots">
+    <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/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/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

@@ -497,14 +497,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/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:278](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L278)

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/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/) ✅
@@ -114,6 +115,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](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/)
@@ -267,7 +270,5 @@ 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)
 
 <!--- cspell:ignore Blazorade HueHive --->

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:
 
 ```

docs/news/blog.md

@@ -16,7 +16,7 @@ Discover how the latest update to the Mermaid Visual Editor transforms class dia
 
 1/16/2025 • 6 mins
 
-Entity relationship (ER) diagrams are a cornerstone of database design, providing a blueprint for modeling your database and enabling clear communication across functions in your organization. As data volumes continue to soar and as AI models demand clean, well-organized data, ER diagrams have become more vital than ever. You can now quickly build ER diagrams with Mermaid Chart, Mermaid AI to Kickstart and fine tune your diagrams . From e-commerce payment flows to social media interactions and healthcare systems, ER diagrams are powering modern, data-driven environments.
+Entity relationship (ER) diagrams are a cornerstone of database design, providing a blueprint for modeling your database and enabling clear communication across functions in your organization. As data volumes continue to soar and as AI models demand clean, well-organized data, ER diagrams have become more vital than ever. You can now quickly build ER diagrams with Mermaid Chart, Mermaid AI to kick-start and fine tune your diagrams . From e-commerce payment flows to social media interactions and healthcare systems, ER diagrams are powering modern, data-driven environments.
 
 ## [Mermaid Whiteboard: Visual Collaboration Made Universal](https://docs.mermaidchart.com/blog/posts/mermaid-whiteboard-visual-collaboration-made-universal)
 

docs/syntax/architecture.md

@@ -194,7 +194,7 @@ architecture-beta
 ## Icons
 
 By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
-Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps [here](../config/icons.md).
+Users can use any of the 200,000+ icons available in iconify.design, or [add custom icons](../config/icons.md).
 
 After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.
 

docs/syntax/block.md

@@ -567,6 +567,30 @@ block-beta
   style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
 ```
 
+### Class Styling
+
+Mermaid enables applying styling to classes, which could make styling easier if you want to apply a certain set of styles to multiple elements, as you could just link those elements to a class.
+
+#### Example - Styling a Single Class
+
+```mermaid-example
+block-beta
+  A space B
+  A-->B
+  classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
+  class A blue
+  style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
+```mermaid
+block-beta
+  A space B
+  A-->B
+  classDef blue fill:#6e6ce6,stroke:#333,stroke-width:4px;
+  class A blue
+  style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
 In this example, a class named 'blue' is defined and applied to block 'A', while block 'B' receives individual styling. This demonstrates the flexibility of Mermaid in applying both shared and unique styles within the same diagram.
 
 The ability to style blocks individually or through classes provides a powerful tool for enhancing the visual impact and clarity of block diagrams. Whether emphasizing certain elements or maintaining a cohesive design across the diagram, these styling capabilities are central to effective diagramming. The next sections will present practical examples and use cases, followed by tips for troubleshooting common issues.
@@ -663,7 +687,7 @@ block-beta
 ```
 
 **Correction**:
-Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundaments for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
+Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundamentals for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
 
 ```mermaid-example
 block-beta

docs/syntax/c4.md

@@ -399,7 +399,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
     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 to the internet banking functionality to customers via their mobile mobile device.")
+    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to 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.")
 
@@ -439,7 +439,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
     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 to the internet banking functionality to customers via their mobile mobile device.")
+    Container(ma, "Mobile App", "Xamarin", "Provides a limited subset to 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.")
 

docs/syntax/classDiagram.md

@@ -545,6 +545,38 @@ It is possible to annotate classes with markers to provide additional metadata a
 
 Annotations are defined within the opening `<<` and closing `>>`. There are two ways to add an annotation to a class, and either way the output will be same:
 
+> **Tip:**\
+> In Mermaid class diagrams, annotations like `<<interface>>` can be attached in two ways:
+>
+> - **Inline with the class definition** (Recommended for consistency):
+>
+>   ```mermaid-example
+>   classDiagram
+>     class Shape <<interface>>
+>   ```
+>
+>   ```mermaid
+>   classDiagram
+>     class Shape <<interface>>
+>   ```
+>
+> - **Separate line after the class definition**:
+>
+>   ```mermaid-example
+>   classDiagram
+>     class Shape
+>     <<interface>> Shape
+>   ```
+>
+>   ```mermaid
+>   classDiagram
+>     class Shape
+>     <<interface>> Shape
+>   ```
+>
+> Both methods are fully supported and produce identical diagrams.\
+> However, it is recommended to use the **inline style** for better readability and consistent formatting across diagrams.
+
 - In a **_separate line_** after a class is defined:
 
 ```mermaid-example
@@ -802,7 +834,7 @@ Beginner's tip—a full example using interactive links in an HTML page:
       +run()
       }
 
-      callback Duck callback "Tooltip"
+      callback Duck "callback" "Tooltip"
       link Zebra "https://www.github.com" "This is a link"
   </pre>
 

docs/syntax/entityRelationshipDiagram.md

@@ -171,7 +171,7 @@ Cardinality is a property that describes how many elements of another entity can
 
 ### Identification
 
-Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
+Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question cannot have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
 
 | Value |     Alias for     |
 | :---: | :---------------: |
@@ -625,17 +625,43 @@ erDiagram
 
 ## Configuration
 
-### Renderer
+### Layout
 
-The layout of the diagram is done with the renderer. The default renderer is dagre.
+The layout of the diagram is handled by [`render()`](../config/setup/mermaid/interfaces/Mermaid.md#render). The default layout is dagre.
 
-You can opt to use an alternate renderer named elk by editing the configuration. The elk renderer is better for larger and/or more complex diagrams.
+For larger or more-complex diagrams, you can alternatively apply the ELK (Eclipse Layout Kernel) layout using your YAML frontmatter's `config`. For more information, see [Customizing ELK Layout](../intro/syntax-reference.md#customizing-elk-layout).
 
+```yaml
+---
+config:
+  layout: elk
+---
 ```
+
+Your Mermaid code should be similar to the following:
+
+```mermaid-example
 ---
-    config:
-        layout: elk
+title: Order example
+config:
+    layout: elk
 ---
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+```
+
+```mermaid
+---
+title: Order example
+config:
+    layout: elk
+---
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
 ```
 
 > **Note**

docs/syntax/flowchart.md

@@ -83,7 +83,11 @@ flowchart LR
 Use double quotes and backticks "\` text \`" to enclose the markdown text.
 
 ```mermaid-example
-%%{init: {"flowchart": {"htmlLabels": false}} }%%
+---
+config:
+  flowchart:
+    htmlLabels: false
+---
 flowchart LR
     markdown["`This **is** _Markdown_`"]
     newLines["`Line1
@@ -93,7 +97,11 @@ flowchart LR
 ```
 
 ```mermaid
-%%{init: {"flowchart": {"htmlLabels": false}} }%%
+---
+config:
+  flowchart:
+    htmlLabels: false
+---
 flowchart LR
     markdown["`This **is** _Markdown_`"]
     newLines["`Line1
@@ -932,7 +940,7 @@ Mermaid also introduces 2 special shapes to enhance your flowcharts: **icon** an
 
 ### Icon Shape
 
-You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions provided [here](../config/icons.md). The syntax for defining an icon shape is as follows:
+You can use the `icon` shape to include an icon in your flowchart. To use icons, you need to register the icon pack first. Follow the instructions to [add custom icons](../config/icons.md). The syntax for defining an icon shape is as follows:
 
 ```mermaid-example
 flowchart TD
@@ -944,7 +952,7 @@ flowchart TD
     A@{ icon: "fa:user", form: "square", label: "User Icon", pos: "t", h: 60 }
 ```
 
-### Parameters
+#### Parameters
 
 - **icon**: The name of the icon from the registered icon pack.
 - **form**: Specifies the background shape of the icon. If not defined there will be no background to icon. Options include:
@@ -961,17 +969,12 @@ flowchart TD
 
 You can use the `image` shape to include an image in your flowchart. The syntax for defining an image shape is as follows:
 
-```mermaid-example
+```
 flowchart TD
     A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
 ```
 
-```mermaid
-flowchart TD
-    A@{ img: "https://example.com/image.png", label: "Image Label", pos: "t", w: 60, h: 60, constraint: "off" }
-```
-
-### Parameters
+#### Parameters
 
 - **img**: The URL of the image to be displayed.
 - **label**: The text label associated with the image. This can be any string. If not defined, no label will be displayed.
@@ -1193,12 +1196,12 @@ To give an edge an ID, prepend the edge syntax with the ID followed by an `@` ch
 
 ```mermaid-example
 flowchart LR
-  A e1@–> B
+  A e1@--> B
 ```
 
 ```mermaid
 flowchart LR
-  A e1@–> B
+  A e1@--> B
 ```
 
 In this example, `e1` is the ID of the edge connecting `A` to `B`. You can then use this ID in later definitions or style statements, just like with nodes.
@@ -1229,13 +1232,13 @@ In the initial version, two animation speeds are supported: `fast` and `slow`. S
 
 ```mermaid-example
 flowchart LR
-  A e1@–> B
+  A e1@--> B
   e1@{ animation: fast }
 ```
 
 ```mermaid
 flowchart LR
-  A e1@–> B
+  A e1@--> B
   e1@{ animation: fast }
 ```
 
@@ -1247,14 +1250,14 @@ You can also animate edges by assigning a class to them and then defining animat
 
 ```mermaid-example
 flowchart LR
-  A e1@–> B
+  A e1@--> B
   classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
   class e1 animate
 ```
 
 ```mermaid
 flowchart LR
-  A e1@–> B
+  A e1@--> B
   classDef animate stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;
   class e1 animate
 ```
@@ -1592,7 +1595,11 @@ flowchart LR
 The "Markdown Strings" feature enhances flowcharts and mind maps by offering a more versatile string type, which supports text formatting options such as bold and italics, and automatically wraps text within labels.
 
 ```mermaid-example
-%%{init: {"flowchart": {"htmlLabels": false}} }%%
+---
+config:
+  flowchart:
+    htmlLabels: false
+---
 flowchart LR
 subgraph "One"
   a("`The **cat**
@@ -1605,7 +1612,11 @@ end
 ```
 
 ```mermaid
-%%{init: {"flowchart": {"htmlLabels": false}} }%%
+---
+config:
+  flowchart:
+    htmlLabels: false
+---
 flowchart LR
 subgraph "One"
   a("`The **cat**
@@ -1936,6 +1947,19 @@ flowchart TD
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
+There are two ways to display these FontAwesome icons:
+
+### Register FontAwesome icon packs (v\<MERMAID_RELEASE_VERSION>+)
+
+You can register your own FontAwesome icon pack following the ["Registering icon packs" instructions](../config/icons.md).
+
+Supported prefixes: `fa`, `fab`, `fas`, `far`, `fal`, `fad`.
+
+> **Note**
+> Note that it will fall back to FontAwesome CSS if FontAwesome packs are not registered.
+
+### Register FontAwesome CSS
+
 Mermaid supports Font Awesome if the CSS is included on the website.
 Mermaid does not have any restriction on the version of Font Awesome that can be used.
 
@@ -2016,7 +2040,9 @@ The _elk_ renderer is an experimental feature.
 You can change the renderer to elk by adding this directive:
 
 ```
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+config:
+  flowchart:
+    defaultRenderer: "elk"
 ```
 
 > **Note**

docs/syntax/gantt.md

@@ -229,6 +229,30 @@ gantt
     Final milestone : milestone, m2, 18:08, 4m
 ```
 
+### Vertical Markers
+
+The `vert` keyword lets you add vertical lines to your Gantt chart, making it easy to highlight important dates like deadlines, events, or checkpoints. These markers extend across the entire chart and are positioned based on the date you provide. Unlike milestones, vertical markers don’t take up a row. They’re purely visual reference points that help break up the timeline and make important moments easier to spot.
+
+```mermaid-example
+gantt
+    dateFormat HH:mm
+    axisFormat %H:%M
+    Initial vert : vert, v1, 17:30, 2m
+    Task A : 3m
+    Task B : 8m
+    Final vert : vert, v2, 17:58, 4m
+```
+
+```mermaid
+gantt
+    dateFormat HH:mm
+    axisFormat %H:%M
+    Initial vert : vert, v1, 17:30, 2m
+    Task A : 3m
+    Task B : 8m
+    Final vert : vert, v2, 17:58, 4m
+```
+
 ## Setting dates
 
 `dateFormat` defines the format of the date **input** of your gantt elements. How these dates are represented in the rendered chart **output** are defined by `axisFormat`.
@@ -526,7 +550,7 @@ click taskId href URL
 - taskId is the id of the task
 - callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified.
 
-Beginner's tip—a full example using interactive links in an html context:
+Beginner's tip—a full example using interactive links in an HTML context:
 
 ```html
 <body>
@@ -598,4 +622,86 @@ gantt
     5    : 0, 5
 ```
 
+### Timeline (with comments, CSS, config in frontmatter)
+
+```mermaid-example
+---
+    # Frontmatter config, YAML comments
+    title: Ignored if specified in chart
+    displayMode: compact     #gantt specific setting but works at this level too
+    config:
+#        theme: forest
+#        themeCSS: " #item36 { fill: CadetBlue } "
+        themeCSS: " // YAML supports multiline strings using a newline markers: \n
+            #item36 { fill: CadetBlue }       \n
+
+            // Custom marker workaround CSS from forum (below)    \n
+            rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; }   \n
+            text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
+        "
+        gantt:
+            useWidth: 400
+            rightPadding: 0
+            topAxis: true  #false
+            numberSectionStyles: 2
+---
+gantt
+    title Timeline - Gantt Sampler
+    dateFormat YYYY
+    axisFormat %y
+    %% this next line doesn't recognise 'decade' or 'year', but will silently ignore
+    tickInterval 1decade
+
+    section Issue19062
+    71   :            item71, 1900, 1930
+    section Issue19401
+    36   :            item36, 1913, 1935
+    section Issue1300
+    94   :            item94, 1910, 1915
+    5    :            item5,  1920, 1925
+    0    : milestone, item0,  1918, 1s
+    9    : vert,              1906, 1s   %% not yet official
+    64   : workaround,        1923, 1s   %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250
+```
+
+```mermaid
+---
+    # Frontmatter config, YAML comments
+    title: Ignored if specified in chart
+    displayMode: compact     #gantt specific setting but works at this level too
+    config:
+#        theme: forest
+#        themeCSS: " #item36 { fill: CadetBlue } "
+        themeCSS: " // YAML supports multiline strings using a newline markers: \n
+            #item36 { fill: CadetBlue }       \n
+
+            // Custom marker workaround CSS from forum (below)    \n
+            rect[id^=workaround] { height: calc(100% - 50px) ; transform: translate(9px, 25px); y: 0; width: 1.5px; stroke: none; fill: red; }   \n
+            text[id^=workaround] { fill: red; y: 100%; font-size: 15px;}
+        "
+        gantt:
+            useWidth: 400
+            rightPadding: 0
+            topAxis: true  #false
+            numberSectionStyles: 2
+---
+gantt
+    title Timeline - Gantt Sampler
+    dateFormat YYYY
+    axisFormat %y
+    %% this next line doesn't recognise 'decade' or 'year', but will silently ignore
+    tickInterval 1decade
+
+    section Issue19062
+    71   :            item71, 1900, 1930
+    section Issue19401
+    36   :            item36, 1913, 1935
+    section Issue1300
+    94   :            item94, 1910, 1915
+    5    :            item5,  1920, 1925
+    0    : milestone, item0,  1918, 1s
+    9    : vert,              1906, 1s   %% not yet official
+    64   : workaround,        1923, 1s   %% custom CSS object https://github.com/mermaid-js/mermaid/issues/3250
+```
+
 <!--- cspell:ignore isadded --->

docs/syntax/gitgraph.md

@@ -4,7 +4,7 @@
 >
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/gitgraph.md](../../packages/mermaid/src/docs/syntax/gitgraph.md).
 
-# Gitgraph Diagrams
+# GitGraph Diagrams
 
 > A Git Graph is a pictorial representation of git commits and git actions(commands) on various branches.
 
@@ -413,7 +413,7 @@ Let see an example:
         commit id:"C"
 ```
 
-## Gitgraph specific configuration options
+## GitGraph specific configuration options
 
 In Mermaid, you have the option to configure the gitgraph diagram. You can configure the following options:
 
@@ -432,7 +432,13 @@ Sometimes you may want to hide the branch names and lines from the diagram. You
 Usage example:
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: false
+---
       gitGraph
         commit
         branch hotfix
@@ -478,7 +484,13 @@ Usage example:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: false
+---
       gitGraph
         commit
         branch hotfix
@@ -534,7 +546,13 @@ You can change the layout of the commit labels by using the `rotateCommitLabel`
 Usage example: Rotated commit labels
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    rotateCommitLabel: true
+---
 gitGraph
   commit id: "feat(api): ..."
   commit id: "a"
@@ -553,7 +571,13 @@ gitGraph
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    rotateCommitLabel: true
+---
 gitGraph
   commit id: "feat(api): ..."
   commit id: "a"
@@ -574,7 +598,13 @@ gitGraph
 Usage example: Horizontal commit labels
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': false}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    rotateCommitLabel: false
+---
 gitGraph
   commit id: "feat(api): ..."
   commit id: "a"
@@ -593,7 +623,13 @@ gitGraph
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': false}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    rotateCommitLabel: false
+---
 gitGraph
   commit id: "feat(api): ..."
   commit id: "a"
@@ -618,7 +654,14 @@ Sometimes you may want to hide the commit labels from the diagram. You can do th
 Usage example:
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: false
+    showCommitLabel: false
+---
       gitGraph
         commit
         branch hotfix
@@ -664,7 +707,14 @@ Usage example:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': false,'showCommitLabel': false}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: false
+    showCommitLabel: false
+---
       gitGraph
         commit
         branch hotfix
@@ -716,7 +766,15 @@ Sometimes you may want to customize the name of the main/default branch. You can
 Usage example:
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: true
+    showCommitLabel: true
+    mainBranchName: 'MetroLine1'
+---
       gitGraph
         commit id:"NewYork"
         commit id:"Dallas"
@@ -740,7 +798,15 @@ Usage example:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: true
+    showCommitLabel: true
+    mainBranchName: 'MetroLine1'
+---
       gitGraph
         commit id:"NewYork"
         commit id:"Dallas"
@@ -782,7 +848,14 @@ To fully control the order of all the branches, you must define `order` for all
 Usage example:
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: true
+    showCommitLabel: true
+---
       gitGraph
       commit
       branch test1 order: 3
@@ -792,7 +865,14 @@ Usage example:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: true
+    showCommitLabel: true
+---
       gitGraph
       commit
       branch test1 order: 3
@@ -806,7 +886,15 @@ Look at the diagram, all the branches are following the order defined.
 Usage example:
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchOrder': 2}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: true
+    showCommitLabel: true
+    mainBranchOrder: 2
+---
       gitGraph
       commit
       branch test1 order: 3
@@ -817,7 +905,15 @@ Usage example:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchOrder': 2}} }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  gitGraph:
+    showBranches: true
+    showCommitLabel: true
+    mainBranchOrder: 2
+---
       gitGraph
       commit
       branch test1 order: 3
@@ -1030,7 +1126,7 @@ gitGraph:
 
 ## Themes
 
-Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md).
+Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about [theming your diagram](../config/theming.md).
 
 The following are the different pre-defined theme options:
 
@@ -1046,7 +1142,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Base Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+---
       gitGraph
         commit
         branch hotfix
@@ -1092,7 +1192,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+---
       gitGraph
         commit
         branch hotfix
@@ -1140,7 +1244,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Forest Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'forest'
+---
       gitGraph
         commit
         branch hotfix
@@ -1186,7 +1294,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'forest'
+---
       gitGraph
         commit
         branch hotfix
@@ -1234,7 +1346,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Default Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+---
       gitGraph
         commit type:HIGHLIGHT
         branch hotfix
@@ -1280,7 +1396,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+---
       gitGraph
         commit type:HIGHLIGHT
         branch hotfix
@@ -1328,7 +1448,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Dark Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'dark'
+---
       gitGraph
         commit
         branch hotfix
@@ -1374,7 +1498,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'dark'
+---
       gitGraph
         commit
         branch hotfix
@@ -1422,7 +1550,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Neutral Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'neutral'
+---
       gitGraph
         commit
         branch hotfix
@@ -1468,7 +1600,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'neutral'
+---
       gitGraph
         commit
         branch hotfix
@@ -1522,7 +1658,11 @@ For understanding let us take a sample diagram with theme `default`, the default
 See how the default theme is used to set the colors for the branches:
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+---
        gitGraph
        commit
        branch develop
@@ -1538,7 +1678,11 @@ See how the default theme is used to set the colors for the branches:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+---
        gitGraph
        commit
        branch develop
@@ -1569,16 +1713,20 @@ Example:
 Now let's override the default values for the `git0` to `git3` variables:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'git0': '#ff0000',
-              'git1': '#00ff00',
-              'git2': '#0000ff',
-              'git3': '#ff00ff',
-              'git4': '#00ffff',
-              'git5': '#ffff00',
-              'git6': '#ff00ff',
-              'git7': '#00ffff'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+      'git0': '#ff0000'
+      'git1': '#00ff00'
+      'git2': '#0000ff'
+      'git3': '#ff00ff'
+      'git4': '#00ffff'
+      'git5': '#ffff00'
+      'git6': '#ff00ff'
+      'git7': '#00ffff'
+---
        gitGraph
        commit
        branch develop
@@ -1595,16 +1743,20 @@ Now let's override the default values for the `git0` to `git3` variables:
 ```
 
 ```mermaid
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'git0': '#ff0000',
-              'git1': '#00ff00',
-              'git2': '#0000ff',
-              'git3': '#ff00ff',
-              'git4': '#00ffff',
-              'git5': '#ffff00',
-              'git6': '#ff00ff',
-              'git7': '#00ffff'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+      'git0': '#ff0000'
+      'git1': '#00ff00'
+      'git2': '#0000ff'
+      'git3': '#ff00ff'
+      'git4': '#00ffff'
+      'git5': '#ffff00'
+      'git6': '#ff00ff'
+      'git7': '#00ffff'
+---
        gitGraph
        commit
        branch develop
@@ -1631,18 +1783,22 @@ Lets see how the default theme is used to set the colors for the branch labels:
 Now let's override the default values for the `gitBranchLabel0` to `gitBranchLabel2` variables:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-        'gitBranchLabel0': '#ffffff',
-        'gitBranchLabel1': '#ffffff',
-        'gitBranchLabel2': '#ffffff',
-        'gitBranchLabel3': '#ffffff',
-        'gitBranchLabel4': '#ffffff',
-        'gitBranchLabel5': '#ffffff',
-        'gitBranchLabel6': '#ffffff',
-        'gitBranchLabel7': '#ffffff',
-        'gitBranchLabel8': '#ffffff',
-        'gitBranchLabel9': '#ffffff'
-  } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    'gitBranchLabel0': '#ffffff'
+    'gitBranchLabel1': '#ffffff'
+    'gitBranchLabel2': '#ffffff'
+    'gitBranchLabel3': '#ffffff'
+    'gitBranchLabel4': '#ffffff'
+    'gitBranchLabel5': '#ffffff'
+    'gitBranchLabel6': '#ffffff'
+    'gitBranchLabel7': '#ffffff'
+    'gitBranchLabel8': '#ffffff'
+    'gitBranchLabel9': '#ffffff'
+---
   gitGraph
     checkout main
     branch branch1
@@ -1659,18 +1815,22 @@ Now let's override the default values for the `gitBranchLabel0` to `gitBranchLab
 ```
 
 ```mermaid
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-        'gitBranchLabel0': '#ffffff',
-        'gitBranchLabel1': '#ffffff',
-        'gitBranchLabel2': '#ffffff',
-        'gitBranchLabel3': '#ffffff',
-        'gitBranchLabel4': '#ffffff',
-        'gitBranchLabel5': '#ffffff',
-        'gitBranchLabel6': '#ffffff',
-        'gitBranchLabel7': '#ffffff',
-        'gitBranchLabel8': '#ffffff',
-        'gitBranchLabel9': '#ffffff'
-  } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    'gitBranchLabel0': '#ffffff'
+    'gitBranchLabel1': '#ffffff'
+    'gitBranchLabel2': '#ffffff'
+    'gitBranchLabel3': '#ffffff'
+    'gitBranchLabel4': '#ffffff'
+    'gitBranchLabel5': '#ffffff'
+    'gitBranchLabel6': '#ffffff'
+    'gitBranchLabel7': '#ffffff'
+    'gitBranchLabel8': '#ffffff'
+    'gitBranchLabel9': '#ffffff'
+---
   gitGraph
     checkout main
     branch branch1
@@ -1696,10 +1856,14 @@ Example:
 Now let's override the default values for the `commitLabelColor` to `commitLabelBackground` variables:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'commitLabelColor': '#ff0000',
-              'commitLabelBackground': '#00ff00'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    commitLabelColor: '#ff0000'
+    commitLabelBackground: '#00ff00'
+---
        gitGraph
        commit
        branch develop
@@ -1716,10 +1880,14 @@ Now let's override the default values for the `commitLabelColor` to `commitLabel
 ```
 
 ```mermaid
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'commitLabelColor': '#ff0000',
-              'commitLabelBackground': '#00ff00'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    commitLabelColor: '#ff0000'
+    commitLabelBackground: '#00ff00'
+---
        gitGraph
        commit
        branch develop
@@ -1745,11 +1913,15 @@ Example:
 Now let's override the default values for the `commitLabelFontSize` variable:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'commitLabelColor': '#ff0000',
-              'commitLabelBackground': '#00ff00',
-              'commitLabelFontSize': '16px'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    commitLabelColor: '#ff0000'
+    commitLabelBackground: '#00ff00'
+    commitLabelFontSize: '16px'
+---
        gitGraph
        commit
        branch develop
@@ -1766,11 +1938,15 @@ Now let's override the default values for the `commitLabelFontSize` variable:
 ```
 
 ```mermaid
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'commitLabelColor': '#ff0000',
-              'commitLabelBackground': '#00ff00',
-              'commitLabelFontSize': '16px'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    commitLabelColor: '#ff0000'
+    commitLabelBackground: '#00ff00'
+    commitLabelFontSize: '16px'
+---
        gitGraph
        commit
        branch develop
@@ -1796,11 +1972,15 @@ Example:
 Now let's override the default values for the `tagLabelFontSize` variable:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'commitLabelColor': '#ff0000',
-              'commitLabelBackground': '#00ff00',
-              'tagLabelFontSize': '16px'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    commitLabelColor: '#ff0000'
+    commitLabelBackground: '#00ff00'
+    tagLabelFontSize: '16px'
+---
        gitGraph
        commit
        branch develop
@@ -1817,11 +1997,15 @@ Now let's override the default values for the `tagLabelFontSize` variable:
 ```
 
 ```mermaid
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'commitLabelColor': '#ff0000',
-              'commitLabelBackground': '#00ff00',
-              'tagLabelFontSize': '16px'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    commitLabelColor: '#ff0000'
+    commitLabelBackground: '#00ff00'
+    tagLabelFontSize: '16px'
+---
        gitGraph
        commit
        branch develop
@@ -1846,11 +2030,15 @@ Example:
 Now let's override the default values for the `tagLabelColor`, `tagLabelBackground` and to `tagLabelBorder` variables:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'tagLabelColor': '#ff0000',
-              'tagLabelBackground': '#00ff00',
-              'tagLabelBorder': '#0000ff'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    tagLabelColor: '#ff0000'
+    tagLabelBackground: '#00ff00'
+    tagLabelBorder: '#0000ff'
+---
        gitGraph
        commit
        branch develop
@@ -1867,11 +2055,15 @@ Now let's override the default values for the `tagLabelColor`, `tagLabelBackgrou
 ```
 
 ```mermaid
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'tagLabelColor': '#ff0000',
-              'tagLabelBackground': '#00ff00',
-              'tagLabelBorder': '#0000ff'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    tagLabelColor: '#ff0000'
+    tagLabelBackground: '#00ff00'
+    tagLabelBorder: '#0000ff'
+---
        gitGraph
        commit
        branch develop
@@ -1898,9 +2090,13 @@ Example:
 Now let's override the default values for the `git0` to `git3` variables:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'gitInv0': '#ff0000'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    'gitInv0': '#ff0000'
+---
        gitGraph
        commit
        branch develop
@@ -1917,9 +2113,13 @@ Now let's override the default values for the `git0` to `git3` variables:
 ```
 
 ```mermaid
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'gitInv0': '#ff0000'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    'gitInv0': '#ff0000'
+---
        gitGraph
        commit
        branch develop

docs/syntax/kanban.md

@@ -86,7 +86,7 @@ todo[Todo]
 
 ## Configuration Options
 
-You can customize the Kanban diagram using a configuration block at the beginning of your markdown file. This is useful for setting global settings like a base URL for tickets. Currently there is one configuration option for kanban diagrams `ticketBaseUrl`. This can be set as in the the following example:
+You can customize the Kanban diagram using a configuration block at the beginning of your markdown file. This is useful for setting global settings like a base URL for tickets. Currently there is one configuration option for kanban diagrams `ticketBaseUrl`. This can be set as in the following example:
 
 ```yaml
 ---
@@ -113,7 +113,7 @@ kanban
     [Create Documentation]
     docs[Create Blog about the new diagram]
   [In progress]
-    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
+    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]
@@ -139,7 +139,7 @@ kanban
     [Create Documentation]
     docs[Create Blog about the new diagram]
   [In progress]
-    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
+    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]

docs/syntax/mindmap.md

@@ -240,7 +240,7 @@ mindmap
           C
 ```
 
-This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.
+This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is neither a child of `B` with a higher indentation nor does it have the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as siblings.
 
 ```mermaid-example
 mindmap
@@ -308,7 +308,7 @@ From version 9.4.0 you can simplify this code to:
 </script>
 ```
 
-You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
+You can also refer the [implementation in the live editor](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
 
 <!---
 cspell:locale en,en-gb

docs/syntax/packet.md

@@ -16,13 +16,25 @@ This diagram type is particularly useful for developers, network engineers, educ
 
 ## Syntax
 
-```md
+```
 packet-beta
 start: "Block name" %% Single-bit block
 start-end: "Block name" %% Multi-bit blocks
 ... More Fields ...
 ```
 
+### Bits Syntax (v\<MERMAID_RELEASE_VERSION>+)
+
+Using start and end bit counts can be difficult, especially when modifying a design. For this we add a bit count field, which starts from the end of the previous field automagically. Use `+<count>` to set the number of bits, thus:
+
+```
+packet-beta
++1: "Block name" %% Single-bit block
++8: "Block name" %% 8-bit block
+9-15: "Manually set start and end, it's fine to mix and match"
+... More Fields ...
+```
+
 ## Examples
 
 ```mermaid-example
@@ -76,8 +88,8 @@ packet-beta
 ```mermaid-example
 packet-beta
 title UDP Packet
-0-15: "Source Port"
-16-31: "Destination Port"
++16: "Source Port"
++16: "Destination Port"
 32-47: "Length"
 48-63: "Checksum"
 64-95: "Data (variable length)"
@@ -86,8 +98,8 @@ title UDP Packet
 ```mermaid
 packet-beta
 title UDP Packet
-0-15: "Source Port"
-16-31: "Destination Port"
++16: "Source Port"
++16: "Destination Port"
 32-47: "Length"
 48-63: "Checksum"
 64-95: "Data (variable length)"

docs/syntax/pie.md

@@ -48,7 +48,13 @@ Drawing a pie chart is really simple in mermaid.
 ## Example
 
 ```mermaid-example
-%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
+---
+config:
+  pie:
+    textPosition: 0.5
+  themeVariables:
+    pieOuterStrokeWidth: "5px"
+---
 pie showData
     title Key elements in Product X
     "Calcium" : 42.96
@@ -58,7 +64,13 @@ pie showData
 ```
 
 ```mermaid
-%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
+---
+config:
+  pie:
+    textPosition: 0.5
+  themeVariables:
+    pieOuterStrokeWidth: "5px"
+---
 pie showData
     title Key elements in Product X
     "Calcium" : 42.96

docs/syntax/quadrantChart.md

@@ -148,7 +148,14 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text>
 ## Example on config and theme
 
 ```mermaid-example
-%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
+---
+config:
+  quadrantChart:
+    chartWidth: 400
+    chartHeight: 400
+  themeVariables:
+    quadrant1TextFill: "ff0000"
+---
 quadrantChart
   x-axis Urgent --> Not Urgent
   y-axis Not Important --> "Important ❤"
@@ -159,7 +166,14 @@ quadrantChart
 ```
 
 ```mermaid
-%%{init: {"quadrantChart": {"chartWidth": 400, "chartHeight": 400}, "themeVariables": {"quadrant1TextFill": "#ff0000"} }}%%
+---
+config:
+  quadrantChart:
+    chartWidth: 400
+    chartHeight: 400
+  themeVariables:
+    quadrant1TextFill: "ff0000"
+---
 quadrantChart
   x-axis Urgent --> Not Urgent
   y-axis Not Important --> "Important ❤"
@@ -178,7 +192,7 @@ Points can either be styled directly or with defined shared classes
 ```md
 Point A: [0.9, 0.0] radius: 12
 Point B: [0.8, 0.1] color: #ff3300, radius: 10
-Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0  
+Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
 Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
 ```
 

docs/syntax/radar.md

@@ -177,7 +177,15 @@ Please refer to the [configuration](/config/schema-docs/config-defs-radar-diagra
 
 > **Note**
 > The default values for these variables depend on the theme used. To override the default values, set the desired values in the themeVariables section of the configuration:
-> %%{init: {"themeVariables": {"cScale0": "#FF0000", "cScale1": "#00FF00"}} }%%
+>
+> ---
+>
+> config:
+> themeVariables:
+> cScale0: "#FF0000"
+> cScale1: "#00FF00"
+>
+> ---
 
 Radar charts support the color scales `cScale${i}` where `i` is a number from `0` to the theme's maximum number of colors in its color scale. Usually, the maximum number of colors is `12`.
 
@@ -191,7 +199,15 @@ Radar charts support the color scales `cScale${i}` where `i` is a number from `0
 
 > **Note**
 > Specific variables for radar resides inside the `radar` key. To set the radar style options, use this syntax.
-> %%{init: {"themeVariables": {"radar": {"axisColor": "#FF0000"}} } }%%
+>
+> ---
+>
+> config:
+> themeVariables:
+> radar:
+> axisColor: "#FF0000"
+>
+> ---
 
 | Property             | Description                  | Default Value |
 | -------------------- | ---------------------------- | ------------- |

docs/syntax/requirementDiagram.md

@@ -50,7 +50,7 @@ There are three types of components to a requirement diagram: requirement, eleme
 
 The grammar for defining each is defined below. Words denoted in angle brackets, such as `<word>`, are enumerated keywords that have options elaborated in a table. `user_defined_...` is use in any place where user input is expected.
 
-An important note on user text: all input can be surrounded in quotes or not. For example, both `Id: "here is an example"` and `Id: here is an example` are both valid. However, users must be careful with unquoted input. The parser will fail if another keyword is detected.
+An important note on user text: all input can be surrounded in quotes or not. For example, both `id: "here is an example"` and `id: here is an example` are both valid. However, users must be careful with unquoted input. The parser will fail if another keyword is detected.
 
 ### Requirement
 

docs/syntax/stateDiagram.md

@@ -278,7 +278,7 @@ stateDiagram-v2
     }
 ```
 
-_You can not define transitions between internal states belonging to different composite states_
+_You cannot define transitions between internal states belonging to different composite states_
 
 ## Choice
 

docs/syntax/timeline.md

@@ -234,7 +234,13 @@ mermaid.initialize({
 let us look at same example, where we have disabled the multiColor option.
 
 ```mermaid-example
-   %%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  timeline:
+    disableMulticolor: true
+---
     timeline
         title History of Social Media Platform
           2002 : LinkedIn
@@ -245,7 +251,13 @@ let us look at same example, where we have disabled the multiColor option.
 ```
 
 ```mermaid
-   %%{init: { 'logLevel': 'debug', 'theme': 'base', 'timeline': {'disableMulticolor': true}}}%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+  timeline:
+    disableMulticolor: true
+---
     timeline
         title History of Social Media Platform
           2002 : LinkedIn
@@ -269,11 +281,17 @@ Example:
 Now let's override the default values for the `cScale0` to `cScale2` variables:
 
 ```mermaid-example
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',
-              'cScale1': '#00ff00',
-              'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    cScale0: '#ff0000'
+    cScaleLabel0: '#ffffff'
+    cScale1: '#00ff00'
+    cScale2: '#0000ff'
+    cScaleLabel2: '#ffffff'
+---
        timeline
         title History of Social Media Platform
           2002 : LinkedIn
@@ -287,11 +305,17 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
 ```
 
 ```mermaid
-    %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
-              'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',
-              'cScale1': '#00ff00',
-              'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
-       } } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+  themeVariables:
+    cScale0: '#ff0000'
+    cScaleLabel0: '#ffffff'
+    cScale1: '#00ff00'
+    cScale2: '#0000ff'
+    cScaleLabel2: '#ffffff'
+---
        timeline
         title History of Social Media Platform
           2002 : LinkedIn
@@ -308,7 +332,7 @@ See how the colors are changed to the values specified in the theme variables.
 
 ## Themes
 
-Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about theming your diagram [here](../config/theming.md).
+Mermaid supports a bunch of pre-defined themes which you can use to find the right one for you. PS: you can actually override an existing theme's variable to get your own custom theme going. Learn more about [theming your diagram](../config/theming.md).
 
 The following are the different pre-defined theme options:
 
@@ -324,7 +348,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Base Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+---
     timeline
         title History of Social Media Platform
           2002 : LinkedIn
@@ -337,7 +365,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'base' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'base'
+---
     timeline
         title History of Social Media Platform
           2002 : LinkedIn
@@ -352,7 +384,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Forest Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'forest'
+---
     timeline
         title History of Social Media Platform
           2002 : LinkedIn
@@ -365,7 +401,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'forest'
+---
     timeline
         title History of Social Media Platform
           2002 : LinkedIn
@@ -380,7 +420,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Dark Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'dark'
+---
     timeline
         title History of Social Media Platform
           2002 : LinkedIn
@@ -393,7 +437,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'dark' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'dark'
+---
     timeline
         title History of Social Media Platform
           2002 : LinkedIn
@@ -408,7 +456,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Default Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+---
     timeline
         title History of Social Media Platform
           2002 : LinkedIn
@@ -421,7 +473,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'default' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'default'
+---
     timeline
         title History of Social Media Platform
           2002 : LinkedIn
@@ -436,7 +492,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ### Neutral Theme
 
 ```mermaid-example
-%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'neutral'
+---
     timeline
         title History of Social Media Platform
           2002 : LinkedIn
@@ -449,7 +509,11 @@ Let's put them to use, and see how our sample diagram looks in different themes:
 ```
 
 ```mermaid
-%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
+---
+config:
+  logLevel: 'debug'
+  theme: 'neutral'
+---
     timeline
         title History of Social Media Platform
           2002 : LinkedIn
@@ -473,4 +537,4 @@ You can use this method to add mermaid including the timeline diagram to a web p
 </script>
 ```
 
-You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
+You can also refer the [implementation in the live editor](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.

docs/syntax/xyChart.md

@@ -107,17 +107,18 @@ xychart-beta
 
 ## Chart Configurations
 
-| Parameter                | Description                                    | Default value |
-| ------------------------ | ---------------------------------------------- | :-----------: |
-| width                    | Width of the chart                             |      700      |
-| height                   | Height of the chart                            |      500      |
-| titlePadding             | Top and Bottom padding of the title            |      10       |
-| titleFontSize            | Title font size                                |      20       |
-| showTitle                | Title to be shown or not                       |     true      |
-| xAxis                    | xAxis configuration                            |  AxisConfig   |
-| yAxis                    | yAxis configuration                            |  AxisConfig   |
-| chartOrientation         | 'vertical' or 'horizontal'                     |  'vertical'   |
-| plotReservedSpacePercent | Minimum space plots will take inside the chart |      50       |
+| Parameter                | Description                                                   | Default value |
+| ------------------------ | ------------------------------------------------------------- | :-----------: |
+| width                    | Width of the chart                                            |      700      |
+| height                   | Height of the chart                                           |      500      |
+| titlePadding             | Top and Bottom padding of the title                           |      10       |
+| titleFontSize            | Title font size                                               |      20       |
+| showTitle                | Title to be shown or not                                      |     true      |
+| xAxis                    | xAxis configuration                                           |  AxisConfig   |
+| yAxis                    | yAxis configuration                                           |  AxisConfig   |
+| chartOrientation         | 'vertical' or 'horizontal'                                    |  'vertical'   |
+| plotReservedSpacePercent | Minimum space plots will take inside the chart                |      50       |
+| showDataLabel            | Should show the value corresponding to the bar within the bar |     false     |
 
 ### AxisConfig
 
@@ -137,9 +138,16 @@ xychart-beta
 
 ## Chart Theme Variables
 
-> **Note**
-> Themes for xychart resides inside xychart attribute so to set the variables use this syntax
-> %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
+Themes for xychart resides inside xychart attribute so to set the variables use this syntax:
+
+```yaml
+---
+config:
+  themeVariables:
+    xyChart:
+      titleColor: '#ff0000'
+---
+```
 
 | Parameter        | Description                                               |
 | ---------------- | --------------------------------------------------------- |
@@ -163,6 +171,7 @@ config:
     xyChart:
         width: 900
         height: 600
+        showDataLabel: true
     themeVariables:
         xyChart:
             titleColor: "#ff0000"
@@ -181,6 +190,7 @@ config:
     xyChart:
         width: 900
         height: 600
+        showDataLabel: true
     themeVariables:
         xyChart:
             titleColor: "#ff0000"

instructions.md

@@ -0,0 +1,256 @@
+# Jison to Chevrotain Parser Conversion Instructions
+
+## Overview
+This guide provides step-by-step instructions for converting a Jison-based parser to Chevrotain, specifically for the flowchart parser located at `src/diagrams/flowchart/parser/flow.jison`.
+
+## Critical Requirements
+- **Multi-mode lexing is MANDATORY** - This is crucial for mirroring Jison's lexical states
+- Preserve the existing parser structure to maintain compatibility
+- All original test cases must be included in the converted test suite
+- Minimize changes to test implementation
+
+## Understanding Jison States
+The Jison parser uses multiple lexical states defined with `%x`:
+- string, md_string, acc_title, acc_descr, acc_descr_multiline
+- dir, vertex, text, ellipseText, trapText, edgeText
+- thickEdgeText, dottedEdgeText, click, href, callbackname
+- callbackargs, shapeData, shapeDataStr, shapeDataEndBracket
+
+### State Management in Jison:
+- `this.pushState(stateName)` or `this.begin(stateName)` - Enter a new state
+- `this.popState()` - Return to the previous state
+- States operate as a stack (LIFO - Last In, First Out)
+
+## Conversion Process
+
+### Phase 1: Analysis
+1. **Study the Jison file thoroughly**
+   - Map all lexical states and their purposes
+   - Document which tokens are available in each state
+   - Note all state transitions (when states are entered/exited)
+   - Identify semantic actions and their data transformations
+
+2. **Create a state transition diagram**
+   - Document which tokens trigger state changes
+   - Map the relationships between states
+   - Identify any nested state scenarios
+
+### Phase 2: Lexer Implementation
+1. **Set up Chevrotain multi-mode lexer structure**
+   - Create a mode for each Jison state
+   - Define a default mode corresponding to Jison's INITIAL state
+   - Ensure mode names match Jison state names for clarity
+
+2. **Convert token definitions**
+   - For each Jison token rule, create equivalent Chevrotain token
+   - Pay special attention to tokens that trigger state changes
+   - Preserve token precedence and ordering from Jison
+
+3. **Implement state transitions**
+   - Tokens that call `pushState` should use Chevrotain's push_mode
+   - Tokens that call `popState` should use Chevrotain's pop_mode
+   - Maintain the stack-based behavior of Jison states
+
+### Phase 3: Parser Implementation
+1. **Convert grammar rules**
+   - Translate each Jison grammar rule to Chevrotain's format
+   - Preserve the rule hierarchy and structure
+   - Maintain the same rule names where possible
+
+2. **Handle semantic actions**
+   - Convert Jison's semantic actions to Chevrotain's visitor pattern
+   - Ensure data structures remain compatible
+   - Preserve any side effects or state mutations
+
+### Phase 4: Testing Strategy
+1. **Test file naming convention**
+   - Original: `*.spec.js`
+   - Converted: `*-chev.spec.ts`
+   - Keep test files in the same directory: `src/diagrams/flowchart/parser/`
+
+2. **Test conversion approach**
+   - Copy each original test file
+   - Rename with `-chev.spec.ts` suffix
+   - Modify only the import statements and parser initialization
+   - Keep test cases and assertions unchanged
+   - Run tests individually: `vitest packages/mermaid/src/diagrams/flowchart/parser/flow-chev.spec.ts --run`
+
+3. **Validation checklist**
+   - All original test cases must pass
+   - Test coverage should match the original
+   - Performance should be comparable or better
+
+### Phase 5: Integration
+1. **API compatibility**
+   - Ensure the new parser exposes the same public interface
+   - Return values should match the original parser
+   - Error messages should be equivalent
+
+2. **Gradual migration**
+   - Create a feature flag to switch between parsers
+   - Allow parallel testing of both implementations
+   - Monitor for any behavioral differences
+
+## Common Pitfalls to Avoid
+1. **State management differences**
+   - Chevrotain's modes are more rigid than Jison's states
+   - Ensure proper mode stack behavior is maintained
+   - Test deeply nested state scenarios
+
+2. **Token precedence**
+   - Chevrotain's token ordering matters more than in Jison
+   - Longer patterns should generally come before shorter ones
+   - Test edge cases with ambiguous inputs
+
+3. **Semantic action timing**
+   - Chevrotain processes semantic actions differently
+   - Ensure actions execute at the correct parse phase
+   - Validate that data flows correctly through the parse tree
+
+## Success Criteria
+- All original tests pass with the new parser
+- No changes required to downstream code
+- Performance is equal or better
+- Parser behavior is identical for all valid inputs
+- Error handling remains consistent
+
+
+# This is a reference to how Chevrotain handles multi-mode lexing
+
+## Summary: Using Multi-Mode Lexing in Chevrotain
+
+Chevrotain supports *multi-mode lexing*, allowing you to define different sets of tokenization rules (modes) that the lexer can switch between based on context. This is essential for parsing languages with embedded or context-sensitive syntax, such as HTML or templating languages[3][2].
+
+**Key Concepts:**
+
+- **Modes:** Each mode is an array of token types (constructors) defining the valid tokens in that context.
+- **Mode Stack:** The lexer maintains a stack of modes. Only the top (current) mode's tokens are active at any time[2].
+- **Switching Modes:**
+  - Use `PUSH_MODE` on a token to switch to a new mode after matching that token.
+  - Use `POP_MODE` on a token to return to the previous mode.
+
+**Implementation Steps:**
+
+1. **Define Tokens with Mode Switching:**
+   - Tokens can specify `PUSH_MODE` or `POP_MODE` to control mode transitions.
+   ```javascript
+   const EnterLetters = createToken({ name: "EnterLetters", pattern: /LETTERS/, push_mode: "letter_mode" });
+   const ExitLetters = createToken({ name: "ExitLetters", pattern: /EXIT_LETTERS/, pop_mode: true });
+   ```
+
+2. **Create the Multi-Mode Lexer Definition:**
+   - Structure your modes as an object mapping mode names to arrays of token constructors.
+   ```javascript
+   const multiModeLexerDefinition = {
+     modes: {
+       numbers_mode: [One, Two, EnterLetters, ExitNumbers, Whitespace],
+       letter_mode: [Alpha, Beta, ExitLetters, Whitespace],
+     },
+     defaultMode: "numbers_mode"
+   };
+   ```
+
+3. **Instantiate the Lexer:**
+   - Pass the multi-mode definition to the Chevrotain `Lexer` constructor.
+   ```javascript
+   const MultiModeLexer = new Lexer(multiModeLexerDefinition);
+   ```
+
+4. **Tokenize Input:**
+   - The lexer will automatically switch modes as it encounters tokens with `PUSH_MODE` or `POP_MODE`.
+   ```javascript
+   const lexResult = MultiModeLexer.tokenize(input);
+   ```
+
+5. **Parser Integration:**
+   - When constructing the parser, provide a flat array of all token constructors used in all modes, as the parser does not natively accept the multi-mode structure[1].
+   ```javascript
+   // Flatten all tokens from all modes for the parser
+   let tokenCtors = [];
+   for (let mode in multiModeLexerDefinition.modes) {
+     tokenCtors = tokenCtors.concat(multiModeLexerDefinition.modes[mode]);
+   }
+   class MultiModeParser extends Parser {
+     constructor(tokens) {
+       super(tokens, tokenCtors);
+     }
+   }
+   ```
+
+**Best Practices:**
+
+- Place more specific tokens before more general ones to avoid prefix-matching issues[2].
+- Use the mode stack judiciously to manage nested or recursive language constructs.
+
+**References:**
+- Chevrotain documentation on [lexer modes][3]
+- Example code and integration notes from Chevrotain issues and docs[1][2]
+
+This approach enables robust, context-sensitive lexing for complex language grammars in Chevrotain.
+
+[1] https://github.com/chevrotain/chevrotain/issues/395
+[2] https://chevrotain.io/documentation/0_7_2/classes/lexer.html
+[3] https://chevrotain.io/docs/features/lexer_modes.html
+[4] https://github.com/SAP/chevrotain/issues/370
+[5] https://galaxy.ai/youtube-summarizer/understanding-lexers-parsers-and-interpreters-with-chevrotain-l-jMsoAY64k
+[6] https://chevrotain.io/documentation/8_0_1/classes/lexer.html
+[7] https://fastly.jsdelivr.net/npm/chevrotain@11.0.3/src/scan/lexer.ts
+[8] https://chevrotain.io/docs/guide/resolving_lexer_errors.html
+[9] https://www.youtube.com/watch?v=l-jMsoAY64k
+[10] https://github.com/SAP/chevrotain/blob/master/packages/chevrotain/test/scan/lexer_spec.ts
+
+**Important**
+Always assume I want the exact code edit!
+Always assume I want you to apply this fixes directly!
+
+# Running tests
+
+Run tests in one file from the project root using this command:
+`vitest #filename-relative-to-project-root# --run`
+
+Example:
+`vitest packages/mermaid/src/diagrams/flowchart/parser/flow-chev.spec.ts --run`
+
+To run all flowchart test for the migration
+`vitest packages/mermaid/src/diagrams/flowchart/parser/*flow*-chev.spec.ts --run`
+
+To run a specific test in a test file:
+`vitest #filename-relative-to-project-root# -t "string-matching-test" --run`
+
+Example:
+`vitest packages/mermaid/src/diagrams/flowchart/parser/flow-chev-singlenode.spec.js -t "diamond node with html in it (SN3)" --run`
+
+# Current Status of Chevrotain Parser Migration
+
+## ✅ COMPLETED TASKS:
+- **Interaction parsing**: Successfully fixed callback functions with multiple comma-separated arguments
+- **Tooltip handling**: Fixed tooltip support for both href and callback syntax patterns
+- **Test coverage**: All 13 interaction tests passing, 24 style tests passing, 2 node data tests passing
+
+## ❌ CRITICAL ISSUES REMAINING:
+- **Edge creation completely broken**: Most tests show `edges.length` is 0 when should be non-zero
+- **Core parsing regression**: Changes to `clickStatement` parser rule affected broader parsing functionality
+- **Vertex chaining broken**: All vertex chaining tests failing due to missing edges
+- **Overall test status**: 126 failed | 524 passed | 3 skipped (653 total tests)
+
+## 🎯 IMMEDIATE NEXT TASKS:
+1. **URGENT**: Fix edge creation regression - core parsing functionality is broken
+2. Investigate why changes to interaction parsing affected edge parsing
+3. Restore edge parsing without breaking interaction functionality
+4. Run full test suite to ensure no other regressions
+
+## 📝 KEY FILES MODIFIED:
+- `packages/mermaid/src/diagrams/flowchart/parser/flowParser.ts` - Parser grammar rules
+- `packages/mermaid/src/diagrams/flowchart/parser/flowAst.ts` - AST visitor implementation
+
+## 🔧 RECENT CHANGES MADE:
+1. **Parser**: Modified `clickCall` rule to accept multiple tokens for complex arguments using `MANY()`
+2. **AST Visitor**: Updated `clickCall` method to correctly extract function names and combine argument tokens
+3. **Interaction Handling**: Fixed tooltip handling for both href and callback syntax patterns
+
+## ⚠️ REGRESSION ANALYSIS:
+The interaction parsing fix introduced a critical regression where edge creation is completely broken. This suggests that modifications to the `clickStatement` parser rule had unintended side effects on the core parsing functionality. The parser can still tokenize correctly (as evidenced by passing style tests) but fails to create edges from link statements.
+
+## 🧪 TEST COMMAND:
+Use this command to run all Chevrotain tests:
+`pnpm vitest packages/mermaid/src/diagrams/flowchart/parser/flow*chev*.spec.js --run`

package.json

@@ -64,12 +64,12 @@
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.44.9",
-    "@argos-ci/cypress": "^3.2.0",
+    "@argos-ci/cypress": "^4.0.3",
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.27.12",
-    "@cspell/eslint-plugin": "^8.8.4",
+    "@cspell/eslint-plugin": "^8.19.3",
     "@cypress/code-coverage": "^3.12.49",
-    "@eslint/js": "^9.4.0",
+    "@eslint/js": "^9.26.0",
     "@rollup/plugin-typescript": "^12.1.2",
     "@types/cors": "^2.8.17",
     "@types/express": "^5.0.0",
@@ -83,7 +83,7 @@
     "@vitest/spy": "^3.0.6",
     "@vitest/ui": "^3.0.6",
     "ajv": "^8.17.1",
-    "chokidar": "^4.0.3",
+    "chokidar": "3.6.0",
     "concurrently": "^9.1.2",
     "cors": "^2.8.5",
     "cpy-cli": "^5.0.0",
@@ -93,19 +93,19 @@
     "cypress-image-snapshot": "^4.0.1",
     "cypress-split": "^1.24.14",
     "esbuild": "^0.25.0",
-    "eslint": "^9.20.1",
-    "eslint-config-prettier": "^10.0.0",
-    "eslint-plugin-cypress": "^4.1.0",
+    "eslint": "^9.26.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-cypress": "^4.3.0",
     "eslint-plugin-html": "^8.1.2",
-    "eslint-plugin-jest": "^28.6.0",
-    "eslint-plugin-jsdoc": "^50.0.1",
+    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-jsdoc": "^50.6.9",
     "eslint-plugin-json": "^4.0.1",
     "eslint-plugin-lodash": "^8.0.0",
     "eslint-plugin-markdown": "^5.1.0",
     "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-tsdoc": "^0.4.0",
-    "eslint-plugin-unicorn": "^57.0.0",
-    "express": "^4.19.2",
+    "eslint-plugin-unicorn": "^59.0.0",
+    "express": "^5.1.0",
     "globals": "^16.0.0",
     "globby": "^14.0.2",
     "husky": "^9.1.7",
@@ -126,7 +126,7 @@
     "tslib": "^2.8.1",
     "tsx": "^4.7.3",
     "typescript": "~5.7.3",
-    "typescript-eslint": "^8.24.1",
+    "typescript-eslint": "^8.32.0",
     "vite": "^6.1.1",
     "vite-plugin-istanbul": "^7.0.0",
     "vitest": "^3.0.6"

packages/mermaid-example-diagram/src/exampleDiagramRenderer.js

@@ -3,7 +3,7 @@ import { select } from 'd3';
 import { log, getConfig, setupGraphViewbox } from './mermaidUtils.js';
 
 /**
- * Draws a an info picture in the tag with id: id based on the graph definition in text.
+ * Draws an info picture in the tag with id: id based on the graph definition in text.
  *
  * @param {any} text
  * @param {any} id