Merge branch 'develop' into sidv/splitDiagrams

* develop: (233 commits) style(docs): use `github-dark` hightlight theme refactor(docs): use default vitepress highlighter fix: Move redirection to router ci(renovate): disable pinning dependencies Revert "chore(deps): pin dependencies" change shiki getHighlighter import create separate spec for stateRenderer-v2 diagramStates should not be global; pass it into functions; minor comment fixes diagramClasses no longer needs to be cached; mermaidAPI no longer calls it repeatedly (minor) import expectTypeOf in spec (minor) fix JSdoc tag + spec stateRenderer-v2.js getClasses() to verify it returns a {} (minor) fix JSdoc types in comments (minor) add comments, remove duplicated line chore: Add master to link checker chore: Add docs to redirect.ts stateDB classes must be a {} not [] feat: Redirect old documentation links. add stateDiagram-v2 to list of graphs with classDefs fix(docs): ClassDiagram table ...
2025-01-28 07:03:17 +08:00 · 2022-11-20 11:58:55 +05:30 · 2022-11-20 11:58:55 +05:30 · 024ee4213f
commit 024ee4213f
parent e861fbb517 09ed41b7d2
377 changed files with 7472 additions and 28924 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -16,26 +16,17 @@
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
-    "plugin:jsdoc/recommended",
    "plugin:json/recommended",
    "plugin:markdown/recommended",
+    "plugin:@cspell/recommended",
    "prettier"
  ],
-  "plugins": ["@typescript-eslint", "html", "jest", "jsdoc", "json"],
+  "plugins": ["@typescript-eslint", "no-only-tests", "html", "jest", "jsdoc", "json", "@cspell"],
  "rules": {
+    "curly": "error",
    "no-console": "error",
    "no-prototype-builtins": "off",
    "no-unused-vars": "off",
-    "jsdoc/check-indentation": "off",
-    "jsdoc/check-alignment": "off",
-    "jsdoc/check-line-alignment": "off",
-    "jsdoc/multiline-blocks": "off",
-    "jsdoc/newline-after-description": "off",
-    "jsdoc/tag-lines": "off",
-    "jsdoc/require-param-description": "off",
-    "jsdoc/require-param-type": "off",
-    "jsdoc/require-returns": "off",
-    "jsdoc/require-returns-description": "off",
    "cypress/no-async-tests": "off",
    "@typescript-eslint/ban-ts-comment": [
      "error",
@ -48,7 +39,21 @@
      }
    ],
    "json/*": ["error", "allowComments"],
-    "no-empty": ["error", { "allowEmptyCatch": true }]
+    "@cspell/spellchecker": [
+      "error",
+      {
+        "checkIdentifiers": false,
+        "checkStrings": false,
+        "checkStringTemplates": false
+      }
+    ],
+    "no-empty": [
+      "error",
+      {
+        "allowEmptyCatch": true
+      }
+    ],
+    "no-only-tests/no-only-tests": "error"
  },
  "overrides": [
    {
@ -57,6 +62,29 @@
        "no-console": "off"
      }
    },
