Merge remote-tracking branch 'MERMAID/develop' into feat/3626-aria-descBy-roledescription-mocks

2025-10-21 15:09:39 +02:00 · 2022-11-25 11:30:44 -08:00
parent a9c337302a 3e4dc306d4
commit 626a4741c0
115 changed files with 2302 additions and 639 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -21,7 +21,16 @@
    "plugin:@cspell/recommended",
    "prettier"
  ],
-  "plugins": ["@typescript-eslint", "no-only-tests", "html", "jest", "jsdoc", "json", "@cspell"],
+  "plugins": [
+    "@typescript-eslint",
+    "no-only-tests",
+    "html",
+    "jest",
+    "jsdoc",
+    "json",
+    "@cspell",
+    "lodash"
+  ],
  "rules": {
    "curly": "error",
    "no-console": "error",
@@ -53,7 +62,8 @@
        "allowEmptyCatch": true
      }
    ],
-    "no-only-tests/no-only-tests": "error"
+    "no-only-tests/no-only-tests": "error",
+    "lodash/import-scope": ["error", "method"]
  },
  "overrides": [
    {
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -1,28 +0,0 @@
-name: Documentation Checks
-
-on:
-  push:
-    branches:
-      - develop
-    paths:
-      - 'packages/mermaid/src/docs/**/*'
-  pull_request:
-    branches:
-      - develop
-    paths:
-      - 'packages/mermaid/src/docs/**/*'
-jobs:
-  spellcheck:
-    name: 'Docs: Spellcheck'
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-        name: Check out the code
-      - uses: actions/setup-node@v3
-        name: Setup node
-        with:
-          node-version: '18'
-      - run: npm install -g cspell
-        name: Install cSpell
-      - run: cspell --config ./cSpell.json "packages/mermaid/src/docs/**/*.md" --no-progress
-        name: Run cSpell
--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@@ -36,7 +36,7 @@ jobs:
          restore-keys: cache-lychee-

      - name: Link Checker
-        uses: lycheeverse/lychee-action@v1.5.2
+        uses: lycheeverse/lychee-action@v1.5.4
        with:
          args: --verbose --no-progress --cache --max-cache-age 1d packages/mermaid/src/docs/**/*.md README.md README.zh-CN.md
          fail: true
--- a/.gitignore
+++ b/.gitignore
@@ -35,3 +35,4 @@ tsconfig.tsbuildinfo

 knsv*.html
 local*.html
+stats/
--- a/.lintstagedrc.json
+++ b/.lintstagedrc.json
@@ -1,4 +0,0 @@
-{
-  "!(docs/**/*)*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"],
-  "cSpell.json": ["ts-node-esm scripts/fixCSpell.ts"]
-}
--- a/.lintstagedrc.mjs
+++ b/.lintstagedrc.mjs
@@ -0,0 +1,5 @@
+export default {
+  '!(docs/**/*)*.{ts,js,json,html,md,mts}': ['eslint --fix', 'prettier --write'],
+  'cSpell.json': ['ts-node-esm scripts/fixCSpell.ts'],
+  '**/*.jison': ['pnpm -w run lint:jison'],
+};
--- a/.prettierignore
+++ b/.prettierignore
@@ -4,3 +4,4 @@ cypress/platform/xss3.html
 coverage
 # Autogenerated by PNPM
 pnpm-lock.yaml
+stats
--- a/.vite/build.ts
+++ b/.vite/build.ts
@@ -1,9 +1,12 @@
-import { build, InlineConfig } from 'vite';
+import { build, InlineConfig, type PluginOption } from 'vite';
 import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
 import { readFileSync } from 'fs';
+import { visualizer } from 'rollup-plugin-visualizer';
+import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';

+const visualize = process.argv.includes('--visualize');
 const watch = process.argv.includes('--watch');
 const mermaidOnly = process.argv.includes('--mermaid');
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
@@ -13,6 +16,20 @@ type OutputOptions = Exclude<
  undefined
 >['output'];

+const visualizerOptions = (packageName: string, core = false): PluginOption[] => {
+  if (packageName !== 'mermaid' || !visualize) {
+    return [];
+  }
+  return ['network', 'treemap', 'sunburst'].map((chartType) =>
+    visualizer({
+      filename: `./stats/${chartType}${core ? '.core' : ''}.html`,
+      template: chartType as TemplateType,
+      gzipSize: true,
+      brotliSize: true,
+    })
+  );
+};
+
 const packageOptions = {
  mermaid: {
    name: 'mermaid',
@@ -39,7 +56,7 @@ interface BuildOptions {
 }

 export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions): InlineConfig => {
-  const external = ['require', 'fs', 'path'];
+  const external: (string | RegExp)[] = ['require', 'fs', 'path'];
  console.log(entryName, packageOptions[entryName]);
  const { name, file, packageName } = packageOptions[entryName];
  let output: OutputOptions = [
@@ -63,7 +80,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
    );
    // Core build is used to generate file without bundled dependencies.
    // This is used by downstream projects to bundle dependencies themselves.
-    external.push(...Object.keys(dependencies));
+    // Ignore dependencies and any dependencies of dependencies
+    // Adapted from the RegEx used by `rollup-plugin-node`
+    external.push(new RegExp('^(?:' + Object.keys(dependencies).join('|') + ')(?:/.+)?$'));
    // This needs to be an array. Otherwise vite will build esm & umd with same name and overwrite esm with umd.
    output = [
      {
@@ -95,7 +114,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
    resolve: {
      extensions: ['.jison', '.js', '.ts', '.json'],
    },
-    plugins: [jisonPlugin()],
+    plugins: [jisonPlugin(), ...visualizerOptions(packageName, core)],
  };

  if (watch && config.build) {
@@ -121,7 +140,7 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {

 const main = async () => {
  const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
-  for (const pkg of packageNames) {
+  for (const pkg of packageNames.filter((pkg) => !mermaidOnly || pkg === 'mermaid')) {
    await buildPackage(pkg);
  }
 };
@@ -132,6 +151,9 @@ if (watch) {
    build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' }));
    // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' }));
  }
+} else if (visualize) {
+  await build(getBuildConfig({ minify: false, core: true, entryName: 'mermaid' }));
+  await build(getBuildConfig({ minify: false, core: false, entryName: 'mermaid' }));
 } else {
  void main();
 }
--- a/README.md
+++ b/README.md
@@ -1,23 +1,6 @@
 # mermaid

-[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
-
-# Whoa, what's going on here?
-
-We are transforming the Mermaid repository to a so called mono-repo. This is a part of the effort to decouple the diagrams from the core of mermaid. This will:
-
- Make it possible to select which diagrams to include on your site
- Open up for lazy loading
- Make it possible to add diagrams from outside of the Mermaid repository
- Separate the release flow between different diagrams and the Mermaid core
-
-As such be aware of some changes..
-
-# We use pnpm now
-
-# The source code has moved
-
-It is now located in the src folder for each respective package located as subfolders in packages.
+[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)

 English | [简体中文](./README.zh-CN.md)

--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -1,6 +1,6 @@
 # mermaid

-[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
+[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)

 [English](./README.md) | 简体中文

--- a/cSpell.json
+++ b/cSpell.json
@@ -13,7 +13,9 @@
    "bbox",
    "bilkent",
    "bisheng",
+    "braintree",
    "brolin",
+    "brotli",
    "codedoc",
    "colour",
    "cpettitt",
@@ -29,9 +31,11 @@
    "edgechromium",
    "faber",
    "flatmap",
+    "ftplugin",
    "gantt",
    "gitea",
    "gitgraph",
+    "globby",
    "graphlib",
    "grav",
    "greywolf",
@@ -39,11 +43,13 @@
    "jaoude",
    "jison",
    "kaufmann",
+    "khroma",
    "klemm",
    "klink",
    "knsv",
    "knut",
    "laganeckas",
+    "lintstagedrc",
    "lucida",
    "matthieu",
    "mdbook",
@@ -71,8 +77,10 @@
    "substate",
    "sveidqvist",
    "techn",
+    "treemap",
    "ts-nocheck",
    "tuleap",
+    "unist",
    "verdana",
    "viewports",
    "vinod",
@@ -117,5 +125,8 @@
    "Multi-line code blocks",
    "HTML Tags"
  ],
-  "ignorePaths": ["packages/mermaid/src/docs/CHANGELOG.md"]
+  "ignorePaths": [
+    "packages/mermaid/src/docs/CHANGELOG.md",
+    "packages/mermaid/src/docs/.vitepress/redirect.ts"
+  ]
 }
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@@ -496,4 +496,16 @@ describe('Class diagram V2', () => {
    );
    cy.get('svg');
  });
+
+  it('1433: should render a simple class with a title', () => {
+    imgSnapshotTest(
+      `---
+title: simple class diagram
+---
+classDiagram-v2
+class Class10
+`,
+      {}
+    );
+  });
 });
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -273,4 +273,17 @@ describe('Entity Relationship Diagram', () => {
    );
    cy.get('svg');
  });
+
+  it('1433: should render a simple ER diagram with a title', () => {
+    imgSnapshotTest(
+      `---
+title: simple ER diagram
+---
+erDiagram
+CUSTOMER ||--o{ ORDER : places
+ORDER ||--|{ LINE-ITEM : contains
+`,
+      {}
+    );
+  });
 });
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -663,4 +663,15 @@ flowchart RL
      { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
    );
  });
+  it('1433: should render a titled flowchart with titleTopMargin set to 0', () => {
+    imgSnapshotTest(
+      `---
+title: Simple flowchart
+---
+flowchart TD
+A --> B
+`,
+      { titleTopMargin: 0 }
+    );
+  });
 });
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -322,4 +322,15 @@ describe('Git Graph diagram', () => {
      {}
    );
  });
+  it('1433: should render a simple gitgraph with a title', () => {
+    imgSnapshotTest(
+      `---
+title: simple gitGraph
+---
+gitGraph
+  commit
+`,
+      {}
+    );
+  });
 });