+    {
+      "files": ["*.{js,jsx,mjs,cjs}"],
+      "extends": ["plugin:jsdoc/recommended"],
+      "rules": {
+        "jsdoc/check-indentation": "off",
+        "jsdoc/check-alignment": "off",
+        "jsdoc/check-line-alignment": "off",
+        "jsdoc/multiline-blocks": "off",
+        "jsdoc/newline-after-description": "off",
+        "jsdoc/tag-lines": "off",
+        "jsdoc/require-param-description": "off",
+        "jsdoc/require-param-type": "off",
+        "jsdoc/require-returns": "off",
+        "jsdoc/require-returns-description": "off"
+      }
+    },
+    {
+      "files": ["*.{ts,tsx}"],
+      "plugins": ["tsdoc"],
+      "rules": {
+        "tsdoc/syntax": "error"
+      }
+    },
    {
      "files": ["*.spec.{ts,js}", "cypress/**", "demos/**", "**/docs/**"],
      "rules": {
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -3,9 +3,6 @@ contact_links:
  - name: GitHub Discussions
    url: https://github.com/mermaid-js/mermaid/discussions
    about: Ask the Community questions or share your own graphs in our discussions.
-  - name: Security Vulnerability
-    url: https://github.com/mermaid-js/.github/blob/main/SECURITY.md
-    about: Report security issues confidentially.
  - name: Slack
    url: https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE
    about: Join our Community on Slack for Help and a casual chat.
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -1,18 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: npm
-    open-pull-requests-limit: 10
-    directory: /
-    target-branch: develop
-    versioning-strategy: increase
-    schedule:
-      interval: weekly
-      day: monday
-      time: '07:00'
-  - package-ecosystem: github-actions
-    directory: /
-    target-branch: develop
-    schedule:
-      interval: weekly
-      day: monday
-      time: '07:00'
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@ -16,12 +16,12 @@ jobs:
    name: 'Docs: Spellcheck'
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
        name: Check out the code
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
        name: Setup node
        with:
-          node-version: '16'
+          node-version: '18'
      - run: npm install -g cspell
        name: Install cSpell
      - run: cspell --config ./cSpell.json "packages/mermaid/src/docs/**/*.md" --no-progress
--- a/.github/workflows/link-checker.yml
+++ b/.github/workflows/link-checker.yml
@ -0,0 +1,45 @@
+# This Link Checker is run on all documentation files once per week.
+
+# references:
+# - https://github.com/lycheeverse/lychee-action
+# - https://github.com/lycheeverse/lychee
+
+name: Link Checker
+
+on:
+  push:
+    branches:
+      - develop
+      - master
+  pull_request:
+    branches:
+      - develop
+      - master
+  schedule:
+    # * is a special character in YAML so you have to quote this string
+    - cron: '30 8 * * 5'
+
+jobs:
+  linkChecker:
+    runs-on: ubuntu-latest
+    permissions:
+      # lychee only uses the GITHUB_TOKEN to avoid rate-limiting
+      contents: read
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Restore lychee cache
+        uses: actions/cache@v3
+        with:
+          path: .lycheecache
+          key: cache-lychee-${{ github.sha }}
+          restore-keys: cache-lychee-
+
+      - name: Link Checker
+        uses: lycheeverse/lychee-action@v1.5.2
+        with:
+          args: --verbose --no-progress --cache --max-cache-age 1d packages/mermaid/src/docs/**/*.md README.md README.zh-CN.md
+          fail: true
+          jobSummary: true
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@ -39,4 +39,5 @@ jobs:
        run: pnpm run lint

      - name: Verify Docs
+        working-directory: ./packages/mermaid
        run: pnpm run docs:verify
--- a/.github/workflows/publish-docs.yml
+++ b/.github/workflows/publish-docs.yml
@ -0,0 +1,62 @@
+name: Deploy Vitepress docs to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches:
+      - master
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          cache: pnpm
+          node-version: 18
+
+      - name: Install Packages
+        run: pnpm install --frozen-lockfile
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v2
+
+      - name: Run Build
+        run: pnpm --filter mermaid run docs:build:vitepress
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: packages/mermaid/src/vitepress/.vitepress/dist
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1
--- a/.gitignore
+++ b/.gitignore
@ -32,6 +32,6 @@ cypress/snapshots/
 .eslintcache
 .tsbuildinfo
 tsconfig.tsbuildinfo
-knsv*.html

+knsv*.html
 local*.html
--- a/.lintstagedrc.json
+++ b/.lintstagedrc.json
@ -1,6 +1,4 @@
 {
-  "packages/mermaid/src/docs/**": ["pnpm run docs:build --git"],
-  "packages/mermaid/src/docs.mts": ["pnpm run docs:build --git"],
-  "*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"],
-  "*.jison": ["pnpm run lint:jison"]
+  "!(docs/**/*)*.{ts,js,json,html,md,mts}": ["eslint --fix", "prettier --write"],
+  "cSpell.json": ["ts-node-esm scripts/fixCSpell.ts"]
 }
--- a/.lycheeignore
+++ b/.lycheeignore
@ -0,0 +1,13 @@
+# These links are ignored by our link checker https://github.com/lycheeverse/lychee
+# The file allows you to list multiple regular expressions for exclusion (one pattern per line).
+
+# Network error: Forbidden
+https://codepen.io
+
+# Network error: The certificate was not trusted
+https://mkdocs.org/
+https://osawards.com/javascript/#nominees
+https://osawards.com/javascript/2019
+
+# Don't check files that are generated during the build via `pnpm docs:code`
+packages/mermaid/src/docs/config/setup/*
--- a/.vite/build.ts
+++ b/.vite/build.ts
@ -122,9 +122,6 @@ const buildPackage = async (entryName: keyof typeof packageOptions) => {
 const main = async () => {
  const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
  for (const pkg of packageNames) {
-    if (mermaidOnly && pkg !== 'mermaid') {
-      continue;
-    }
    await buildPackage(pkg);
  }
 };
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -12,6 +12,17 @@
      "args": ["run", "${relativeFile}"],
      "smartStep": true,
      "console": "integratedTerminal"
+    },
+    {
+      "name": "Docs generation",
+      "type": "node",
+      "request": "launch",
+      "args": ["src/docs.mts"],
+      "runtimeArgs": ["--loader", "ts-node/esm"],
+      "cwd": "${workspaceRoot}/packages/mermaid",
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "smartStep": true,
+      "internalConsoleOptions": "openOnSessionStart"
    }
  ]
 }
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -32,7 +32,7 @@ We make all changes via pull requests. As we have many pull requests from develo

 - Large changes reviewed by knsv or other developer asked to review by knsv
 - Smaller low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
- Documentation (updates to the `src/docs` folder is also allowed via direct commits)
+- Documentation (updates to the `package/mermaid/src/docs` folder is also allowed via direct commits)

 To commit code, create a branch, let it start with the type like feature or bug followed by the issue number for reference and some describing text.

@ -67,31 +67,22 @@ flowchart LR

 ### The official documentation site

-**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Docsify](https://docsify.js.org), a simple documentation site generator.**
+**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Vitepress](https://vitepress.vuejs.org/), a simple documentation site generator.**

-If you want to preview the whole documentation site on your machine, you need to install `docsify-cli`:
+If you want to preview the whole documentation site on your machine:

 ```sh
-$ npm i docsify-cli -g
+cd packages/mermaid
+pnpm i
+pnpm docs:dev
 ```

-If you are more familiar with Yarn, you can use the following command:
+You can now build and serve the documentation site:

 ```sh
-$ yarn global add docsify-cli
+pnpm docs:serve
 ```

-The above command will install `docsify-cli` globally.
-If the installation is successful, the command `docsify` will be available in your `PATH`.
-
-You can now run the following command to serve the documentation site:
-
-```sh
-$ docsify serve docs
-```
-
-Once the local HTTP server is listening, you can point your browser at http://localhost:3000.
-
 ## Branching

 Going forward we will use a git flow inspired approach to branching. So development is done in develop, to do the development in the develop.
@ -152,7 +143,7 @@ The source files for documentation are in `/packages/mermaid/src/docs` and are w

 #### Adding to or changing the documentation organization

-If you want to add a new section or change the organization (structure), then you need to make sure to **change the side navigation** in `src/docs/_sidebar.md`.
+If you want to add a new section or change the organization (structure), then you need to make sure to **change the side navigation** in `mermaid/src/docs/.vitepress/config.js`.

 When changes are committed and then released, they become part of the `master` branch and become part of the published documentation on https://mermaid-js.github.io/mermaid/

--- a/README.md
+++ b/README.md
@ -43,12 +43,12 @@ Mermaid addresses this problem by enabling users to create easily modifiable dia
 <br/>

 Mermaid allows even non-programmers to easily create detailed diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
-[Tutorials](./docs/Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
+[Tutorials](./docs/config/Tutorials.md) has video tutorials.
+Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/misc/integrations.md).

-You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/integrations.md).
+You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) as well many of your other favorite applications—check out the list of [Integrations and Usages of Mermaid](./docs/misc/integrations.md).

-For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/n00b-overview.md), [Usage](./docs/usage.md) and [Tutorials](./docs/Tutorials.md).
+For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/community/n00b-overview.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).

 🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md)

@ -354,7 +354,11 @@ To report a vulnerability, please e-mail security@mermaid.live with a descriptio

 A quick note from Knut Sveidqvist:

-> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
+> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_
+>
+> _Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._
+>
+> _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
 > _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_

--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@ -24,9 +24,9 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd
 Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。<br/>
 <br/>
 Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
-你可以访问 [教程](./docs/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
+你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/misc/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。

-如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/n00b-overview.md), [用法](./docs/usage.md) 和 [教程](./docs/Tutorials.md).
+如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/community/n00b-overview.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).

 🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [文档](https://mermaidjs.github.io) | 🙌 [贡献](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [更新日志](./docs/CHANGELOG.md)

@ -39,7 +39,7 @@ Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://merma
 <table>
 <!-- <Flowchart> -->

-### 流程图 [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+### 流程图 [<a href="https://mermaid-js.github.io/mermaid/#/flowchart">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]

 ```
 flowchart LR
@ -57,7 +57,7 @@ C -->|One| D[Result 1]
 C -->|Two| E[Result 2]
 ```

-### 时序图 [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### 时序图 [<a href="https://mermaid-js.github.io/mermaid/#/sequenceDiagram">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG5BbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91P1xubG9vcCBIZWFsdGhjaGVja1xuICAgIEpvaG4tPj5Kb2huOiBGaWdodCBhZ2FpbnN0IGh5cG9jaG9uZHJpYVxuZW5kXG5Ob3RlIHJpZ2h0IG9mIEpvaG46IFJhdGlvbmFsIHRob3VnaHRzIVxuSm9obi0tPj5BbGljZTogR3JlYXQhXG5Kb2huLT4-Qm9iOiBIb3cgYWJvdXQgeW91P1xuQm9iLS0-PkpvaG46IEpvbGx5IGdvb2QhIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]

 ```
 sequenceDiagram
@ -83,7 +83,7 @@ John->>Bob: How about you?
 Bob-->>John: Jolly good!
 ```

-### 甘特图 [<a href="https://mermaid-js.github.io/mermaid/#/gantt">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### 甘特图 [<a href="https://mermaid-js.github.io/mermaid/#/gantt">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ2FudHRcbnNlY3Rpb24gU2VjdGlvblxuQ29tcGxldGVkIDpkb25lLCAgICBkZXMxLCAyMDE0LTAxLTA2LDIwMTQtMDEtMDhcbkFjdGl2ZSAgICAgICAgOmFjdGl2ZSwgIGRlczIsIDIwMTQtMDEtMDcsIDNkXG5QYXJhbGxlbCAxICAgOiAgICAgICAgIGRlczMsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAyICAgOiAgICAgICAgIGRlczQsIGFmdGVyIGRlczEsIDFkXG5QYXJhbGxlbCAzICAgOiAgICAgICAgIGRlczUsIGFmdGVyIGRlczMsIDFkXG5QYXJhbGxlbCA0ICAgOiAgICAgICAgIGRlczYsIGFmdGVyIGRlczQsIDFkIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]

 ```
 gantt
@ -107,7 +107,7 @@ gantt
    Parallel 4   :         des6, after des4, 1d
 ```

-### 类图 [<a href="https://mermaid-js.github.io/mermaid/#/classDiagram">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+### 类图 [<a href="https://mermaid-js.github.io/mermaid/#/classDiagram">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiY2xhc3NEaWFncmFtXG5DbGFzczAxIDx8LS0gQXZlcnlMb25nQ2xhc3MgOiBDb29sXG48PGludGVyZmFjZT4-IENsYXNzMDFcbkNsYXNzMDkgLS0-IEMyIDogV2hlcmUgYW0gaT9cbkNsYXNzMDkgLS0qIEMzXG5DbGFzczA5IC0tfD4gQ2xhc3MwN1xuQ2xhc3MwNyA6IGVxdWFscygpXG5DbGFzczA3IDogT2JqZWN0W10gZWxlbWVudERhdGFcbkNsYXNzMDEgOiBzaXplKClcbkNsYXNzMDEgOiBpbnQgY2hpbXBcbkNsYXNzMDEgOiBpbnQgZ29yaWxsYVxuY2xhc3MgQ2xhc3MxMCB7XG4gID4-c2VydmljZT4-XG4gIGludCBpZFxuICBzaXplKClcbn0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]

 ```
 classDiagram
@ -147,7 +147,7 @@ class Class10 {
 }
 ```

-### 状态图 [[<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtLXYyXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoid2hpdGUiLCJwcmltYXJ5Q29sb3IiOiIjRUNFQ0ZGIiwic2Vjb25kYXJ5Q29sb3IiOiIjZmZmZmRlIiwidGVydGlhcnlDb2xvciI6ImhzbCg4MCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpIiwicHJpbWFyeUJvcmRlckNvbG9yIjoiaHNsKDI0MCwgNjAlLCA4Ni4yNzQ1MDk4MDM5JSkiLCJzZWNvbmRhcnlCb3JkZXJDb2xvciI6ImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSkiLCJ0ZXJ0aWFyeUJvcmRlckNvbG9yIjoiaHNsKDgwLCA2MCUsIDg2LjI3NDUwOTgwMzklKSIsInByaW1hcnlUZXh0Q29sb3IiOiIjMTMxMzAwIiwic2Vjb25kYXJ5VGV4dENvbG9yIjoiIzAwMDAyMSIsInRlcnRpYXJ5VGV4dENvbG9yIjoicmdiKDkuNTAwMDAwMDAwMSwgOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEpIiwibGluZUNvbG9yIjoiIzMzMzMzMyIsInRleHRDb2xvciI6IiMzMzMiLCJtYWluQmtnIjoiI0VDRUNGRiIsInNlY29uZEJrZyI6IiNmZmZmZGUiLCJib3JkZXIxIjoiIzkzNzBEQiIsImJvcmRlcjIiOiIjYWFhYTMzIiwiYXJyb3doZWFkQ29sb3IiOiIjMzMzMzMzIiwiZm9udEZhbWlseSI6IlwidHJlYnVjaGV0IG1zXCIsIHZlcmRhbmEsIGFyaWFsIiwiZm9udFNpemUiOiIxNnB4IiwibGFiZWxCYWNrZ3JvdW5kIjoiI2U4ZThlOCIsIm5vZGVCa2ciOiIjRUNFQ0ZGIiwibm9kZUJvcmRlciI6IiM5MzcwREIiLCJjbHVzdGVyQmtnIjoiI2ZmZmZkZSIsImNsdXN0ZXJCb3JkZXIiOiIjYWFhYTMzIiwiZGVmYXVsdExpbmtDb2xvciI6IiMzMzMzMzMiLCJ0aXRsZUNvbG9yIjoiIzMzMyIsImVkZ2VMYWJlbEJhY2tncm91bmQiOiIjZThlOGU4IiwiYWN0b3JCb3JkZXIiOiJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSkiLCJhY3RvckJrZyI6IiNFQ0VDRkYiLCJhY3RvclRleHRDb2xvciI6ImJsYWNrIiwiYWN0b3JMaW5lQ29sb3IiOiJncmV5Iiwic2lnbmFsQ29sb3IiOiIjMzMzIiwic2lnbmFsVGV4dENvbG9yIjoiIzMzMyIsImxhYmVsQm94QmtnQ29sb3IiOiIjRUNFQ0ZGIiwibGFiZWxCb3hCb3JkZXJDb2xvciI6ImhzbCgyNTkuNjI2MTY4MjI0MywgNTkuNzc2NTM2MzEyOCUsIDg3LjkwMTk2MDc4NDMlKSIsImxhYmVsVGV4dENvbG9yIjoiYmxhY2siLCJsb29wVGV4dENvbG9yIjoiYmxhY2siLCJub3RlQm9yZGVyQ29sb3IiOiIjYWFhYTMzIiwibm90ZUJrZ0NvbG9yIjoiI2ZmZjVhZCIsIm5vdGVUZXh0Q29sb3IiOiJibGFjayIsImFjdGl2YXRpb25Cb3JkZXJDb2xvciI6IiM2NjYiLCJhY3RpdmF0aW9uQmtnQ29sb3IiOiIjZjRmNGY0Iiwic2VxdWVuY2VOdW1iZXJDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yIjoicmdiYSgxMDIsIDEwMiwgMjU1LCAwLjQ5KSIsImFsdFNlY3Rpb25Ca2dDb2xvciI6IndoaXRlIiwic2VjdGlvbkJrZ0NvbG9yMiI6IiNmZmY0MDAiLCJ0YXNrQm9yZGVyQ29sb3IiOiIjNTM0ZmJjIiwidGFza0JrZ0NvbG9yIjoiIzhhOTBkZCIsInRhc2tUZXh0TGlnaHRDb2xvciI6IndoaXRlIiwidGFza1RleHRDb2xvciI6IndoaXRlIiwidGFza1RleHREYXJrQ29sb3IiOiJibGFjayIsInRhc2tUZXh0T3V0c2lkZUNvbG9yIjoiYmxhY2siLCJ0YXNrVGV4dENsaWNrYWJsZUNvbG9yIjoiIzAwMzE2MyIsImFjdGl2ZVRhc2tCb3JkZXJDb2xvciI6IiM1MzRmYmMiLCJhY3RpdmVUYXNrQmtnQ29sb3IiOiIjYmZjN2ZmIiwiZ3JpZENvbG9yIjoibGlnaHRncmV5IiwiZG9uZVRhc2tCa2dDb2xvciI6ImxpZ2h0Z3JleSIsImRvbmVUYXNrQm9yZGVyQ29sb3IiOiJncmV5IiwiY3JpdEJvcmRlckNvbG9yIjoiI2ZmODg4OCIsImNyaXRCa2dDb2xvciI6InJlZCIsInRvZGF5TGluZUNvbG9yIjoicmVkIiwibGFiZWxDb2xvciI6ImJsYWNrIiwiZXJyb3JCa2dDb2xvciI6IiM1NTIyMjIiLCJlcnJvclRleHRDb2xvciI6IiM1NTIyMjIiLCJjbGFzc1RleHQiOiIjMTMxMzAwIiwiZmlsbFR5cGUwIjoiI0VDRUNGRiIsImZpbGxUeXBlMSI6IiNmZmZmZGUiLCJmaWxsVHlwZTIiOiJoc2woMzA0LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTMiOiJoc2woMTI0LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkiLCJmaWxsVHlwZTQiOiJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTUiOiJoc2woLTQsIDEwMCUsIDkzLjUyOTQxMTc2NDclKSIsImZpbGxUeXBlNiI6ImhzbCg4LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSkiLCJmaWxsVHlwZTciOiJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSkifX0sInVwZGF0ZUVkaXRvciI6ZmFsc2V9">live editor</a>]
+### 状态图 [[<a href="https://mermaid-js.github.io/mermaid/#/stateDiagram">docs</a> - <a href="https://mermaid.live/edit#pako:eNpdkLsOwjAMRX-l8ojahTEDCzB26kgYrMYtkfJAqVMJVf13QiIKqqfr44d8vUDvFYGAiZHponEMaJv5KF2V4na4V01zqjrWxhSUZYapuEetn7UbCy16P_5HzwGnR6FZfpdCDZaCRa3SWcunQQI_yJIEkaSiAaNhCdKtqRUj--7lehAcItUQn-pnBMSAZtroVWn2YYOU07b4z29Y37gJVYk">live editor</a>]

 ```
 stateDiagram-v2
@ -169,7 +169,7 @@ Moving --> Crash
 Crash --> [*]
 ```

-### 饼图 [<a href="https://mermaid-js.github.io/mermaid/#/pie">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### 饼图 [<a href="https://mermaid-js.github.io/mermaid/#/pie">文档</a> - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoicGllXG5cIkRvZ3NcIiA6IDQyLjk2XG5cIkNhdHNcIiA6IDUwLjA1XG5cIlJhdHNcIiA6IDEwLjAxIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]

 ```
 pie
@ -185,9 +185,9 @@ pie
 "Rats" : 15
 ```

-### Git 图 [实验特性 - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]
+### Git 图 [实验特性 - <a href="https://mermaid.live/edit#base64:eyJjb2RlIjoiZ2l0R3JhcGg6XG5vcHRpb25zXG57XG4gICAgXCJub2RlU3BhY2luZ1wiOiAxNTAsXG4gICAgXCJub2RlUmFkaXVzXCI6IDEwXG59XG5lbmRcbmNvbW1pdFxuYnJhbmNoIG5ld2JyYW5jaFxuY2hlY2tvdXQgbmV3YnJhbmNoXG5jb21taXRcbmNvbW1pdFxuY2hlY2tvdXQgbWFzdGVyXG5jb21taXRcbmNvbW1pdFxubWVyZ2UgbmV3YnJhbmNoXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ">live editor</a>]

-### 用户体验旅程图 [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">文档</a> - <a href="https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoic3RhdGVEaWFncmFtXG4gICAgWypdIC0tPiBTdGlsbFxuICAgIFN0aWxsIC0tPiBbKl1cbiAgICBTdGlsbCAtLT4gTW92aW5nXG4gICAgTW92aW5nIC0tPiBTdGlsbFxuICAgIE1vdmluZyAtLT4gQ3Jhc2hcbiAgICBDcmFzaCAtLT4gWypdIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifX0">live editor</a>]
+### 用户体验旅程图 [<a href="https://mermaid-js.github.io/mermaid/#/user-journey">文档</a> - <a href="https://mermaid.live/edit#pako:eNpljzEPgkAMhf9K05nFGJdbJXFiYmVpuKIncDVHL4QQ_ruHaILaqXnf63vpjLVYRoMAd4nB81R5SKNOO4ZiglFC6_wVLL3JwLU68XARUHnhTQcoqGVQJgMnAwV_5GSMj0HJhcHAcU_y7d7AYVUzOJP-ddyk3ydZGf0n66uldPqCPxWYYc-hJ2fTj_OqVqg3Tplo0mq5odhphZVfkpWiSjn5Go2GyBnGhyXl3NE1UI-moW7g5QkSoF5m">live editor</a>]

 ```
  journey
--- a/cSpell.json
+++ b/cSpell.json
@ -2,50 +2,86 @@
  "version": "0.2",
  "language": "en",
  "words": [
-    "customizability",
-    "Gantt",
-    "jison",
-    "knsv",
-    "Knut",
-    "mindmap",
-    "Mindmaps",
-    "mitigations",
-    "sandboxed",
-    "Sveidqvist",
-    "verdana",
-    "Visio"
-  ],
-  "ignoreWords": [
-    "Adamiecki",
+    "acyclicer",
+    "adamiecki",
+    "alois",
+    "antiscript",
    "applitools",
-    "Asciidoctor",
-    "Astah",
-    "Bisheng",
+    "asciidoctor",
+    "ashish",
+    "astah",
+    "bbox",
+    "bilkent",
+    "bisheng",
+    "brolin",
    "codedoc",
-    "Docsy",
-    "Doku",
-    "Gitea",
-    "Gitgraph",
-    "Grav",
-    "Inkdrop",
-    "Jaoude",
+    "colour",
+    "cpettitt",
+    "customizability",
+    "cuzon",
+    "cytoscape",
+    "dagre",
+    "descr",
+    "docsify",
+    "docsy",
+    "doku",
+    "dompurify",
+    "edgechromium",
+    "faber",
+    "flatmap",
+    "gantt",
+    "gitea",
+    "gitgraph",
+    "graphlib",
+    "grav",
+    "greywolf",
+    "inkdrop",
+    "jaoude",
+    "jison",
+    "kaufmann",
+    "klemm",
+    "klink",
+    "knsv",
+    "knut",
+    "laganeckas",
+    "lucida",
+    "matthieu",
    "mdbook",
    "mermerd",
+    "mindaugas",
+    "mindmap",
+    "mindmaps",
+    "mitigations",
    "mkdocs",
+    "orlandoni",
    "phpbb",
-    "Plantuml",
-    "Playfair's",
-    "Podlite",
+    "plantuml",
+    "playfair",
+    "podlite",
+    "ranksep",
    "redmine",
+    "sandboxed",
+    "setupgraphviewbox",
+    "shiki",
+    "sidharth",
    "sphinxcontrib",
-    "Tuleap"
+    "statediagram",
+    "stylis",
+    "substate",
+    "sveidqvist",
+    "techn",
+    "ts-nocheck",
+    "tuleap",
+    "verdana",
+    "viewports",
+    "vinod",
+    "visio",
+    "vitepress",
+    "xlink",
+    "yash"
  ],
  "patterns": [
-    {
-      "name": "Markdown links",
-      "pattern": "\\((.*)\\)",
-      "description": ""
-    },
+    { "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" },
    {
      "name": "Markdown code blocks",
      "pattern": "/^(\\s*`{3,}).*[\\s\\S]*?^\\1/gmx",
@ -56,25 +92,14 @@
      "pattern": "\\`([^\\`\\r\\n]+?)\\`",
      "description": "https://stackoverflow.com/questions/41274241/how-to-capture-inline-markdown-code-but-not-a-markdown-code-fence-with-regex"
    },
-    {
-      "name": "Link contents",
-      "pattern": "\\<a(.*)\\>",
-      "description": ""
-    },
-    {
-      "name": "Snippet references",
-      "pattern": "-- snippet:(.*)",
-      "description": ""
-    },
+    { "name": "Link contents", "pattern": "\\<a(.*)\\>", "description": "" },
+    { "name": "Snippet references", "pattern": "-- snippet:(.*)", "description": "" },
    {
      "name": "Snippet references 2",
      "pattern": "\\<\\[sample:(.*)",
      "description": "another kind of snippet reference"
    },
-    {
-      "name": "Multi-line code blocks",
-      "pattern": "/^\\s*```[\\s\\S]*?^\\s*```/gm"
-    },
+    { "name": "Multi-line code blocks", "pattern": "/^\\s*```[\\s\\S]*?^\\s*```/gm" },
    {
      "name": "HTML Tags",
      "pattern": "<[^>]*>",
@ -91,5 +116,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/helpers/util.js
+++ b/cypress/helpers/util.js
@ -47,7 +47,6 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
    options.fontSize = '16px';
  }
  const useAppli = Cypress.env('useAppli');
-  //const useAppli = false;
  cy.log('Hello ' + useAppli ? 'Appli' : 'image-snapshot');
  const name = (options.name || cy.state('runnable').fullTitle()).replace(/\s+/g, '-');

@ -64,7 +63,9 @@ export const imgSnapshotTest = (graphStr, _options, api = false, validation) =>
  const url = mermaidUrl(graphStr, options, api);

  cy.visit(url);
-  if (validation) cy.get('svg').should(validation);
+  if (validation) {
+    cy.get('svg').should(validation);
+  }
  cy.get('svg');
  // Default name to test title

@ -117,7 +118,9 @@ export const urlSnapshotTest = (url, _options, api = false, validation) => {
  }

  cy.visit(url);
-  if (validation) cy.get('svg').should(validation);
+  if (validation) {
+    cy.get('svg').should(validation);
+  }
  cy.get('body');
  // Default name to test title

--- a/cypress/integration/rendering/appli.spec.js
+++ b/cypress/integration/rendering/appli.spec.js
@ -21,7 +21,7 @@ describe('Git Graph diagram', () => {
  //   // Call Open on eyes to initialize a test session
  //   cy.eyesOpen({
  //     appName: 'Demo App',
-  //     testName: 'Ultrafast grid demo',
+  //     testName: 'UltraFast grid demo',
  //   });

  //   // check the login page with fluent api, see more info here
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@ -478,4 +478,22 @@ describe('Class diagram V2', () => {
    );
    cy.get('svg');
  });
+
+  it('18: should render a simple class diagram with notes', () => {
+    imgSnapshotTest(
+      `
+      classDiagram-v2
+        note "I love this diagram!\nDo you love it?"
+        class Class10 {
+          <<service>>
+          int id
+          size()
+        }
+        note for Class10 "Cool class\nI said it's very cool class!"
+
+        `,
+      { logLevel: 1, flowchart: { htmlLabels: false } }
+    );
+    cy.get('svg');
+  });
 });
--- a/cypress/integration/rendering/classDiagram.spec.js
+++ b/cypress/integration/rendering/classDiagram.spec.js
@ -407,4 +407,21 @@ describe('Class diagram', () => {
  //      // expect(svg).to.not.have.attr('style');
  //     });
  // });
+
+  it('19: should render a simple class diagram with notes', () => {
+    imgSnapshotTest(
+      `
+    classDiagram
+      note "I love this diagram!\nDo you love it?"
+      class Class10 {
+        <<service>>
+        int id
+        size()
+      }
+      note for Class10 "Cool class\nI said it's very cool class!"
+      `,
+      { logLevel: 1 }
+    );
+    cy.get('svg');
+  });
 });
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@ -167,7 +167,7 @@ describe('Entity Relationship Diagram', () => {
    cy.get('svg');
  });

-  it.only('should render entities with generic and array attributes', () => {
+  it('should render entities with generic and array attributes', () => {
    renderGraph(
      `
    erDiagram
@ -255,4 +255,22 @@ describe('Entity Relationship Diagram', () => {
    );
    cy.get('svg');
  });
+
+  it('should render entities with aliases', () => {
+    renderGraph(
+      `
+    erDiagram
+      T1 one or zero to one or more T2 : test
+      T2 one or many optionally to zero or one T3 : test
+      T3 zero or more to zero or many T4 : test
+      T4 many(0) to many(1) T5 : test
+      T5 many optionally to one T6 : test
+      T6 only one optionally to only one T1 : test
+      T4 0+ to 1+ T6 : test
+      T1 1 to 1 T3 : test
+      `,
+      { logLevel: 1 }
+    );
+    cy.get('svg');
+  });
 });
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@ -341,4 +341,130 @@ describe('Gantt diagram', () => {
      expect(descriptionEl.textContent).to.equal(expectedAccDescription);
    });
  });
+
+  it('should render a gantt diagram with tick is 15 minutes', () => {
+    imgSnapshotTest(
+      `
+      gantt
+        title A Gantt Diagram
+        dateFormat   YYYY-MM-DD
+        axisFormat   %H:%M
+        tickInterval 15minute
+        excludes     weekends
+
+        section Section
+        A task           : a1, 2022-10-03, 6h
+        Another task     : after a1, 6h
+        section Another
+        Task in sec      : 2022-10-03, 3h
+        another task     : 3h
+      `,
+      {}
+    );
+  });
+
+  it('should render a gantt diagram with tick is 6 hours', () => {
+    imgSnapshotTest(
+      `
+      gantt
+        title A Gantt Diagram
+        dateFormat   YYYY-MM-DD
+        axisFormat   %d %H:%M
+        tickInterval 6hour
+        excludes     weekends
+
+        section Section
+        A task           : a1, 2022-10-03, 1d
+        Another task     : after a1, 2d
+        section Another
+        Task in sec      : 2022-10-04, 2d
+        another task     : 2d
+      `,
+      {}
+    );
+  });
+
+  it('should render a gantt diagram with tick is 1 day', () => {
+    imgSnapshotTest(
+      `
+      gantt
+        title A Gantt Diagram
+        dateFormat   YYYY-MM-DD
+        axisFormat   %m-%d
+        tickInterval 1day
+        excludes     weekends
+
+        section Section
+        A task           : a1, 2022-10-01, 30d
+        Another task     : after a1, 20d
+        section Another
+        Task in sec      : 2022-10-20, 12d
+        another task     : 24d
+      `,
+      {}
+    );
+  });
+
+  it('should render a gantt diagram with tick is 1 week', () => {
+    imgSnapshotTest(
+      `
+      gantt
+        title A Gantt Diagram
+        dateFormat   YYYY-MM-DD
+        axisFormat   %m-%d
+        tickInterval 1week
+        excludes     weekends
+
+        section Section
+        A task           : a1, 2022-10-01, 30d
+        Another task     : after a1, 20d
+        section Another
+        Task in sec      : 2022-10-20, 12d
+        another task     : 24d
+      `,
+      {}
+    );
+  });
+
+  it('should render a gantt diagram with tick is 1 month', () => {
+    imgSnapshotTest(
+      `
+      gantt
+        title A Gantt Diagram
+        dateFormat   YYYY-MM-DD
+        axisFormat   %m-%d
+        tickInterval 1month
+        excludes     weekends
+
+        section Section
+        A task           : a1, 2022-10-01, 30d
+        Another task     : after a1, 20d
+        section Another
+        Task in sec      : 2022-10-20, 12d
+        another task     : 24d
+      `,
+      {}
+    );
+  });
+
+  it('should render a gantt diagram with tick is 1 day and topAxis is true', () => {
+    imgSnapshotTest(
+      `
+      gantt
+        title A Gantt Diagram
+        dateFormat   YYYY-MM-DD
+        axisFormat   %m-%d
+        tickInterval 1day
+        excludes     weekends
+
+        section Section
+        A task           : a1, 2022-10-01, 30d
+        Another task     : after a1, 20d
+        section Another
+        Task in sec      : 2022-10-20, 12d
+        another task     : 24d
+      `,
+      { gantt: { topAxis: true } }
+    );
+  });
 });
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@ -521,4 +521,42 @@ stateDiagram-v2
      { logLevel: 0, fontFamily: 'courier' }
    );
  });
+
+  describe('classDefs and applying classes', () => {
+    it('v2 states can have a class applied', () => {
+      imgSnapshotTest(
+        `
+          stateDiagram-v2
+          [*] --> A
+          A --> B: test({ foo#colon; 'far' })
+          B --> [*]
+            classDef badBadEvent fill:#f00,color:white,font-weight:bold
+            class B badBadEvent
+           `,
+        { logLevel: 0, fontFamily: 'courier' }
+      );
+    });
+    it('v2 can have multiple classes applied to multiple states', () => {
+      imgSnapshotTest(
+        `
+          stateDiagram-v2
+          classDef notMoving fill:white
+          classDef movement font-style:italic;
+          classDef badBadEvent fill:#f00,color:white,font-weight:bold
+
+          [*] --> Still
+          Still --> [*]
+          Still --> Moving
+          Moving --> Still
+          Moving --> Crash
+          Crash --> [*]
+
+          class Still notMoving
+          class Moving, Crash movement
+          class Crash badBadEvent
+        `,
+        { logLevel: 0, fontFamily: 'courier' }
+      );
+    });
+  });
 });
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@ -56,23 +56,12 @@
  <body>
    <div>Security check</div>
    <pre id="diagram" class="mermaid">
-classDiagram
-        direction LR
-        class Student {
-          -idCard : IdCard
-        }
-        class IdCard{
-          -id : int
-          -name : string
-        }
-        class Bike{
-          -id : int
-          -name : string
-        }
-        Student "1" --o "1" IdCard : carries
-        Student "1" --o "1" Bike : rides
+flowchart TD
+    A --> B
+    B --> C
+    A --> C
    </pre>
-    <pre id="diagram" class="mermaid2">
+    <pre id="diagram" class="mermaid">
 mindmap
  root
    child1((Circle))
@ -88,8 +77,14 @@ mindmap
        ::icon(mdi mdi-fire)
          gc7((grand<br/>grand<br/>child 8))
        </pre>
-    <pre id="diagram" class="mermaid2">
-      example-diagram
+    <pre id="diagram" class="mermaid">
+      gantt
+        title Style today marker (vertical line should be 5px wide and half-transparent blue)
+        dateFormat YYYY-MM-DD
+        axisFormat %d
+        todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
+        section Section1
+        Today: 1, -1h
    </pre>

    <!-- <div id="cy"></div> -->
@ -103,16 +98,21 @@ mindmap
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
-        theme: 'forest',
+        theme: 'base',
        startOnLoad: true,
        logLevel: 0,
-        // basePath: './packages/',
-        // themeVariables: { darkMode: true },
+        flowchart: {
+          useMaxWidth: false,
+          htmlLabels: true,
+        },
+        gantt: {
+          useMaxWidth: false,
+        },
+        useMaxWidth: false,
        lazyLoadedDiagrams: [
          './mermaid-mindmap-detector.esm.mjs',
          './mermaid-example-diagram-detector.esm.mjs',
        ],
-        // lazyLoadedDiagrams: ['../../mermaid-mindmap/registry.ts'],
      });
      function callback() {
        alert('It worked');
@ -121,6 +121,10 @@ mindmap
        console.error('In parse error:');
        console.error(err);
      };
+      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
+      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
+      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
+      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
    </script>
  </body>
 </html>
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@ -120,7 +120,9 @@ const contentLoadedApi = function () {
        (svgCode, bindFunctions) => {
          div.innerHTML = svgCode;

-          if (bindFunctions) bindFunctions(div);
+          if (bindFunctions) {
+            bindFunctions(div);
+          }
        },
        div
      );
--- a/cypress/platform/xss21.html
+++ b/cypress/platform/xss21.html
@ -94,7 +94,7 @@
      }

      //       var diagram = `  graph TD
-      // A --> B["&lt;a href='javasc`;
+      // A --> B["&lt;a href='javascript`;
      // diagram += `ript#colon;xssAttack()'&gt;AAA&lt;/a&gt;"]`;
      let diagram = `  graph TD
 A --> B["<a href='javasc`;
--- a/demos/gantt.html
+++ b/demos/gantt.html
@ -74,22 +74,22 @@
    <pre class="mermaid">
    gantt
    title Hide today marker (vertical line should not be visible)
-    dateFormat YYYY-MM-DD
-    axisFormat %d
+    dateFormat Z
+    axisFormat %d/%m
    todayMarker off
    section Section1
-    Today: 1, -1h
+    Today: 1, -01:00, 5min
    </pre>
    <hr />

    <pre class="mermaid">
    gantt
    title Style today marker (vertical line should be 5px wide and half-transparent blue)
-    dateFormat YYYY-MM-DD
-    axisFormat %d
+    dateFormat Z
+    axisFormat %d/%m
    todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
    section Section1
-    Today: 1, -1h
+    Today: 1, -01:00, 5min
    </pre>
    <hr />

--- a/demos/state.html
+++ b/demos/state.html
@ -15,6 +15,7 @@

  <body>
    <h1>State diagram demos</h1>
+    <h2>Very simple showing change from State1 to State2</h2>
    <pre class="mermaid">
 		stateDiagram
 		  accTitle: This is the accessible title
@ -24,59 +25,126 @@

    <hr />

+    <h2>This has classDef statements to apply style classes to specific 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<br />
+      </code>
+    </p>
+    <h4>And these are how they are applied:</h4>
+    <p>
+      <code>
+        class Still notMoving<br />
+        class Moving, Crash movement<br />
+        class Crash badBadEvent<br />
+      </code>
+    </p>
    <pre class="mermaid">
 		stateDiagram-v2
 		  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
+
      [*] --> Still
      Still --> [*]
      Still --> Moving
      Moving --> Still
      Moving --> Crash
      Crash --> [*]
+
+      class Still notMoving
+      class Moving, Crash movement
+      class Crash badBadEvent
    </pre>

    <hr />

    <pre class="mermaid">
-    stateDiagram
+    stateDiagram-v2
      accTitle: very very simple state
    accDescr: This is a state diagram showing one state
    State1
    </pre>
-
    <hr />

+    <h2>You can label the relationships</h2>
    <pre class="mermaid">
-    stateDiagram
+    stateDiagram-v2
+    [*] --> State1
+    State1 --> State2 : Transition 1
+    State1 --> State3 : Transition 2
+    State1 --> State4 : Transition 3
+    State1 --> [*]
+    </pre>
+    <hr />
+
+    <h2>This shows Composite states</h2>
+    <pre class="mermaid">
+    stateDiagram-v2
    [*] --> First
+    First --> Second
+    First --> Third
+
    state First {
-    [*] --> second
-    second --> [*]
+        [*] --> 1st
+        1st --> [*]
+    }
+    state Second {
+        [*] --> 2nd
+        2nd --> [*]
+    }
+    state Third {
+        [*] --> 3rd
+        3rd --> [*]
    }
    </pre>
+    <hr />
+
+    <h2>Compsite states can link to themselves</h2>
    <pre class="mermaid">
-    stateDiagram
-    State1: The state with a note
-    note right of State1
-    Important information! You can write
-    notes.
-    end note
-    State1 --> State2
-    note left of State2 : This is the note to the left.
+      stateDiagram-v2
+            state Active {
+              Idle
+            }
+            Inactive --> Idle: ACT
+            Active --> Active: LOG
    </pre>
+    <hr />
+
+    <h2>transition labels can span multiple lines using "br" tags or \n</h2>
    <pre class="mermaid">
-    stateDiagram
-    State1
-    note right of State1
-    Line1<br>Line2<br />Line3<br />Line4<br />Line5
-    end note
+      stateDiagram-v2
+      [*] --> S1
+      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>
+    <hr />
+
+    <h2>You can add Notes</h2>
+    <pre class="mermaid">
+    stateDiagram-v2
+      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.
+      end note
+      State1 --> State2
+      note left of State2 : Notes can be to the left of a state\n(like this one).
+      note right of State2 : Notes can be to the right of a state\n(like this one).
+    </pre>
+    <hr />

    <script src="./mermaid.js"></script>
    <script>
      mermaid.initialize({
-        theme: 'base',
+        theme: 'default',
        // themeCSS: '.node rect { fill: red; }',
        logLevel: 3,
        securityLevel: 'loose',
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/CHANGELOG.md](../packages/mermaid/src/docs/CHANGELOG.md).

 # Change Log

@ -13,10 +17,10 @@ All changes are in descending order, beginning with the newest (latest) version.
 🔖 [Release Notes](https://github.com/mermaid-js/mermaid/releases/tag/8.7.0) |
 📜 [Full Changelog](https://github.com/mermaid-js/mermaid/compare/8.6.0...8.7.0)

-This version brings with it a system for [dynamic and integrated configuration of the diagram themes](./theming.md).
+This version brings with it a system for [dynamic and integrated configuration of the diagram themes](config/theming.md).
 The objective of this is to increase the customizability of mermaid and the ease of Styling, with the customization of themes through the `%%init%%` directive and `initialize` calls.

-Themes follow and build upon the Levels of Configuration and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](../getting-started/8.6.0_docs.md).
+Themes follow and build upon the Levels of Configuration and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](config/8.6.0_docs.md).

 **These Theming Configurations, similar to directives, will also be made applicable in the Live-Editor, for easier styling.**

--- a/docs/Configuration.md
+++ b/docs/Configuration.md
@ -1,22 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
-
-# Configuration
-
-Configuration is the second half of Mermaid, after deployment. Together Deployment and Configuration constitute the whole of Mermaid.
-
-This section will introduce the different methods of configuring of the behaviors and appearances of Mermaid Diagrams.
-The Following are the most commonly used methods, and are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods.
-
-## Configuration Section in the [Live Editor](https://mermaid.live/).
-
-## The `initialize()` call, for when Mermaid is called via an API, or through a <script> tag.
-
-## [Directives](./directives.md),
-
-Directives allows limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`, either above or below your diagram definition.
-
-## Theme Creation:
-
-An application of using Directives to change [Themes](./theming.md). `Theme` is an value within mermaid's configuration that dictates the color scheme for diagrams.
-
-If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](./Setup.md) here. It includes themes
--- a/docs/SUMMARY.md
+++ b/docs/SUMMARY.md
@ -1,17 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
-
-# Summary
-
- [mermaid](README.md)
- [FAQ](faq.md)
- [Breaking changes](breakingChanges.md)
- [Usage](usage.md)
- [Flowchart](flowchart.md)
- [Sequence diagram](sequenceDiagram.md)
- [Gantt diagram](gantt.md)
- [mermaid CLI](mermaidCLI.md)
- [Demos](demos.md)
- [mermaidAPI](mermaidAPI.md)
- [Development](development.md)
- [Upgrading](upgrading.md)
- [Contribute to this website](https://github.com/mermaidjs/mermaid-gitbook)
--- a/docs/Setup.md
+++ b/docs/Setup.md
--- a/docs/_navbar.md
+++ b/docs/_navbar.md
@ -1,15 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
-
- Getting started
-
-  - [Quick start](quickstart.md)
-  - [Writing more pages](more-pages.md)
-  - [Custom navbar](custom-navbar.md)
-  - [Cover page](cover.md)
-
- Configuration
-  - [Configuration](configuration.md)
-  - [Themes](themes.md)
-  - [Using plugins](plugins.md)
-  - [Markdown configuration](markdown.md)
-  - [Language highlight](language-highlight.md)
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@ -1,46 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
-
- 📔 Introduction
-
-  - [About Mermaid](README.md)
-  - [Deployment](n00b-gettingStarted.md)
-  - [Syntax and Configuration](n00b-syntaxReference.md)
-
- 📊 Diagram Syntax
-
-  - [Flowchart](flowchart.md)
-  - [Sequence Diagram](sequenceDiagram.md)
-  - [Class Diagram](classDiagram.md)
-  - [State Diagram](stateDiagram.md)
-  - [Entity Relationship Diagram](entityRelationshipDiagram.md)
-  - [User Journey](user-journey.md)
-  - [Gantt](gantt.md)
-  - [Pie Chart](pie.md)
-  - [Requirement Diagram](requirementDiagram.md)
-  - [Gitgraph (Git) Diagram 🔥](gitgraph.md)
-  - [C4C Diagram (Context) Diagram 🦺⚠️](c4c.md)
-  - [Mindmaps 🦺⚠️](mindmap.md)
-  - [Other Examples](examples.md)
-
- ⚙️ Deployment and Configuration
-
-  - [Tutorials](Tutorials.md)
-  - [API-Usage](usage.md)
-  - [Mermaid API Configuration](Setup.md)
-  - [Directives](directives.md)
-  - [Theming](theming.md)
-  - [Accessibility](accessibility.md)
-  - [Mermaid CLI](mermaidCLI.md)
-  - [Advanced usage](n00b-advanced.md)
-
- 📚 Misc
-
-  - [Use-Cases and Integrations](integrations.md)
-  - [FAQ](faq.md)
-
- 🙌 Contributions and Community
-  - [Overview for Beginners](n00b-overview.md)
-  - [Development and Contribution ](development.md)
-  - [Changelog](CHANGELOG.md)
-  - [Adding Diagrams ](newDiagram.md)
-  - [Security ](security.md)
--- a/docs/breakingChanges.md
+++ b/docs/breakingChanges.md
@ -1,51 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
-
-# Breaking changes
-
-### Breaking changes from history version to latest version:
-
-## #1
-
-```javascript
-mermaid.initialize({
-    sequenceDiagram:{
-        ...
-    }
-})
-```
-
-has been changed to
-
-```javascript
-mermaid.initialize({
-    sequence:{
-        ...
-    }
-})
-```
-
-## #2
-
-In old versions you needed to reference a CSS file in your HTML:
-
-```html
-<link rel="stylesheet" href="mermaid.min.css" />
-```
-
-or
-
-```html
-<link rel="stylesheet" href="mermaid.forest.min.css" />
-```
-
-Now it is not needed, and there are no more CSS files in the distribution files.
-
-You just:
-
-```javascript
-mermaid.initialize({
-  theme: 'forest',
-});
-```
-
-and it works like a charm because now the CSS is inline with the SVG to allow simpler portability.
--- a/docs/community/development.md
+++ b/docs/community/development.md
@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/community/development.md](../../packages/mermaid/src/docs/community/development.md).

 # Development and Contribution 🙌

@ -8,7 +12,7 @@ So you want to help? That's great!

 Here are a few things to get you started on the right path.

-**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**
+**The Docs Structure is dictated by [.vitepress/config.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/.vitepress/config.ts)**.

 **Note: Commits and Pull Requests should be directed to the develop branch.**

@ -28,7 +32,7 @@ We make all changes via Pull Requests. As we have many Pull Requests from develo

 - Large changes reviewed by knsv or other developer asked to review by knsv
 - Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
- Documentation (we encourage updates to the `src/docs` folder; you can submit them via direct commits)
+- Documentation (we encourage updates to the `/packages/mermaid/src/docs` folder; you can submit them via direct commits)

 When you commit code, create a branch with the following naming convention:

@ -46,9 +50,9 @@ Start with the type, such as **feature** or **bug**, followed by the issue numbe

 If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?

-The docs are located in the `src/docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**.
+The docs are located in the `src/docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via **[.vitepress/config.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/.vitepress/config.ts)**.

-> **All the documents displayed in the GitHub.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**.
+> **All the documents displayed in the GitHub.io page are listed in [.vitepress/config.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/.vitepress/config.ts)**.

 The contents of <https://mermaid-js.github.io/mermaid/> are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.

@ -60,7 +64,7 @@ The documentation is located in the `src/docs` directory and organized according

 The `docs` folder will be automatically generated when committing to `src/docs` and should not be edited manually.

-We encourage contributions to the documentation at [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
+We encourage contributions to the documentation at [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)

 ### Add Unit Tests for Parsing

@ -113,7 +117,7 @@ Markdown is used to format the text, for more information about Markdown [see th

 To edit Docs on your computer:

-1.  Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs) directory in the `develop` branch.
+1.  Find the Markdown file (.md) to edit in the [packages/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs) directory in the `develop` branch.
 2.  Create a fork of the develop branch.
 3.  Make changes or add new documentation.
 4.  Commit changes to your fork and push it to GitHub.
@ -122,7 +126,7 @@ To edit Docs on your computer:
 To edit Docs on GitHub:

 1.  Login to [GitHub.com](https://www.github.com).
-2.  Navigate to [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs).
+2.  Navigate to [packages/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs).
 3.  To edit a file, click the pencil icon at the top-right of the file contents panel.
 4.  Describe what you changed in the **Propose file change** section, located at the bottom of the page.
 5.  Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch).
--- a/vdocs/community/img/er.png
+++ b/vdocs/community/img/er.png
--- a/docs/community/n00b-overview.md
+++ b/docs/community/n00b-overview.md
@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/community/n00b-overview.md](../../packages/mermaid/src/docs/community/n00b-overview.md).

 # Overview for Beginners

@ -41,7 +45,7 @@ It is a relatively straightforward solution to a significant hurdle with the sof

 **Nodes**

-> These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred often in the instructions. Read for Diagram Specific [Syntax](./n00b-syntaxReference)
+> These are the boxes that contain text or otherwise discrete pieces of each diagram, separated generally by arrows, except for Gantt Charts and User Journey Diagrams. They will be referred often in the instructions. Read for Diagram Specific [Syntax](../intro/n00b-syntaxReference.md)

 ## Advantages of using Mermaid

@ -65,6 +69,6 @@ In fact one can pick up the syntax for it quite easily from the examples given a

 ## Mermaid is for everyone.

-Video [Tutorials](https://mermaid-js.github.io/mermaid/#/./Tutorials) are also available for the mermaid [live editor](https://mermaid.live/).
+Video [Tutorials](https://mermaid-js.github.io/mermaid/#/../config/Tutorials) are also available for the mermaid [live editor](https://mermaid.live/).

 Alternatively you can use Mermaid [Plug-Ins](https://mermaid-js.github.io/mermaid/#/./integrations), with tools you already use, like Google Docs.
--- a/docs/community/newDiagram.md
+++ b/docs/community/newDiagram.md
@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/community/newDiagram.md](../../packages/mermaid/src/docs/community/newDiagram.md).

 # Adding a New Diagram/Chart 📊

@ -28,9 +32,8 @@ statement

 In the extract of the grammar above, it is defined that a call to the setTitle method in the data object will be done when parsing and the title keyword is encountered.

-```tip
-Make sure that the `parseError` function for the parser is defined and calling `mermaid.parseError`. This way a common way of detecting parse errors is provided for the end-user.
-```
+> **Note**
+> Make sure that the `parseError` function for the parser is defined and calling `mermaid.parseError`. This way a common way of detecting parse errors is provided for the end-user.

 For more info look in the example diagram type:

@ -45,8 +48,7 @@ exports.parseError = function (err, hash) {
 when parsing the `yy` object is initialized as per below:

 ```javascript
-var parser;
-parser = exampleParser.parser;
+const parser = exampleParser.parser;
 parser.yy = db;
 ```

@ -69,8 +71,8 @@ At this point when mermaid is trying to render the diagram, it will detect it as
 ### Setup

 ```javascript
-var graph = require('./graphDb');
-var flow = require('./parser/flow');
+const graph = require('./graphDb');
+const flow = require('./parser/flow');
 flow.parser.yy = graph;
 ```

@ -91,7 +93,7 @@ graph.getEdges();
 The parser is also exposed in the mermaid api by calling:

 ```javascript
-var parser = mermaid.getParser();
+const parser = mermaid.getParser();
 ```

 Note that the parse needs a graph object to store the data as per:
@ -117,13 +119,12 @@ There are a few features that are common between the different types of diagrams

 Here some pointers on how to handle these different areas.

-#### [Directives](./directives.md)
+#### [Directives](../config/directives.md)

 Here is example handling from flowcharts:
 Jison:

 ```jison
-
 /* lexical grammar */
 %lex
 %x open_directive
@ -173,13 +174,14 @@ The syntax for adding title and description looks like this:
    accDescr: The description

    accDescr {
-    	Syntax for a description text
-    	written on multiple lines.
+	Syntax for a description text
+	written on multiple lines.
    }

 In a similar way to the directives the jison syntax are quite similar between the diagrams.

 ```jison
+
 * lexical grammar */
 %lex
 %x acc_title
@ -199,6 +201,7 @@ statement
    : acc_title acc_title_value  { $$=$2.trim();yy.setTitle($$); }
    | acc_descr acc_descr_value  { $$=$2.trim();yy.setAccDescription($$); }
    | acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
+
 ```

 The functions for setting title and description are provided by a common module. This is the import from flowDb.js:
@ -226,7 +229,7 @@ addSVGAccessibilityFields(parser.yy, svg, id);

 ## Theming

-Mermaid supports themes and has an integrated theming engine. You can read more about how the themes can be used [in the docs](./theming.md).
+Mermaid supports themes and has an integrated theming engine. You can read more about how the themes can be used [in the docs](../config/theming.md).

 When adding themes to a diagram it comes down to a few important locations in the code.

--- a/docs/community/security.md
+++ b/docs/community/security.md
@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/community/security.md](../../packages/mermaid/src/docs/community/security.md).

 # Security

@ -6,13 +10,13 @@ The Mermaid team takes the security of Mermaid and the applications that use Mer

 ## Reporting vulnerabilities

-To report a vulnerability, please e-mail security@mermaid.live with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
+To report a vulnerability, please e-mail <security@mermaid.live> with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.

 We aim to reply within three working days, probably much sooner.

-You should expect a close collaboration as we work to resolve the issue you have reported. Please reach out to security@mermaid.live again if you do not receive prompt attention and regular updates.
+You should expect a close collaboration as we work to resolve the issue you have reported. Please reach out to <security@mermaid.live> again if you do not receive prompt attention and regular updates.

-You may also reach out to the team via our public Slack chat channels; however, please make sure to e-mail security@mernaid.live when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk.
+You may also reach out to the team via our public Slack chat channels; however, please make sure to e-mail <security@mermaid.live> when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk.

 ## Best practices

--- a/docs/config/8.6.0_docs.md
+++ b/docs/config/8.6.0_docs.md
@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/8.6.0_docs.md](../../packages/mermaid/src/docs/config/8.6.0_docs.md).

 # Version 8.6.0 Changes

@ -8,8 +12,8 @@

 With version 8.6.0 comes the release of directives for mermaid, a new system for modifying configurations, with the aim of establishing centralized, sane defaults and simple implementation.