--- a/cypress/integration/rendering/mermaid.spec.js
+++ b/cypress/integration/rendering/mermaid.spec.js
@@ -1,75 +0,0 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
-
-describe('Mindmap', () => {
-  it('square shape', () => {
-    imgSnapshotTest(
-      `
-mindmap
-    root[
-      The root
-    ]
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('rounded rect shape', () => {
-    imgSnapshotTest(
-      `
-mindmap
-    root((
-      The root
-    ))
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('circle shape', () => {
-    imgSnapshotTest(
-      `
-mindmap
-    root(
-      The root
-    )
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('default shape', () => {
-    imgSnapshotTest(
-      `
-mindmap
-  The root
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('adding children', () => {
-    imgSnapshotTest(
-      `
-mindmap
-  The root
-    child1
-    child2
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-  it('adding grand children', () => {
-    imgSnapshotTest(
-      `
-mindmap
-  The root
-    child1
-      child2
-      child3
-      `,
-      {}
-    );
-    cy.get('svg');
-  });
-});
--- a/cypress/integration/rendering/mindmap.spec.js
+++ b/cypress/integration/rendering/mindmap.spec.js
@@ -1,115 +0,0 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
-
-describe('Mindmaps', () => {
-  it('Only a root', () => {
-    imgSnapshotTest(
-      `mindmap
-root
-    `,
-      {}
-    );
-  });
-
-  it('a root with a shape', () => {
-    imgSnapshotTest(
-      `mindmap
-root[root]
-    `,
-      {}
-    );
-  });
-
-  it('a root with wrapping text and a shape', () => {
-    imgSnapshotTest(
-      `mindmap
-root[A root with a long text that wraps to keep the node size in check]
-    `,
-      {}
-    );
-  });
-
-  it('a root with an icon', () => {
-    imgSnapshotTest(
-      `mindmap
-root[root]
-::icon(mdi mdi-fire)
-    `,
-      {}
-    );
-  });
-
-  it('Blang and cloud shape', () => {
-    imgSnapshotTest(
-      `mindmap
-root))bang((
-  ::icon(mdi mdi-fire)
-  a))Another bang((
-  ::icon(mdi mdi-fire)
-  a)A cloud(
-  ::icon(mdi mdi-fire)
-    `,
-      {}
-    );
-  });
-
-  it('Blang and cloud shape with icons', () => {
-    imgSnapshotTest(
-      `mindmap
-root))bang((
-
-  a))Another bang((
-  a)A cloud(
-    `,
-      {}
-    );
-  });
-
-  it('braches', () => {
-    imgSnapshotTest(
-      `mindmap
-root
-  child1
-      grandchild 1
-      grandchild 2
-  child2
-      grandchild 3
-      grandchild 4
-  child3
-      grandchild 5
-      grandchild 6
-    `,
-      {}
-    );
-  });
-
-  it('braches with shapes and labels', () => {
-    imgSnapshotTest(
-      `mindmap
-root
-  child1((Circle))
-      grandchild 1
-      grandchild 2
-  child2(Round rectangle)
-      grandchild 3
-      grandchild 4
-  child3[Square]
-      grandchild 5
-      ::icon(mdi mdi-fire)
-      gc6((grand<br/>child 6))
-      ::icon(mdi mdi-fire)
-    `,
-      {}
-    );
-  });
-  it('text shouhld wrap with icon', () => {
-    imgSnapshotTest(
-      `mindmap
-root
-  Child3(A node with an icon and with a long text that wraps to keep the node size in check)
-    `,
-      {}
-    );
-  });
-
-  /* The end */
-});
--- a/cypress/integration/rendering/mindmap.spec.ts
+++ b/cypress/integration/rendering/mindmap.spec.ts
@@ -0,0 +1,233 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
+
+/**
+ * Check whether the SVG Element has a Mindmap root
+ *
+ * Sometimes, Cypress takes a snapshot before the mermaid mindmap has finished
+ * generating the SVG.
+ *
+ * @param $p - The element to check.
+ */
+function shouldHaveRoot($p: JQuery<SVGSVGElement>) {
+  // get HTML Element from jquery element
+  const svgElement = $p[0];
+  expect(svgElement.nodeName).equal('svg');
+
+  const sectionRoots = svgElement.getElementsByClassName('mindmap-node section-root');
+  // mindmap should have at least one root section
+  expect(sectionRoots).to.have.lengthOf.at.least(1);
+}
+
+describe('Mindmaps', () => {
+  it('Only a root', () => {
+    imgSnapshotTest(
+      `mindmap
+root
+    `,
+      {},
+      undefined,
+      shouldHaveRoot
+    );
+  });
+
+  it('a root with a shape', () => {
+    imgSnapshotTest(
+      `mindmap
+root[root]
+    `,
+      {},
+      undefined,
+      shouldHaveRoot
+    );
+  });
+
+  it('a root with wrapping text and a shape', () => {
+    imgSnapshotTest(
+      `mindmap
+root[A root with a long text that wraps to keep the node size in check]
+    `,
+      {},
+      undefined,
+      shouldHaveRoot
+    );
+  });
+
+  it('a root with an icon', () => {
+    imgSnapshotTest(
+      `mindmap
+root[root]
+::icon(mdi mdi-fire)
+    `,
+      {},
+      undefined,
+      shouldHaveRoot
+    );
+  });
+
+  it('Blang and cloud shape', () => {
+    imgSnapshotTest(
+      `mindmap
+root))bang((
+  ::icon(mdi mdi-fire)
+  a))Another bang((
+  ::icon(mdi mdi-fire)
+  a)A cloud(
+  ::icon(mdi mdi-fire)
+    `,
+      {},
+      undefined,
+      shouldHaveRoot
+    );
+  });
+
+  it('Blang and cloud shape with icons', () => {
+    imgSnapshotTest(
+      `mindmap
+root))bang((
+
+  a))Another bang((
+  a)A cloud(
+    `,
+      {},
+      undefined,
+      shouldHaveRoot
+    );
+  });
+
+  it('braches', () => {
+    imgSnapshotTest(
+      `mindmap
+root
+  child1
+      grandchild 1
+      grandchild 2
+  child2
+      grandchild 3
+      grandchild 4
+  child3
+      grandchild 5
+      grandchild 6
+    `,
+      {},
+      undefined,
+      shouldHaveRoot
+    );
+  });
+
+  it('braches with shapes and labels', () => {
+    imgSnapshotTest(
+      `mindmap
+root
+  child1((Circle))
+      grandchild 1
+      grandchild 2
+  child2(Round rectangle)
+      grandchild 3
+      grandchild 4
+  child3[Square]
+      grandchild 5
+      ::icon(mdi mdi-fire)
+      gc6((grand<br/>child 6))
+      ::icon(mdi mdi-fire)
+    `,
+      {},
+      undefined,
+      shouldHaveRoot
+    );
+  });
+  it('text shouhld wrap with icon', () => {
+    imgSnapshotTest(
+      `mindmap
+root
+  Child3(A node with an icon and with a long text that wraps to keep the node size in check)
+    `,
+      {},
+      undefined,
+      shouldHaveRoot
+    );
+  });
+  it('square shape', () => {
+    imgSnapshotTest(
+      `
+mindmap
+    root[
+      The root
+    ]
+      `,
+      {},
+      undefined,
+      shouldHaveRoot
+    );
+    cy.get('svg');
+  });
+  it('rounded rect shape', () => {
+    imgSnapshotTest(
+      `
+mindmap
+    root((
+      The root
+    ))
+      `,
+      {},
+      undefined,
+      shouldHaveRoot
+    );
+    cy.get('svg');
+  });
+  it('circle shape', () => {
+    imgSnapshotTest(
+      `
+mindmap
+    root(
+      The root
+    )
+      `,
+      {},
+      undefined,
+      shouldHaveRoot
+    );
+    cy.get('svg');
+  });
+  it('default shape', () => {
+    imgSnapshotTest(
+      `
+mindmap
+  The root
+      `,
+      {},
+      undefined,
+      shouldHaveRoot
+    );
+    cy.get('svg');
+  });
+  it('adding children', () => {
+    imgSnapshotTest(
+      `
+mindmap
+  The root
+    child1
+    child2
+      `,
+      {},
+      undefined,
+      shouldHaveRoot
+    );
+    cy.get('svg');
+  });
+  it('adding grand children', () => {
+    imgSnapshotTest(
+      `
+mindmap
+  The root
+    child1
+      child2
+      child3
+      `,
+      {},
+      undefined,
+      shouldHaveRoot
+    );
+    cy.get('svg');
+  });
+  /* The end */
+});
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -559,4 +559,16 @@ stateDiagram-v2
      );
    });
  });
+  it('1433: should render a simple state diagram with a title', () => {
+    imgSnapshotTest(
+      `---
+title: simple state diagram
+---
+stateDiagram-v2
+[*] --> State1
+State1 --> [*]
+`,
+      {}
+    );
+  });
 });
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es2020",
+    "lib": ["es2020", "dom"],
+    "types": ["cypress", "node"]
+  },
+  "include": ["**/*.ts"]
+}
--- a/demos/classchart.html
+++ b/demos/classchart.html
@@ -17,6 +17,9 @@
    <h1>Class diagram demos</h1>

    <pre class="mermaid">
+---
+title: Demo Class Diagram
+---
 		classDiagram
      accTitle: Demo Class Diagram
      accDescr: This class diagram show the abstract Animal class, and 3 classes that inherit from it: Duck, Fish, and Zebra.
--- a/demos/er.html
+++ b/demos/er.html
@@ -20,6 +20,9 @@
  <body>
    <pre class="mermaid">

+---
+title: This is a title
+---
 erDiagram
  %% title This is a title
  %% accDescription Test a description
--- a/demos/flowchart.html
+++ b/demos/flowchart.html
@@ -17,6 +17,9 @@
    <h2>Sample 1</h2>
    <h3>graph</h3>
    <pre class="mermaid">
+---
+title: This is a complicated flow
+---
    graph LR
      accTitle: This is a complicated flow
      accDescr: This is the descriptoin for the complicated flow.
@@ -221,6 +224,9 @@
    <h2>Sample 2</h2>
    <h3>graph</h3>
    <pre class="mermaid">
+---
+title: What to buy
+---
    graph TD
      accTitle: What to buy
      accDescr: Options of what to buy with Christmas money
--- a/demos/git.html
+++ b/demos/git.html
@@ -16,6 +16,9 @@
  <body>
    <h1>Git diagram demo</h1>
    <pre class="mermaid">
+---
+title: Simple Git diagram
+---
    gitGraph:
    options
    {
--- a/demos/index.html
+++ b/demos/index.html
@@ -48,6 +48,9 @@
      <li>
        <h2><a href="./journey.html">Journey</a></h2>
      </li>
+      <li>
+        <h2><a href="./mindmap.html">Mindmap</a></h2>
+      </li>
      <li>
        <h2><a href="./pie.html">Pie</a></h2>
      </li>
--- a/demos/journey.html
+++ b/demos/journey.html
@@ -16,8 +16,10 @@
  <body>
    <h1>Journey diagram demo</h1>
    <pre class="mermaid">
-         journey
-    title My working day
+---
+title: My working day 
+---
+     journey
      accTitle: Very simple journey demo
      accDescr: 2 main sections: work and home, each with just a few tasks

--- a/demos/mindmap.html
+++ b/demos/mindmap.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mindmap Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>Mindmap diagram demo</h1>
+    <pre class="mermaid">
+        mindmap
+        root
+            child1((Circle))
+                grandchild 1
+                grandchild 2
+            child2(Round rectangle)
+                grandchild 3
+                grandchild 4
+            child3[Square]
+                grandchild 5
+                ::icon(mdi mdi-fire)
+                gc6((grand<br/>child 6))
+                ::icon(mdi mdi-fire)
+                gc7((grand<br/>grand<br/>child 8))
+    </pre>
+
+    <h2>Mindmap with root wrapping text and a shape</h2>
+    <pre class="mermaid">
+        mindmap
+            root[A root with a long text that wraps to keep the node size in check]
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      import mermaidMindmap from './mermaid-mindmap.esm.mjs';
+
+      const ALLOWED_TAGS = [
+        'a',
+        'b',
+        'blockquote',
+        'br',
+        'dd',
+        'div',
+        'dl',
+        'dt',
+        'em',
+        'foreignObject',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'h7',
+        'h8',
+        'hr',
+        'i',
+        'li',
+        'ul',
+        'ol',
+        'p',
+        'pre',
+        'span',
+        'strike',
+        'strong',
+        'table',
+        'tbody',
+        'td',
+        'tfoot',
+        'th',
+        'thead',
+        'tr',
+      ];
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      await mermaid.registerExternalDiagrams([mermaidMindmap]);
+      mermaid.initialize({
+        theme: 'base',
+        startOnLoad: true,
+        logLevel: 0,
+        flowchart: {
+          useMaxWidth: false,
+          htmlLabels: true,
+        },
+        gantt: {
+          useMaxWidth: false,
+        },
+        useMaxWidth: false,
+      });
+      function callback() {
+        alert('It worked');
+      }
+      mermaid.parseError = function (err, hash) {
+        console.error('In parse error:');
+        console.error(err);
+      };
+    </script>
+  </body>
+</html>
--- a/demos/state.html
+++ b/demos/state.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" xmlns="http://www.w3.org/1999/html">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -17,6 +17,9 @@
    <h1>State diagram demos</h1>
    <h2>Very simple showing change from State1 to State2</h2>
    <pre class="mermaid">
+---
+title: Very simple diagram
+---
 		stateDiagram
 		  accTitle: This is the accessible title
      accDescr:This is an accessible description
@@ -30,8 +33,9 @@
    <p>
      <code>
        classDef notMoving fill:white<br />
-        classDef movement font-style:italic;<br />
-        classDef badBadEvent fill:#f00,color:white,font-weight:bold<br />
+        classDef movement font-style:italic<br />
+        classDef badBadEvent
+        fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow<br />
      </code>
    </p>
    <h4>And these are how they are applied:</h4>
@@ -43,15 +47,20 @@
      </code>
    </p>
    <pre class="mermaid">
-		stateDiagram-v2
+---
+title: Very simple diagram
+---
+		stateDiagram
+      direction TB
+
 		  accTitle: This is the accessible title
      accDescr: This is an accessible description

      classDef notMoving fill:white
-      classDef movement font-style:italic;
-      classDef badBadEvent fill:#f00,color:white,font-weight:bold
+      classDef movement font-style:italic
+      classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow

-      [*] --> Still
+      [*]--> Still
      Still --> [*]
      Still --> Moving
      Moving --> Still
@@ -61,10 +70,57 @@
      class Still notMoving
      class Moving, Crash movement
      class Crash badBadEvent
+      class end badBadEvent
    </pre>

    <hr />

+    <h2>Here is a diagram that uses the ::: operator to apply styles to states</h2>
+    <h4>Here are the <code>classDef</code> statements:</h4>
+    <p>
+      <code>
+        classDef notMoving fill:white<br />
+        classDef movement font-style:italic<br />
+        classDef badBadEvent
+        fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow<br />
+      </code>
+    </p>
+    <h4>And these are how they are applied:</h4>
+    <p>
+      <code>
+        [*] --> Still:::notMoving<br />
+        ...<br />
+        Still --> Moving:::movement<br />
+        ...<br />
+        Moving --> Crash:::movement<br />
+        Crash:::badBadEvent --> [*]<br />
+      </code>
+    </p>
+    <p>
+      Note that both the starting state and the end state have styles applied:<br />
+      The start state has the <i>start</i> classDef style<br />and the end state has the
+      <i>stop</i> classDef style applied.
+    </p>
+    <pre class="mermaid">
+    stateDiagram
+      direction TB
+
+		  accTitle: This is the accessible title
+      accDescr: This is an accessible description
+
+      classDef notMoving fill:white
+      classDef movement font-style:italic
+      classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+      [*] --> Still:::notMoving
+      Still --> [*]
+      Still --> Moving:::movement
+      Moving --> Still
+      Moving --> Crash:::movement
+      Crash:::badBadEvent --> [*]
+    </pre>
+    <hr />
+
    <pre class="mermaid">
    stateDiagram-v2
      accTitle: very very simple state
@@ -73,6 +129,20 @@
    </pre>
    <hr />

+    <h2>States with spaces in them</h2>
+    <pre class="mermaid">
+      stateDiagram
+        classDef yourState font-style:italic,font-weight:bold,fill:white
+
+        yswsii: Your state with spaces in it
+        [*] --> yswsii:::yourState
+        [*] --> SomeOtherState
+        SomeOtherState --> YetAnotherState
+        yswsii --> YetAnotherState
+        YetAnotherState --> [*]
+    </pre>
+    <hr />
+
    <h2>You can label the relationships</h2>
    <pre class="mermaid">
    stateDiagram-v2
@@ -121,7 +191,7 @@
    <pre class="mermaid">
      stateDiagram-v2
      [*] --> S1
-      S1 --> S2: This long line uses a br tag<br/>to create multiple<br/>lines.
+      S1 --> S2: This long line uses a br tag<br />to create multiple<br />lines.
      S1 --> S3: This transition descripton uses \na newline character\nto create multiple\nlines.

    </pre>
@@ -133,7 +203,7 @@
      direction LR
      State1: A state with a note
      note right of State1
-        Important information!<br />You can write notes.<br/>And\nthey\ncan\nbe\nmulti-\nline.
+        Important information!<br />You can write notes.<br />And\nthey\ncan\nbe\nmulti-\nline.
      end note
      State1 --> State2
      note left of State2 : Notes can be to the left of a state\n(like this one).
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@

 #### Defined in

-[defaultConfig.ts:1881](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L1881)
+[defaultConfig.ts:1933](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L1933)

 ---

--- a/docs/config/usage.md
+++ b/docs/config/usage.md
@@ -348,7 +348,7 @@ on what kind of integration you use.

 ## Using the mermaid object

-Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
+It is possible to set some configuration via the mermaid object. The two parameters that are supported using this
 approach are:

 - mermaid.startOnLoad
--- a/docs/intro/index.md
+++ b/docs/intro/index.md
@@ -14,7 +14,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins

 <img src="/header.png" alt="" />

-[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
+[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)

 <!-- Mermaid book banner -->

--- a/docs/misc/integrations.md
+++ b/docs/misc/integrations.md
@@ -39,6 +39,7 @@ They also serve as proof of concept, for the variety of things that can be built
  - [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
 - [JetBrains IDE eg Pycharm](https://www.jetbrains.com/go/guide/tips/mermaid-js-support-in-markdown/)
 - [mermerd](https://github.com/KarnerTh/mermerd)
+- Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)

 ## CRM/ERP/Similar

@@ -121,6 +122,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
 - [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
 - [Vim](https://www.vim.org)
+  - [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid)
  - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
 - [GNU Emacs](https://www.gnu.org/software/emacs/)
  - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
--- a/docs/syntax/c4c.md
+++ b/docs/syntax/c4c.md
@@ -567,7 +567,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
        Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
    }

-    Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
+    Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
        Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
            Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
        }
@@ -619,7 +619,7 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
        Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
    }

-    Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
+    Deployment_Node(comp, "Customer's computer", "Microsoft Windows or Apple macOS"){
        Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox,<br/> Apple Safari or Microsoft Edge"){
            Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
        }
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -14,6 +14,9 @@ The class diagram is the main building block of object-oriented modeling. It is
 Mermaid can render class diagrams.

 ```mermaid-example
+---
+title: Animal example
+---
 classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
@@ -40,6 +43,9 @@ classDiagram
 ```

 ```mermaid
+---
+title: Animal example
+---
 classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
@@ -77,6 +83,9 @@ A single instance of a class in the diagram contains three compartments:
 - The bottom compartment contains the operations the class can execute. They are also left-aligned and the first letter is lowercase.

 ```mermaid-example
+---
+title: Bank example
+---
 classDiagram
    class BankAccount
    BankAccount : +String owner
@@ -87,6 +96,9 @@ classDiagram
 ```

 ```mermaid
+---
+title: Bank example
+---
 classDiagram
    class BankAccount
    BankAccount : +String owner
@@ -559,7 +571,7 @@ You would define these actions on a separate line after all classes have been de

 ## Notes

-It is possible to add notes on digram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"`
+It is possible to add notes on diagram using `note "line1\nline2"` or note for class using `note for class "line1\nline2"`

 ### Examples

--- a/docs/syntax/entityRelationshipDiagram.md
+++ b/docs/syntax/entityRelationshipDiagram.md
@@ -13,6 +13,9 @@ Note that practitioners of ER modelling almost always refer to _entity types_ si
 Mermaid can render ER diagrams

 ```mermaid-example
+---
+title: Order example
+---
 erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
@@ -20,6 +23,9 @@ erDiagram
 ```

 ```mermaid
+---
+title: Order example
+---
 erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
--- a/docs/syntax/flowchart.md
+++ b/docs/syntax/flowchart.md
@@ -15,11 +15,17 @@ It can also accommodate different arrow types, multi directional arrows, and lin
 ### A node (default)

 ```mermaid-example
+---
+title: Node
+---
 flowchart LR
    id
 ```

 ```mermaid
+---
+title: Node
+---
 flowchart LR
    id
 ```
@@ -33,11 +39,17 @@ found for the node that will be used. Also if you define edges for the node late
 one previously defined will be used when rendering the box.

 ```mermaid-example
+---
+title: Node with text
+---
 flowchart LR
    id1[This is the text in the box]
 ```

 ```mermaid
+---
+title: Node with text
+---
 flowchart LR
    id1[This is the text in the box]
 ```
@@ -980,7 +992,7 @@ flowchart LR

 ## Configuration...

-Is it possible to adjust the width of the rendered flowchart.
+It is possible to adjust the width of the rendered flowchart.

 This is done by defining **mermaid.flowchartConfig** or by the CLI to use a JSON file with the configuration. How to use the CLI is described in the mermaidCLI page.
 mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.
--- a/docs/syntax/gitgraph.md
+++ b/docs/syntax/gitgraph.md
@@ -13,31 +13,37 @@ These kind of diagram are particularly helpful to developers and devops teams to
 Mermaid can render Git diagrams

 ```mermaid-example
-    gitGraph
-       commit
-       commit
-       branch develop
-       checkout develop
-       commit
-       commit
-       checkout main
-       merge develop
-       commit
-       commit
+---
+title: Example Git diagram
+---
+gitGraph
+   commit
+   commit
+   branch develop
+   checkout develop
+   commit
+   commit
+   checkout main
+   merge develop
+   commit
+   commit
 ```

 ```mermaid
-    gitGraph
-       commit
-       commit
-       branch develop
-       checkout develop
-       commit
-       commit
-       checkout main
-       merge develop
-       commit
-       commit
+---
+title: Example Git diagram
+---
+gitGraph
+   commit
+   commit
+   branch develop
+   checkout develop
+   commit
+   commit
+   checkout main
+   merge develop
+   commit
+   commit
 ```

 In Mermaid, we support the basic git operations like:
--- a/docs/syntax/mindmap.md
+++ b/docs/syntax/mindmap.md
@@ -21,7 +21,7 @@ mindmap
      Popularisation
        British popular psychology author Tony Buzan
    Research
-      On effectivness<br/>and eatures
+      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
@@ -42,7 +42,7 @@ mindmap
      Popularisation
        British popular psychology author Tony Buzan
    Research
-      On effectivness<br/>and eatures
+      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
@@ -152,6 +152,18 @@ mindmap
    id)I am a cloud(
 ```

+### Hexagon
+
+```mermaid-example
+mindmap
+    id{{I am a hexagon}}
+```
+
+```mermaid
+mindmap
+    id{{I am a hexagon}}
+```
+
 ### Default

 ```mermaid-example
--- a/docs/syntax/pie.md
+++ b/docs/syntax/pie.md
@@ -35,7 +35,7 @@ Drawing a pie chart is really simple in mermaid.
 - Followed by dataSet. Pie slices will be ordered clockwise in the same order as the labels.
  - `label` for a section in the pie diagram within `" "` quotes.
  - Followed by `:` colon as separator
-  - Followed by `positive numeric value` (supported upto two decimal places)
+  - Followed by `positive numeric value` (supported up to two decimal places)

 \[pie] \[showData] (OPTIONAL)
 \[title] \[titlevalue] (OPTIONAL)
--- a/docs/syntax/sequenceDiagram.md
+++ b/docs/syntax/sequenceDiagram.md
@@ -727,7 +727,7 @@ text.actor {

 ## Configuration

-Is it possible to adjust the margins for rendering the sequence diagram.
+It is possible to adjust the margins for rendering the sequence diagram.

 This is done by defining `mermaid.sequenceConfig` or by the CLI to use a json file with the configuration.
 How to use the CLI is described in the [mermaidCLI](../config/mermaidCLI.md) page.
--- a/docs/syntax/stateDiagram.md
+++ b/docs/syntax/stateDiagram.md
@@ -6,11 +6,17 @@

 # State diagrams

-> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems. State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the case, while at other times this is a reasonable abstraction." Wikipedia
+> "A state diagram is a type of diagram used in computer science and related fields to describe the behavior of systems.
+> State diagrams require that the system described is composed of a finite number of states; sometimes, this is indeed the
+> case, while at other times this is a reasonable abstraction." Wikipedia

-Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make it easier for users to share diagrams between mermaid and plantUml.
+Mermaid can render state diagrams. The syntax tries to be compliant with the syntax used in plantUml as this will make
+it easier for users to share diagrams between mermaid and plantUml.

 ```mermaid-example
+---
+title: Simple sample
+---
 stateDiagram-v2
    [*] --> Still
    Still --> [*]
@@ -22,6 +28,9 @@ stateDiagram-v2
 ```

 ```mermaid
+---
+title: Simple sample
+---
 stateDiagram-v2
    [*] --> Still
    Still --> [*]
@@ -56,20 +65,23 @@ stateDiagram
    Crash --> [*]
 ```

-In state diagrams systems are described in terms of its states and how the systems state can change to another state via a transitions. The example diagram above shows three states **Still**, **Moving** and **Crash**. You start in the state of Still. From Still you can change the state to Moving. In Moving you can change the state either back to Still or to Crash. There is no transition from Still to Crash.
+In state diagrams systems are described in terms of _states_ and how one _state_ can change to another _state_ via
+a _transition._ The example diagram above shows three states: **Still**, **Moving** and **Crash**. You start in the
+**Still** state. From **Still** you can change to the **Moving** state. From **Moving** you can change either back to the **Still** state or to
+the **Crash** state. There is no transition from **Still** to **Crash**. (You can't crash if you're still.)

 ## States

-A state can be declared in multiple ways. The simplest way is to define a state id as a description.
+A state can be declared in multiple ways. The simplest way is to define a state with just an id:

 ```mermaid-example
 stateDiagram-v2
-    s1
+    stateId
 ```

 ```mermaid
 stateDiagram-v2
-    s1
+    stateId
 ```

 Another way is by using the state keyword with a description as per below:
@@ -100,7 +112,8 @@ stateDiagram-v2

 Transitions are path/edges when one state passes into another. This is represented using text arrow, "-->".

-When you define a transition between two states and the states are not already defined the undefined states are defined with the id from the transition. You can later add descriptions to states defined this way.
+When you define a transition between two states and the states are not already defined, the undefined states are defined
+with the id from the transition. You can later add descriptions to states defined this way.

 ```mermaid-example
 stateDiagram-v2
@@ -112,7 +125,7 @@ stateDiagram-v2
    s1 --> s2
 ```

-It is possible to add text to a transition. To describe what it represents.
+It is possible to add text to a transition to describe what it represents:

 ```mermaid-example
 stateDiagram-v2
@@ -126,7 +139,8 @@ stateDiagram-v2

 ## Start and End

-There are two special states indicating the start and stop of the diagram. These are written with the \[\*] syntax and the direction of the transition to it defines it either as a start or a stop state.
+There are two special states indicating the start and stop of the diagram. These are written with the \[\*] syntax and
+the direction of the transition to it defines it either as a start or a stop state.

 ```mermaid-example
 stateDiagram-v2
@@ -142,10 +156,11 @@ stateDiagram-v2

 ## Composite states

-In a real world use of state diagrams you often end up with diagrams that are multi-dimensional as one state can
+In a real world use of state diagrams you often end up with diagrams that are multidimensional as one state can
 have several internal states. These are called composite states in this terminology.

-In order to define a composite state you need to use the state keyword followed by an id and the body of the composite state between {}. See the example below:
+In order to define a composite state you need to use the state keyword followed by an id and the body of the composite
+state between {}. See the example below:

 ```mermaid-example
 stateDiagram-v2
@@ -305,7 +320,7 @@ It is possible to specify a fork in the diagram using <\<fork>> <\<join>>.

 ## Notes

-Sometimes nothing says it better then a Post-it note. That is also the case in state diagrams.
+Sometimes nothing says it better than a Post-it note. That is also the case in state diagrams.

 Here you can choose to put the note to the _right of_ or to the _left of_ a node.

@@ -375,7 +390,8 @@ stateDiagram-v2

 ## Setting the direction of the diagram

-With state diagrams you can use the direction statement to set the direction which the diagram will render like in this example.
+With state diagrams you can use the direction statement to set the direction which the diagram will render like in this
+example.

 ```mermaid-example
 stateDiagram
@@ -405,7 +421,9 @@ stateDiagram

 ## Comments

-Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
+Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their
+own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next
+newline will be treated as a comment, including any diagram syntax

 ```mermaid-example
 stateDiagram-v2
@@ -429,22 +447,204 @@ stateDiagram-v2
    Crash --> [*]
 ```

-## Styling
+## Styling with classDefs

-Styling of the a state diagram is done by defining a number of css classes. During rendering these classes are extracted from the file located at src/themes/state.scss
+As with other diagrams (like flowcharts), you can define a style in the diagram itself and apply that named style to a
+state or states in the diagram.
+
+**These are the current limitations with state diagram classDefs:**
+
+1.  Cannot be applied to start or end states
+2.  Cannot be applied to or within composite states
+
+_These are in development and will be available in a future version._
+
+You define a style using the `classDef` keyword, which is short for "class definition" (where "class" means something
+like a _CSS class_)
+followed by _a name for the style,_
+and then one or more _property-value pairs_. Each _property-value pair_ is
+a _[valid CSS property name](https://www.w3.org/TR/CSS/#properties)_ followed by a colon (`:`) and then a _value._
+
+Here is an example of a classDef with just one property-value pair:
+
+        classDef movement font-style:italic;
+
+where
+
+- the _name_ of the style is `movement`
+- the only _property_ is `font-style` and its _value_ is `italic`
+
+If you want to have more than one _property-value pair_ then you put a comma (`,`) between each _property-value pair._
+
+Here is an example with three property-value pairs:
+
+        classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+where
+
+- the _name_ of the style is `badBadEvent`
+- the first _property_ is `fill` and its _value_ is `#f00`
+- the second _property_ is `color` and its _value_ is `white`
+- the third _property_ is `font-weight` and its _value_ is `bold`
+- the fourth _property_ is `stroke-width` and its _value_ is `2px`
+- the fifth _property_ is `stroke` and its _value_ is `yello`
+
+### Apply classDef styles to states
+
+There are two ways to apply a `classDef` style to a state:
+
+1.  use the `class` keyword to apply a classDef style to one or more states in a single statement, or
+2.  use the `:::` operator to apply a classDef style to a state as it is being used in a transition statement (e.g. with an arrow
+    to/from another state)
+
+#### 1. `class` statement
+
+A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:
+
+```text
+    class [one or more state names, separated by commas] [name of a style defined with classDef]
+```
+
+Here is an example applying the `badBadEvent` style to a state named `Crash`:
+
+```text
+class Crash badBadEvent
+```
+
+Here is an example applying the `movement` style to the two states `Moving` and `Crash`:
+
+```text
+class Moving, Crash movement
+```
+
+Here is a diagram that shows the examples in use. Note that the `Crash` state has two classDef styles applied: `movement`
+and `badBadEvent`
+
+```mermaid-example
+   stateDiagram
+   direction TB
+
+   accTitle: This is the accessible title
+   accDescr: This is an accessible description
+
+   classDef notMoving fill:white
+   classDef movement font-style:italic
+   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+   [*]--> Still
+   Still --> [*]
+   Still --> Moving
+   Moving --> Still
+   Moving --> Crash
+   Crash --> [*]
+
+   class Still notMoving
+   class Moving, Crash movement
+   class Crash badBadEvent
+   class end badBadEvent
+```
+
+```mermaid
+   stateDiagram
+   direction TB
+
+   accTitle: This is the accessible title
+   accDescr: This is an accessible description
+
+   classDef notMoving fill:white
+   classDef movement font-style:italic
+   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+   [*]--> Still
+   Still --> [*]
+   Still --> Moving
+   Moving --> Still
+   Moving --> Crash
+   Crash --> [*]
+
+   class Still notMoving
+   class Moving, Crash movement
+   class Crash badBadEvent
+   class end badBadEvent
+```
+
+#### 2. `:::` operator to apply a style to a state
+
+You can apply a classDef style to a state using the `:::` (three colons) operator. The syntax is
+
+```text
+[state]:::[style name]
+```
+
+You can use this in a diagram within a statement using a class. This includes the start and end states. For example:
+
+```mermaid-example
+stateDiagram
+   direction TB
+
+   accTitle: This is the accessible title
+   accDescr: This is an accessible description
+
+   classDef notMoving fill:white
+   classDef movement font-style:italic;
+   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+   [*] --> Still:::notMoving
+   Still --> [*]
+   Still --> Moving:::movement
+   Moving --> Still
+   Moving --> Crash:::movement
+   Crash:::badBadEvent --> [*]
+```
+
+```mermaid
+stateDiagram
+   direction TB
+
+   accTitle: This is the accessible title
+   accDescr: This is an accessible description
+
+   classDef notMoving fill:white
+   classDef movement font-style:italic;
+   classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
+
+   [*] --> Still:::notMoving
+   Still --> [*]
+   Still --> Moving:::movement
+   Moving --> Still
+   Moving --> Crash:::movement
+   Crash:::badBadEvent --> [*]
+```

 ## Spaces in state names

-Spaces can be added to a state by defining it at the top and referencing the acronym later.
+Spaces can be added to a state by first defining the state with an id and then referencing the id later.
+
+In the following example there is a state with the id **yswsii** and description **Your state with spaces in it**.
+After it has been defined, **yswsii** is used in the diagram in the first transition (`[*] --> yswsii`)
+and also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).\
+(**yswsii** has been styled so that it is different from the other states.)

 ```mermaid-example
-stateDiagram-v2
-    Yswsii: Your state with spaces in it
-    [*] --> Yswsii
+stateDiagram
+    classDef yourState font-style:italic,font-weight:bold,fill:white
+
+    yswsii: Your state with spaces in it
+    [*] --> yswsii:::yourState
+    [*] --> SomeOtherState
+    SomeOtherState --> YetAnotherState
+    yswsii --> YetAnotherState
+    YetAnotherState --> [*]
 ```

 ```mermaid
-stateDiagram-v2
-    Yswsii: Your state with spaces in it
-    [*] --> Yswsii
+stateDiagram
+    classDef yourState font-style:italic,font-weight:bold,fill:white
+
+    yswsii: Your state with spaces in it
+    [*] --> yswsii:::yourState
+    [*] --> SomeOtherState
+    SomeOtherState --> YetAnotherState
+    yswsii --> YetAnotherState
+    YetAnotherState --> [*]
 ```
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
  "version": "9.2.2",
  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
  "type": "module",
-  "packageManager": "pnpm@7.15.0",
+  "packageManager": "pnpm@7.17.0",
  "keywords": [
    "diagram",
    "markdown",
@@ -15,8 +15,9 @@
    "git graph"
  ],
  "scripts": {
-    "build:mermaid": "ts-node-esm --transpileOnly .vite/build.ts --mermaid",
    "build:vite": "ts-node-esm --transpileOnly .vite/build.ts",
+    "build:mermaid": "pnpm build:vite --mermaid",
+    "build:viz": "pnpm build:mermaid --visualize",
    "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-mindmap/tsconfig.json --emitDeclarationOnly",
    "build:watch": "pnpm build:vite --watch",
    "build": "pnpm run -r clean && concurrently \"pnpm build:vite\" \"pnpm build:types\"",
@@ -59,11 +60,13 @@
    "@cspell/eslint-plugin": "^6.14.2",
    "@types/eslint": "^8.4.10",
    "@types/express": "^4.17.14",
+    "@types/js-yaml": "^4.0.5",
    "@types/jsdom": "^20.0.1",
    "@types/lodash": "^4.14.188",
    "@types/mdast": "^3.0.10",
    "@types/node": "^18.11.9",
    "@types/prettier": "^2.7.1",
+    "@types/rollup-plugin-visualizer": "^4.2.1",
    "@typescript-eslint/eslint-plugin": "^5.42.1",
    "@typescript-eslint/parser": "^5.42.1",
    "@vitest/coverage-c8": "^0.25.1",
@@ -80,15 +83,18 @@
    "eslint-plugin-jest": "^27.1.5",
    "eslint-plugin-jsdoc": "^39.6.2",
    "eslint-plugin-json": "^3.1.0",
+    "eslint-plugin-lodash": "^7.4.0",
    "eslint-plugin-markdown": "^3.0.0",
    "eslint-plugin-no-only-tests": "^3.1.0",
    "eslint-plugin-tsdoc": "^0.2.17",
+    "eslint-plugin-unicorn": "^45.0.0",
    "express": "^4.18.2",
    "globby": "^13.1.2",
    "husky": "^8.0.2",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^29.3.1",
    "jison": "^0.4.18",
+    "js-yaml": "^4.1.0",
    "jsdom": "^20.0.2",
    "lint-staged": "^13.0.3",
    "path-browserify": "^1.0.1",
@@ -96,6 +102,7 @@
    "prettier": "^2.7.1",
    "prettier-plugin-jsdoc": "^0.4.2",
    "rimraf": "^3.0.2",
+    "rollup-plugin-visualizer": "^5.8.3",
    "start-server-and-test": "^1.14.0",
    "ts-node": "^10.9.1",
    "typescript": "^4.8.4",
@@ -103,15 +110,8 @@
    "vitepress": "^1.0.0-alpha.28",
    "vitepress-plugin-mermaid": "^2.0.8",
    "vitepress-plugin-search": "^1.0.4-alpha.15",
-    "vitest": "^0.25.1"
+    "vitest": "^0.25.3"
  },
-  "resolutions": {
-    "d3": "^7.6.1"
-  },
-  "sideEffects": [
-    "**/*.css",
-    "**/*.scss"
-  ],
  "volta": {
    "node": "18.12.1"
  }
--- a/packages/mermaid-mindmap/src/mindmap.spec.js
+++ b/packages/mermaid-mindmap/src/mindmap.spec.js
@@ -172,6 +172,18 @@ root
      expect(mm.children.length).toEqual(0);
      expect(mm.type).toEqual(mindmap.yy.nodeType.BANG);
    });
+
+    it('MMP-12-a mutiple types (hexagon)', function () {
+      let str = `mindmap
+ root{{the root}}
+`;
+
+      mindmap.parse(str);
+      const mm = mindmap.yy.getMindmap();
+      expect(mm.type).toEqual(mindmap.yy.nodeType.HEXAGON);
+      expect(mm.descr).toEqual('the root');
+      expect(mm.children.length).toEqual(0);
+    });
  });
  describe('decorations', function () {
    it('MMP-13 should be possible to set an icon for the node', function () {
--- a/packages/mermaid-mindmap/src/mindmapDb.js
+++ b/packages/mermaid-mindmap/src/mindmapDb.js
@@ -42,6 +42,9 @@ export const addNode = (level, id, descr, type) => {
    case nodeType.RECT:
      node.padding = 2 * conf.mindmap.padding;
      break;
+    case nodeType.HEXAGON:
+      node.padding = 2 * conf.mindmap.padding;
+      break;
    default:
      node.padding = conf.mindmap.padding;
  }
@@ -79,6 +82,7 @@ export const nodeType = {
  CIRCLE: 3,
  CLOUD: 4,
  BANG: 5,
+  HEXAGON: 6,
 };

 export const getType = (startStr, endStr) => {
@@ -94,6 +98,8 @@ export const getType = (startStr, endStr) => {
      return nodeType.CLOUD;
    case '))':
      return nodeType.BANG;
+    case '{{':
+      return nodeType.HEXAGON;
    default:
      return nodeType.DEFAULT;
  }
@@ -127,6 +133,8 @@ export const type2Str = (type) => {
      return 'cloud';
    case nodeType.BANG:
      return 'bang';
+    case nodeType.HEXAGON:
+      return 'hexgon';
    default:
      return 'no-border';
  }
--- a/packages/mermaid-mindmap/src/mindmapRenderer.js
+++ b/packages/mermaid-mindmap/src/mindmapRenderer.js
@@ -92,10 +92,6 @@ function addNodes(mindmap, cy, conf, level) {
 */
 function layoutMindmap(node, conf) {
  return new Promise((resolve) => {
-    if (node.children.length === 0) {
-      return node;
-    }
-
    // Add temporary render element
    const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none');
    const cy = cytoscape({
--- a/packages/mermaid-mindmap/src/parser/mindmap.jison
+++ b/packages/mermaid-mindmap/src/parser/mindmap.jison
@@ -33,11 +33,12 @@
 "))"               { yy.getLogger().trace('Explosion Bang'); this.begin('NODE');return 'NODE_DSTART'; }
 ")"               { yy.getLogger().trace('Cloud Bang'); this.begin('NODE');return 'NODE_DSTART'; }
 "(("               { this.begin('NODE');return 'NODE_DSTART'; }
+"{{"               { this.begin('NODE');return 'NODE_DSTART'; }
 "("                { this.begin('NODE');return 'NODE_DSTART'; }
 "["                { this.begin('NODE');return 'NODE_DSTART'; }
 [\s]+              return 'SPACELIST'                 /* skip all whitespace */    ;
 // !(-\()            return 'NODE_ID';
-[^\(\[\n\-\)]+         return 'NODE_ID';
+[^\(\[\n\-\)\{\}]+         return 'NODE_ID';
 <<EOF>>            return 'EOF';
 <NODE>["]          { yy.getLogger().trace('Starting NSTR');this.begin("NSTR");}
 <NSTR>[^"]+        { yy.getLogger().trace('description:', yytext); return "NODE_DESCR";}
@@ -45,11 +46,12 @@
 <NODE>[\)]\)         {this.popState();yy.getLogger().trace('node end ))');return "NODE_DEND";}
 <NODE>[\)]         {this.popState();yy.getLogger().trace('node end )');return "NODE_DEND";}
 <NODE>[\]]         {this.popState();yy.getLogger().trace('node end ...',yytext);return "NODE_DEND";}
+<NODE>"}}"         {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";}
 <NODE>"(-"         {this.popState();yy.getLogger().trace('node end (-');return "NODE_DEND";}
 <NODE>"-)"         {this.popState();yy.getLogger().trace('node end (-');return "NODE_DEND";}
 <NODE>"(("         {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";}
-<NODE>"("         {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";}
-<NODE>[^\)\]\(]+     { yy.getLogger().trace('Long description:', yytext);   return 'NODE_DESCR';}
+<NODE>"("          {this.popState();yy.getLogger().trace('node end ((');return "NODE_DEND";}
+<NODE>[^\)\]\(\}]+     { yy.getLogger().trace('Long description:', yytext);   return 'NODE_DESCR';}
 <NODE>.+(?!\(\()     { yy.getLogger().trace('Long description:', yytext);   return 'NODE_DESCR';}
 // [\[]               return 'NODE_START';
 // .+                 return 'TXT' ;
--- a/packages/mermaid-mindmap/src/styles.js
+++ b/packages/mermaid-mindmap/src/styles.js
@@ -17,7 +17,7 @@ const genSections = (options) => {
    sections += `
    .section-${i - 1} rect, .section-${i - 1} path, .section-${i - 1} circle, .section-${
      i - 1
-    } path  {
+    } polygon, .section-${i - 1} path  {
      fill: ${options['cScale' + i]};
    }
    .section-${i - 1} text {
@@ -55,7 +55,7 @@ const getStyles = (options) =>
    stroke-width: 3;
  }
  ${genSections(options)}
-  .section-root rect, .section-root path, .section-root circle  {
+  .section-root rect, .section-root path, .section-root circle, .section-root polygon  {
    fill: ${options.git0};
  }
  .section-root text {
--- a/packages/mermaid-mindmap/src/svgDraw.js
+++ b/packages/mermaid-mindmap/src/svgDraw.js
@@ -145,6 +145,45 @@ const circleBkg = function (elem, node) {
    .attr('class', 'node-bkg node-' + db.type2Str(node.type))
    .attr('r', node.width / 2);
 };
+
+/**
+ *
+ * @param parent
+ * @param w
+ * @param h
+ * @param points
+ * @param node
+ */
+function insertPolygonShape(parent, w, h, points, node) {
+  return parent
+    .insert('polygon', ':first-child')
+    .attr(
+      'points',
+      points
+        .map(function (d) {
+          return d.x + ',' + d.y;
+        })
+        .join(' ')
+    )
+    .attr('transform', 'translate(' + (node.width - w) / 2 + ', ' + h + ')');
+}
+
+const hexagonBkg = function (elem, node) {
+  const h = node.height;
+  const f = 4;
+  const m = h / f;
+  const w = node.width - node.padding + 2 * m;
+  const points = [
+    { x: m, y: 0 },
+    { x: w - m, y: 0 },
+    { x: w, y: -h / 2 },
+    { x: w - m, y: -h },
+    { x: m, y: -h },
+    { x: 0, y: -h / 2 },
+  ];
+  const shapeSvg = insertPolygonShape(elem, w, h, points, node);
+};
+
 const roundedRectBkg = function (elem, node) {
  elem
    .append('rect')
@@ -252,6 +291,9 @@ export const drawNode = function (elem, node, fullSection, conf) {
    case db.nodeType.BANG:
      bangBkg(bkgElem, node, section, conf);
      break;
+    case db.nodeType.HEXAGON:
+      hexagonBkg(bkgElem, node, section, conf);
+      break;
  }

  // Position the node to its coordinate
--- a/packages/mermaid/.lintstagedrc.json
+++ b/packages/mermaid/.lintstagedrc.json
@@ -1,6 +0,0 @@
-{
-  "src/docs/**": ["pnpm --filter mermaid run docs:build --git"],
-  "src/docs.mts": ["pnpm --filter mermaid run docs:build --git"],
-  "src/(defaultConfig|config|mermaidAPI).ts": ["pnpm --filter mermaid run docs:build --git"],
-  "*.jison": ["pnpm run lint:jison"]
-}
--- a/packages/mermaid/.lintstagedrc.mjs
+++ b/packages/mermaid/.lintstagedrc.mjs
@@ -0,0 +1,7 @@
+import baseConfig from '../../.lintstagedrc.mjs';
+export default {
+  ...baseConfig,
+  'src/docs/**': ['pnpm --filter mermaid run docs:build --git'],
+  'src/docs.mts': ['pnpm --filter mermaid run docs:build --git'],
+  'src/(defaultConfig|config|mermaidAPI).ts': ['pnpm --filter mermaid run docs:build --git'],
+};
--- a/packages/mermaid/README.md
+++ b/packages/mermaid/README.md
@@ -1,23 +1,6 @@
 # mermaid

-[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
-
-# Whoa, what's going on here?
-
-We are transforming the Mermaid repository to a so called mono-repo. This is a part of the effort to decouple the diagrams from the core of mermaid. This will:
-
- Make it possible to select which diagrams to include on your site
- Open up for lazy loading
- Make it possible to add diagrams from outside of the Mermaid repository
- Separate the release flow between different diagrams and the Mermaid core
-
-As such be aware of some changes..
-
-# We use pnpm now
-
-# The source code has moved
-
-It is now located in the src folder for each respective package located as subfolders in packages.
+[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)

 English | [简体中文](./README.zh-CN.md)

--- a/packages/mermaid/README.zh-CN.md
+++ b/packages/mermaid/README.zh-CN.md
@@ -1,6 +1,6 @@
 # mermaid

-[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
+[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)

 [English](./README.md) | 简体中文

--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,7 +1,7 @@
 {
  "name": "mermaid",
  "version": "9.2.2",
-  "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
+  "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
  "main": "./dist/mermaid.min.js",
  "module": "./dist/mermaid.core.mjs",
  "types": "./dist/mermaid.d.ts",
@@ -26,12 +26,13 @@
  "scripts": {
    "clean": "rimraf dist",
    "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup",
-    "docs:build": "rimraf ../../docs && pnpm docs:code && ts-node-esm src/docs.mts",
-    "docs:verify": "pnpm docs:code && ts-node-esm src/docs.mts --verify",
+    "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts",
+    "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm src/docs.mts --verify",
    "docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress",
    "docs:build:vitepress": "pnpm docs:pre:vitepress && vitepress build src/vitepress",
    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"vitepress dev src/vitepress\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
    "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
+    "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
    "release": "pnpm build",
    "prepublishOnly": "pnpm -w run build"
  },
@@ -54,13 +55,12 @@
  "dependencies": {
    "@braintree/sanitize-url": "^6.0.0",
    "d3": "^7.0.0",
-    "dagre": "^0.8.5",
-    "dagre-d3": "^0.6.4",
+    "dagre-d3-es": "7.0.4",
    "dompurify": "2.4.1",
    "fast-clone": "^1.5.13",
    "graphlib": "^2.1.8",
    "khroma": "^2.0.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
    "moment-mini": "^2.24.0",
    "non-layered-tidy-tree-layout": "^2.0.2",
    "stylis": "^4.1.2",
@@ -70,7 +70,7 @@
    "@types/d3": "^7.4.0",
    "@types/dompurify": "^2.4.0",
    "@types/jsdom": "^20.0.1",
-    "@types/lodash": "^4.14.188",
+    "@types/lodash-es": "^4.17.6",
    "@types/micromatch": "^4.0.2",
    "@types/prettier": "^2.7.1",
    "@types/stylis": "^4.0.2",
@@ -80,6 +80,7 @@
    "chokidar": "^3.5.3",
    "concurrently": "^7.5.0",
    "coveralls": "^3.1.1",
+    "cspell": "^6.14.3",
    "globby": "^13.1.2",
    "identity-obj-proxy": "^3.0.0",
    "jison": "^0.4.18",
@@ -91,16 +92,12 @@
    "prettier": "^2.7.1",
    "remark": "^14.0.2",
    "rimraf": "^3.0.2",
-    "shiki": "^0.11.1",
    "start-server-and-test": "^1.14.0",
    "typedoc": "^0.23.18",
    "typedoc-plugin-markdown": "^3.13.6",
    "typescript": "^4.8.4",
    "unist-util-flatmap": "^1.0.0"
  },
-  "resolutions": {
-    "d3": "^7.0.0"
-  },
  "files": [
    "dist",
    "README.md"
--- a/packages/mermaid/src/Diagram.ts
+++ b/packages/mermaid/src/Diagram.ts
@@ -2,6 +2,7 @@ import * as configApi from './config';
 import { log } from './logger';
 import { getDiagram, registerDiagram } from './diagram-api/diagramAPI';
 import { detectType, getDiagramLoader } from './diagram-api/detectType';
+import { extractFrontMatter } from './diagram-api/frontmatter';
 import { isDetailedError, type DetailedError } from './utils';

 export type ParseErrorFunction = (err: string | DetailedError, hash?: any) => void;
@@ -29,6 +30,16 @@ export class Diagram {
    this.db.clear?.();
    this.renderer = diagram.renderer;
    this.parser = diagram.parser;
+    const originalParse = this.parser.parse.bind(this.parser);
+    // Wrap the jison parse() method to handle extracting frontmatter.
+    //
+    // This can't be done in this.parse() because some code
+    // directly calls diagram.parser.parse(), bypassing this.parse().
+    //
+    // Similarly, we can't do this in getDiagramFromText() because some code
+    // calls diagram.db.clear(), which would reset anything set by
+    // extractFrontMatter().
+    this.parser.parse = (text: string) => originalParse(extractFrontMatter(text, this.db));
    this.parser.parser.yy = this.db;
    if (diagram.init) {
      diagram.init(cnf);
@@ -45,7 +56,7 @@ export class Diagram {
    }
    try {
      text = text + '\n';
-      this.db.clear();
+      this.db.clear?.();
      this.parser.parse(text);
      return true;
    } catch (error) {
--- a/packages/mermaid/src/accessibility.ts
+++ b/packages/mermaid/src/accessibility.ts
@@ -4,7 +4,7 @@
 */
 import { D3Element } from './mermaidAPI';

-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash-es/isEmpty';

 /**
 * Add aria-roledescription to the svg element to the diagramType
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -189,6 +189,7 @@ export interface C4DiagramConfig extends BaseDiagramConfig {
 }

 export interface GitGraphDiagramConfig extends BaseDiagramConfig {
+  titleTopMargin?: number;
  diagramPadding?: number;
  nodeLabel?: NodeLabel;
  mainBranchName?: string;
@@ -227,6 +228,7 @@ export interface MindmapDiagramConfig extends BaseDiagramConfig {
 export type PieDiagramConfig = BaseDiagramConfig;

 export interface ErDiagramConfig extends BaseDiagramConfig {
+  titleTopMargin?: number;
  diagramPadding?: number;
  layoutDirection?: string;
  minEntityWidth?: number;
@@ -238,6 +240,7 @@ export interface ErDiagramConfig extends BaseDiagramConfig {
 }

 export interface StateDiagramConfig extends BaseDiagramConfig {
+  titleTopMargin?: number;
  arrowMarkerAbsolute?: boolean;
  dividerMargin?: number;
  sizeUnit?: number;
@@ -258,6 +261,7 @@ export interface StateDiagramConfig extends BaseDiagramConfig {
 }

 export interface ClassDiagramConfig extends BaseDiagramConfig {
+  titleTopMargin?: number;
  arrowMarkerAbsolute?: boolean;
  dividerMargin?: number;
  padding?: number;
@@ -343,6 +347,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
 }

 export interface FlowchartDiagramConfig extends BaseDiagramConfig {
+  titleTopMargin?: number;
  arrowMarkerAbsolute?: boolean;
  diagramPadding?: number;
  htmlLabels?: boolean;
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -1,5 +1,5 @@
-import dagre from 'dagre';
-import graphlib from 'graphlib';
+import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
+import * as graphlibJson from 'dagre-d3-es/src/graphlib/json';
 import insertMarkers from './markers';
 import { updateNodeBounds } from './shapes/util';
 import {
@@ -15,7 +15,7 @@ import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } f
 import { log } from '../logger';

 const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
-  log.info('Graph in recursive render: XXX', graphlib.json.write(graph), parentCluster);
+  log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
  const dir = graph.graph().rankdir;
  log.trace('Dir in recursive render - dir:', dir);

@@ -95,8 +95,8 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
  log.info('###                Layout                 ###');
  log.info('#############################################');
  log.info(graph);
-  dagre.layout(graph);
-  log.info('Graph after layout:', graphlib.json.write(graph));
+  dagreLayout(graph);
+  log.info('Graph after layout:', graphlibJson.write(graph));
  // Move the nodes to the correct place
  let diff = 0;
  sortNodesByHierarchy(graph).forEach(function (v) {
@@ -153,10 +153,10 @@ export const render = (elem, graph, markers, diagramtype, id) => {
  clearClusters();
  clearGraphlib();

-  log.warn('Graph at first:', graphlib.json.write(graph));
+  log.warn('Graph at first:', graphlibJson.write(graph));
  adjustClustersAndEdges(graph);
-  log.warn('Graph after:', graphlib.json.write(graph));
-  // log.warn('Graph ever  after:', graphlib.json.write(graph.node('A').graph));
+  log.warn('Graph after:', graphlibJson.write(graph));
+  // log.warn('Graph ever  after:', graphlibJson.write(graph.node('A').graph));
  recursiveRender(elem, graph, diagramtype);
 };

--- a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
+++ b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
@@ -1,6 +1,7 @@
 /** Decorates with functions required by mermaids dagre-wrapper. */
 import { log } from '../logger';
-import graphlib from 'graphlib';
+import * as graphlibJson from 'dagre-d3-es/src/graphlib/json';
+import * as graphlib from 'dagre-d3-es/src/graphlib';

 export let clusterDb = {};
 let decendants = {};
@@ -322,7 +323,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
      graph.setEdge(v, w, edge, e.name);
    }
  });
-  log.warn('Adjusted Graph', graphlib.json.write(graph));
+  log.warn('Adjusted Graph', graphlibJson.write(graph));
  extractor(graph, 0);

  log.trace(clusterDb);
@@ -336,7 +337,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
 };

 export const extractor = (graph, depth) => {
-  log.warn('extractor - ', depth, graphlib.json.write(graph), graph.children('D'));
+  log.warn('extractor - ', depth, graphlibJson.write(graph), graph.children('D'));
  if (depth > 10) {
    log.error('Bailing out');
    return;
@@ -415,7 +416,7 @@ export const extractor = (graph, depth) => {
          return {};
        });

-      log.warn('Old graph before copy', graphlib.json.write(graph));
+      log.warn('Old graph before copy', graphlibJson.write(graph));
      copy(node, graph, clusterGraph, node);
      graph.setNode(node, {
        clusterNode: true,
@@ -424,8 +425,8 @@ export const extractor = (graph, depth) => {
        labelText: clusterDb[node].labelText,
        graph: clusterGraph,
      });
-      log.warn('New graph after copy node: (', node, ')', graphlib.json.write(clusterGraph));
-      log.debug('Old graph after copy', graphlib.json.write(graph));
+      log.warn('New graph after copy node: (', node, ')', graphlibJson.write(clusterGraph));
+      log.debug('Old graph after copy', graphlibJson.write(graph));
    } else {
      log.warn(
        'Cluster ** ',
--- a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js
+++ b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js
@@ -1,5 +1,5 @@
-import graphlib from 'graphlib';
-import dagre from 'dagre';
+import * as graphlibJson from 'dagre-d3-es/src/graphlib/json';
+import * as graphlib from 'dagre-d3-es/src/graphlib';
 import {
  validate,
  adjustClustersAndEdges,
@@ -233,9 +233,9 @@ describe('Graphlib decorations', () => {
      g.setParent('D', 'C');

      // log.info('Graph before', g.node('D'))
-      // log.info('Graph before', graphlib.json.write(g))
+      // log.info('Graph before', graphlibJson.write(g))
      adjustClustersAndEdges(g);
-      // log.info('Graph after', graphlib.json.write(g), g.node('C').graph)
+      // log.info('Graph after', graphlibJson.write(g), g.node('C').graph)

      const CGraph = g.node('C').graph;
      const DGraph = CGraph.node('D').graph;
@@ -279,9 +279,9 @@ describe('Graphlib decorations', () => {
      g.setEdge('A', 'C', { data: 'link2' }, '2');

      log.info('Graph before', g.node('D'));
-      log.info('Graph before', graphlib.json.write(g));
+      log.info('Graph before', graphlibJson.write(g));
      adjustClustersAndEdges(g);
-      log.trace('Graph after', graphlib.json.write(g));
+      log.trace('Graph after', graphlibJson.write(g));
      expect(g.nodes()).toEqual(['C', 'B', 'A']);
      expect(g.nodes().length).toBe(3);
      expect(g.edges().length).toBe(2);
@@ -334,11 +334,11 @@ describe('Graphlib decorations', () => {
      g.setEdge('c', 'd', { data: 'link2' }, '2');
      g.setEdge('d', 'e', { data: 'link2' }, '2');

-      log.info('Graph before', graphlib.json.write(g));
+      log.info('Graph before', graphlibJson.write(g));
      adjustClustersAndEdges(g);
      const bGraph = g.node('b').graph;
-      // log.trace('Graph after', graphlib.json.write(g))
-      log.info('Graph after', graphlib.json.write(bGraph));
+      // log.trace('Graph after', graphlibJson.write(g))
+      log.info('Graph after', graphlibJson.write(bGraph));
      expect(bGraph.nodes().length).toBe(3);
      expect(bGraph.edges().length).toBe(2);
    });
@@ -360,13 +360,13 @@ describe('Graphlib decorations', () => {
      g.setParent('c', 'b');
      g.setParent('e', 'c');

-      log.info('Graph before', graphlib.json.write(g));
+      log.info('Graph before', graphlibJson.write(g));
      adjustClustersAndEdges(g);
      const aGraph = g.node('a').graph;
      const bGraph = aGraph.node('b').graph;
-      log.info('Graph after', graphlib.json.write(aGraph));
+      log.info('Graph after', graphlibJson.write(aGraph));
      const cGraph = bGraph.node('c').graph;
-      // log.trace('Graph after', graphlib.json.write(g))
+      // log.trace('Graph after', graphlibJson.write(g))
      expect(aGraph.nodes().length).toBe(1);
      expect(bGraph.nodes().length).toBe(1);
      expect(cGraph.nodes().length).toBe(1);
@@ -388,14 +388,14 @@ flowchart TB
    const exportedGraph = JSON.parse(
      '{"options":{"directed":true,"multigraph":true,"compound":true},"nodes":[{"v":"A","value":{"labelStyle":"","shape":"rect","labelText":"A","rx":0,"ry":0,"class":"default","style":"","id":"A","width":500,"type":"group","padding":15}},{"v":"B","value":{"labelStyle":"","shape":"rect","labelText":"B","rx":0,"ry":0,"class":"default","style":"","id":"B","width":500,"type":"group","padding":15},"parent":"A"},{"v":"b","value":{"labelStyle":"","shape":"rect","labelText":"b","rx":0,"ry":0,"class":"default","style":"","id":"b","padding":15},"parent":"A"},{"v":"c","value":{"labelStyle":"","shape":"rect","labelText":"c","rx":0,"ry":0,"class":"default","style":"","id":"c","padding":15},"parent":"B"},{"v":"a","value":{"labelStyle":"","shape":"rect","labelText":"a","rx":0,"ry":0,"class":"default","style":"","id":"a","padding":15},"parent":"A"}],"edges":[{"v":"b","w":"B","name":"1","value":{"minlen":1,"arrowhead":"normal","arrowTypeStart":"arrow_open","arrowTypeEnd":"arrow_point","thickness":"normal","pattern":"solid","style":"fill:none","labelStyle":"","arrowheadStyle":"fill: #333","labelpos":"c","labelType":"text","label":"","id":"L-b-B","classes":"flowchart-link LS-b LE-B"}},{"v":"a","w":"c","name":"2","value":{"minlen":1,"arrowhead":"normal","arrowTypeStart":"arrow_open","arrowTypeEnd":"arrow_point","thickness":"normal","pattern":"solid","style":"fill:none","labelStyle":"","arrowheadStyle":"fill: #333","labelpos":"c","labelType":"text","label":"","id":"L-a-c","classes":"flowchart-link LS-a LE-c"}}],"value":{"rankdir":"TB","nodesep":50,"ranksep":50,"marginx":8,"marginy":8}}'
    );
-    const gr = graphlib.json.read(exportedGraph);
+    const gr = graphlibJson.read(exportedGraph);

-    log.info('Graph before', graphlib.json.write(gr));
+    log.info('Graph before', graphlibJson.write(gr));
    adjustClustersAndEdges(gr);
    const aGraph = gr.node('A').graph;
    const bGraph = aGraph.node('B').graph;
-    log.info('Graph after', graphlib.json.write(aGraph));
-    // log.trace('Graph after', graphlib.json.write(g))
+    log.info('Graph after', graphlibJson.write(aGraph));
+    // log.trace('Graph after', graphlibJson.write(g))
    expect(aGraph.parent('c')).toBe('B');
    expect(aGraph.parent('B')).toBe(undefined);
  });
--- a/packages/mermaid/src/defaultConfig.ts
+++ b/packages/mermaid/src/defaultConfig.ts
@@ -154,6 +154,17 @@ const config: Partial<MermaidConfig> = {

  /** The object containing configurations specific for flowcharts */
  flowchart: {
+    /**
+     * ### titleTopMargin
+     *
+     * | Parameter      | Description                                    | Type    | Required | Values             |
+     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
+     * | titleTopMargin | Margin top for the text over the flowchart     | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 25
+     */
+    titleTopMargin: 25,
+
    /**
     * | Parameter      | Description                                     | Type    | Required | Values             |
     * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
@@ -851,6 +862,16 @@ const config: Partial<MermaidConfig> = {
    sectionColours: ['#fff'],
  },
  class: {
+    /**
+     * ### titleTopMargin
+     *
+     * | Parameter      | Description                                    | Type    | Required | Values             |
+     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
+     * | titleTopMargin | Margin top for the text over the class diagram | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 25
+     */
+    titleTopMargin: 25,
    arrowMarkerAbsolute: false,
    dividerMargin: 10,
    padding: 5,
@@ -884,6 +905,16 @@ const config: Partial<MermaidConfig> = {
    defaultRenderer: 'dagre-wrapper',
  },
  state: {
+    /**
+     * ### titleTopMargin
+     *
+     * | Parameter      | Description                                    | Type    | Required | Values             |
+     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
+     * | titleTopMargin | Margin top for the text over the state diagram | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 25
+     */
+    titleTopMargin: 25,
    dividerMargin: 10,
    sizeUnit: 5,
    padding: 8,
@@ -932,6 +963,17 @@ const config: Partial<MermaidConfig> = {

  /** The object containing configurations specific for entity relationship diagrams */
  er: {
+    /**
+     * ### titleTopMargin
+     *
+     * | Parameter      | Description                                    | Type    | Required | Values             |
+     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
+     * | titleTopMargin | Margin top for the text over the diagram       | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 25
+     */
+    titleTopMargin: 25,
+
    /**
     * | Parameter      | Description                                     | Type    | Required | Values             |
     * | -------------- | ----------------------------------------------- | ------- | -------- | ------------------ |
@@ -1085,6 +1127,16 @@ const config: Partial<MermaidConfig> = {
    line_height: 20,
  },
  gitGraph: {
+    /**
+     * ### titleTopMargin
+     *
+     * | Parameter      | Description                                    | Type    | Required | Values             |
+     * | -------------- | ---------------------------------------------- | ------- | -------- | ------------------ |
+     * | titleTopMargin | Margin top for the text over the Git diagram   | Integer | Required | Any Positive Value |
+     *
+     * **Notes:** Default value: 25
+     */
+    titleTopMargin: 25,
    diagramPadding: 8,
    nodeLabel: {
      width: 75,
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/packages/mermaid/src/diagram-api/detectType.ts
@@ -1,6 +1,7 @@
 import { MermaidConfig } from '../config.type';
 import { log } from '../logger';
 import { DetectorRecord, DiagramDetector, DiagramLoader } from './types';
+import { frontMatterRegex } from './frontmatter';

 const directive =
  /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
@@ -31,7 +32,7 @@ const detectors: Record<string, DetectorRecord> = {};
 * @returns A graph definition key
 */
 export const detectType = function (text: string, config?: MermaidConfig): string {
-  text = text.replace(directive, '').replace(anyComment, '\n');
+  text = text.replace(frontMatterRegex, '').replace(directive, '').replace(anyComment, '\n');
  for (const [key, { detector }] of Object.entries(detectors)) {
    const diagram = detector(text, config);
    if (diagram) {
--- a/packages/mermaid/src/diagram-api/frontmatter.spec.ts
+++ b/packages/mermaid/src/diagram-api/frontmatter.spec.ts
@@ -0,0 +1,78 @@
+import { vi } from 'vitest';
+import { extractFrontMatter } from './frontmatter';
+
+const dbMock = () => ({ setDiagramTitle: vi.fn() });
+
+describe('extractFrontmatter', () => {
+  it('returns text unchanged if no frontmatter', () => {
+    expect(extractFrontMatter('diagram', dbMock())).toEqual('diagram');
+  });
+
+  it('returns text unchanged if frontmatter lacks closing delimiter', () => {
+    const text = `---\ntitle: foo\ndiagram`;
+    expect(extractFrontMatter(text, dbMock())).toEqual(text);
+  });
+
+  it('handles empty frontmatter', () => {
+    const db = dbMock();
+    const text = `---\n\n---\ndiagram`;
+    expect(extractFrontMatter(text, db)).toEqual('diagram');
+    expect(db.setDiagramTitle).not.toHaveBeenCalled();
+  });
+
+  it('handles frontmatter without mappings', () => {
+    const db = dbMock();
+    const text = `---\n1\n---\ndiagram`;
+    expect(extractFrontMatter(text, db)).toEqual('diagram');
+    expect(db.setDiagramTitle).not.toHaveBeenCalled();
+  });
+
+  it('does not try to parse frontmatter at the end', () => {
+    const db = dbMock();
+    const text = `diagram\n---\ntitle: foo\n---\n`;
+    expect(extractFrontMatter(text, db)).toEqual(text);
+    expect(db.setDiagramTitle).not.toHaveBeenCalled();
+  });
+
+  it('handles frontmatter with multiple delimiters', () => {
+    const db = dbMock();
+    const text = `---\ntitle: foo---bar\n---\ndiagram\n---\ntest`;
+    expect(extractFrontMatter(text, db)).toEqual('diagram\n---\ntest');
+    expect(db.setDiagramTitle).toHaveBeenCalledWith('foo---bar');
+  });
+
+  it('handles frontmatter with multi-line string and multiple delimiters', () => {
+    const db = dbMock();
+    const text = `---\ntitle: |\n   multi-line string\n   ---\n---\ndiagram`;
+    expect(extractFrontMatter(text, db)).toEqual('diagram');
+    expect(db.setDiagramTitle).toHaveBeenCalledWith('multi-line string\n---\n');
+  });
+
+  it('handles frontmatter with title', () => {
+    const db = dbMock();
+    const text = `---\ntitle: foo\n---\ndiagram`;
+    expect(extractFrontMatter(text, db)).toEqual('diagram');
+    expect(db.setDiagramTitle).toHaveBeenCalledWith('foo');
+  });
+
+  it('handles booleans in frontmatter properly', () => {
+    const db = dbMock();
+    const text = `---\ntitle: true\n---\ndiagram`;
+    expect(extractFrontMatter(text, db)).toEqual('diagram');
+    expect(db.setDiagramTitle).toHaveBeenCalledWith('true');
+  });
+
+  it('ignores unspecified frontmatter keys', () => {
+    const db = dbMock();
+    const text = `---\ninvalid: true\ntitle: foo\ntest: bar\n---\ndiagram`;
+    expect(extractFrontMatter(text, db)).toEqual('diagram');
+    expect(db.setDiagramTitle).toHaveBeenCalledWith('foo');
+  });
+
+  it('throws exception for invalid YAML syntax', () => {
+    const text = `---\n!!!\n---\ndiagram`;
+    expect(() => extractFrontMatter(text, dbMock())).toThrow(
+      'tag suffix cannot contain exclamation marks'
+    );
+  });
+});
--- a/packages/mermaid/src/diagram-api/frontmatter.ts
+++ b/packages/mermaid/src/diagram-api/frontmatter.ts
@@ -0,0 +1,40 @@
+import { DiagramDb } from './types';
+// The "* as yaml" part is necessary for tree-shaking
+import * as yaml from 'js-yaml';
+
+// Match Jekyll-style front matter blocks (https://jekyllrb.com/docs/front-matter/).
+// Based on regex used by Jekyll: https://github.com/jekyll/jekyll/blob/6dd3cc21c40b98054851846425af06c64f9fb466/lib/jekyll/document.rb#L10
+// Note that JS doesn't support the "\A" anchor, which means we can't use
+// multiline mode.
+// Relevant YAML spec: https://yaml.org/spec/1.2.2/#914-explicit-documents
+export const frontMatterRegex = /^(?:---\s*[\r\n])(.*?)(?:[\r\n]---\s*[\r\n]+)/s;
+
+type FrontMatterMetadata = {
+  title?: string;
+};
+
+/**
+ * Extract and parse frontmatter from text, if present, and sets appropriate
+ * properties in the provided db.
+ * @param text - The text that may have a YAML frontmatter.
+ * @param db - Diagram database, could be of any diagram.
+ * @returns text with frontmatter stripped out
+ */
+export function extractFrontMatter(text: string, db: DiagramDb): string {
+  const matches = text.match(frontMatterRegex);
+  if (matches) {
+    const parsed: FrontMatterMetadata = yaml.load(matches[1], {
+      // To keep things simple, only allow strings, arrays, and plain objects.
+      // https://www.yaml.org/spec/1.2/spec.html#id2802346
+      schema: yaml.FAILSAFE_SCHEMA,
+    }) as FrontMatterMetadata;
+
+    if (parsed?.title) {
+      db.setDiagramTitle?.(parsed.title);
+    }
+
+    return text.slice(matches[0].length);
+  } else {
+    return text;
+  }
+}
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -8,8 +8,18 @@ export interface InjectUtils {
  _setupGraphViewbox: any;
 }

+/**
+ * Generic Diagram DB that may apply to any diagram type.
+ */
+export interface DiagramDb {
+  clear?: () => void;
+  setDiagramTitle?: (title: string) => void;
+  getAccTitle?: () => string;
+  getAccDescription?: () => string;
+}
+
 export interface DiagramDefinition {
-  db: any;
+  db: DiagramDb;
  renderer: any;
  parser: any;
  styles: any;
--- a/packages/mermaid/src/diagrams/class/classDb.js
+++ b/packages/mermaid/src/diagrams/class/classDb.js
@@ -10,6 +10,8 @@ import {
  getAccDescription,
  setAccDescription,
  clear as commonClear,
+  setDiagramTitle,
+  getDiagramTitle,
 } from '../../commonDb';

 const MERMAID_DOM_ID_PREFIX = 'classid-';
@@ -408,4 +410,6 @@ export default {
  getTooltip,
  setTooltip,
  lookUpDomId,
+  setDiagramTitle,
+  getDiagramTitle,
 };
--- a/packages/mermaid/src/diagrams/class/classRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.js
@@ -1,8 +1,9 @@
 import { select } from 'd3';
-import graphlib from 'graphlib';
+import * as graphlib from 'dagre-d3-es/src/graphlib';
 import { log } from '../../logger';
 import { getConfig } from '../../config';
 import { render } from '../../dagre-wrapper/index.js';
+import utils from '../../utils';
 import { curveLinear } from 'd3';
 import { interpolateToCurve, getStylesFromArray } from '../../utils';
 import { setupGraphViewbox } from '../../setupGraphViewbox';
@@ -428,6 +429,8 @@ export const draw = function (text, id, _version, diagObj) {
    id
  );

+  utils.insertTitle(svg, 'classTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle());
+
  setupGraphViewbox(g, svg, conf.diagramPadding, conf.useMaxWidth);

  // Add label rects for non html labels
--- a/packages/mermaid/src/diagrams/class/classRenderer.js
+++ b/packages/mermaid/src/diagrams/class/classRenderer.js
@@ -1,6 +1,6 @@
 import { select } from 'd3';
-import dagre from 'dagre';
-import graphlib from 'graphlib';
+import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
+import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { log } from '../../logger';
 import svgDraw from './svgDraw';
 import { configureSvgSize } from '../../setupGraphViewbox';
@@ -237,7 +237,7 @@ export const draw = function (text, id, _version, diagObj) {
    }
  });

-  dagre.layout(g);
+  dagreLayout(g);
  g.nodes().forEach(function (v) {
    if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {
      log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));
--- a/packages/mermaid/src/diagrams/class/styles.js
+++ b/packages/mermaid/src/diagrams/class/styles.js
@@ -148,6 +148,11 @@ g.classGroup line {
  font-size: 11px;
 }

+.classTitleText {
+  text-anchor: middle;
+  font-size: 18px;
+  fill: ${options.textColor};
+}
 `;

 export default getStyles;
--- a/packages/mermaid/src/diagrams/er/erDb.js
+++ b/packages/mermaid/src/diagrams/er/erDb.js
@@ -8,6 +8,8 @@ import {
  getAccDescription,
  setAccDescription,
  clear as commonClear,
+  setDiagramTitle,
+  getDiagramTitle,
 } from '../../commonDb';

 let entities = {};
@@ -94,4 +96,6 @@ export default {
  getAccTitle,
  setAccDescription,
  getAccDescription,
+  setDiagramTitle,
+  getDiagramTitle,
 };
--- a/packages/mermaid/src/diagrams/er/erRenderer.js
+++ b/packages/mermaid/src/diagrams/er/erRenderer.js
@@ -1,8 +1,9 @@
-import graphlib from 'graphlib';
+import * as graphlib from 'dagre-d3-es/src/graphlib';
 import { line, curveBasis, select } from 'd3';
-import dagre from 'dagre';
+import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
 import { getConfig } from '../../config';
 import { log } from '../../logger';
+import utils from '../../utils';
 import erMarkers from './erMarkers';
 import { configureSvgSize } from '../../setupGraphViewbox';
 import { parseGenericTypes } from '../common/common';
@@ -209,9 +210,6 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
      const typeRect = groupNode
        .insert('rect', '#' + attributeNode.tn.node().id)
        .classed(`er ${attribStyle}`, true)
-        .style('fill', conf.fill)
-        .style('fill-opacity', '100%')
-        .style('stroke', conf.stroke)
        .attr('x', 0)
        .attr('y', heightOffset)
        .attr('width', maxTypeWidth + widthPadding * 2 + spareColumnWidth)
@@ -229,9 +227,6 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
      const nameRect = groupNode
        .insert('rect', '#' + attributeNode.nn.node().id)
        .classed(`er ${attribStyle}`, true)
-        .style('fill', conf.fill)
-        .style('fill-opacity', '100%')
-        .style('stroke', conf.stroke)
        .attr('x', nameXOffset)
        .attr('y', heightOffset)
        .attr('width', maxNameWidth + widthPadding * 2 + spareColumnWidth)
@@ -251,9 +246,6 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
        const keyTypeRect = groupNode
          .insert('rect', '#' + attributeNode.kn.node().id)
          .classed(`er ${attribStyle}`, true)
-          .style('fill', conf.fill)
-          .style('fill-opacity', '100%')
-          .style('stroke', conf.stroke)
          .attr('x', keyTypeAndCommentXOffset)
          .attr('y', heightOffset)
          .attr('width', maxKeyWidth + widthPadding * 2 + spareColumnWidth)
@@ -274,9 +266,6 @@ const drawAttributes = (groupNode, entityTextNode, attributes) => {
        groupNode
          .insert('rect', '#' + attributeNode.cn.node().id)
          .classed(`er ${attribStyle}`, 'true')
-          .style('fill', conf.fill)
-          .style('fill-opacity', '100%')
-          .style('stroke', conf.stroke)
          .attr('x', keyTypeAndCommentXOffset)
          .attr('y', heightOffset)
          .attr('width', maxCommentWidth + widthPadding * 2 + spareColumnWidth)
@@ -346,9 +335,6 @@ const drawEntities = function (svgNode, entities, graph) {
    const rectNode = groupNode
      .insert('rect', '#' + textId)
      .classed('er entityBox', true)
-      .style('fill', conf.fill)
-      .style('fill-opacity', '100%')
-      .style('stroke', conf.stroke)
      .attr('x', 0)
      .attr('y', 0)
      .attr('width', entityWidth)
@@ -546,9 +532,7 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) {
    .attr('x', labelPoint.x - labelBBox.width / 2)
    .attr('y', labelPoint.y - labelBBox.height / 2)
    .attr('width', labelBBox.width)
-    .attr('height', labelBBox.height)
-    .style('fill', 'white')
-    .style('fill-opacity', '85%');
+    .attr('height', labelBBox.height);
 };

 /**
@@ -636,7 +620,7 @@ export const draw = function (text, id, _version, diagObj) {
  // Add all the relationships to the graph
  const relationships = addRelationships(diagObj.db.getRelationships(), g);

-  dagre.layout(g); // Node and edge positions will be updated
+  dagreLayout(g); // Node and edge positions will be updated

  // Adjust the positions of the entities so that they adhere to the layout
  adjustEntities(svg, g);
@@ -648,6 +632,8 @@ export const draw = function (text, id, _version, diagObj) {

  const padding = conf.diagramPadding;

+  utils.insertTitle(svg, 'entityTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle());
+
  const svgBounds = svg.node().getBBox();
  const width = svgBounds.width + padding * 2;
  const height = svgBounds.height + padding * 2;
--- a/packages/mermaid/src/diagrams/er/styles.js
+++ b/packages/mermaid/src/diagrams/er/styles.js
@@ -27,6 +27,12 @@ const getStyles = (options) =>
    .relationshipLine {
      stroke: ${options.lineColor};
    }
+
+  .entityTitleText {
+    text-anchor: middle;
+    font-size: 18px;
+    fill: ${options.textColor};
+  }    
 `;

 export default getStyles;
--- a/packages/mermaid/src/diagrams/flowchart/flowChartShapes.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowChartShapes.js
@@ -1,4 +1,5 @@
-import dagreD3 from 'dagre-d3';
+import { intersectPolygon } from 'dagre-d3-es/src/dagre-js/intersect/intersect-polygon.js';
+import { intersectRect } from 'dagre-d3-es/src/dagre-js/intersect/intersect-rect.js';

 /**
 * @param parent
@@ -17,7 +18,7 @@ function question(parent, bbox, node) {
  ];
  const shapeSvg = insertPolygonShape(parent, s, s, points);
  node.intersect = function (point) {
-    return dagreD3.intersect.polygon(node, points, point);
+    return intersectPolygon(node, points, point);
  };
  return shapeSvg;
 }
@@ -42,7 +43,7 @@ function hexagon(parent, bbox, node) {
  ];
  const shapeSvg = insertPolygonShape(parent, w, h, points);
  node.intersect = function (point) {
-    return dagreD3.intersect.polygon(node, points, point);
+    return intersectPolygon(node, points, point);
  };
  return shapeSvg;
 }
@@ -64,7 +65,7 @@ function rect_left_inv_arrow(parent, bbox, node) {
  ];
  const shapeSvg = insertPolygonShape(parent, w, h, points);
  node.intersect = function (point) {
-    return dagreD3.intersect.polygon(node, points, point);
+    return intersectPolygon(node, points, point);
  };
  return shapeSvg;
 }
@@ -85,7 +86,7 @@ function lean_right(parent, bbox, node) {
  ];
  const shapeSvg = insertPolygonShape(parent, w, h, points);
  node.intersect = function (point) {
-    return dagreD3.intersect.polygon(node, points, point);
+    return intersectPolygon(node, points, point);
  };
  return shapeSvg;
 }
@@ -106,7 +107,7 @@ function lean_left(parent, bbox, node) {
  ];
  const shapeSvg = insertPolygonShape(parent, w, h, points);
  node.intersect = function (point) {
-    return dagreD3.intersect.polygon(node, points, point);
+    return intersectPolygon(node, points, point);
  };
  return shapeSvg;
 }
@@ -127,7 +128,7 @@ function trapezoid(parent, bbox, node) {
  ];
  const shapeSvg = insertPolygonShape(parent, w, h, points);
  node.intersect = function (point) {
-    return dagreD3.intersect.polygon(node, points, point);
+    return intersectPolygon(node, points, point);
  };
  return shapeSvg;
 }
@@ -148,7 +149,7 @@ function inv_trapezoid(parent, bbox, node) {
  ];
  const shapeSvg = insertPolygonShape(parent, w, h, points);
  node.intersect = function (point) {
-    return dagreD3.intersect.polygon(node, points, point);
+    return intersectPolygon(node, points, point);
  };
  return shapeSvg;
 }
@@ -170,7 +171,7 @@ function rect_right_inv_arrow(parent, bbox, node) {
  ];
  const shapeSvg = insertPolygonShape(parent, w, h, points);
  node.intersect = function (point) {
-    return dagreD3.intersect.polygon(node, points, point);
+    return intersectPolygon(node, points, point);
  };
  return shapeSvg;
 }
@@ -194,7 +195,7 @@ function stadium(parent, bbox, node) {
    .attr('height', h);

  node.intersect = function (point) {
-    return dagreD3.intersect.rect(node, point);
+    return intersectRect(node, point);
  };
  return shapeSvg;
 }
@@ -221,7 +222,7 @@ function subroutine(parent, bbox, node) {
  ];
  const shapeSvg = insertPolygonShape(parent, w, h, points);
  node.intersect = function (point) {
-    return dagreD3.intersect.polygon(node, points, point);
+    return intersectPolygon(node, points, point);
  };
  return shapeSvg;
 }
@@ -270,7 +271,7 @@ function cylinder(parent, bbox, node) {
    .attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')');

  node.intersect = function (point) {
-    const pos = dagreD3.intersect.rect(node, point);
+    const pos = intersectRect(node, point);
    const x = pos.x - node.x;

    if (
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -10,6 +10,8 @@ import {
  getAccDescription,
  setAccDescription,
  clear as commonClear,
+  setDiagramTitle,
+  getDiagramTitle,
 } from '../../commonDb';

 const MERMAID_DOM_ID_PREFIX = 'flowchart-';
@@ -785,4 +787,6 @@ export default {
  },
  exists,
  makeUniq,
+  setDiagramTitle,
+  getDiagramTitle,
 };
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -1,11 +1,12 @@
-import graphlib from 'graphlib';
+import * as graphlib from 'dagre-d3-es/src/graphlib';
 import { select, curveLinear, selectAll } from 'd3';

 import flowDb from './flowDb';
 import { getConfig } from '../../config';
+import utils from '../../utils';

 import { render } from '../../dagre-wrapper/index.js';
-import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
+import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
 import { log } from '../../logger';
 import common, { evaluate } from '../common/common';
 import { interpolateToCurve, getStylesFromArray } from '../../utils';
@@ -433,6 +434,8 @@ export const draw = function (text, id, _version, diagObj) {
  const element = root.select('#' + id + ' g');
  render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);

+  utils.insertTitle(svg, 'flowchartTitleText', conf.titleTopMargin, diagObj.db.getDiagramTitle());
+
  setupGraphViewbox(g, svg, conf.diagramPadding, conf.useMaxWidth);

  // Index nodes
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
@@ -1,8 +1,9 @@
-import graphlib from 'graphlib';
+import * as graphlib from 'dagre-d3-es/src/graphlib';
 import { select, curveLinear, selectAll } from 'd3';
 import { getConfig } from '../../config';
-import dagreD3 from 'dagre-d3';
-import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
+import { render as Render } from 'dagre-d3-es';
+import { applyStyle } from 'dagre-d3-es/src/dagre-js/util.js';
+import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
 import { log } from '../../logger';
 import common, { evaluate } from '../common/common';
 import { interpolateToCurve, getStylesFromArray } from '../../utils';
@@ -369,7 +370,6 @@ export const draw = function (text, id, _version, diagObj) {
  addEdges(edges, g, diagObj);

  // Create the renderer
-  const Render = dagreD3.render;
  const render = new Render();

  // Add custom shapes
@@ -389,7 +389,7 @@ export const draw = function (text, id, _version, diagObj) {
      .attr('orient', 'auto');

    const path = marker.append('path').attr('d', 'M 0 0 L 0 0 L 0 0 z');
-    dagreD3.util.applyStyle(path, edge[type + 'Style']);
+    applyStyle(path, edge[type + 'Style']);
  };

  // Override normal arrowhead defined in d3. Remove style & add class to allow css styling.
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
@@ -1,6 +1,6 @@
 import flowDb from '../flowDb';
 import flow from './flow';
-import filter from 'lodash/filter';
+import filter from 'lodash-es/filter';
 import { setConfig } from '../../../config';

 setConfig({
--- a/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
@@ -1,6 +1,6 @@
 import flowDb from '../flowDb';
 import flow from './flow';
-import filter from 'lodash/filter';
+import filter from 'lodash-es/filter';
 import { setConfig } from '../../../config';

 setConfig({
--- a/packages/mermaid/src/diagrams/flowchart/styles.ts
+++ b/packages/mermaid/src/diagrams/flowchart/styles.ts
@@ -103,6 +103,12 @@ const getStyles = (options: FlowChartStyleOptions) =>
    pointer-events: none;
    z-index: 100;
  }
+
+  .flowchartTitleText {
+    text-anchor: middle;
+    font-size: 18px;
+    fill: ${options.textColor};
+  }
 `;

 export default getStyles;
--- a/packages/mermaid/src/diagrams/git/gitGraphAst.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphAst.js
@@ -10,6 +10,8 @@ import {
  getAccDescription,
  setAccDescription,
  clear as commonClear,
+  setDiagramTitle,
+  getDiagramTitle,
 } from '../../commonDb';

 let mainBranchName = getConfig().gitGraph.mainBranchName;
@@ -529,5 +531,7 @@ export default {
  getAccTitle,
  getAccDescription,
  setAccDescription,
+  setDiagramTitle,
+  getDiagramTitle,
  commitType,
 };
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -1,6 +1,7 @@
 import { select } from 'd3';
 import { getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI';
 import { log } from '../../logger';
+import utils from '../../utils';

 let allCommitsDict = {};

@@ -517,6 +518,12 @@ export const draw = function (txt, id, ver, diagObj) {
  }
  drawArrows(diagram, allCommitsDict);
  drawCommits(diagram, allCommitsDict, true);
+  utils.insertTitle(
+    diagram,
+    'gitTitleText',
+    gitGraphConfig.titleTopMargin,
+    diagObj.db.getDiagramTitle()
+  );

  // Setup the view box and size of the svg element
  setupGraphViewbox(
--- a/packages/mermaid/src/diagrams/git/styles.js
+++ b/packages/mermaid/src/diagrams/git/styles.js
@@ -51,6 +51,11 @@ const getStyles = (options) =>
  }

  .arrow { stroke-width: 8; stroke-linecap: round; fill: none}
+  .gitTitleText {
+    text-anchor: middle;
+    font-size: 18px;
+    fill: ${options.textColor};
+  }
  }
 `;

--- a/packages/mermaid/src/diagrams/pie/pieDetector.ts
+++ b/packages/mermaid/src/diagrams/pie/pieDetector.ts
@@ -1,5 +1,6 @@
 import type { DiagramDetector } from '../../diagram-api/types';

 export const pieDetector: DiagramDetector = (txt) => {
-  return txt.match(/^\s*pie/) !== null;
+  const logOutput = txt.match(/^\s*pie/) !== null || txt.match(/^\s*bar/) !== null;
+  return logOutput;
 };
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.js
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js
@@ -155,11 +155,11 @@ export const draw = (txt, id, _version, diagObj) => {
      .append('g')
      .attr('class', 'legend')
      .attr('transform', function (d, i) {
-        var height = legendRectSize + legendSpacing;
-        var offset = (height * color.domain().length) / 2;
-        var horz = 12 * legendRectSize;
-        var vert = i * height - offset;
-        return 'translate(' + horz + ',' + vert + ')';
+        const height = legendRectSize + legendSpacing;
+        const offset = (height * color.domain().length) / 2;
+        const horizontal = 12 * legendRectSize;
+        const vertical = i * height - offset;
+        return 'translate(' + horizontal + ',' + vertical + ')';
      });

    legend
--- a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
+++ b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
@@ -1,6 +1,6 @@
 import { line, select } from 'd3';
-import dagre from 'dagre';
-import graphlib from 'graphlib';
+import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
+import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { log } from '../../logger';
 import { configureSvgSize } from '../../setupGraphViewbox';
 import common from '../common/common';
@@ -347,7 +347,7 @@ export const draw = (text, id, _version, diagObj) => {
  drawReqs(requirements, g, svg);
  drawElements(elements, g, svg);
  addRelationships(relationships, g);
-  dagre.layout(g);
+  dagreLayout(g);
  adjustEntities(svg, g);

  relationships.forEach(function (rel) {
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -752,7 +752,7 @@ export const insertSequenceNumber = function (elem) {
  // .style("fill", '#f00');
 };
 /**
- * Setup arrow head and define the marker. The result is appended to the svg.
+ * Setup cross head and define the marker. The result is appended to the svg.
 *
 * @param {any} elem
 */
@@ -764,26 +764,16 @@ export const insertArrowCrossHead = function (elem) {
    .attr('markerWidth', 15)
    .attr('markerHeight', 8)
    .attr('orient', 'auto')
-    .attr('refX', 16)
-    .attr('refY', 4);
-
-  // The arrow
-  marker
-    .append('path')
-    .attr('fill', 'black')
-    .attr('stroke', '#000000')
-    .style('stroke-dasharray', '0, 0')
-    .attr('stroke-width', '1px')
-    .attr('d', 'M 9,2 V 6 L16,4 Z');
-
+    .attr('refX', 4)
+    .attr('refY', 5);
  // The cross
  marker
    .append('path')
    .attr('fill', 'none')
    .attr('stroke', '#000000')
    .style('stroke-dasharray', '0, 0')
-    .attr('stroke-width', '1px')
-    .attr('d', 'M 0,1 L 6,7 M 6,1 L 0,7');
+    .attr('stroke-width', '1pt')
+    .attr('d', 'M 1,2 L 6,7 M 6,2 L 1,7');
  // this is actual shape for arrowhead
 };

--- a/packages/mermaid/src/diagrams/state/parser/state-style.spec.js
+++ b/packages/mermaid/src/diagrams/state/parser/state-style.spec.js
@@ -184,6 +184,27 @@ describe('ClassDefs and classes when parsing a State diagram', () => {
          });
        });
      });
+
+      describe('comments parsing', () => {
+        it('working inside states', function () {
+          let diagram = '';
+          diagram += 'stateDiagram-v2\n\n';
+          diagram += '[*] --> Moving\n';
+          diagram += 'Moving --> Still\n';
+          diagram += 'Moving --> Crash\n';
+          diagram += 'state Moving {\n';
+          diagram += '%% comment inside state\n';
+          diagram += 'slow  --> fast\n';
+          diagram += '}\n';
+
+          stateDiagram.parser.parse(diagram);
+          stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
+
+          const states = stateDiagram.parser.yy.getStates();
+
+          expect(states['Moving'].doc.length).toEqual(1);
+        });
+      });
    });
  });
 });
--- a/packages/mermaid/src/diagrams/state/parser/stateDiagram.jison
+++ b/packages/mermaid/src/diagrams/state/parser/stateDiagram.jison
@@ -109,6 +109,7 @@ accDescr\s*"{"\s*                                { this.begin("acc_descr_multili
 <STATE>[^\n\s\{]+      {/*console.log('COMPOSIT_STATE', yytext);*/return 'COMPOSIT_STATE';}
 <STATE>\n      {this.popState();}
 <INITIAL,STATE>\{               {this.popState();this.pushState('struct'); /*console.log('begin struct', yytext);*/return 'STRUCT_START';}
+<struct>\%\%(?!\{)[^\n]*                                       /* skip comments inside state*/
 <struct>\}           { /*console.log('Ending struct');*/ this.popState(); return 'STRUCT_STOP';}}
 <struct>[\n]              /* nothing */

--- a/packages/mermaid/src/diagrams/state/stateDb.js
+++ b/packages/mermaid/src/diagrams/state/stateDb.js
@@ -9,6 +9,8 @@ import {
  getAccDescription,
  setAccDescription,
  clear as commonClear,
+  setDiagramTitle,
+  getDiagramTitle,
 } from '../../commonDb';

 import {
@@ -571,4 +573,6 @@ export default {
  addStyleClass,
  setCssClass,
  addDescription,
+  setDiagramTitle,
+  getDiagramTitle,
 };
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -1,10 +1,12 @@
-import graphlib from 'graphlib';
+import * as graphlib from 'dagre-d3-es/src/graphlib';
 import { select } from 'd3';
 import { getConfig } from '../../config';
 import { render } from '../../dagre-wrapper/index.js';
 import { log } from '../../logger';
 import { configureSvgSize } from '../../setupGraphViewbox';
 import common from '../common/common';
+import utils from '../../utils';
+
 import {
  DEFAULT_DIAGRAM_DIRECTION,
  DEFAULT_NESTED_DOC_DIR,
@@ -436,8 +438,9 @@ export const draw = function (text, id, _version, diag) {

  const padding = 8;

-  const bounds = svg.node().getBBox();
+  utils.insertTitle(svg, 'statediagramTitleText', conf.titleTopMargin, diag.db.getDiagramTitle());

+  const bounds = svg.node().getBBox();
  const width = bounds.width + padding * 2;
  const height = bounds.height + padding * 2;

--- a/packages/mermaid/src/diagrams/state/stateRenderer.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer.js
@@ -1,6 +1,6 @@
 import { select } from 'd3';
-import dagre from 'dagre';
-import graphlib from 'graphlib';
+import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
+import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import { log } from '../../logger';
 import common from '../common/common';
 import { drawState, addTitleAndBox, drawEdge } from './shapes';
@@ -237,7 +237,7 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) =
    );
  });

-  dagre.layout(graph);
+  dagreLayout(graph);

  log.debug('Graph after layout', graph.nodes());
  const svgElem = diagram.node();
--- a/packages/mermaid/src/diagrams/state/styles.js
+++ b/packages/mermaid/src/diagrams/state/styles.js
@@ -194,6 +194,12 @@ g.stateGroup line {
  stroke: ${options.lineColor};
  stroke-width: 1;
 }
+
+.statediagramTitleText {
+  text-anchor: middle;
+  font-size: 18px;
+  fill: ${options.textColor};
+}
 `;

 export default getStyles;
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -245,7 +245,7 @@ const transformHtml = (filename: string) => {
 };

 const getGlobs = (globs: string[]): string[] => {
-  globs.push('!**/dist');
+  globs.push('!**/dist', '!**/redirect.spec.ts');
  if (!vitepress) {
    globs.push('!**/.vitepress', '!**/vite.config.ts', '!src/docs/index.md');
  }
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -4,6 +4,8 @@ import { MermaidMarkdown } from 'vitepress-plugin-mermaid';
 import { defineConfig, MarkdownOptions } from 'vitepress';

 const allMarkdownTransformers: MarkdownOptions = {
+  // the shiki theme to highlight code blocks
+  theme: 'github-dark',
  config: async (md) => {
    await MermaidExample(md);
    MermaidMarkdown(md);
@@ -35,7 +37,7 @@ function nav() {
    { text: 'Intro', link: '/intro/', activeMatch: '/intro/' },
    {
      text: 'Configuration',
-      link: '/config/Tutorials',
+      link: '/config/configuration',
      activeMatch: '/config/',
    },
    { text: 'Syntax', link: '/syntax/classDiagram', activeMatch: '/syntax/' },
@@ -118,6 +120,7 @@ function sidebarConfig() {
      text: '⚙️ Deployment and Configuration',
      collapsible: true,
      items: [
+        { text: 'Configuration', link: '/config/configuration' },
        { text: 'Tutorials', link: '/config/Tutorials' },
        { text: 'API-Usage', link: '/config/usage' },
        { text: 'Mermaid API Configuration', link: '/config/setup/README' },
@@ -126,7 +129,6 @@ function sidebarConfig() {
        { text: 'Accessibility', link: '/config/accessibility' },
        { text: 'Mermaid CLI', link: '/config/mermaidCLI' },
        { text: 'Advanced usage', link: '/config/n00b-advanced' },
-        { text: 'Configuration', link: '/config/configuration' },
      ],
    },
  ];
--- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
+++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
@@ -1,8 +1,5 @@
 import type { MarkdownRenderer } from 'vitepress';

-// Note: using "import shiki from 'shiki' and then "const highlighter = await shiki.getHighlighter(...) does not work 2022-11-15
-import { getHighlighter } from 'shiki';
-
 const MermaidExample = async (md: MarkdownRenderer) => {
  const defaultRenderer = md.renderer.rules.fence;

@@ -10,26 +7,29 @@ const MermaidExample = async (md: MarkdownRenderer) => {
    throw new Error('defaultRenderer is undefined');
  }

-  const highlighter = await getHighlighter({
-    theme: 'material-palenight',
-    langs: ['mermaid'],
-  });
-
  md.renderer.rules.fence = (tokens, index, options, env, slf) => {
    const token = tokens[index];

    if (token.info.trim() === 'mermaid-example') {
-      const highlight = highlighter
-        .codeToHtml(token.content, { lang: 'mermaid' })
-        .replace(/<span/g, '<span v-pre')
-        .replace('#2e3440ff', 'transparent')
-        .replace('#292D3E', 'transparent');
+      if (!md.options.highlight) {
+        // this function is always created by vitepress, but we need to check it
+        // anyway to make TypeScript happy
+        throw new Error(
+          'Missing MarkdownIt highlight function (should be automatically created by vitepress'
+        );
+      }

+      // doing ```mermaid-example {line-numbers=5 highlight=14-17} is not supported
+      const langAttrs = '';
      return `<h5>Code:</h5>
          <div class="language-mermaid">
-          <button class="copy"></button>
-          <span class="lang">mermaid</span>
-${highlight}
+            <button class="copy"></button>
+            <span class="lang">mermaid</span>
+            ${
+              // html is pre-escaped by the highlight function
+              // (it also adds `v-pre` to ignore Vue template syntax)
+              md.options.highlight(token.content, 'mermaid', langAttrs)
+            }
          </div>
          <h5>Diagram:</h5>`;
    }
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@@ -2,11 +2,25 @@ import DefaultTheme from 'vitepress/theme';
 // @ts-ignore
 import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue';
 import './custom.css';
+import { getRedirect } from './redirect';

 export default {
  ...DefaultTheme,
-  enhanceApp({ app }) {
+  enhanceApp({ app, router }) {
    // register global components
    app.component('Mermaid', Mermaid);
+    router.onBeforeRouteChange = (to) => {
+      if (router.route.path !== '/') {
+        return;
+      }
+      try {
+        const newPath = getRedirect(to);
+        if (newPath) {
+          console.log(`Redirecting to ${newPath} from ${window.location}`);
+          // router.go isn't loading the ID properly.
+          window.location.href = `/mermaid/${newPath}`;
+        }
+      } catch (e) {}
+    };
  },
-};
+} as typeof DefaultTheme;
--- a/packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts
@@ -0,0 +1,37 @@
+// This file should be moved into .vitepress folder once https://github.com/vitest-dev/vitest/issues/2344 is resolved.
+// Update https://github.com/mermaid-js/mermaid/blob/18c27c6f1d0537a738cbd95898df301b83c38ffc/packages/mermaid/src/docs.mts#L246 once fixed
+
+import { expect, test } from 'vitest';
+import { getRedirect } from './redirect';
+
+test.each([
+  ['http://localhost:1234/mermaid/#/flowchart.md', 'syntax/flowchart.html'],
+  ['http://localhost/mermaid/#/flowchart.md', 'syntax/flowchart.html'],
+  ['https://mermaid-js.github.io/mermaid/#/flowchart.md', 'syntax/flowchart.html'],
+  ['https://mermaid-js.github.io/mermaid/#/./flowchart', 'syntax/flowchart.html'],
+  ['https://mermaid-js.github.io/mermaid/#/flowchart', 'syntax/flowchart.html'],
+  ['https://mermaid-js.github.io/mermaid/#flowchart', 'syntax/flowchart.html'],
+  ['https://mermaid-js.github.io/mermaid/#/flowchart', 'syntax/flowchart.html'],
+  ['https://mermaid-js.github.io/mermaid/#/flowchart.md?id=my-id', 'syntax/flowchart.html#my-id'],
+  ['https://mermaid-js.github.io/mermaid/#/./flowchart.md?id=my-id', 'syntax/flowchart.html#my-id'],
+  [
+    'https://mermaid-js.github.io/mermaid/#/flowchart?another=test&id=my-id&one=more',
+    'syntax/flowchart.html#my-id',
+  ],
+  ['https://mermaid-js.github.io/mermaid/#/n00b-advanced', 'config/n00b-advanced.html'],
+  ['https://mermaid-js.github.io/mermaid/#/n00b-advanced.md', 'config/n00b-advanced.html'],
+  [
+    'https://mermaid-js.github.io/mermaid/#/flowchart?id=a-node-in-the-form-of-a-circle',
+    'syntax/flowchart.html#a-node-in-the-form-of-a-circle',
+  ],
+])('should process url %s to %s', (link: string, path: string) => {
+  expect(getRedirect(link)).toBe(path);
+});
+
+test('should throw for invalid URL', () => {
+  // Not mermaid domain
+  expect(() => getRedirect('https://www.google.com')).toThrowError();
+
+  // Not `/mermaid/` path
+  expect(() => getRedirect('http://localhost/#/flowchart.md')).toThrowError();
+});
--- a/packages/mermaid/src/docs/.vitepress/theme/redirect.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/redirect.ts
@@ -0,0 +1,89 @@
+export interface Redirect {
+  path: string;
+  id?: string;
+}
+
+/**
+ * Extracts the base slug from the old URL.
+ * @param link - The old URL.
+ */
+const getBaseFile = (link: string): Redirect => {
+  const url = new URL(link);
+  if (
+    (url.hostname !== 'mermaid-js.github.io' && url.hostname !== 'localhost') ||
+    url.pathname !== '/mermaid/'
+  ) {
+    throw new Error('Not mermaidjs url');
+  }
+  const [path, params, ...rest] = url.hash
+    .toLowerCase()
+    .replace('.md', '')
+    .replace(/^#\/?/g, '')
+    .replace(/^\.\//g, '')
+    .split('?');
+
+  // Find id in params
+  const id = params
+    ?.split('&')
+    .find((param) => param.startsWith('id='))
+    ?.split('=')[1];
+
+  return { path, id };
+};
+
+const redirectMap: Record<string, string> = {
+  '8.6.0_docs': '',
+  accessibility: 'config/theming',
+  breakingchanges: '',
+  c4c: 'syntax/c4c',
+  classdiagram: 'syntax/classDiagram',
+  configuration: 'config/configuration',
+  demos: 'misc/integrations',
+  development: 'community/development',
+  directives: 'config/directives',
+  entityrelationshipdiagram: 'syntax/entityRelationshipDiagram',
+  examples: 'syntax/examples',
+  faq: 'misc/faq',
+  flowchart: 'syntax/flowchart',
+  gantt: 'syntax/gantt',
+  gitgraph: 'syntax/gitgraph',
+  integrations: 'misc/integrations',
+  'language-highlight': '',
+  markdown: '',
+  mermaidapi: 'config/usage',
+  mermaidcli: 'config/mermaidCLI',
+  mindmap: 'syntax/mindmap',
+  'more-pages': '',
+  'n00b-advanced': 'config/n00b-advanced',
+  'n00b-gettingstarted': 'intro/n00b-gettingStarted',
+  'n00b-overview': 'community/n00b-overview',
+  'n00b-syntaxreference': '',
+  newdiagram: 'community/newDiagram',
+  pie: 'syntax/pie',
+  plugins: '',
+  quickstart: 'intro/n00b-gettingStarted',
+  requirementdiagram: 'syntax/requirementDiagram',
+  security: 'community/security',
+  sequencediagram: 'syntax/sequenceDiagram',
+  setup: 'config/setup/README',
+  statediagram: 'syntax/stateDiagram',
+  themes: 'config/theming',
+  theming: 'config/theming',
+  tutorials: 'config/Tutorials',
+  upgrading: '',
+  usage: 'config/usage',
+  'user-journey': 'syntax/userJourney',
+};
+
+/**
+ *
+ * @param link - The old documentation URL.
+ * @returns The new documentation path.
+ */
+export const getRedirect = (link: string): string | undefined => {
+  const { path, id } = getBaseFile(link);
+  if (!(path in redirectMap)) {
+    return;
+  }
+  return `${redirectMap[path]}.html${id ? `#${id}` : ''}`;
+};
--- a/packages/mermaid/src/docs/config/usage.md
+++ b/packages/mermaid/src/docs/config/usage.md
@@ -347,7 +347,7 @@ This is the preferred way of configuring mermaid.

 ## Using the mermaid object

-Is it possible to set some configuration via the mermaid object. The two parameters that are supported using this
+It is possible to set some configuration via the mermaid object. The two parameters that are supported using this
 approach are:

 - mermaid.startOnLoad
--- a/packages/mermaid/src/docs/index.md
+++ b/packages/mermaid/src/docs/index.md
@@ -32,6 +32,7 @@ features:

 <script setup>
 import { VPTeamMembers } from 'vitepress/theme'
+
 const websiteSVG = {
  svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>'
 }
--- a/packages/mermaid/src/docs/intro/index.md
+++ b/packages/mermaid/src/docs/intro/index.md
@@ -8,7 +8,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins

 <img src="/header.png" alt="" />

-[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)
+[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_)

 <!-- Mermaid book banner -->

--- a/Show More
+++ b/Show More