-`directives` allow for a single-use overwriting of `config`, as it has been discussed in [Configurations](./Setup.md).
-This allows site Diagram Authors to instantiate temporary modifications to `config` through the use of [Directives](), which are parsed before rendering diagram definitions. This allows the Diagram Authors to alter the appearance of the diagrams.
+`directives` allow for a single-use overwriting of `config`, as it has been discussed in [Configurations](../config/configuration.md).
+This allows site Diagram Authors to instantiate temporary modifications to `config` through the use of [Directives](directives.md), which are parsed before rendering diagram definitions. This allows the Diagram Authors to alter the appearance of the diagrams.

 **A likely application for this is in the creation of diagrams/charts inside company/organizational webpages, that rely on mermaid for diagram and chart rendering.**

@ -48,9 +52,8 @@ Implementors can only modify configurations using directives, and cannot change

 The Two types of directives: are `init` (or `initialize`) and `wrap`.

-```note
-All directives are enclosed in `%%{ }%%`
-```
+> **Note**
+> All directives are enclosed in `%%{ }%%`

 Older versions of mermaid will not parse directives because `%%` will comment out the directive. This makes the update backwards-compatible.

@ -62,18 +65,17 @@ Older versions of mermaid will not parse directives because `%%` will comment ou
 | --------- | ----------------------- | --------- | -------- | ----------------------------------------------- |
 | init      | modifies configurations | Directive | Optional | Any parameters not included in the secure array |

-```note
-init would be an argument-directive: `%%{init: { **insert argument here**}}%%`
-
-The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored.
-    **for example**:
-
-`%%{init: {"theme": "default", "logLevel": 1 }}%%`
-
-Configurations that are passed through init cannot change the parameters in a secure array at a higher level. In the event of a collision, mermaid will give priority to secure arrays and parse the request without changing the values of those parameters in conflict.
-
-When deployed within code, init is called before the graph/diagram description.
-```
+> **Note**
+> init would be an argument-directive: `%%{init: { **insert argument here**}}%%`
+>
+> The json object that is passed as {**argument** } must be valid, quoted json or it will be ignored.
+> **for example**:
+>
+> `%%{init: {"theme": "default", "logLevel": 1 }}%%`
+>
+> Configurations that are passed through init cannot change the parameters in a secure array at a higher level. In the event of a collision, mermaid will give priority to secure arrays and parse the request without changing the values of those parameters in conflict.
+>
+> When deployed within code, init is called before the graph/diagram description.

 **for example**:

@ -107,19 +109,18 @@ When deployed within code, init is called before the graph/diagram description.
 | --------- | ----------------------------- | --------- | -------- | ---------- |
 | wrap      | a callable text-wrap function | Directive | Optional | %%{wrap}%% |

-```note
-Wrap is a function that is currently only deployable for sequence diagrams.
-
-Wrap respects a manually added <br\>, so if the user wants to break up their text, they have full control over line breaks by adding <br\> tags.
-
-It is a non-argument directive and can be executed thusly:
-
-`%%{wrap}%%` .
-```
+> **Note**
+> Wrap is a function that is currently only deployable for sequence diagrams.
+>
+> `Wrap respects a manually added <br>, so if the user wants to break up their text, they have full control over line breaks by adding <br> tags.`
+>
+> It is a non-argument directive and can be executed thusly:
+>
+> `%%{wrap}%%` .

 **An example of text wrapping in a sequence diagram**:

-![Image showing wrapped text](img/wrapped%20text.png)
+!\[Image showing wrapped text]\(img/wrapped text.png)

 # Resetting Configurations:

@ -143,7 +144,7 @@ Example of **assignWithDepth**:

 Example of **object.Assign**:

-![Image showing object.assign without depth](img/object.assign%20without%20depth.png)
+!\[Image showing object.assign without depth]\(img/object.assign without depth.png)

 • **calculateTextDimensions**, **calculateTextWidth**， and **calculateTextHeight** - for measuring text dimensions, width and height.

@ -157,13 +158,12 @@ Example of **object.Assign**:
 | --------------- | ------------------------------------- | ----------- | --------------------------------------- | ---------- | ---------- |
 | `setSiteConfig` | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array | conf       | siteConfig |

-```note
-Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
-the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
-to the defaultConfig
-Note: currentConfig is set in this function。
-Default value: will mirror Global Config
-```
+> **Note**
+> Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
+> the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
+> to the defaultConfig
+> Note: currentConfig is set in this function。
+> Default value: will mirror Global Config

 ## getSiteConfig

@ -171,9 +171,8 @@ Default value: will mirror Global Config
 | --------------- | --------------------------------------------------- | ----------- | ---------------------------------- |
 | `getSiteConfig` | Returns the current `siteConfig` base configuration | Get Request | Returns Any Values in `siteConfig` |

-```note
-Returns   any   values in siteConfig.
-```
+> **Note**
+> Returns any values in siteConfig.

 ## setConfig

@ -181,11 +180,10 @@ Returns   any   values in siteConfig.
 | ----------- | ------------------------------------------ | ----------- | --------------------------------- | ---------- | ---------------------------------------------- |
 | `setConfig` | Sets the `currentConfig` to desired values | Put Request | Any Values, those in secure array | conf       | `currentConfig` merged with the sanitized conf |

-```note
-Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
-values found in conf with key found in siteConfig.secure will be replaced with the corresponding
-siteConfig value.
-```
+> **Note**
+> Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
+> values found in conf with key found in siteConfig.secure will be replaced with the corresponding
+> siteConfig value.

 ## getConfig

@ -193,9 +191,8 @@ siteConfig value.
 | ----------- | --------------------------- | ----------- | ------------------------------- |
 | `getConfig` | Obtains the `currentConfig` | Get Request | Any Values from `currentConfig` |

-```note
-Returns any values in currentConfig.
-```
+> **Note**
+> Returns any values in currentConfig.

 ## sanitize

@ -203,10 +200,9 @@ Returns any values in currentConfig.
 | ---------- | ---------------------------------------- | -------------- | ------ |
 | `sanitize` | Sets the `siteConfig` to desired values. | Put Request(?) | None   |

-```note
-modifies options in-place
-Ensures options parameter does not attempt to override siteConfig secure keys.
-```
+> **Note**
+> modifies options in-place
+> Ensures options parameter does not attempt to override siteConfig secure keys.

 ## reset

@ -220,8 +216,7 @@ Ensures options parameter does not attempt to override siteConfig secure keys.
 | --------- | ------------------------------------------------------------ | ---------- | -------- | -------------------------------------------- |
 | `conf`    | base set of values, which `currentConfig` could be reset to. | Dictionary | Required | Any Values, with respect to the secure Array |

-```note
-default: current siteConfig  (optional, default `getSiteConfig()`)
-```
+> **Note**
+> default: current siteConfig (optional, default `getSiteConfig()`)

-## For more information, read [Setup](Setup.md).
+## For more information, read [Setup](./setup/README.md).
--- a/docs/config/Tutorials.md
+++ b/docs/config/Tutorials.md
@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/Tutorials.md](../../packages/mermaid/src/docs/config/Tutorials.md).

 # Tutorials

@ -6,7 +10,7 @@ This is list of publicly available Tutorials for using Mermaid.JS . This is inte

 **Note that these tutorials might display an older interface, but the usage of the live-editor will largely be the same.**

-For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram.
+For most purposes, you can use the [Live Editor](https://mermaid.live), to quickly and easily render a diagram.

 ## Live-Editor Tutorials

@ -24,7 +28,7 @@ The definitions that can be generated the Live-Editor are also backwards-compati

 ## Mermaid with HTML

-Examples are provided in [Getting Started](n00b-gettingStarted.md)
+Examples are provided in [Getting Started](../intro/n00b-gettingStarted.md)

 **CodePen Examples:**

--- a/docs/config/accessibility.md
+++ b/docs/config/accessibility.md
@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/accessibility.md](../../packages/mermaid/src/docs/config/accessibility.md).

 # Accessibility Options

--- a/docs/developer-docs/configuration.md
+++ b/docs/developer-docs/configuration.md
@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/configuration.md](../../packages/mermaid/src/docs/config/configuration.md).

 # Configuration

--- a/docs/config/directives.md
+++ b/docs/config/directives.md
@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/directives.md](../../packages/mermaid/src/docs/config/directives.md).

 # Directives

@ -26,7 +30,7 @@ Mermaid basically supports two types of configuration options to be overridden b
 2.  _Diagram specific configurations_ : These are the configurations that are available and applied to a specific diagram. For each diagram there are specific configuration that will alter how that particular diagram looks and behaves.
    For example, `mirrorActors` is a configuration that is specific to the `SequenceDiagram` and alter whether the actors are mirrored or not. So this config is available only for the `SequenceDiagram` type.

-**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
+**NOTE:** These options listed here are not all the configuration options. To get hold of all the configuration options, please refer to the [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.

    Soon we plan to publish a complete list of top-level configurations & all the diagram specific configurations, with their possible values in the docs

@ -84,7 +88,13 @@ Here the directive declaration will set the `logLevel` to `debug` and the `theme

 Note: You can use 'init' or 'initialize' as both acceptable as init directives. Also note that `%%init%%` and `%%initialize%%` directives will be grouped together after they are parsed. This means:

-```mmd2
+```mermaid-example
+%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
+%%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
+...
+```
+
+```mermaid
 %%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
 %%{initialize: { 'logLevel': 'fatal', "theme":'dark', 'startOnLoad': true } }%%
 ...
@ -92,11 +102,11 @@ Note: You can use 'init' or 'initialize' as both acceptable as init directives.

 parsing the above generates a single `%%init%%` JSON object below, combining the two directives and carrying over the last value given for `loglevel`:

-```json5
+```json
 {
-  logLevel: 'fatal',
-  theme: 'dark',
-  startOnLoad: true,
+  "logLevel": "fatal",
+  "theme": "dark",
+  "startOnLoad": true
 }
 ```

@ -223,7 +233,7 @@ Some common flowchart configurations are:
 - _diagramPadding_: number
 - _useMaxWidth_: number

-For complete list of flowchart configurations, see [defaultConfig.js](https://github.com/mermaid-js/mermaid/blob/develop/src/defaultConfig.js) in the source code.
+For complete list of flowchart configurations, see [defaultConfig.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/defaultConfig.ts) in the source code.
 _Soon we plan to publish a complete list all diagram specific configurations updated in the docs_

 The following code snippet changes flowchart config:
@ -267,7 +277,7 @@ Some common sequence configurations are:
 - _showSequenceNumbers_: boolean
 - _wrap_: boolean

-For complete list of sequence diagram configurations, see _defaultConfig.js_ in the source code.
+For complete list of sequence diagram configurations, see _defaultConfig.ts_ in the source code.
 _Soon we plan to publish a complete list all diagram specific configurations updated in the docs_

 So, `wrap` by default has a value of `false` for sequence diagrams.
--- a/docs/config/img/accessibility-div-example-2.png
+++ b/docs/config/img/accessibility-div-example-2.png
--- a/docs/config/img/accessibility-div-example.png
+++ b/docs/config/img/accessibility-div-example.png
--- a/docs/config/img/assignWithDepth.png
+++ b/docs/config/img/assignWithDepth.png
--- a/docs/config/img/object.assign
+++ b/docs/config/img/object.assign
--- a/docs/config/img/python-mermaid-integration.png
+++ b/docs/config/img/python-mermaid-integration.png
--- a/docs/config/img/wrapped
+++ b/docs/config/img/wrapped
--- a/docs/config/mermaidCLI.md
+++ b/docs/config/mermaidCLI.md
@ -0,0 +1,9 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/mermaidCLI.md](../../packages/mermaid/src/docs/config/mermaidCLI.md).
+
+# mermaid CLI
+
+mermaid CLI has been moved to [mermaid-cli](https://github.com/mermaid-js/mermaid-cli). Please read its documentation instead.
--- a/docs/config/n00b-advanced.md
+++ b/docs/config/n00b-advanced.md
@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/n00b-advanced.md](../../packages/mermaid/src/docs/config/n00b-advanced.md).

 # Advanced n00b mermaid (Coming soon..)

--- a/docs/config/setup/README.md
+++ b/docs/config/setup/README.md
@ -0,0 +1,13 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/README.md](../../../packages/mermaid/src/docs/config/setup/README.md).
+
+# mermaid
+
+## Modules
+
+- [config](modules/config.md)
+- [defaultConfig](modules/defaultConfig.md)
+- [mermaidAPI](modules/mermaidAPI.md)
--- a/docs/config/setup/modules/config.md
+++ b/docs/config/setup/modules/config.md
@ -0,0 +1,276 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/modules/config.md](../../../../packages/mermaid/src/docs/config/setup/modules/config.md).
+
+# Module: config
+
+## Variables
+
+### defaultConfig
+
+• `Const` **defaultConfig**: `MermaidConfig`
+
+#### Defined in
+
+[config.ts:7](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L7)
+
+## Functions
+
+### addDirective
+
+▸ **addDirective**(`directive`): `void`
+
+Pushes in a directive to the configuration
+
+#### Parameters
+
+| Name        | Type  | Description              |
+| :---------- | :---- | :----------------------- |
+| `directive` | `any` | The directive to push in |
+
+#### Returns
+
+`void`
+
+#### Defined in
+
+[config.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L193)
+
+---
+
+### getConfig
+
+▸ **getConfig**(): `MermaidConfig`
+
+## getConfig
+
+| Function  | Description               | Type        | Return Values                  |
+| --------- | ------------------------- | ----------- | ------------------------------ |
+| getConfig | Obtains the currentConfig | Get Request | Any Values from current Config |
+
+**Notes**: Returns **any** the currentConfig
+
+#### Returns
+
+`MermaidConfig`
+
+The currentConfig
+
+#### Defined in
+
+[config.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L138)
+
+---
+
+### getSiteConfig
+
+▸ **getSiteConfig**(): `MermaidConfig`
+
+## getSiteConfig
+
+| Function      | Description                                       | Type        | Values                           |
+| ------------- | ------------------------------------------------- | ----------- | -------------------------------- |
+| setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig |
+
+**Notes**: Returns **any** values in siteConfig.
+
+#### Returns
+
+`MermaidConfig`
+
+The siteConfig
+
+#### Defined in
+
+[config.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L97)
+
+---
+
+### reset
+
+▸ **reset**(`config?`): `void`
+
+## reset
+
+| Function | Description                  | Type        | Required | Values |
+| -------- | ---------------------------- | ----------- | -------- | ------ |
+| reset    | Resets currentConfig to conf | Put Request | Required | None   |
+
+## conf
+
+| Parameter | Description                                                    | Type       | Required | Values                                       |
+| --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
+| conf      | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
+
+**Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
+
+#### Parameters
+
+| Name     | Type            | Default value | Description                                                                                                                                                   |
+| :------- | :-------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `config` | `MermaidConfig` | `siteConfig`  | base set of values, which currentConfig could be **reset** to. Defaults to the current siteConfig (e.g returned by [getSiteConfig](config.md#getsiteconfig)). |
+
+#### Returns
+
+`void`
+
+#### Defined in
+
+[config.ts:225](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L225)
+
+---
+
+### sanitize
+
+▸ **sanitize**(`options`): `void`
+
+## sanitize
+
+| Function | Description                            | Type        | Values |
+| -------- | -------------------------------------- | ----------- | ------ |
+| sanitize | Sets the siteConfig to desired values. | Put Request | None   |
+
+Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies
+options in-place
+
+#### Parameters
+
+| Name      | Type  | Description                       |
+| :-------- | :---- | :-------------------------------- |
+| `options` | `any` | The potential setConfig parameter |
+
+#### Returns
+
+`void`
+
+#### Defined in
+
+[config.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L153)
+
+---
+
+### saveConfigFromInitialize
+
+▸ **saveConfigFromInitialize**(`conf`): `void`
+
+#### Parameters
+
+| Name   | Type            |
+| :----- | :-------------- |
+| `conf` | `MermaidConfig` |
+
+#### Returns
+
+`void`
+
+#### Defined in
+
+[config.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L76)
+
+---
+
+### setConfig
+
+▸ **setConfig**(`conf`): `MermaidConfig`
+
+## setConfig
+
+| Function      | Description                           | Type        | Values                                  |
+| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
+| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
+
+**Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure
+keys. Any values found in conf with key found in siteConfig.secure will be replaced with the
+corresponding siteConfig value.
+
+#### Parameters
+
+| Name   | Type            | Description                 |
+| :----- | :-------------- | :-------------------------- |
+| `conf` | `MermaidConfig` | The potential currentConfig |
+
+#### Returns
+
+`MermaidConfig`
+
+The currentConfig merged with the sanitized conf
+
+#### Defined in
+
+[config.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L114)
+
+---
+
+### setSiteConfig
+
+▸ **setSiteConfig**(`conf`): `MermaidConfig`
+
+## setSiteConfig
+
+| Function      | Description                           | Type        | Values                                  |
+| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
+| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
+
+**Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls
+to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig)
+will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this
+function _Default value: At default, will mirror Global Config_
+
+#### Parameters
+
+| Name   | Type            | Description                                 |
+| :----- | :-------------- | :------------------------------------------ |
+| `conf` | `MermaidConfig` | The base currentConfig to use as siteConfig |
+
+#### Returns
+
+`MermaidConfig`
+
+The new siteConfig
+
+#### Defined in
+
+[config.ts:62](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L62)
+
+---
+
+### updateCurrentConfig
+
+▸ **updateCurrentConfig**(`siteCfg`, `_directives`): `MermaidConfig`
+
+#### Parameters
+
+| Name          | Type            |
+| :------------ | :-------------- |
+| `siteCfg`     | `MermaidConfig` |
+| `_directives` | `any`\[]        |
+
+#### Returns
+
+`MermaidConfig`
+
+#### Defined in
+
+[config.ts:14](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L14)
+
+---
+
+### updateSiteConfig
+
+▸ **updateSiteConfig**(`conf`): `MermaidConfig`
+
+#### Parameters
+
+| Name   | Type            |
+| :----- | :-------------- |
+| `conf` | `MermaidConfig` |
+
+#### Returns
+
+`MermaidConfig`
+
+#### Defined in
+
+[config.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L80)
--- a/docs/config/setup/modules/defaultConfig.md
+++ b/docs/config/setup/modules/defaultConfig.md
@ -0,0 +1,56 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/modules/defaultConfig.md](../../../../packages/mermaid/src/docs/config/setup/modules/defaultConfig.md).
+
+# Module: defaultConfig
+
+## Variables
+
+### configKeys
+
+• `Const` **configKeys**: `string`\[]
+
+#### Defined in
+
+[defaultConfig.ts:1881](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L1881)
+
+---
+
+### default
+
+• `Const` **default**: `Partial`<`MermaidConfig`>
+
+**Configuration methods in Mermaid version 8.6.0 have been updated, to learn more\[[click
+here](8.6.0_docs.md)].**
+
+## **What follows are config instructions for older versions**
+
+These are the default options which can be overridden with the initialization call like so:
+
+**Example 1:**
+
+```js
+mermaid.initialize({ flowchart: { htmlLabels: false } });
+```
+
+**Example 2:**
+
+```html
+<script>
+  const config = {
+    startOnLoad: true,
+    flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
+    securityLevel: 'loose',
+  };
+  mermaid.initialize(config);
+</script>
+```
+
+A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).
+A description of each option follows below.
+
+#### Defined in
+
+[defaultConfig.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L33)
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@ -0,0 +1,308 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/modules/mermaidAPI.md](../../../../packages/mermaid/src/docs/config/setup/modules/mermaidAPI.md).
+
+# Module: mermaidAPI
+
+## References
+
+### default
+
+Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
+
+## Variables
+
+### mermaidAPI
+
+• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `void` ; `parse`: (`text`: `string`, `parseError?`: `ParseErrorFunction`) => `boolean` ; `parseAsync`: (`text`: `string`, `parseError?`: `ParseErrorFunction`) => `Promise`<`boolean`> ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `cb?`: (`svgCode`: `string`, `bindFunctions?`: (`element`: `Element`) => `void`) => `void`, `svgContainingElement?`: `Element`) => `string` ; `renderAsync`: (`id`: `string`, `text`: `string`, `cb?`: (`svgCode`: `string`, `bindFunctions?`: (`element`: `Element`) => `void`) => `void`, `svgContainingElement?`: `Element`) => `Promise`<`string`> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }>
+
+## mermaidAPI configuration defaults
+
+```ts
+const config = {
+  theme: 'default',
+  logLevel: 'fatal',
+  securityLevel: 'strict',
+  startOnLoad: true,
+  arrowMarkerAbsolute: false,
+
+  er: {
+    diagramPadding: 20,
+    layoutDirection: 'TB',
+    minEntityWidth: 100,
+    minEntityHeight: 75,
+    entityPadding: 15,
+    stroke: 'gray',
+    fill: 'honeydew',
+    fontSize: 12,
+    useMaxWidth: true,
+  },
+  flowchart: {
+    diagramPadding: 8,
+    htmlLabels: true,
+    curve: 'basis',
+  },
+  sequence: {
+    diagramMarginX: 50,
+    diagramMarginY: 10,
+    actorMargin: 50,
+    width: 150,
+    height: 65,
+    boxMargin: 10,
+    boxTextMargin: 5,
+    noteMargin: 10,
+    messageMargin: 35,
+    messageAlign: 'center',
+    mirrorActors: true,
+    bottomMarginAdj: 1,
+    useMaxWidth: true,
+    rightAngles: false,
+    showSequenceNumbers: false,
+  },
+  gantt: {
+    titleTopMargin: 25,
+    barHeight: 20,
+    barGap: 4,
+    topPadding: 50,
+    leftPadding: 75,
+    gridLineStartPadding: 35,
+    fontSize: 11,
+    fontFamily: '"Open Sans", sans-serif',
+    numberSectionStyles: 4,
+    axisFormat: '%Y-%m-%d',
+    topAxis: false,
+  },
+};
+mermaid.initialize(config);
+```
+
+#### Defined in
+
+[mermaidAPI.ts:949](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L949)
+
+## Functions
+
+### appendDivSvgG
+
+▸ **appendDivSvgG**(`parentRoot`, `id`, `enclosingDivId`, `divStyle?`, `svgXlink?`): `any`
+
+Append an enclosing div, then svg, then g (group) to the d3 parentRoot. Set attributes.
+Only set the style attribute on the enclosing div if divStyle is given.
+Only set the xmlns:xlink attribute on svg if svgXlink is given.
+Return the last node appended
+
+#### Parameters
+
+| Name             | Type     | Description                                      |
+| :--------------- | :------- | :----------------------------------------------- |
+| `parentRoot`     | `any`    | the d3 node to append things to                  |
+| `id`             | `string` | the value to set the id attr to                  |
+| `enclosingDivId` | `string` | the id to set the enclosing div to               |
+| `divStyle?`      | `string` | if given, the style to set the enclosing div to  |
+| `svgXlink?`      | `string` | if given, the link to set the new svg element to |
+
+#### Returns
+
+`any`
+
+- returns the parentRoot that had nodes appended
+
+#### Defined in
+
+[mermaidAPI.ts:292](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L292)
+
+---
+
+### cleanUpSvgCode
+
+▸ **cleanUpSvgCode**(`svgCode?`, `inSandboxMode`, `useArrowMarkerUrls`): `string`
+
+Clean up svgCode. Do replacements needed
+
+#### Parameters
+
+| Name                 | Type      | Default value | Description                                                 |
+| :------------------- | :-------- | :------------ | :---------------------------------------------------------- |
+| `svgCode`            | `string`  | `''`          | the code to clean up                                        |
+| `inSandboxMode`      | `boolean` | `undefined`   | security level                                              |
+| `useArrowMarkerUrls` | `boolean` | `undefined`   | should arrow marker's use full urls? (vs. just the anchors) |
+
+#### Returns
+
+`string`
+
+the cleaned up svgCode
+
+#### Defined in
+
+[mermaidAPI.ts:243](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L243)
+
+---
+
+### createCssStyles
+
+▸ **createCssStyles**(`config`, `graphType`, `classDefs?`): `string`
+
+Create the user styles
+
+#### Parameters
+
+| Name        | Type            | Description                                            |
+| :---------- | :-------------- | :----------------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
+| `config`    | `MermaidConfig` | configuration that has style and theme settings to use |
+| `graphType` | `string`        | used for checking if classDefs should be applied       |
+| `classDefs` | `undefined`     | `null`                                                 | `Record`<`string`, `DiagramStyleClassDef`> | the classDefs in the diagram text. Might be null if none were defined. Usually is the result of a call to getClasses(...) |
+
+#### Returns
+
+`string`
+
+the string with all the user styles
+
+#### Defined in
+
+[mermaidAPI.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L170)
+
+---
+
+### createUserStyles
+
+▸ **createUserStyles**(`config`, `graphType`, `classDefs`, `svgId`): `string`
+
+#### Parameters
+
+| Name        | Type                                       |
+| :---------- | :----------------------------------------- |
+| `config`    | `MermaidConfig`                            |
+| `graphType` | `string`                                   |
+| `classDefs` | `Record`<`string`, `DiagramStyleClassDef`> |
+| `svgId`     | `string`                                   |
+
+#### Returns
+
+`string`
+
+#### Defined in
+
+[mermaidAPI.ts:220](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L220)
+
+---
+
+### cssImportantStyles
+
+▸ **cssImportantStyles**(`cssClass`, `element`, `cssClasses?`): `string`
+
+Create a CSS style that starts with the given class name, then the element,
+with an enclosing block that has each of the cssClasses followed by !important;
+
+#### Parameters
+
+| Name         | Type        | Default value | Description                                    |
+| :----------- | :---------- | :------------ | :--------------------------------------------- |
+| `cssClass`   | `string`    | `undefined`   | CSS class name                                 |
+| `element`    | `string`    | `undefined`   | CSS element                                    |
+| `cssClasses` | `string`\[] | `[]`          | list of CSS styles to append after the element |
+
+#### Returns
+
+`string`
+
+- the constructed string
+
+#### Defined in
+
+[mermaidAPI.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L154)
+
+---
+
+### decodeEntities
+
+▸ **decodeEntities**(`text`): `string`
+
+#### Parameters
+
+| Name   | Type     | Description        |
+| :----- | :------- | :----------------- |
+| `text` | `string` | text to be decoded |
+
+#### Returns
+
+`string`
+
+#### Defined in
+
+[mermaidAPI.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L128)
+
+---
+
+### encodeEntities
+
+▸ **encodeEntities**(`text`): `string`
+
+#### Parameters
+
+| Name   | Type     | Description        |
+| :----- | :------- | :----------------- |
+| `text` | `string` | text to be encoded |
+
+#### Returns
+
+`string`
+
+#### Defined in
+
+[mermaidAPI.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L99)
+
+---
+
+### putIntoIFrame
+
+▸ **putIntoIFrame**(`svgCode?`, `svgElement?`): `string`
+
+Put the svgCode into an iFrame. Return the iFrame code
+
+#### Parameters
+
+| Name          | Type     | Default value | Description                                                                  |
+| :------------ | :------- | :------------ | :--------------------------------------------------------------------------- |
+| `svgCode`     | `string` | `''`          | the svg code to put inside the iFrame                                        |
+| `svgElement?` | `any`    | `undefined`   | the d3 node that has the current svgElement so we can get the height from it |
+
+#### Returns
+
+`string`
+
+- the code with the iFrame that now contains the svgCode
+  TODO replace btoa(). Replace with buf.toString('base64')?
+
+#### Defined in
+
+[mermaidAPI.ts:271](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L271)
+
+---
+
+### removeExistingElements
+
+▸ **removeExistingElements**(`doc`, `isSandboxed`, `id`, `divSelector`, `iFrameSelector`): `void`
+
+Remove any existing elements from the given document
+
+#### Parameters
+
+| Name             | Type       | Description                                     |
+| :--------------- | :--------- | :---------------------------------------------- |
+| `doc`            | `Document` | the document to removed elements from           |
+| `isSandboxed`    | `boolean`  | whether or not we are in sandboxed mode         |
+| `id`             | `string`   | id for any existing SVG element                 |
+| `divSelector`    | `string`   | selector for any existing enclosing div element |
+| `iFrameSelector` | `string`   | selector for any existing iFrame element        |
+
+#### Returns
+
+`void`
+
+#### Defined in
+
+[mermaidAPI.ts:343](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L343)
--- a/docs/config/theming.md
+++ b/docs/config/theming.md
@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/theming.md](../../packages/mermaid/src/docs/config/theming.md).

 # Theme Configuration

@ -152,9 +156,8 @@ You can create your own themes, by changing any of the given variables below. If

 ## Theme Variables Reference Table

-```note
-Variables that are unique to some diagrams can be affected by changes in Theme Variables
-```
+> **Note**
+> Variables that are unique to some diagrams can be affected by changes in Theme Variables

 | Variable             | Default/Base/Factor value      | Calc | Description                                                                                                                      |
 | -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
@ -371,42 +374,6 @@ In the following examples, the directive `init` is used, with the `theme` being
          end
 ```

-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-```mermaid
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
 ### Flowchart (beta)

 ```mermaid-example
--- a/docs/config/usage.md
+++ b/docs/config/usage.md
@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/usage.md](../../packages/mermaid/src/docs/config/usage.md).

 # Usage

@ -14,7 +18,7 @@ Please note that you can switch versions through the dropdown box at the top rig

 ## Using mermaid

-For the majority of users, Using the [Live Editor](https://mermaid.live/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./Setup.md).
+For the majority of users, Using the [Live Editor](https://mermaid.live/) would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](./setup/README.md).

 We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermaid Live Editor.

@ -37,7 +41,7 @@ We have compiled some Video [Tutorials](./Tutorials.md) on how to use the mermai

 **Hosting mermaid on a web page.**

-> Note:This topic explored in greater depth in the [User Guide for Beginners](./n00b-gettingStarted.md)
+> Note:This topic explored in greater depth in the [User Guide for Beginners](../intro/n00b-gettingStarted.md)

 The easiest way to integrate mermaid on a web page requires two elements:

@ -115,10 +119,9 @@ Values:
 - **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled
 - **sandbox**: With this security level all rendering takes place in a sandboxed iframe. This prevent any JavaScript running in the context. This may hinder interactive functionality of the diagram like scripts, popups in sequence diagram or links to other tabs/targets etc.

-```note
-This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled.
-**sandbox** security level is still in the beta version.
-```
+> **Note**
+> This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled.
+> **sandbox** security level is still in the beta version.

 **If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing . This allows clicks and tags are allowed.**

@ -183,9 +186,8 @@ Or with no config object, and a jQuery selection:
 mermaid.init(undefined, $('#someId .yetAnotherClass'));
 ```

-```warning
-This type of integration is deprecated. Instead the preferred way of handling more complex integration is to use the mermaidAPI instead.
-```
+> **Warning**
+> This type of integration is deprecated. Instead the preferred way of handling more complex integration is to use the mermaidAPI instead.

 ## Usage with webpack

@ -224,7 +226,7 @@ The example code below is an extract of what mermaid does when using the API. Th
 bind events to an SVG when using the API for rendering.

 ```javascript
-var insertSvg = function (svgCode, bindFunctions) {
+const insertSvg = function (svgCode, bindFunctions) {
  element.innerHTML = svgCode;
  if (typeof callback !== 'undefined') {
    callback(id);
@ -232,7 +234,7 @@ var insertSvg = function (svgCode, bindFunctions) {
  bindFunctions(element);
 };

-var id = 'theGraph';
+const id = 'theGraph';

 mermaidAPI.render(id, txt, insertSvg, element);
 ```
@ -248,7 +250,7 @@ mermaidAPI.render(id, txt, insertSvg, element);
 This is the renderer used for transforming the documentation from Markdown to html with mermaid diagrams in the html.

 ```javascript
-var renderer = new marked.Renderer();
+const renderer = new marked.Renderer();
 renderer.code = function (code, language) {
  if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
    return '<pre class="mermaid">' + code + '</pre>';
@ -299,8 +301,8 @@ mermaid.parseError = function (err, hash) {
  displayErrorInGui(err);
 };

-var textFieldUpdated = function () {
-  var textStr = getTextFromFormField('code');
+const textFieldUpdated = function () {
+  const textStr = getTextFromFormField('code');

  if (mermaid.parse(textStr)) {
    reRender(textStr);
@ -324,7 +326,7 @@ setting the options in mermaid.
 4.  Instantiation of the configuration using the **mermaid.init** call- **Deprecated**

 The list above has two ways too many of doing this. Three are deprecated and will eventually be removed. The list of
-configuration objects are described [in the mermaidAPI documentation](Setup.md).
+configuration objects are described [in the mermaidAPI documentation](./setup/README.md).

 ## Using the `mermaidAPI.initialize`/`mermaid.initialize` call

@ -339,9 +341,8 @@ on what kind of integration you use.
 </script>
 ```

-```tip
-This is the preferred way of configuring mermaid.
-```
+> **Note**
+> This is the preferred way of configuring mermaid.

 ### The following methods are deprecated and are kept only for backwards compatibility.

@ -357,9 +358,8 @@ approach are:
 mermaid.startOnLoad = true;
 ```

-```warning
-This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
-```
+> **Warning**
+> This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.

 ## Using the mermaid_config

@ -373,9 +373,8 @@ approach are:
 mermaid_config.startOnLoad = true;
 ```

-```warning
-This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
-```
+> **Warning**
+> This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.

 ## Using the mermaid.init call

@ -388,6 +387,5 @@ To set some configuration via the mermaid object. The two parameters that are su
 mermaid_config.startOnLoad = true;
 ```

-```warning
-This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
-```
+> **Warning**
+> This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
--- a/docs/diagrams-and-syntax-and-examples/flowchart.md
+++ b/docs/diagrams-and-syntax-and-examples/flowchart.md
@ -1,927 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
-
---
-
-sort: 3
-title: Flowchart
-
---
-
-# Flowcharts - Basic Syntax
-
-## Graph
-
-This statement declares the direction of the flowchart, either from top to bottom (`TD` or `TB`):
-
-```mermaid-example
-graph TD
-    Start --> Stop
-```
-
-```mermaid
-graph TD
-    Start --> Stop
-```
-
-or left to right (`LR`):
-
-```mermaid-example
-graph LR
-    Start --> Stop
-```
-
-```mermaid
-graph LR
-    Start --> Stop
-```
-
-## Flowchart Orientation
-
-Possible FlowChart orientations are:
-
- TB - top to bottom
- TD - top-down (same as top to bottom)
- BT - bottom to top
- RL - right to left
- LR - left to right
-
-## Flowcharts
-
-This renders a flowchart that allows for features such as: more arrow types, multi directional arrows, and linking to and from subgraphs.
-
-Apart from the graph type, the syntax is the same. This is currently experimental. When the beta period is over, both the graph and flowchart keywords will render in this new way. At this point it is OK to start beta testing flowcharts.
-
-> **Important note** Do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).\*\*
-
-## Nodes and shapes
-
-### A node (default)
-
-```mermaid-example
-graph LR
-    id
-```
-
-```mermaid
-graph LR
-    id
-```
-
-> **Note** The id is what is displayed in the box.
-
-### A node with text
-
-It is also possible to set text in the box that differs from the id. If this is done several times, only the last text
-found for the node will be rendered. Also if you define edges for the node later on, you can omit text definitions. The
-text previously defined will be used when rendering the box.
-
-```mermaid-example
-graph LR
-    id1[This is the text in the box]
-```
-
-```mermaid
-graph LR
-    id1[This is the text in the box]
-```
-
-## Node Shapes
-
-### A node with round edges
-
-```mermaid-example
-graph LR
-    id1(This is the text in the box)
-```
-
-```mermaid
-graph LR
-    id1(This is the text in the box)
-```
-
-### A stadium-shaped node
-
-```mermaid-example
-graph LR
-    id1([This is the text in the box])
-```
-
-```mermaid
-graph LR
-    id1([This is the text in the box])
-```
-
-### A node in a subroutine shape
-
-```mermaid-example
-graph LR
-    id1[[This is the text in the box]]
-```
-
-```mermaid
-graph LR
-    id1[[This is the text in the box]]
-```
-
-### A node in a cylindrical shape
-
-```mermaid-example
-graph LR
-    id1[(Database)]
-```
-
-```mermaid
-graph LR
-    id1[(Database)]
-```
-
-### A node in the form of a circle
-
-```mermaid-example
-graph LR
-    id1((This is the text in the circle))
-```
-
-```mermaid
-graph LR
-    id1((This is the text in the circle))
-```
-
-### A node in an asymmetric shape
-
-```mermaid-example
-graph LR
-    id1>This is the text in the box]
-```
-
-```mermaid
-graph LR
-    id1>This is the text in the box]
-```
-
-Currently it is only possible to render the shape above, and not its mirror. _This might change with future releases._
-
-### A node (rhombus)
-
-```mermaid-example
-graph LR
-    id1{This is the text in the box}
-```
-
-```mermaid
-graph LR
-    id1{This is the text in the box}
-```
-
-### A hexagonal node
-
-```mermaid-example
-graph LR
-    id1{{This is the text in the box}}
-```
-
-```mermaid
-graph LR
-    id1{{This is the text in the box}}
-```
-
-### Parallelogram
-
-```mermaid-example
-graph TD
-    id1[/This is the text in the box/]
-```
-
-```mermaid
-graph TD
-    id1[/This is the text in the box/]
-```
-
-### Parallelogram alt
-
-```mermaid-example
-graph TD
-    id1[\This is the text in the box\]
-```
-
-```mermaid
-graph TD
-    id1[\This is the text in the box\]
-```
-
-### Trapezoid
-
-```mermaid-example
-graph TD
-    A[/Christmas\]
-```
-
-```mermaid
-graph TD
-    A[/Christmas\]
-```
-
-### Trapezoid alt
-
-```mermaid-example
-graph TD
-    B[\Go shopping/]
-```
-
-```mermaid
-graph TD
-    B[\Go shopping/]
-```
-
-## Links between nodes
-
-Nodes can be connected with links/edges. It is possible to have different types of links, or attach a text string on a link.
-
-### Link with arrow head
-
-```mermaid-example
-graph LR
-    A-->B
-```
-
-```mermaid
-graph LR
-    A-->B
-```
-
-### Open link
-
-```mermaid-example
-graph LR
-    A --- B
-```
-
-```mermaid
-graph LR
-    A --- B
-```
-
-### Text on links
-
-```mermaid-example
-graph LR
-    A-- This is the text! ---B
-```
-
-```mermaid
-graph LR
-    A-- This is the text! ---B
-```
-
-or
-
-```mermaid-example
-graph LR
-    A---|This is the text|B
-```
-
-```mermaid
-graph LR
-    A---|This is the text|B
-```
-
-### Link with arrow head and text
-
-```mermaid-example
-graph LR
-    A-->|text|B
-```
-
-```mermaid
-graph LR
-    A-->|text|B
-```
-
-or
-
-```mermaid-example
-graph LR
-    A-- text -->B
-```
-
-```mermaid
-graph LR
-    A-- text -->B
-```
-
-### Dotted link
-
-```mermaid-example
-graph LR;
-   A-.->B;
-```
-
-```mermaid
-graph LR;
-   A-.->B;
-```
-
-### Dotted link with text
-
-```mermaid-example
-graph LR
-   A-. text .-> B
-```
-
-```mermaid
-graph LR
-   A-. text .-> B
-```
-
-### Thick link
-
-```mermaid-example
-graph LR
-   A ==> B
-```
-
-```mermaid
-graph LR
-   A ==> B
-```
-
-### Thick link with text
-
-```mermaid-example
-graph LR
-   A == text ==> B
-```
-
-```mermaid
-graph LR
-   A == text ==> B
-```
-
-### Chaining of links
-
-It is possible to declare many links on the same line as per below:
-
-```mermaid-example
-graph LR
-   A -- text --> B -- text2 --> C
-```
-
-```mermaid
-graph LR
-   A -- text --> B -- text2 --> C
-```
-
-It is also possible to declare multiple nodes links in the same line as per below:
-
-```mermaid-example
-graph LR
-   a --> b & c--> d
-```
-
-```mermaid
-graph LR
-   a --> b & c--> d
-```
-
-You can then describe dependencies in a very expressive way. Like the one-liner below:
-
-```mermaid-example
-graph TB
-    A & B--> C & D
-```
-
-```mermaid
-graph TB
-    A & B--> C & D
-```
-
-If you describe the same diagram using the the basic syntax, it will take four lines:
-
-```mermaid-example
-graph TB
-    A --> C
-    A --> D
-    B --> C
-    B --> D
-```
-
-```mermaid
-graph TB
-    A --> C
-    A --> D
-    B --> C
-    B --> D
-```
-
-A word of warning, one could go overboard with this, making the graph harder to read in
-markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
-This goes for expressive syntaxes as well.
-
-### New arrow types
-
-When using flowchart instead of graph there are new types of arrows supported as per below:
-
-```mermaid-example
-flowchart LR
-    A --o B
-    B --x C
-```
-
-```mermaid
-flowchart LR
-    A --o B
-    B --x C
-```
-
-### Multi directional arrows
-
-When using flowchart instead of graph there is the possibility to use multidirectional arrows.
-
-```mermaid-example
-flowchart LR
-    A o--o B
-    B <--> C
-    C x--x D
-```
-
-```mermaid
-flowchart LR
-    A o--o B
-    B <--> C
-    C x--x D
-```
-
-### Minimum length of a link
-
-Each node in the flowchart is ultimately assigned to a rank in the rendered
-graph, i.e. to a vertical or horizontal level (depending on the flowchart
-orientation), based on the nodes to which it is linked. By default, links
-can span any number of ranks, but you can ask for any link to be longer
-than the others by adding extra dashes in the link definition.
-
-In the following example, two extra dashes are added in the link from node _B_
-to node _E_, so that it spans two more ranks than regular links:
-
-```mermaid-example
-graph TD
-    A[Start] --> B{Is it?};
-    B -->|Yes| C[OK];
-    C --> D[Rethink];
-    D --> B;
-    B ---->|No| E[End];
-```
-
-```mermaid
-graph TD
-    A[Start] --> B{Is it?};
-    B -->|Yes| C[OK];
-    C --> D[Rethink];
-    D --> B;
-    B ---->|No| E[End];
-```
-
-> **Note** The rendering engine may cause some links to be longer than
-> the number of ranks requested in order to accommodate the overall topology.
-
-When the link label is written in the middle of the link, the extra dashes must
-be added on the right side of the link. The following example is equivalent to
-the previous one:
-
-```mermaid-example
-graph TD
-    A[Start] --> B{Is it?};
-    B -- Yes --> C[OK];
-    C --> D[Rethink];
-    D --> B;
-    B -- No ----> E[End];
-```
-
-```mermaid
-graph TD
-    A[Start] --> B{Is it?};
-    B -- Yes --> C[OK];
-    C --> D[Rethink];
-    D --> B;
-    B -- No ----> E[End];
-```
-
-For dotted or thick links, the characters to add are equals signs or dots,
-as summed up in the following table:
-
-| Length            |   1    |    2    |    3     |
-| ----------------- | :----: | :-----: | :------: |
-| Normal            | `---`  | `----`  | `-----`  |
-| Normal with arrow | `-->`  | `--->`  | `---->`  |
-| Thick             | `===`  | `====`  | `=====`  |
-| Thick with arrow  | `==>`  | `===>`  | `====>`  |
-| Dotted            | `-.-`  | `-..-`  | `-...-`  |
-| Dotted with arrow | `-.->` | `-..->` | `-...->` |
-
-## Special characters that break syntax
-
-Use quotes around text in order to render more troublesome characters, as in the example below:
-
-```mermaid-example
-graph LR
-    id1["This is the (text) in the box"]
-```
-
-```mermaid
-graph LR
-    id1["This is the (text) in the box"]
-```
-
-### Entity codes to escape characters
-
-Special characters (including Unicode) can be included by using HTML escaping syntax:
-
-```mermaid-example
-    graph LR
-        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
-```
-
-```mermaid
-    graph LR
-        A["A double quote:#quot;"] -->B["A dec char:#9829;"]
-```
-
-## Subgraphs
-
-    subgraph title
-        graph definition
-    end
-
-An example:
-
-```mermaid-example
-graph TB
-    c1-->a2
-    subgraph one
-    a1-->a2
-    end
-    subgraph two
-    b1-->b2
-    end
-    subgraph three
-    c1-->c2
-    end
-```
-
-```mermaid
-graph TB
-    c1-->a2
-    subgraph one
-    a1-->a2
-    end
-    subgraph two
-    b1-->b2
-    end
-    subgraph three
-    c1-->c2
-    end
-```
-
-You can also set an explicit id for the subgraph:
-
-```mermaid-example
-graph TB
-    c1-->a2
-    subgraph ide1 [one]
-    a1-->a2
-    end
-```
-
-```mermaid
-graph TB
-    c1-->a2
-    subgraph ide1 [one]
-    a1-->a2
-    end
-```
-
-## Flowcharts
-
-With the graphtype `flowchart` it is also possible to set edges to and from subgraphs:
-
-```mermaid-example
-flowchart TB
-    c1-->a2
-    subgraph one
-    a1-->a2
-    end
-    subgraph two
-    b1-->b2
-    end
-    subgraph three
-    c1-->c2
-    end
-    one --> two
-    three --> two
-    two --> c2
-```
-
-```mermaid
-flowchart TB
-    c1-->a2
-    subgraph one
-    a1-->a2
-    end
-    subgraph two
-    b1-->b2
-    end
-    subgraph three
-    c1-->c2
-    end
-    one --> two
-    three --> two
-    two --> c2
-```
-
-## Interaction
-
-A node can have click events bound that lead to either a JavaScript callback or to open a new browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.
-
-    click nodeId callback
-    click nodeId call callback()
-
- nodeId is the id of the node
- `callback` is the name of a JavaScript function defined on the page displaying the graph. The function will be called with the nodeId as an incoming parameter.
-
-```html
-<script>
-  const callback = function (nodeId) {
-    alert('A callback was triggered on ' + nodeId);
-  };
-</script>
-```
-
-Examples of tooltip usage:
-
-The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class .mermaidTooltip.
-
-```mermaid-example
-graph LR;
-    A-->B;
-    B-->C;
-    C-->D;
-    click A callback "Tooltip for a callback"
-    click B "https://www.github.com" "This is a tooltip for a link"
-    click A call callback() "Tooltip for a callback"
-    click B href "https://www.github.com" "This is a tooltip for a link"
-```
-
-```mermaid
-graph LR;
-    A-->B;
-    B-->C;
-    C-->D;
-    click A callback "Tooltip for a callback"
-    click B "https://www.github.com" "This is a tooltip for a link"
-    click A call callback() "Tooltip for a callback"
-    click B href "https://www.github.com" "This is a tooltip for a link"
-```
-
-> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
-
-?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/s37cjoau/3/).
-
-Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
-
-```mermaid-example
-graph LR;
-    A-->B;
-    B-->C;
-    C-->D;
-    D-->E;
-    click A "https://www.github.com" _blank
-    click B "https://www.github.com" "Open this in a new tab" _blank
-    click C href "https://www.github.com" _blank
-    click D href "https://www.github.com" "Open this in a new tab" _blank
-```
-
-```mermaid
-graph LR;
-    A-->B;
-    B-->C;
-    C-->D;
-    D-->E;
-    click A "https://www.github.com" _blank
-    click B "https://www.github.com" "Open this in a new tab" _blank
-    click C href "https://www.github.com" _blank
-    click D href "https://www.github.com" "Open this in a new tab" _blank
-```
-
-Beginner's tip—here's a full example of using interactive links in HTML:
-
-```html
-<body>
-  <pre class="mermaid">
-    graph LR;
-        A-->B;
-        B-->C;
-        C-->D;
-        click A callback "Tooltip"
-        click B "https://www.github.com" "This is a link"
-        click C call callback() "Tooltip"
-        click D href "https://www.github.com" "This is a link"
-  </pre>
-
-  <script>
-    const callback = function () {
-      alert('A callback was triggered');
-    };
-    const config = {
-      startOnLoad: true,
-      flowchart: {
-        useMaxWidth: true,
-        htmlLabels: true,
-        curve: 'cardinal',
-      },
-      securityLevel: 'loose',
-    };
-    mermaid.initialize(config);
-  </script>
-</body>
-```
-
-### Comments
-
-Comments can be entered within a flow diagram, 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 until the next newline will be treated as a comment, including all punctuation and any flow syntax.
-
-```mermaid-example
-graph LR
-%% this is a comment A -- text --> B{node}
-   A -- text --> B -- text2 --> C
-```
-
-```mermaid
-graph LR
-%% this is a comment A -- text --> B{node}
-   A -- text --> B -- text2 --> C
-```
-
-## Styling and classes
-
-### Styling links
-
-It is possible to style links. For instance, you might want to style a link that is going backwards in the flow. As links
-have no ids in the same way as nodes, some other way of attaching style is required.
-So instead of ids, the order number of when the link was defined in the graph is used, starting with zero. Here's a linkStyle statement that would apply style to the fourth link in the graph:
-
-    linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
-
-You can specify a `default` to apply to all links, or you can give a comma-separated list of link order numbers.
-
-Instead of giving a styles option, you can also use custom d3 curve types with the following syntax:
-
-    linkStyle default|numList|num interpolate curveType
-
-If you want to add both D3 and style options, instead of writing:
-
-    linkStyle default interpolate cardinal
-    linkStyle default stroke:#ff3,stroke-width:4px,color:red;
-
-You can combine them:
-
-    linkStyle default interpolate cardinal stroke:#ff3,stroke-width:4px,color:red;
-
-### Styling a node
-
-It is possible to apply specific styles such as a thicker border or a different background color to a node.
-
-```mermaid-example
-graph LR
-    id1(Start)-->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-```
-
-```mermaid
-graph LR
-    id1(Start)-->id2(Stop)
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
-```
-
-#### Classes
-
-More convenient than defining the style every time is to define a class of styles and attach this class reference to multiple nodes.
-
-here's a class definition:
-
-        classDef className fill:#f9f,stroke:#333,stroke-width:4px;
-
-and then attaching this class to a node is simply:
-
-        class nodeId1 className;
-
-It is also possible to attach a class to multiple nodes in one statement:
-
-        class nodeId1,nodeId2 className;
-
-An even shorter form of adding a class is to attach the classname to the node using the `:::`operator:
-
-```mermaid-example
-graph LR
-    A:::someclass --> B
-    classDef someclass fill:#f96;
-```
-
-```mermaid
-graph LR
-    A:::someclass --> B
-    classDef someclass fill:#f96;
-```
-
-### Css classes
-
-It is also possible to predefine classes in css styles that can be applied from the graph definition:
-
-**Example style**
-
-```css
-.cssClass > rect {
-  fill: #ff0000;
-  stroke: #ffff00;
-  stroke-width: 4px;
-}
-```
-
-**Example definition**
-
-```mermaid-example
-graph LR;
-    A-->B[AAA<span>BBB</span>];
-    B-->D;
-    class A cssClass;
-```
-
-```mermaid
-graph LR;
-    A-->B[AAA<span>BBB</span>];
-    B-->D;
-    class A cssClass;
-```
-
-### Default class
-
-If a class is named `default` it will be assigned to all nodes that do not have a specific class definition.
-
-        classDef default fill:#f9f,stroke:#333,stroke-width:4px;
-
-## Basic support for fontawesome
-
-It is possible to add icons from fontawesome. These are accessed via the syntax fa:#icon-class-name#.
-
-```mermaid-example
-graph TD
-    B["fa:fa-twitter for peace"]
-    B-->C[fa:fa-ban forbidden]
-    B-->D(fa:fa-spinner);
-    B-->E(A fa:fa-camera-retro perhaps?);
-```
-
-```mermaid
-graph TD
-    B["fa:fa-twitter for peace"]
-    B-->C[fa:fa-ban forbidden]
-    B-->D(fa:fa-spinner);
-    B-->E(A fa:fa-camera-retro perhaps?);
-```
-
-## Graph declarations with spaces between vertices and link and without semicolon
-
- After release 0.2.16, graph declaration statements do not need to end with a semicolon. (And they can continue to have the ending semicolon—it has now just become optional.) So the below graph declaration is valid along with the old declarations.
-
- A single space is allowed between vertices and the link, however there should not be any space between a vertex and its text, or a link and its text. The old syntax of graph declarations will also work, so this new feature is optional and is introduced to improve readability.
-
-Below is an example of the new way to declare graph edges. This is valid alongside any old-style declarations of graph edges.
-
-```mermaid-example
-graph LR
-    A[Hard edge] -->|Link text| B(Round edge)
-    B --> C{Decision}
-    C -->|One| D[Result one]
-    C -->|Two| E[Result two]
-```
-
-```mermaid
-graph LR
-    A[Hard edge] -->|Link text| B(Round edge)
-    B --> C{Decision}
-    C -->|One| D[Result one]
-    C -->|Two| E[Result two]
-```
-
-## Configuration...
-
-Is it 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 (which is described in the mermaidCLI page).
-In Javascript config parameters can be set by using `mermaid.flowchartConfig`:
-
-```javascript
-mermaid.flowchartConfig = {
-  width: '100%',
-};
-```
--- a/docs/img/Configuration.png
+++ b/docs/img/Configuration.png
--- a/docs/img/Editing-process.png
+++ b/docs/img/Editing-process.png
--- a/docs/img/EditingHistory+Links.png
+++ b/docs/img/EditingHistory+Links.png
--- a/docs/img/GitHub-Mark-32px.png
+++ b/docs/img/GitHub-Mark-32px.png
--- a/docs/img/Live-Editor-Usage.png
+++ b/docs/img/Live-Editor-Usage.png
--- a/docs/img/book-banner-post-release.jpeg
+++ b/docs/img/book-banner-post-release.jpeg
--- a/docs/img/book-banner-post-release.png
+++ b/docs/img/book-banner-post-release.png
--- a/docs/img/book-banner-pre-release.jpg
+++ b/docs/img/book-banner-pre-release.jpg
--- a/docs/img/book-banner-pre-release.png
+++ b/docs/img/book-banner-pre-release.png
--- a/docs/img/class.png
+++ b/docs/img/class.png
--- a/docs/img/flow.png
+++ b/docs/img/flow.png
--- a/docs/img/gantt.png
+++ b/docs/img/gantt.png
--- a/docs/img/git.png
+++ b/docs/img/git.png
--- a/docs/img/n00b-firstFlow.png
+++ b/docs/img/n00b-firstFlow.png
--- a/docs/img/new-diagrams.png
+++ b/docs/img/new-diagrams.png
--- a/docs/img/sequence.png
+++ b/docs/img/sequence.png
--- a/docs/img/simple-er.png
+++ b/docs/img/simple-er.png
--- a/docs/img/user-journey.png
+++ b/docs/img/user-journey.png
--- a/docs/img/without
+++ b/docs/img/without
--- a/docs/index.html.todo
+++ b/docs/index.html.todo
@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-  <!--# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.--><head>
+  <head>
    <meta charset="UTF-8" />
    <title>
      mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams,
@ -22,7 +22,7 @@
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
    />
    <script
-      defer=""
+      defer
      data-domain="mermaid-js.github.io"
      src="https://plausible.io/js/plausible.js"
    ></script>
--- a/docs/integrations.md
+++ b/docs/integrations.md
@ -1,183 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
-
-# Integrations
-
-The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications.
-
-They also serve as proof of concept, for the variety of things that can be built with mermaid.
-
-## Productivity
-
- [GitHub](https://github.com) (**Native support**)
-  - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**)
-  - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
-  - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) (**Native support**)
- [Gitea](https://gitea.io) (**Native support**)
- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) (**Native support**)
- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) (**Native support**)
- [Joplin](https://joplinapp.org) (**Native support**)
- [Notion](https://notion.so) (**Native support**)
- [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**)
- [Obsidian](https://help.obsidian.md/How+to/Format+your+notes#Diagram) (**Native support**)
- [GitBook](https://gitbook.com)
-  - [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
-  - [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
-  - [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
- [LiveBook](https://livebook.dev) (**Native support**)
- [Atlassian Products](https://www.atlassian.com)
-  - [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
-  - [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
-  - [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)
- [Redmine](https://redmine.org)
-  - [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
-  - [redmine-mermaid](https://github.com/styz/redmine_mermaid)
-  - [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)
-
-## CRM/ERP/Similar
-
- [coreBOS](https://blog.corebos.org/blog/december2019)
-
-## Blogs
-
- [Wordpress](https://wordpress.org)
-  - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
-  - [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
- [Hexo](https://hexo.io)
-  - [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams)
-  - [hexo-tag-mermaid](https://github.com/JameChou/hexo-tag-mermaid)
-  - [hexo-mermaid-diagrams](https://github.com/mslxl/hexo-mermaid-diagrams)
-
-## CMS
-
- [VitePress](https://vitepress.vuejs.org/)
-  - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
- [VuePress](https://vuepress.vuejs.org/)
-  - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
- [Grav CMS](https://getgrav.org/)
-  - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
-  - [Gitlab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
-
-## Communication
-
- [Discourse](https://discourse.org)
-  - [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid)
- [Mattermost](https://mattermost.com/)
-  - [Mermaid Plugin](https://github.com/SpikeTings/Mermaid)
- [phpBB](https://phpbb.com)
-  - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
- [NodeBB](https://nodebb.org)
-  - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
-
-## Wikis
-
- [MediaWiki](https://www.mediawiki.org)
-  - [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
-  - [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
- [Semantic Media Wiki](https://semantic-mediawiki.org)
-  - [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
- [FosWiki](https://foswiki.org)
-  - [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
- [DokuWiki](https://dokuwiki.org)
-  - [Flowcharts](https://www.dokuwiki.org/plugin:flowcharts?s[]=mermaid)
-  - [ComboStrap](https://combostrap.com/mermaid)
- [TiddlyWiki](https://tiddlywiki.com/)
-  - [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)
-  - [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid)
-
-## Editor Plugins
-
- [Vs Code](https://code.visualstudio.com/)
-  - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
-  - [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
-  - [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
-  - [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
-  - [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)
-  - [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)
-  - [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode)
-  - [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode)
- [Markdown-It](https://github.com/markdown-it/markdown-it)
-  - [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml)
-  - [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid)
-  - [md-it-mermaid](https://github.com/iamcco/md-it-mermaid)
-  - [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new)
-  - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
- [Atom](https://atom.io)
-  - [Markdown Preview Enhanced](https://atom.io/packages/markdown-preview-enhanced)
-  - [Atom Mermaid](https://atom.io/packages/atom-mermaid)
-  - [Language Mermaid Syntax Highlighter](https://atom.io/packages/language-mermaid)
- [Sublime Text 3](https://sublimetext.com)
-  - [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
- [Astah](https://astah.net)
-  - [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-)
- [Light Table](http://lighttable.com/)
-  - [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
- [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)
-  - [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)
-  - [Org-Mode integration](https://github.com/arnm/ob-mermaid)
- [Brackets](https://brackets.io/)
-  - [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview)
- [Iodide](https://github.com/iodide-project/iodide)
-  - [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
- [Google docs](https://docs.google.com/)
-  - [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856)
- [Podlite](https://github.com/zag/podlite-desktop)
-  - [Named block =Diagram](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
- [GNU Nano](https://www.nano-editor.org/)
-  - [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
-
-## Document Generation
-
- [Sphinx](https://www.sphinx-doc.org/en/master/)
-  - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
- [remark.js](https://remark.js.org/)
-  - [remark-mermaid](https://github.com/temando/remark-mermaid)
- [jSDoc](https://jsdoc.app/)
-  - [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
- [MkDocs](https://mkdocs.org)
-  - [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
-  - [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
- [Type Doc](https://typedoc.org/)
-  - [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) (Native support in theme)
- [Codedoc](https://codedoc.cc/)
-  - [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
- [mdbook](https://rust-lang.github.io/mdBook/index.html)
-  - [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
-
-## Browser Extensions
-
-| Name                     | Chrome Web Store                                                                                             | Firefox Add-ons                                                                | Opera                                                                          | Edge                                                                                                                         | Source/Repository                                                                                    |
-| ------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| GitHub + Mermaid         | -                                                                                                            | [🦊🔗](https://addons.mozilla.org/firefox/addon/github-mermaid/)               | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/BackMarket/github-mermaid-extension)                                       |
-| Asciidoctor Live Preview | [🎡🔗](https://chrome.google.com/webstore/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | -                                                                              | -                                                                              | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | -                                                                                                    |
-| Diagram Tab              | -                                                                                                            | -                                                                              | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/khafast/diagramtab)                                                        |
-| Markdown Diagrams        | [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/)        | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/)      | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/)      | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe)                 | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
-| Markdown Viewer          | -                                                                                                            | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | -                                                                              | -                                                                                                                            | [🐙🔗](https://github.com/simov/markdown-viewer)                                                     |
-| Extensions for Mermaid   | -                                                                                                            | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | -                                                                                                                            | [🐙🔗](https://github.com/Stefan-S/mermaid-extension)                                                |
-| Chrome Diagrammer        | [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
-| Mermaid Diagrams         | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil)          | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
-| Mermaid Markdown         | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-markdown/mboeoikjijmjcjgpccghbcoegikliijg)          | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
-| Monkeys                  | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
-| Mermaid Previewer        | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
-
-## Other
-
- [Jekyll](https://jekyllrb.com/)
-  - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
-  - [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
- [Reveal.js](https://github.com/hakimel/reveal.js)
-  - [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
- [Bisheng](https://www.npmjs.com/package/bisheng)
-  - [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
- [Reveal CK](https://github.com/jedcn/reveal-ck)
-  - [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
- [ExDoc](https://github.com/elixir-lang/ex_doc)
-  - [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
--- a/docs/intro/img/Code-Preview-Config.png
+++ b/docs/intro/img/Code-Preview-Config.png
--- a/docs/intro/img/Live-Editor-Choices.png
+++ b/docs/intro/img/Live-Editor-Choices.png
--- a/docs/intro/img/book-banner-post-release.jpg
+++ b/docs/intro/img/book-banner-post-release.jpg
--- a/docs/intro/index.md
+++ b/docs/intro/index.md
@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/index.md](../../packages/mermaid/src/docs/intro/index.md).

 # About Mermaid

@ -6,9 +10,9 @@

 It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

-> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](./n00b-syntaxReference.md).
+> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](n00b-syntaxReference.md).

-<img src="img/header.png" alt="" />
+<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_)

@ -26,12 +30,12 @@ Diagramming and documentation costs precious developer time and gets outdated qu
 But not having diagrams or docs ruins productivity and hurts organizational learning.<br/>
 Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).<br/> <br/>
 Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/).<br/>
-[Tutorials](./Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./integrations.md).
+[Tutorials](../config/Tutorials.md) has video tutorials.
+Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../misc/integrations.md).

-For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./n00b-overview.md) and [Usage](./usage.md).
+For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../community/n00b-overview.md) and [Usage](../config/usage.md).

-🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/docs/development.md) | 📜 [Version Log](./CHANGELOG.md) | 🔌 [Plug-Ins](./integrations.md)
+🌐 [CDN](https://unpkg.com/mermaid/) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../misc/integrations.md)

 > 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).

@ -47,7 +51,7 @@ In our release process we rely heavily on visual regression tests using [applito

 ## Diagram Types

-### [Flowchart](./flowchart.md?id=flowcharts-basic-syntax)
+### [Flowchart](../syntax/flowchart.md?id=flowcharts-basic-syntax)

 ```mermaid-example
 graph TD;
@ -65,9 +69,7 @@ graph TD;
    C-->D;
 ```

-![Flowchart](img/flow.png)
-
-### [Sequence diagram](./sequenceDiagram.md)
+### [Sequence diagram](../syntax/sequenceDiagram.md)

 ```mermaid-example
 sequenceDiagram
@ -97,9 +99,7 @@ sequenceDiagram
    Bob-->>John: Jolly good!
 ```

-![Sequence diagram](img/sequence.png)
-
-### [Gantt diagram](./gantt.md)
+### [Gantt diagram](../syntax/gantt.md)

 ```mermaid-example
 gantt
@ -127,9 +127,7 @@ Future task               :         des3, after des2, 5d
 Future task2               :         des4, after des3, 5d
 ```

-![Gantt diagram](img/gantt.png)
-
-### [Class diagram](./classDiagram.md)
+### [Class diagram](../syntax/classDiagram.md)

 ```mermaid-example
 classDiagram
@ -165,9 +163,7 @@ Class01 : int gorilla
 Class08 <--> C2: Cool label
 ```

-![Class diagram](img/class.png)
-
-### Git graph
+### [Git graph](../syntax/gitgraph.md)

 ```mermaid-example
    gitGraph
@ -195,7 +191,7 @@ Class08 <--> C2: Cool label
       commit
 ```

-### [Entity Relationship Diagram - :exclamation: experimental](./entityRelationshipDiagram.md)
+### [Entity Relationship Diagram - :exclamation: experimental](../syntax/entityRelationshipDiagram.md)

 ```mermaid-example
 erDiagram
@ -213,9 +209,7 @@ erDiagram

 ```

-![ER diagram](img/simple-er.png)
-
-### [User Journey Diagram](./user-journey.md)
+### [User Journey Diagram](../syntax/userJourney.md)

 ```mermaid-example
 journey
@ -241,13 +235,11 @@ journey
      Sit down: 5: Me
 ```

-![Journey diagram](img/user-journey.png)
-
 ## Installation

-**In depth guides and examples can be found at [Getting Started](/n00b-gettingStarted) and [Usage](/usage).**
+**In depth guides and examples can be found at [Getting Started](./n00b-gettingStarted.md) and [Usage](../config/usage.md).**

-**It would also be helpful to learn more about mermaid's [Syntax](/n00b-syntaxReference).**
+**It would also be helpful to learn more about mermaid's [Syntax](./n00b-syntaxReference.md).**

 ### CDN

@ -264,12 +256,12 @@ Latest Version: <https://unpkg.com/browse/mermaid@8.8.0/>
 To Deploy Mermaid:

 1.  You will need to install node v16, which would have npm
-2.  Download yarn using npm
-3.  Enter the following command: `yarn add mermaid`
-4.  You can then add mermaid as a dev dependency using this command:
-    `yarn add --dev mermaid`
+2.  Install mermaid
+    - NPM: `npm i mermaid`
+    - Yarn: `yarn add mermaid`
+    - Pnpm: `pnpm add mermaid`

-### [Mermaid API](./Setup.md):
+### [Mermaid API](../config/setup/README.md):

 **To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML like so:**

@ -282,7 +274,7 @@ To Deploy Mermaid:

 **Doing so will command the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**

-**Examples can be found at** [Other examples](/examples)
+**Examples can be found at** [Other examples](../syntax/examples.md)

 ## Sibling projects

@ -308,22 +300,26 @@ Don't hesitate to contact me if you want to get involved!

 ## For contributors

-### Setup
+### Requirements

-```sh
-yarn install
-```
+- [volta](https://volta.sh/) to manage node versions.
+- [Node.js](https://nodejs.org/en/). `volta install node`
+- [pnpm](https://pnpm.io/) package manager. `volta install pnpm`

-### Build
+## Development Installation

-```sh
-yarn build:watch
+```bash
+git clone git@github.com:mermaid-js/mermaid.git
+cd mermaid
+# npx is required for first install as volta support for pnpm is not added yet.
+npx pnpm install
+pnpm test
 ```

 ### Lint

 ```sh
-yarn lint
+pnpm lint
 ```

 We use [eslint](https://eslint.org/).
@ -332,7 +328,7 @@ We recommend you to install [editor plugins](https://eslint.org/docs/user-guide/
 ### Test

 ```sh
-yarn test
+pnpm test
 ```

 Manual test in browser: open `dist/index.html`
@ -359,7 +355,7 @@ The above command generates files into the `dist` folder and publishes them to \

 Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866) if you want to know where to start helping out.

-Detailed information about how to contribute can be found in the [contribution guide](CONTRIBUTING.md)
+Detailed information about how to contribute can be found in the [contribution guide](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md)

 ## Security and safe diagrams

@ -377,10 +373,33 @@ To report a vulnerability, please e-mail security@mermaid.live with a descriptio

 A quick note from Knut Sveidqvist:

-> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_ >_Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._ >_Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
+> _Many thanks to the [d3](https://d3js.org/) and [dagre-d3](https://github.com/cpettitt/dagre-d3) projects for providing the graphical layout and drawing libraries!_
+>
+> _Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._
+>
+> _Thank you to [Tyler Long](https://github.com/tylerlong) who has been a collaborator since April 2017._
 >
 > _Thank you to the ever-growing list of [contributors](https://github.com/knsv/mermaid/graphs/contributors) that brought the project this far!_

 ---

 _Mermaid was created by Knut Sveidqvist for easier documentation._
+
+<style scoped>
+  #contributors + p,
+  #about-mermaid + p + p + blockquote + img + p
+  {
+    display: flex
+  }
+
+  #contributors + p a,
+  #about-mermaid + p + p + blockquote + img + p a
+  {
+    margin: 0 0.5rem
+  }
+
+  .dark #VPContent > div > div > div.content > div > main > div > div > img
+  {
+    filter: invert(1) hue-rotate(217deg)  contrast(0.72);
+  }
+</style>
--- a/docs/intro/n00b-gettingStarted.md
+++ b/docs/intro/n00b-gettingStarted.md
@ -1,35 +1,59 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/n00b-gettingStarted.md](../../packages/mermaid/src/docs/intro/n00b-gettingStarted.md).

 # A Mermaid User-Guide for Beginners

 Mermaid is composed of three parts: Deployment, Syntax and Configuration.

-This section talks about the different ways to deploy Mermaid. Learning the [Syntax](./n00b-syntaxReference.md) would be of great help to the beginner.
+This section talks about the different ways to deploy Mermaid. Learning the [Syntax](n00b-syntaxReference.md) would be of great help to the beginner.

 > Generally the live editor is enough for most general uses of mermaid, and is a good place to start learning.

-**Absolute beginners are advised to view the Video [Tutorials](./Tutorials.md) on the Live Editor, to gain a better understanding of mermaid.**
+**Absolute beginners are advised to view the Video [Tutorials](../config/Tutorials.md) on the Live Editor, to gain a better understanding of mermaid.**

 ## Four ways of using mermaid:

 1.  Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live).
-2.  Using [mermaid plugins](./integrations.md) with programs you are familiar with.
+2.  Using [mermaid plugins](../misc/integrations.md) with programs you are familiar with.
 3.  Calling the Mermaid JavaScript API.
 4.  Deploying Mermaid as a dependency.

 **Note: It is our recommendation that you review all approaches, and choose the one that is best for your project.**

-> More in depth information can be found at [Usage](./usage.md).
+> More in depth information can be found at [Usage](../config/usage.md).

 ## 1. Using the Live Editor

 Available at [mermaid.live](https://mermaid.live)

-![EditingProcess](./img/Editing-process.png)
+```mermaid-example
+graph TD
+    A[Enter Chart Definition] --> B(Preview)
+    B --> C{decide}
+    C --> D[Keep]
+    C --> E[Edit Definition]
+    E --> B
+    D --> F[Save Image and Code]
+    F --> B
+```
+
+```mermaid
+graph TD
+    A[Enter Chart Definition] --> B(Preview)
+    B --> C{decide}
+    C --> D[Keep]
+    C --> E[Edit Definition]
+    E --> B
+    D --> F[Save Image and Code]
+    F --> B
+```

 In the `Code` section one can write or edit raw mermaid code, and instantly `Preview` the rendered result on the panel beside it.

-The `Configuration` Section is for changing the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](./n00b-advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](Setup.md) page.
+The `Configuration` Section is for changing the appearance and behavior of mermaid diagrams. An easy introduction to mermaid configuration is found in the [Advanced usage](../config/n00b-advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](../config/setup/README.md) page.

 ![Code,Config and Preview](./img/Code-Preview-Config.png)

@ -61,9 +85,9 @@ and to View, https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/

 ## 2. Using Mermaid Plugins:

-You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](./integrations.md).
+You can generate mermaid diagrams from within popular applications using plug-ins. It can be done in the same way, you would use the Live Editor. Here's a list of [Mermaid Plugins](../misc/integrations.md).

-**This is covered in greater detail in the [Usage section](usage.md)**
+**This is covered in greater detail in the [Usage section](../config/usage.md)**

 ## 3. Calling the JavaScript API

--- a/docs/intro/n00b-syntaxReference.md
+++ b/docs/intro/n00b-syntaxReference.md
@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/n00b-syntaxReference.md](../../packages/mermaid/src/docs/intro/n00b-syntaxReference.md).

 # Diagram Syntax

@ -6,7 +10,7 @@ Mermaid's syntax is used to create diagrams. You'll find that it is not too tric

 Syntax, together with Deployment and Configuration constitute the whole of Mermaid.

-Diagram Examples can be found in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor), it is also a great practice area.
+Diagram Examples can be found in the [Mermaid Live Editor](https://mermaid.live), it is also a great practice area.

 ## Syntax Structure

@ -44,27 +48,27 @@ The [Getting Started](./n00b-gettingStarted.md) section can also provide some pr

 One should **beware the use of some words or symbols** that can break diagrams. These words or symbols are few and often only affect specific types of diagrams. The table below will continuously be updated.

-| Diagram Breakers                                                                                               | Reason                                                             | Solution                                          |
-| -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------- |
-| **Comments**                                                                                                   |                                                                    |                                                   |
-| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968)                                              | Similar to [Directives](./directives.md) confuses the renderer.    | In comments using `%%`, avoid using "{}".         |
-| **Flow-Charts**                                                                                                |                                                                    |                                                   |
-| 'end'                                                                                                          | The word "End" can cause Flowcharts and Sequence diagrams to break | Wrap them in quotation marks to prevent breakage. |
-| [Nodes inside Nodes](https://mermaid-js.github.io/mermaid/#/flowchart?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes                           | wrap them in quotation marks to prevent breaking  |
+| Diagram Breakers                                                                     | Reason                                                                  | Solution                                          |
+| ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ------------------------------------------------- |
+| **Comments**                                                                         |                                                                         |                                                   |
+| [` %%{``}%% `](https://github.com/mermaid-js/mermaid/issues/1968)                    | Similar to [Directives](../config/directives.md) confuses the renderer. | In comments using `%%`, avoid using "{}".         |
+| **Flow-Charts**                                                                      |                                                                         |                                                   |
+| 'end'                                                                                | The word "End" can cause Flowcharts and Sequence diagrams to break      | Wrap them in quotation marks to prevent breakage. |
+| [Nodes inside Nodes](../syntax/flowchart.md?id=special-characters-that-break-syntax) | Mermaid gets confused with nested shapes                                | wrap them in quotation marks to prevent breaking  |

 ### Mermaid Live Editor

-Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid-js.github.io/mermaid-live-editor).
+Now, that you've seen what you should not add to your diagrams, you can play around with them in the [Mermaid Live Editor](https://mermaid.live).

 # Configuration

 Configuration is the third part of Mermaid, after deployment and syntax. It deals with the different ways that Mermaid can be customized across different deployments.

-If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](./Setup.md) here. It includes themes.
+If you are interested in altering and customizing your Mermaid Diagrams, you will find the methods and values available for [Configuration](../config/setup/README.md) here. It includes themes.
 This section will introduce the different methods of configuring the behaviors and appearances of Mermaid Diagrams.
 The following are the most commonly used methods, and they are all tied to Mermaid [Deployment](./n00b-gettingStarted.md) methods.

-### Configuration Section in the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor).
+### Configuration Section in the [Live Editor](https://mermaid.live).

 Here you can edit certain values to change the behavior and appearance of the diagram.

@ -72,10 +76,10 @@ Here you can edit certain values to change the behavior and appearance of the di

 Used when Mermaid is called via an API, or through a `<script>` tag.

-### [Directives](./directives.md),
+### [Directives](../config/directives.md),

 Allows for the limited reconfiguration of a diagram just before it is rendered. It can alter the font style, color and other aesthetic aspects of the diagram. You can pass a directive alongside your definition inside `%%{ }%%`. It can be done either above or below your diagram definition.

-### [Theme Manipulation](./theming.md):
+### [Theme Manipulation](../config/theming.md):

-An application of using Directives to change [Themes](./theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.
+An application of using Directives to change [Themes](../config/theming.md). `Theme` is a value within Mermaid's configuration that dictates the color scheme for diagrams.
--- a/docs/introduction.md
+++ b/docs/introduction.md
@ -1 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
--- a/docs/landing/class.png
+++ b/docs/landing/class.png
--- a/docs/landing/cover.jpg
+++ b/docs/landing/cover.jpg
--- a/docs/landing/er.png
+++ b/docs/landing/er.png
--- a/docs/landing/flowchart.png
+++ b/docs/landing/flowchart.png
--- a/docs/landing/gantt.png
+++ b/docs/landing/gantt.png
--- a/docs/landing/index.html
+++ b/docs/landing/index.html
@ -1,337 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <!--# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.--><head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>The Official Guide to Mermaid.js</title>
-    <meta
-      name="description"
-      content="Landing page for the book The Official Guide to Mermaid.js: Create complex diagrams and beautiful flowcharts easily using text and code"
-    />
-    <meta
-      name="keywords"
-      content="book, guide, mermaid, flowcharts, sequence diagrams, class diagrams, state diagrams, pie charts, Entity Relationship Diagrams, User Journey Diagrams, Requirement Diagrams, Gantt Charts"
-    />
-    <meta name="author" content="Knut Sveidqvist, Ashish Jain" />
-    <link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" />
-    <!--Replace with your tailwind.css once created-->
-    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" />
-    <!-- Define your gradient here - use online tools to find a gradient matching your branding-->
-    <style>
-      .gradient {
-        background: linear-gradient(90deg, #7557c9 0%, #f4f4f4 100%);
-      }
-      .p-shadow {
-        text-shadow: #7557c9 0px 0px 5px;
-      }
-    </style>
-    <!-- Google Analytics -->
-    <script>
-      // prettier-ignore
-      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-      ga('create', 'UA-153180559-1', 'auto');
-      ga('send', 'pageview');
-    </script>
-    <!-- End Google Analytics -->
-  </head>
-  <body
-    class="leading-normal tracking-normal text-white gradient"
-    style="font-family: 'Source Sans Pro', sans-serif"
-  >
-    <!--Nav-->
-
-    <!--Hero-->
-    <div class="pt-24">
-      <div
-        style=""
-        class="container lg:px-24 max-w-5xl px-4 mx-auto flex flex-wrap flex-col md:flex-row items-center"
-      >
-        <!--Left Col-->
-        <div class="w-full md:w-1/2">
-          <div class="flex flex-col justify-center items-start text-center md:text-left">
-            <div class="flex flex-col items-center">
-              <p class="uppercase tracking-loose w-full p-shadow">MermaidPress</p>
-              <h1 class="my-4 text-5xl font-bold leading-tight p-shadow">
-                The Official Guide to Mermaid.js
-              </h1>
-              <p class="leading-normal text-2xl mb-8 p-shadow">
-                Learn to create complex diagrams and beautiful flowcharts easily using text and code
-                using Mermaid.js.
-              </p>
-              <a
-                href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&amp;me=&amp;qid=1628153965"
-              >
-                <button
-                  style="background: #ffa41c; border: 1px solid #ff8f00"
-                  class="mx-auto lg:mx-0 hover:underline text-black font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out"
-                >
-                  Purchase on Amazon
-                </button>
-              </a>
-            </div>
-          </div>
-        </div>
-        <!--Right Col-->
-        <div class="flex-1 md:w-3/5 py-6 text-center flex justify-end">
-          <img class="z-50" style="max-width: 350px" src="cover.jpg" />
-        </div>
-      </div>
-    </div>
-    <div class="relative -mt-0 lg:-mt-12">
-      <svg
-        viewBox="0 0 1428 174"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-      >
-        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-          <g transform="translate(-2.000000, 44.000000)" fill="#FFFFFF" fill-rule="nonzero">
-            <path
-              d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496"
-              opacity="0.100000001"
-            ></path>
-            <path
-              d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
-              opacity="0.100000001"
-            ></path>
-            <path
-              d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z"
-              id="Path-4"
-              opacity="0.200000003"
-            ></path>
-          </g>
-          <g transform="translate(-4.000000, 76.000000)" fill="#FFFFFF" fill-rule="nonzero">
-            <path
-              d="M0.457,34.035 C57.086,53.198 98.208,65.809 123.822,71.865 C181.454,85.495 234.295,90.29 272.033,93.459 C311.355,96.759 396.635,95.801 461.025,91.663 C486.76,90.01 518.727,86.372 556.926,80.752 C595.747,74.596 622.372,70.008 636.799,66.991 C663.913,61.324 712.501,49.503 727.605,46.128 C780.47,34.317 818.839,22.532 856.324,15.904 C922.689,4.169 955.676,2.522 1011.185,0.432 C1060.705,1.477 1097.39,3.129 1121.236,5.387 C1161.703,9.219 1208.621,17.821 1235.4,22.304 C1285.855,30.748 1354.351,47.432 1440.886,72.354 L1441.191,104.352 L1.121,104.031 L0.457,34.035 Z"
-            ></path>
-          </g>
-        </g>
-      </svg>
-    </div>
-    <section class="bg-white border-b py-8">
-      <div class="container max-w-5xl mx-auto m-8">
-        <h2 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
-          Get up to speed with using Mermaid diagrams along with real-world examples and expert tips
-          from the authors to facilitate a seamless development workflow
-        </h2>
-        <div class="w-full mb-4">
-          <div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
-        </div>
-        <div class="flex flex-wrap">
-          <div class="w-full sm:w-1/2 p-6 flex items-center">
-            <p class="text-3xl text-gray-800 font-normal leading-none mb-3">
-              Flowcharts is a diagram type that visualizes a process or an algorithm by showing the
-              steps in order, as well as the different paths the execution can take.
-            </p>
-          </div>
-          <div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
-            <img class="z-50" src="flowchart.png" />
-          </div>
-        </div>
-        <div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
-          <div class="w-full sm:w-1/2 p-6 mt-6">
-            <img class="z-50 w-full" style="" src="sequence-diagram.png" />
-          </div>
-          <div class="w-full sm:w-1/2 p-6 mt-6">
-            <div class="align-middle flex items-center">
-              <p class="text-3xl text-gray-800 font-normal leading-none mb-3">
-                Sequence diagrams lets you model and visualize interactions between different actors
-                or objects in a system, as well as the order of those interactions
-              </p>
-            </div>
-          </div>
-        </div>
-        <div class="flex flex-wrap">
-          <div class="w-full sm:w-1/2 p-6 flex items-center">
-            <p class="text-3xl text-gray-800 font-normal leading-none mb-3">
-              A class diagram is a graphical representation that is used to visualize and describe
-              an object-oriented system.
-            </p>
-          </div>
-          <div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
-            <img class="z-50" style="" src="class.png" />
-          </div>
-        </div>
-        <div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
-          <div class="w-full sm:w-1/2 p-6 mt-6">
-            <img class="z-50 w-full" style="" src="er.png" />
-          </div>
-          <div class="w-full sm:w-1/2 p-6 mt-6">
-            <div class="align-middle flex items-center">
-              <p class="text-3xl text-gray-800 font-normal leading-none mb-3">
-                An entity-relationship diagram is a graphical representation that is used to
-                visualize the different types of entities that exist within a system.
-              </p>
-            </div>
-          </div>
-        </div>
-        <div class="flex flex-wrap">
-          <div class="w-full sm:w-1/2 p-6 flex items-center">
-            <p class="text-3xl text-gray-800 font-normal leading-none mb-3">
-              Use State diagrams to model and document state machines, an abstract way of
-              representing a system or an algorithm.
-            </p>
-          </div>
-          <div class="w-full sm:w-1/2 p-6 flex justify-center items-center">
-            <img class="z-50" style="" src="state.png" />
-          </div>
-        </div>
-        <div class="flex flex-wrap flex-col-reverse sm:flex-row flex justify-center items-center">
-          <div class="w-full sm:w-1/2 p-6 mt-6">
-            <img class="z-50 w-full" style="" src="gantt.png" />
-          </div>
-          <div class="w-full sm:w-1/2 p-6 mt-6">
-            <div class="align-middle flex items-center">
-              <p class="text-3xl text-gray-800 font-normal leading-none mb-3">
-                A Gantt chart is a graphical representation that is used to visualize and describe
-                tasks (events or activities) over time.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-      <p class="text-3xl text-gray-800 font-normal leading-none mt-3 text-center">
-        These were a few of the diagrams supported by Mermaid.
-      </p>
-    </section>
-
-    <section class="bg-gray-100 border-b py-8">
-      <div class="container mx-auto flex flex-wrap max-w-5xl mx-auto m-8 pt-4 pb-12 px-8">
-        <h1 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
-          Book description
-        </h1>
-        <div class="w-full mb-4">
-          <p class="text-black mb-4">
-            Mermaid lets you represent diagrams using text and code which simplifies the maintenance
-            of complex diagrams. This is a great option for developers as they’re more familiar with
-            code, rather than special tools for generating diagrams. Besides, diagrams in code
-            simplify maintenance and ensure that the code is supported by version control systems.
-            In some cases, Mermaid makes refactoring support for name changes possible while also
-            enabling team collaboration for review distribution and updates.
-          </p>
-          <p class="text-black mb-4">
-            Developers working with any system will be able to put their knowledge to work with this
-            practical guide to using Mermaid for documentation. The book is also a great reference
-            for looking up the syntax for specific diagrams when authoring diagrams.
-          </p>
-          <p class="text-black mb-4">
-            You’ll start by getting up to speed with the importance of accurate and visual
-            documentation. Next, the book introduces Mermaid and establishes how to use it to create
-            effective documentation. By using different tools, editors, or a custom documentation
-            platform, you’ll also learn how to use Mermaid syntax for various diagrams. Later
-            chapters cover advanced configuration settings and theme options to manipulate your
-            diagram as per your needs.
-          </p>
-          <p class="text-black mb-4">
-            By the end of this Mermaid book, you’ll have become well-versed with the different types
-            of Mermaid diagrams and how they can be used in your workflows.
-          </p>
-        </div>
-      </div>
-    </section>
-    <section class="bg-white py-8">
-      <div class="container mx-auto px-2 pt-4 pb-12 text-gray-800">
-        <h1 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
-          What you will learn
-        </h1>
-        <div class="w-full mb-4">
-          <div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
-        </div>
-        <div class="flex flex-col sm:flex-row justify-center items-center pt-12 my-12 sm:my-4">
-          <div class="flex flex-col mx-4 rounded-lg bg-white mt-4 sm:-mt-6 shadow-lg z-10">
-            <div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow">
-              <ul class="w-full text-base font-bold px-4">
-                <li class="border-b py-4 px-4">
-                  Understand good and bad documentation, and the art of effective documentation
-                </li>
-                <li class="border-b py-4 px-4">
-                  Become well-versed with maintaining complex diagrams with ease
-                </li>
-                <li class="border-b py-4 px-4">
-                  Learn how to set up a custom documentation system
-                </li>
-                <li class="border-b py-4 px-4">
-                  Learn how to implement Mermaid diagrams in your workflows
-                </li>
-                <li class="border-b py-4 px-4">
-                  Understand how to set up themes for a Mermaid diagram for an entire site
-                </li>
-                <li class="border-b py-4 px-4">
-                  Discover how to draw different types of diagrams such as flowcharts, class
-                  diagrams, Gantt charts, and more
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-    <!-- Change the colour #f8fafc to match the previous section colour -->
-    <svg
-      class="wave-top"
-      viewBox="0 0 1439 147"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-    >
-      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g transform="translate(-1.000000, -14.000000)" fill-rule="nonzero">
-          <g class="wave" fill="#f8fafc">
-            <path
-              d="M1440,84 C1383.555,64.3 1342.555,51.3 1317,45 C1259.5,30.824 1206.707,25.526 1169,22 C1129.711,18.326 1044.426,18.475 980,22 C954.25,23.409 922.25,26.742 884,32 C845.122,37.787 818.455,42.121 804,45 C776.833,50.41 728.136,61.77 713,65 C660.023,76.309 621.544,87.729 584,94 C517.525,105.104 484.525,106.438 429,108 C379.49,106.484 342.823,104.484 319,102 C278.571,97.783 231.737,88.736 205,84 C154.629,75.076 86.296,57.743 0,32 L0,0 L1440,0 L1440,84 Z"
-            ></path>
-          </g>
-          <g transform="translate(1.000000, 15.000000)" fill="#FFFFFF">
-            <g
-              transform="translate(719.500000, 68.500000) rotate(-180.000000) translate(-719.500000, -68.500000) "
-            >
-              <path
-                d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496"
-                opacity="0.100000001"
-              ></path>
-              <path
-                d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
-                opacity="0.100000001"
-              ></path>
-              <path
-                d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z"
-                opacity="0.200000003"
-              ></path>
-            </g>
-          </g>
-        </g>
-      </g>
-    </svg>
-    <section class="container mx-auto text-center py-6 mb-12">
-      <h1 class="w-full my-2 text-5xl font-bold leading-tight text-center text-white p-shadow">
-        Purchase The Official Guide to Mermaid.js
-      </h1>
-      <div class="w-full mb-4">
-        <div class="h-1 mx-auto bg-white w-1/6 opacity-25 my-0 py-0 rounded-t"></div>
-      </div>
-      <h3 class="my-4 text-3xl leading-tight">
-        <p class="mb-4 p-shadow">Written by Knut Sveidqvist and Ashish Jain.</p>
-        <p class="p-shadow">
-          Knut is the creator of Mermaid and both authors are active core team members of the
-          Mermaid open-source project.
-        </p>
-      </h3>
-      <a
-        href="https://www.amazon.com/Official-Guide-Mermaid-js-beautiful-flowcharts-dp-1801078025/dp/1801078025/ref=mt_other?_encoding=UTF8&amp;me=&amp;qid=1628153965"
-      >
-        <button
-          style="background: #ffa41c; border: 1px solid #ff8f00"
-          class="mx-auto lg:mx-0 hover:underline bg-white text-gray-800 font-bold rounded-full my-6 py-4 px-8 shadow-lg focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out"
-        >
-          Purchase Now on Amazon
-        </button>
-      </a>
-    </section>
-    <!--Footer-->
-  </body>
-</html>
--- a/docs/landing/sequence-diagram.png
+++ b/docs/landing/sequence-diagram.png
--- a/docs/landing/state.png
+++ b/docs/landing/state.png
--- a/docs/mermaidCLI.md
+++ b/docs/mermaidCLI.md
@ -1,5 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
-
-# mermaid CLI
-
-mermaid CLI has been moved to [mermaid-cli](https://github.com/mermaid-js/mermaid-cli). Please read its documentation instead.
--- a/docs/misc/faq.md
+++ b/docs/misc/faq.md
@ -1,4 +1,8 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/misc/faq.md](../../packages/mermaid/src/docs/misc/faq.md).

 # Frequently Asked Questions

--- a/packages/mermaid/src/docs/integrations.md
+++ b/packages/mermaid/src/docs/integrations.md
@ -1,3 +1,9 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/misc/integrations.md](../../packages/mermaid/src/docs/misc/integrations.md).
+
 # Integrations

 The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications.
@ -161,7 +167,6 @@ They also serve as proof of concept, for the variety of things that can be built
 | Extensions for Mermaid   | -                                                                                                            | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | -                                                                                                                            | [🐙🔗](https://github.com/Stefan-S/mermaid-extension)                                                |
 | Chrome Diagrammer        | [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
 | Mermaid Diagrams         | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil)          | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
-| Mermaid Markdown         | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-markdown/mboeoikjijmjcjgpccghbcoegikliijg)          | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
 | Monkeys                  | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
 | Mermaid Previewer        | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |

--- a/docs/public/.nojekyll
+++ b/docs/public/.nojekyll
--- a/Show More
+++ b/Show More
				`@ -1 +0,0 @@`
				`# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit the corresponding file in packages/mermaid/src/docs.`