Draft release on master

Release/10.7.0

.eslintrc.cjs

@@ -49,8 +49,10 @@ module.exports = {
     'no-unused-vars': 'off',
     'cypress/no-async-tests': 'off',
     '@typescript-eslint/consistent-type-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'warn',
     '@typescript-eslint/no-floating-promises': 'error',
     '@typescript-eslint/no-misused-promises': 'error',
+    '@typescript-eslint/no-unused-vars': 'warn',
     '@typescript-eslint/ban-ts-comment': [
       'error',
       {

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -17,6 +17,9 @@ body:
         - Use a clear and concise title
         - Fill out the text fields with as much detail as possible.
         - Never be shy to give us screenshots and/or code samples. It will help!
+
+        There is a chance that the bug is already fixed in the git `develop` branch, but is not released yet. 
+        So please check in [Live Editor - Develop](https://develop.git.mermaid.live) before raising an issue.
   - type: textarea
     attributes:
       label: Description
@@ -43,7 +46,7 @@ body:
     attributes:
       label: Code Sample
       description: |-
-        If applicable, add the code sample or a link to the [Live Editor](https://mermaid.live).
+        If applicable, add the code sample or a link to the [Live Editor - Develop](https://develop.git.mermaid.live).
         Any text pasted here will be rendered as a Code block.
       render: text
   - type: textarea

.github/ISSUE_TEMPLATE/config.yml

@@ -7,8 +7,14 @@ contact_links:
     url: https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE
     about: Join our Community on Slack for Help and a casual chat.
   - name: Documentation
-    url: https://mermaid-js.github.io
+    url: https://mermaid.js.org
     about: Read our documentation for all that Mermaid.js can offer.
   - name: Live Editor
     url: https://mermaid.live
     about: Try the live editor to preview graphs in no time.
+  - name: Live Editor - Develop
+    url: https://develop.git.mermaid.live
+    about: Try unreleased changes in the develop branch.
+  - name: Live Editor - Next
+    url: https://next.git.mermaid.live
+    about: Try unreleased changes in the next branch.

.github/pr-labeler.yml

@@ -1,4 +1,22 @@
-'Type: Bug / Error': ['bug/*', fix/*]
-'Type: Enhancement': ['feature/*', 'feat/*']
-'Type: Other': ['other/*', 'chore/*', 'test/*', 'refactor/*']
-'Area: Documentation': ['docs/*']
+# yaml-language-server: $schema=https://raw.githubusercontent.com/release-drafter/release-drafter/master/schema.json
+autolabeler:
+  - label: 'Type: Bug / Error'
+    branch:
+      - '/bug\/.+/'
+      - '/fix\/.+/'
+  - label: 'Type: Enhancement'
+    branch:
+      - '/feature\/.+/'
+      - '/feat\/.+/'
+  - label: 'Type: Other'
+    branch:
+      - '/other\/.+/'
+      - '/chore\/.+/'
+      - '/test\/.+/'
+      - '/refactor\/.+/'
+  - label: 'Area: Documentation'
+    branch:
+      - '/docs\/.+/'
+
+template: |
+  This field is unused, as we only use this config file for labeling PRs.

.github/release-drafter.yml

@@ -25,8 +25,6 @@ categories:
 change-template: '- $TITLE (#$NUMBER) @$AUTHOR'
 sort-by: title
 sort-direction: ascending
-branches:
-  - develop
 exclude-labels:
   - 'Skip changelog'
 no-changes-template: 'This release contains minor changes and bugfixes.'

.github/workflows/build-docs.yml

@@ -16,12 +16,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: 18
@@ -29,7 +29,7 @@ jobs:
       - name: Install Packages
         run: pnpm install --frozen-lockfile
 
-      - name: Verify release verion
+      - name: Verify release version
         if: ${{ github.event_name == 'push' && (github.ref == 'refs/heads/master' || startsWith(github.ref, 'refs/heads/release')) }}
         run: pnpm --filter mermaid run docs:verify-version
 

.github/workflows/build.yml

@@ -19,13 +19,13 @@ jobs:
       matrix:
         node-version: [18.x]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: ${{ matrix.node-version }}

.github/workflows/check-readme-in-sync.yml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Check for difference in README.md and docs/README.md
         run: |

.github/workflows/checks.yml

@@ -15,7 +15,7 @@ jobs:
     name: check tests
     if: github.repository_owner == 'mermaid-js'
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - uses: testomatio/check-tests@stable

.github/workflows/codeql.yml

@@ -29,7 +29,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL

.github/workflows/dependency-review.yml

@@ -1,6 +1,6 @@
 # Dependency Review Action
 #
-# This Action will scan dependency manifest files that change as part of a Pull Reqest, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
+# This Action will scan dependency manifest files that change as part of a Pull Request, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
 #
 # Source repository: https://github.com/actions/dependency-review-action
 # Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement
@@ -15,6 +15,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout Repository'
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: 'Dependency Review'
         uses: actions/dependency-review-action@v3

.github/workflows/e2e-applitools.yml

@@ -28,15 +28,15 @@ jobs:
       - if: ${{ ! env.USE_APPLI }}
         name: Warn if not using Applitools
         run: |
-          echo "::error,title=Not using Applitols::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
+          echo "::error,title=Not using Applitools::APPLITOOLS_API_KEY is empty, disabling Applitools for this run."
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 

.github/workflows/e2e.yml

@@ -17,13 +17,13 @@ jobs:
         node-version: [18.x]
         containers: [1, 2, 3, 4]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 

.github/workflows/link-checker.yml

@@ -26,7 +26,7 @@ jobs:
       # lychee only uses the GITHUB_TOKEN to avoid rate-limiting
       contents: read
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Restore lychee cache
         uses: actions/cache@v3
@@ -36,7 +36,7 @@ jobs:
           restore-keys: cache-lychee-
 
       - name: Link Checker
-        uses: lycheeverse/lychee-action@v1.8.0
+        uses: lycheeverse/lychee-action@v1.9.1
         with:
           args: >-
             --config .github/lychee.toml

.github/workflows/lint.yml

@@ -20,13 +20,13 @@ jobs:
       matrix:
         node-version: [18.x]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: ${{ matrix.node-version }}

.github/workflows/pr-labeler-config-validator.yml

@@ -1,23 +0,0 @@
-name: Validate PR Labeler Configuration
-on:
-  push:
-    paths:
-      - .github/workflows/pr-labeler-config-validator.yml
-      - .github/workflows/pr-labeler.yml
-      - .github/pr-labeler.yml
-  pull_request:
-    paths:
-      - .github/workflows/pr-labeler-config-validator.yml
-      - .github/workflows/pr-labeler.yml
-      - .github/pr-labeler.yml
-
-jobs:
-  pr-labeler:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v3
-      - name: Validate Configuration
-        uses: Yash-Singh1/pr-labeler-config-validator@releases/v0.0.3
-        with:
-          configuration-path: .github/pr-labeler.yml

.github/workflows/pr-labeler.yml

@@ -1,13 +1,31 @@
 name: Apply labels to PR
 on:
   pull_request_target:
-    types: [opened]
+    # required for pr-labeler to support PRs from forks
+    # ===================== ⛔ ☢️ 🚫 ⚠️ Warning ⚠️ 🚫 ☢️ ⛔ =======================
+    # Be very careful what you put in this GitHub Action workflow file to avoid
+    # malicious PRs from getting access to the Mermaid-js repo.
+    #
+    # Please read the following first before reviewing/merging:
+    # - https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target
+    # - https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
+    types: [opened, reopened, synchronize]
+
+permissions:
+  contents: read
 
 jobs:
   pr-labeler:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read # read permission is required to read config file
+      pull-requests: write # write permission is required to label PRs
     steps:
       - name: Label PR
-        uses: TimonVS/pr-labeler-action@v4
+        uses: release-drafter/release-drafter@v5
+        with:
+          config-name: pr-labeler.yml
+          disable-autolabeler: false
+          disable-releaser: true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/publish-docs.yml

@@ -23,12 +23,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: 18

.github/workflows/release-draft.yml

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

.github/workflows/release-preview-publish.yml

@@ -9,14 +9,14 @@ jobs:
   publish-preview:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       - uses: pnpm/action-setup@v2
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: 18.x

.github/workflows/release-publish.yml

@@ -8,14 +8,14 @@ jobs:
   publish:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - uses: fregante/setup-git-user@v2
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js v18
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: 18.x

.github/workflows/test.yml

@@ -12,13 +12,13 @@ jobs:
       matrix:
         node-version: [18.x]
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
 
       - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           cache: pnpm
           node-version: ${{ matrix.node-version }}

.github/workflows/update-browserlist.yml

@@ -8,7 +8,7 @@ jobs:
   update-browser-list:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - run: npx browserslist@latest --update-db
       - name: Commit changes
         uses: EndBug/add-and-commit@v9

.lintstagedrc.mjs

@@ -6,6 +6,6 @@ export default {
     // https://prettier.io/docs/en/cli.html#--cache
     'prettier --write',
   ],
-  'cSpell.json': ['ts-node-esm scripts/fixCSpell.ts'],
+  'cSpell.json': ['tsx scripts/fixCSpell.ts'],
   '**/*.jison': ['pnpm -w run lint:jison'],
 };

.npmrc

@@ -1,2 +1,3 @@
+registry=https://registry.npmjs.org
 auto-install-peers=true
 strict-peer-dependencies=false

.prettierignore

@@ -10,3 +10,6 @@ stats
 .nyc_output
 # Autogenerated by `pnpm run --filter mermaid types:build-config`
 packages/mermaid/src/config.type.ts
+# Ignore the files creates in /demos/dev except for example.html
+demos/dev/**
+!/demos/dev/example.html

.vite/build.ts

@@ -117,6 +117,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
         output,
       },
     },
+    define: {
+      'import.meta.vitest': 'undefined',
+    },
     resolve: {
       extensions: [],
     },

.vite/jsonSchemaPlugin.ts

@@ -18,6 +18,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'er',
   'pie',
   'quadrantChart',
+  'xyChart',
   'requirement',
   'mindmap',
   'timeline',

.vscode/launch.json

@@ -18,7 +18,8 @@
       "type": "node",
       "request": "launch",
       "args": ["scripts/docs.cli.mts"],
-      "runtimeArgs": ["--loader", "ts-node/esm"],
+      // we'll need to change this to --import in Node.JS v20.6.0 and up
+      "runtimeArgs": ["--loader", "tsx/esm"],
       "cwd": "${workspaceRoot}/packages/mermaid",
       "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
       "smartStep": true,

CHANGELOG.md

@@ -68,7 +68,7 @@ try {
 
 ### Init deprecated and InitThrowsErrors removed
 
-The config passed to `init` was not being used eariler.
+The config passed to `init` was not being used earlier.
 It will now be used.
 The `init` function is deprecated and will be removed in the next major release.
 init currently works as a wrapper to `initialize` and `run`.
@@ -195,7 +195,7 @@ mermaid.run({
 - "Cannot activate" in sequenceDiagram [\#647](https://github.com/knsv/mermaid/issues/647)
 - Link \("click" statement\) in flowchart does not work in exported SVG [\#646](https://github.com/knsv/mermaid/issues/646)
 - How to pass styling [\#639](https://github.com/knsv/mermaid/issues/639)
-- The live editor cant show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
+- The live editor can't show seq diagram with notes for 8.0.0-alpha.3 [\#638](https://github.com/knsv/mermaid/issues/638)
 - import mermaid.css with ES6 + NPM [\#634](https://github.com/knsv/mermaid/issues/634)
 - Actor line cuts through other elements [\#633](https://github.com/knsv/mermaid/issues/633)
 - Graph TD line out of the picture \(left side\) [\#630](https://github.com/knsv/mermaid/issues/630)
@@ -504,7 +504,7 @@ mermaid.run({
 
 - Docs css: code hard to read [\#324](https://github.com/knsv/mermaid/issues/324)
 - About Markpad integration [\#323](https://github.com/knsv/mermaid/issues/323)
-- How to link backwords in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321)
+- How to link backwards in flowchat? [\#321](https://github.com/knsv/mermaid/issues/321)
 - Help with editor [\#310](https://github.com/knsv/mermaid/issues/310)
 - +1 [\#293](https://github.com/knsv/mermaid/issues/293)
 - Basic chart does not render on Chome, but does in Firefox [\#290](https://github.com/knsv/mermaid/issues/290)
@@ -619,7 +619,7 @@ mermaid.run({
 - render to png from the cli does not display the marker-end arrow heads [\#181](https://github.com/knsv/mermaid/issues/181)
 - Links in sequence diagrams [\#159](https://github.com/knsv/mermaid/issues/159)
 - comment characters `%%` cause parse error [\#141](https://github.com/knsv/mermaid/issues/141)
-- Add a reversed assymetric shape [\#124](https://github.com/knsv/mermaid/issues/124)
+- Add a reversed asymmetric shape [\#124](https://github.com/knsv/mermaid/issues/124)
 - Add syntax for double headed arrows [\#123](https://github.com/knsv/mermaid/issues/123)
 - Support for font-awesome [\#49](https://github.com/knsv/mermaid/issues/49)
 
@@ -659,7 +659,7 @@ mermaid.run({
 - Auto linewrap for notes in sequence diagrams [\#178](https://github.com/knsv/mermaid/issues/178)
 - Execute code after initialize [\#176](https://github.com/knsv/mermaid/issues/176)
 - Autoscaling for all diagram types [\#175](https://github.com/knsv/mermaid/issues/175)
-- Problem wit click event callback [\#174](https://github.com/knsv/mermaid/issues/174)
+- Problem with click event callback [\#174](https://github.com/knsv/mermaid/issues/174)
 - How to escape characters? [\#170](https://github.com/knsv/mermaid/issues/170)
 - it can not work [\#167](https://github.com/knsv/mermaid/issues/167)
 - UML Class diagram [\#154](https://github.com/knsv/mermaid/issues/154)
@@ -762,7 +762,7 @@ mermaid.run({
 - subgraph background is black in rendered flowchart PNG via CLI [\#121](https://github.com/knsv/mermaid/issues/121)
 - Integrate editor at https://github.com/naseer/mermaid-webapp [\#110](https://github.com/knsv/mermaid/issues/110)
 - Internet Explorer Support [\#99](https://github.com/knsv/mermaid/issues/99)
-- Assymetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82)
+- Asymmetric shapes not documented [\#82](https://github.com/knsv/mermaid/issues/82)
 - NoModificationAllowedError [\#23](https://github.com/knsv/mermaid/issues/23)
 - Improve arrows [\#3](https://github.com/knsv/mermaid/issues/3)
 
@@ -908,7 +908,7 @@ mermaid.run({
 
 - Question marks don't render properly with /dist/mermaid.full.min.js [\#30](https://github.com/knsv/mermaid/issues/30)
 - Error with some characters [\#25](https://github.com/knsv/mermaid/issues/25)
-- Provide parse function in browser widthout `require`? [\#21](https://github.com/knsv/mermaid/issues/21)
+- Provide parse function in browser without `require`? [\#21](https://github.com/knsv/mermaid/issues/21)
 - Better label text support [\#18](https://github.com/knsv/mermaid/issues/18)
 - Cap-cased words break parser [\#8](https://github.com/knsv/mermaid/issues/8)
 

CODE_OF_CONDUCT.md

@@ -59,8 +59,8 @@ representative at an online or offline event.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to the community leaders responsible for enforcement at security@mermaid.live
-.
+reported to the community leaders responsible for enforcement at <security@mermaid.live>.
+
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the

README.md

@@ -20,6 +20,9 @@ Generate diagrams from markdown-like text.
 <p align="center">
 <a href="./README.zh-CN.md">简体中文</a>
 </p>
+<p align="center">
+Try Live Editor previews of future releases: <a href="https://develop.git.mermaid.live/" title="Try the mermaid version from the develop branch.">Develop</a> | <a href="https://next.git.mermaid.live/" title="Try the mermaid version from the next branch.">Next</a>
+</p>
 
 <br>
 <br>
@@ -31,7 +34,7 @@ Generate diagrams from markdown-like text.
 [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
 [![NPM Downloads](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/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)
+[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
 
 <img src="./img/header.png" alt="" />
 
@@ -41,6 +44,22 @@ Generate diagrams from markdown-like text.
 
 <a href="https://mermaid-js.github.io/mermaid/landing/"><img src="https://github.com/mermaid-js/mermaid/blob/master/docs/intro/img/book-banner-post-release.jpg" alt="Explore Mermaid.js in depth, with real-world examples, tips & tricks from the creator... The first official book on Mermaid is available for purchase. Check it out!"></a>
 
+## Table of content
+
+<details>
+<summary>Expand contents</summary>
+
+- [About](#about)
+- [Examples](#examples)
+- [Release](#release)
+- [Related projects](#related-projects)
+- [Contributors](#contributors)
+- [Security and safe diagrams](#security-and-safe-diagrams)
+- [Reporting vulnerabilities](#reporting-vulnerabilities)
+- [Appreciation](#appreciation)
+
+</details>
+
 ## About
 
 <!-- <Main description>   -->
@@ -55,10 +74,10 @@ 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/config/Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations.md).
+For video tutorials, visit our [Tutorials](./docs/config/Tutorials.md) page.
+Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](./docs/ecosystem/integrations-community.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/ecosystem/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/ecosystem/integrations-community.md).
 
 For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/intro/getting-started.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md).
 

README.zh-CN.md

@@ -12,7 +12,7 @@ Mermaid
 <p>
 
 <p align="center">
-<a href="https://mermaid.live/"><b>Live Editor!</b></a>
+<a href="https://mermaid.live/"><b>实时编辑器!</b></a>
 </p>
 <p align="center">
  <a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 加入我们</a>
@@ -21,6 +21,10 @@ Mermaid
 <a href="./README.md">English</a>
 </p>
 
+<p align="center">
+尝试未来版本的实时编辑器预览: <a href="https://develop.git.mermaid.live/" title="尝试来自develop分支的mermaid版本。">Develop</a> | <a href="https://next.git.mermaid.live/" title="尝试来自next分支的mermaid版本。">Next</a>
+</p>
+
 <br>
 <br>
 
@@ -31,7 +35,7 @@ Mermaid
 [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid)
 [![NPM Downloads](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/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_)
+[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_)
 
 <img src="./img/header.png" alt="" />
 
@@ -53,7 +57,7 @@ Mermaid 是一个基于 Javascript 的图表绘制工具，通过解析类 Markd
 Mermaid 通过允许用户创建便于修改的图表来解决这一难题，它也可以作为生产脚本（或其他代码）的一部分。<br/>
 <br/>
 Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://mermaid.live/) 轻松创建详细的图表。<br/>
-你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
+你可以访问 [教程](./docs/config/Tutorials.md) 来查看 Live Editor 的视频教程，也可以查看 [Mermaid 的集成和使用](./docs/ecosystem/integrations-community.md) 这个清单来检查你的文档工具是否已经集成了 Mermaid 支持。
 
 如果想要查看关于 Mermaid 更详细的介绍及基础使用方式，可以查看 [入门指引](./docs/intro/getting-started.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md).
 

cSpell.json

@@ -26,6 +26,7 @@
     "città",
     "classdef",
     "codedoc",
+    "codemia",
     "colour",
     "commitlint",
     "cpettitt",
@@ -156,6 +157,7 @@
     "vitepress",
     "vueuse",
     "xlink",
+    "xychart",
     "yash",
     "yokozuna",
     "zenuml",

cypress/helpers/util.ts

@@ -10,7 +10,7 @@ interface CypressConfig {
 type CypressMermaidConfig = MermaidConfig & CypressConfig;
 
 interface CodeObject {
-  code: string;
+  code: string | string[];
   mermaid: CypressMermaidConfig;
 }
 
@@ -25,7 +25,7 @@ const batchId: string =
     : Cypress.env('CYPRESS_COMMIT') || Date.now().toString());
 
 export const mermaidUrl = (
-  graphStr: string,
+  graphStr: string | string[],
   options: CypressMermaidConfig,
   api: boolean
 ): string => {
@@ -82,7 +82,7 @@ export const urlSnapshotTest = (
 };
 
 export const renderGraph = (
-  graphStr: string,
+  graphStr: string | string[],
   options: CypressMermaidConfig = {},
   api = false
 ): void => {

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

@@ -571,4 +571,14 @@ class C13["With Città foreign language"]
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
   });
+  it('should render a simple class diagram with style definition', () => {
+    imgSnapshotTest(
+      `
+      classDiagram-v2
+        class Class10
+        style Class10 fill:#f9f,stroke:#333,stroke-width:4px
+        `,
+      { logLevel: 1, flowchart: { htmlLabels: false } }
+    );
+  });
 });

cypress/integration/rendering/classDiagram.spec.js

@@ -501,4 +501,16 @@ describe('Class diagram', () => {
         B : -methods()
       `);
   });
+
+  it('should handle notes with anchor tag having target attribute', () => {
+    renderGraph(
+      `classDiagram
+        class test { }
+        note for test "<a href='https://mermaid.js.org/' target="_blank"><code>note about mermaid</code></a>"`
+    );
+
+    cy.get('svg').then((svg) => {
+      cy.get('a').should('have.attr', 'target', '_blank').should('have.attr', 'rel', 'noopener');
+    });
+  });
 });

cypress/integration/rendering/conf-and-directives.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
+import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts';
 
 describe('Configuration and directives - nodes should be light blue', () => {
   it('No config - use default', () => {
@@ -206,8 +206,7 @@ graph TD
   describe('when rendering several diagrams', () => {
     it('diagrams should not taint later diagrams', () => {
       const url = 'http://localhost:9000/theme-directives.html';
-      cy.visit(url);
-      cy.matchImageSnapshot('conf-and-directives.spec-when-rendering-several-diagrams-diagram-1');
+      urlSnapshotTest(url, {});
     });
   });
 });

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

@@ -729,6 +729,18 @@ A ~~~ B
       {}
     );
   });
+
+  it('5064: Should render when subgraph child has links to outside node and subgraph', () => {
+    imgSnapshotTest(
+      `flowchart TB
+    Out --> In
+    subgraph Sub
+      In
+    end
+    Sub --> In`
+    );
+  });
+
   describe('Markdown strings flowchart (#4220)', () => {
     describe('html labels', () => {
       it('With styling and classes', () => {

cypress/integration/rendering/gantt.spec.js

@@ -520,7 +520,15 @@ describe('Gantt diagram', () => {
     );
   });
 
-  it('should render a gantt diagram with very large intervals, skipping excludes if interval > 5 years', () => {
+  // TODO: fix it
+  //
+  // This test is skipped deliberately
+  // because it fails and blocks our development pipeline
+  // It was added as an attempt to fix gantt performance issues
+  //
+  // https://github.com/mermaid-js/mermaid/issues/3274
+  //
+  it.skip('should render a gantt diagram with very large intervals, skipping excludes if interval > 5 years', () => {
     imgSnapshotTest(
       `gantt
         title A long Gantt Diagram
@@ -528,7 +536,6 @@ describe('Gantt diagram', () => {
         axisFormat   %m-%d
         tickInterval 1day
         excludes     weekends
-
         section Section
         A task           : a1, 9999-10-01, 30d
         Another task     : after a1, 20d

cypress/integration/rendering/gitGraph.spec.js

@@ -26,7 +26,7 @@ describe('Git Graph diagram', () => {
       `gitGraph
        commit id: "Normal Commit"
        commit id: "Reverse Commit" type: REVERSE
-       commit id: "Hightlight Commit" type: HIGHLIGHT
+       commit id: "Highlight Commit" type: HIGHLIGHT
       `,
       {}
     );
@@ -36,7 +36,7 @@ describe('Git Graph diagram', () => {
       `gitGraph
        commit id: "Normal Commit with tag" tag: "v1.0.0"
        commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
-       commit id: "Hightlight Commit" type: HIGHLIGHT  tag: "8.8.4"
+       commit id: "Highlight Commit" type: HIGHLIGHT  tag: "8.8.4"
       `,
       {}
     );
@@ -102,7 +102,7 @@ describe('Git Graph diagram', () => {
       {}
     );
   });
-  it('8: should render a simple gitgraph with more than 8 branchs &  overriding variables', () => {
+  it('8: should render a simple gitgraph with more than 8 branches &  overriding variables', () => {
     imgSnapshotTest(
       `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
         'gitBranchLabel0': '#ffffff',
@@ -358,7 +358,7 @@ gitGraph
       `gitGraph TB:
        commit id: "Normal Commit"
        commit id: "Reverse Commit" type: REVERSE
-       commit id: "Hightlight Commit" type: HIGHLIGHT
+       commit id: "Highlight Commit" type: HIGHLIGHT
       `,
       {}
     );
@@ -368,7 +368,7 @@ gitGraph
       `gitGraph TB:
        commit id: "Normal Commit with tag" tag: "v1.0.0"
        commit id: "Reverse Commit with tag" type: REVERSE tag: "RC_1"
-       commit id: "Hightlight Commit" type: HIGHLIGHT  tag: "8.8.4"
+       commit id: "Highlight Commit" type: HIGHLIGHT  tag: "8.8.4"
       `,
       {}
     );
@@ -434,7 +434,7 @@ gitGraph
       {}
     );
   });
-  it('22: should render a simple gitgraph with more than 8 branchs &  overriding variables | Vertical Branch', () => {
+  it('22: should render a simple gitgraph with more than 8 branches &  overriding variables | Vertical Branch', () => {
     imgSnapshotTest(
       `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
         'gitBranchLabel0': '#ffffff',
@@ -701,4 +701,129 @@ gitGraph TB:
       {}
     );
   });
+  it('34: should render a simple gitgraph with two branches from same commit', () => {
+    imgSnapshotTest(
+      `gitGraph
+      commit id:"1-abcdefg"
+      commit id:"2-abcdefg"
+      branch feature-001
+      commit id:"3-abcdefg"
+      commit id:"4-abcdefg"
+      checkout main
+      branch feature-002
+      commit id:"5-abcdefg"
+      checkout feature-001
+      merge feature-002
+      `,
+      {}
+    );
+  });
+  it('35: should render a simple gitgraph with two branches from same commit | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+      commit id:"1-abcdefg"
+      commit id:"2-abcdefg"
+      branch feature-001
+      commit id:"3-abcdefg"
+      commit id:"4-abcdefg"
+      checkout main
+      branch feature-002
+      commit id:"5-abcdefg"
+      checkout feature-001
+      merge feature-002
+      `,
+      {}
+    );
+  });
+  it('36: should render GitGraph with branch that is not used immediately', () => {
+    imgSnapshotTest(
+      `gitGraph LR:
+      commit id:"1-abcdefg"
+      branch x
+      checkout main
+      commit id:"2-abcdefg"
+      checkout x
+      commit id:"3-abcdefg"
+      checkout main
+      merge x
+      `,
+      {}
+    );
+  });
+  it('37: should render GitGraph with branch that is not used immediately | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+      commit id:"1-abcdefg"
+      branch x
+      checkout main
+      commit id:"2-abcdefg"
+      checkout x
+      commit id:"3-abcdefg"
+      checkout main
+      merge x
+      `,
+      {}
+    );
+  });
+  it('38: should render GitGraph with branch and sub-branch neither of which used immediately', () => {
+    imgSnapshotTest(
+      `gitGraph LR:
+      commit id:"1-abcdefg"
+      branch x
+      checkout main
+      commit id:"2-abcdefg"
+      checkout x
+      commit id:"3-abcdefg"
+      checkout main
+      merge x
+      checkout x
+      branch y
+      checkout x
+      commit id:"4-abcdefg"
+      checkout y
+      commit id:"5-abcdefg"
+      checkout x
+      merge y
+      `,
+      {}
+    );
+  });
+  it('39: should render GitGraph with branch and sub-branch neither of which used immediately | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+      commit id:"1-abcdefg"
+      branch x
+      checkout main
+      commit id:"2-abcdefg"
+      checkout x
+      commit id:"3-abcdefg"
+      checkout main
+      merge x
+      checkout x
+      branch y
+      checkout x
+      commit id:"4-abcdefg"
+      checkout y
+      commit id:"5-abcdefg"
+      checkout x
+      merge y
+      `,
+      {}
+    );
+  });
+  it('40: should render a simple gitgraph with cherry pick merge commit', () => {
+    imgSnapshotTest(
+      `gitGraph
+      commit id: "ZERO"
+      branch feature
+      branch release
+      checkout feature
+      commit id: "A"
+      commit id: "B"
+      checkout main
+      merge feature id: "M"
+      checkout release
+      cherry-pick id: "M" parent:"B"`
+    );
+  });
 });

cypress/integration/rendering/pie.spec.ts

@@ -44,7 +44,7 @@ describe('pie chart', () => {
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
-      expect(maxWidthValue).to.eq(984);
+      expect(maxWidthValue).to.be.within(590, 600); // depends on installed fonts: 596.2 on my PC, 597.5 on CI
     });
   });
 
@@ -59,7 +59,7 @@ describe('pie chart', () => {
     );
     cy.get('svg').should((svg) => {
       const width = parseFloat(svg.attr('width'));
-      expect(width).to.eq(984);
+      expect(width).to.be.within(590, 600); // depends on installed fonts: 596.2 on my PC, 597.5 on CI
       expect(svg).to.not.have.attr('style');
     });
   });

cypress/integration/rendering/quadrantChart.spec.js

@@ -160,4 +160,70 @@ describe('Quadrant Chart', () => {
     );
     cy.get('svg');
   });
+  it('should render x-axis labels in the center, if x-axis has two labels', () => {
+    imgSnapshotTest(
+      `
+  quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach --> High Reach
+    y-axis Low Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+    Campaign F: [0.35, 0.78]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render y-axis labels in the center, if y-axis has two labels', () => {
+    imgSnapshotTest(
+      `
+  quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Low Reach
+    y-axis Low Engagement --> High Engagement
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+    Campaign F: [0.35, 0.78]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('should render both axes labels on the left and bottom, if both axes have only one label', () => {
+    imgSnapshotTest(
+      `
+  quadrantChart
+    title Reach and engagement of campaigns
+    x-axis Reach -->
+    y-axis Engagement -->
+    quadrant-1 We should expand
+    quadrant-2 Need to promote
+    quadrant-3 Re-evaluate
+    quadrant-4 May be improved
+    Campaign A: [0.3, 0.6]
+    Campaign B: [0.45, 0.23]
+    Campaign C: [0.57, 0.69]
+    Campaign D: [0.78, 0.34]
+    Campaign E: [0.40, 0.34]
+    Campaign F: [0.35, 0.78]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
 });

cypress/integration/rendering/sequencediagram.spec.js

@@ -930,4 +930,36 @@ context('Sequence diagram', () => {
       });
     });
   });
+  context('render after error', () => {
+    it('should render diagram after fixing destroy participant error', () => {
+      cy.on('uncaught:exception', (err) => {
+        return false;
+      });
+
+      renderGraph([
+        `sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you ?
+    Bob->>Alice: Fine, thank you. And you?
+    create participant Carl
+    Alice->>Carl: Hi Carl!
+    create actor D as Donald
+    Carl->>D: Hi!
+    destroy Carl
+    Alice-xCarl: We are too many
+    destroy Bo
+    Bob->>Alice: I agree`,
+        `sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you ?
+    Bob->>Alice: Fine, thank you. And you?
+    create participant Carl
+    Alice->>Carl: Hi Carl!
+    create actor D as Donald
+    Carl->>D: Hi!
+    destroy Carl
+    Alice-xCarl: We are too many
+    destroy Bob
+    Bob->>Alice: I agree`,
+      ]);
+    });
+  });
 });

cypress/integration/rendering/timeline.spec.ts

@@ -57,7 +57,7 @@ describe('Timeline diagram', () => {
       {}
     );
   });
-  it('5: should render a simple timeline with directive overriden colors', () => {
+  it('5: should render a simple timeline with directive overridden colors', () => {
     imgSnapshotTest(
       ` %%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
               'cScale0': '#ff0000',

cypress/integration/rendering/xyChart.spec.js

@@ -0,0 +1,322 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+
+describe('XY Chart', () => {
+  it('should render the simplest possible chart', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        line [10, 30, 20]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Should render a complete chart', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        title "Sales Revenue"
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+  });
+  it('Should render a chart without title', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('y-axis title not required', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Should render a chart without y-axis with different range', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
+        line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('x axis title not required', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
+        line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Multiple plots can be rendered', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        line [23, 46, 77, 34]
+        line [45, 32, 33, 12]
+        bar [87, 54, 99, 85]
+        line [78, 88, 22, 4]
+        line [22, 29, 75, 33]
+        bar [52, 96, 35, 10]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Decimals and negative numbers are supported', () => {
+    imgSnapshotTest(
+      `
+      xychart-beta
+        y-axis -2.4 --> 3.5
+        line [+1.3, .6, 2.4, -.34]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render spark line with "plotReservedSpacePercent"', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        theme: dark
+        xyChart:
+          width: 200
+          height: 20
+          plotReservedSpacePercent: 100
+      ---
+      xychart-beta
+        line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render spark bar without displaying other property', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        theme: dark
+        xyChart:
+          width: 200
+          height: 20
+          xAxis:
+            showLabel: false
+            showTitle: false
+            showTick: false
+            showAxisLine: false
+          yAxis:
+            showLabel: false
+            showTitle: false
+            showTick: false
+            showAxisLine: false
+      ---
+      xychart-beta
+        bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Should use all the config from directive', () => {
+    imgSnapshotTest(
+      `
+      %%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5},  "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60  }}}%%
+      xychart-beta
+        title "Sales Revenue"
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Should use all the config from yaml', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        theme: forest
+        xyChart:
+          width: 1000
+          height: 600
+          titlePadding: 5
+          titleFontSize: 10
+          xAxis:
+            labelFontSize: 20
+            labelPadding: 10
+            titleFontSize: 30
+            titlePadding: 20
+            tickLength: 10
+            tickWidth: 5
+            axisLineWidth: 5
+          yAxis:
+            labelFontSize: 20
+            labelPadding: 10
+            titleFontSize: 30
+            titlePadding: 20
+            tickLength: 10
+            tickWidth: 5
+            axisLineWidth: 5
+          chartOrientation: horizontal
+          plotReservedSpacePercent: 60
+      ---
+      xychart-beta
+        title "Sales Revenue"
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render with show axis title false', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        xyChart:
+          xAxis:
+            showTitle: false
+          yAxis:
+            showTitle: false
+      ---
+      xychart-beta
+        title "Sales Revenue"
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render with show axis label false', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        xyChart:
+          xAxis:
+            showLabel: false
+          yAxis:
+            showLabel: false
+      ---
+      xychart-beta
+        title "Sales Revenue"
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render with show axis tick false', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        xyChart:
+          xAxis:
+            showTick: false
+          yAxis:
+            showTick: false
+      ---
+      xychart-beta
+        title "Sales Revenue"
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render with show axis line false', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        xyChart:
+          xAxis:
+            showAxisLine: false
+          yAxis:
+            showAxisLine: false
+      ---
+      xychart-beta
+        title "Sales Revenue"
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+  it('Render all the theme color', () => {
+    imgSnapshotTest(
+      `
+      ---
+      config:
+        themeVariables:
+          xyChart:
+            titleColor: "#ff0000"
+            backgroundColor: "#f0f8ff"
+            yAxisLabelColor: "#ee82ee"
+            yAxisTitleColor: "#7fffd4"
+            yAxisTickColor: "#87ceeb"
+            yAxisLineColor: "#ff6347"
+            xAxisLabelColor: "#7fffd4"
+            xAxisTitleColor: "#ee82ee"
+            xAxisTickColor: "#ff6347"
+            xAxisLineColor: "#87ceeb"
+            plotColorPalette: "#008000, #faba63"
+      ---
+      xychart-beta
+        title "Sales Revenue"
+        x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+        y-axis "Revenue (in $)" 4000 --> 11000
+        bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+        line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      `,
+      {}
+    );
+    cy.get('svg');
+  });
+});

cypress/platform/knsv2.html

@@ -58,8 +58,19 @@
   </head>
   <body>
     <pre id="diagram" class="mermaid">
-      classDiagram
-  `Class<img src=x onerror=alert(1)>` <|-- `Class2<img src=x onerror=alert(2)>`
+flowchart TB
+    C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z & A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8
+      ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+    C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z & A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8
+
+    </pre>
+    <pre id="diagram" class="mermaid2">
+    flowchart TB
+      A & A & A & A & A & A & A & A --->  C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z
+    </pre>
+    <pre id="diagram" class="mermaid2">
+    flowchart TB
+      A1 & A2 & A3 & A4 & A5 & A6 & A7 & A8 -->  C & D & E & F & G & H & I & J & K & L & M & N & O & P & Q & R & S & T & U & V & W & X & Y & Z
     </pre>
     <pre id="diagram" class="mermaid2">
 flowchart
@@ -439,6 +450,7 @@ mindmap
           messageFontFamily: 'courier',
         },
         fontSize: 16,
+        logLevel: 0,
       });
       function callback() {
         alert('It worked');

cypress/platform/marker_unique_id.html

@@ -42,7 +42,8 @@
     </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      mermaid.initialize({ startOnLoad: true, logLevel: 0 });
+      mermaid.initialize({ startOnLoad: false, logLevel: 0 });
+      await mermaid.run();
 
       if (window.Cypress) {
         window.rendered = true;

cypress/platform/theme-directives.html

@@ -1,15 +1,6 @@
 <html>
   <head>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
-      rel="stylesheet"
-    />
     <style>
       body {
         /* background: rgb(221, 208, 208); */
@@ -122,26 +113,21 @@
 
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
-      mermaid.parseError = function (err, hash) {
-        // console.error('Mermaid error: ', err);
-      };
+
       mermaid.initialize({
-        // theme: 'dark',
-        // theme: 'dark',
-        // arrowMarkerAbsolute: true,
-        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,
-        // flowchart: { useMaxWidth: true },
         graph: { curve: 'cardinal', htmlLabels: false },
-        // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
-        // sequenceDiagram: { actorMargin: 300 } // deprecated
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
         securityLevel: 'strict',
+        startOnLoad: false,
       });
-      function callback() {
-        alert('It worked');
+
+      await mermaid.run();
+
+      if (window.Cypress) {
+        window.rendered = true;
       }
     </script>
   </body>

demos/c4context.html

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

demos/flowchart.html

@@ -22,7 +22,7 @@
     ---
     graph LR
       accTitle: This is a complicated flow
-      accDescr: This is the descriptoin for the complicated flow.
+      accDescr: This is the description for the complicated flow.
 
     sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
 

demos/git.html

@@ -14,30 +14,364 @@
   </head>
 
   <body>
-    <h1>Git diagram demo</h1>
+    <h1>Git graph demo</h1>
+    <h2>Simple "branch and merge" graph</h2>
     <pre class="mermaid">
     ---
-    title: Simple Git diagram
+    title: Simple "branch and merge" (left-to-right)
     ---
-    gitGraph:
-    options
-    {
-    "nodeSpacing": 50,
-    "nodeRadius": 5
-    }
-    end
-    branch master
+    gitGraph LR:
     commit
     branch newbranch
     checkout newbranch
     commit
+    checkout main
+    merge newbranch
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Simple "branch and merge" (top-to-bottom)
+    ---
+    gitGraph TB:
     commit
-    checkout master
+    branch newbranch
+    checkout newbranch
     commit
+    checkout main
+    merge newbranch
+    </pre>
+    <h2>Continuous development graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Continuous development (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Continuous development (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    </pre>
+    <h2>Merge feature to advanced main graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Merge feature to advanced main (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit
+    checkout main
     commit
     merge newbranch
     </pre>
-
+    <pre class="mermaid">
+    ---
+    title: Merge feature to advanced main (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit
+    checkout main
+    commit
+    merge newbranch
+    </pre>
+    <h2>Two-way merges</h2>
+    <pre class="mermaid">
+    ---
+    title: Two-way merges (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    commit
+    checkout develop
+    merge main
+    commit
+    checkout main
+    merge develop
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Two-way merges (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    commit
+    checkout develop
+    merge main
+    commit
+    checkout main
+    merge develop
+    </pre>
+    <h2>Cherry-pick from branch graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Cherry-pick from branch (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Cherry-pick from branch (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+    </pre>
+    <h2>Cherry-pick from main graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Cherry-pick from main (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit id:"A"
+    checkout develop
+    commit
+    cherry-pick id: "A"
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Cherry-pick from main (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit id:"A"
+    checkout develop
+    commit
+    cherry-pick id: "A"
+    </pre>
+    <h2>Cherry-pick then merge graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Cherry-pick then merge (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+    merge newbranch
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Cherry-pick then merge (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
+    commit
+    checkout main
+    cherry-pick id: "Pick me"
+    merge newbranch
+    </pre>
+    <h2>Merge from main onto undeveloped branch graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Merge from main onto undeveloped branch (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    merge main
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Merge from main onto undeveloped branch (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    merge main
+    </pre>
+    <h2>Merge from main onto developed branch graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Merge from main onto developed branch (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    commit
+    merge main
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Merge from main onto developed branch (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    branch develop
+    commit
+    checkout main
+    commit
+    checkout develop
+    commit
+    merge main
+    </pre>
+    <h2>Two branches from same commit graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Two branches from same commit (left-to-right)
+    ---
+    gitGraph LR:
+    commit
+    commit
+    branch feature-001
+    commit
+    commit
+    checkout main
+    branch feature-002
+    commit
+    checkout feature-001
+    merge feature-002
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Two branches from same commit (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit
+    commit
+    branch feature-001
+    commit
+    commit
+    checkout main
+    branch feature-002
+    commit
+    checkout feature-001
+    merge feature-002
+    </pre>
+    <h2>Three branches and a cherry-pick from each graph</h2>
+    <pre class="mermaid">
+    ---
+    title: Three branches and a cherry-pick from each (left-to-right)
+    ---
+    gitGraph LR:
+    commit id: "ZERO"
+    branch develop
+    commit id:"A"
+    checkout main
+    commit id:"ONE"
+    checkout develop
+    commit id:"B"
+    branch featureA
+    commit id:"FIX"
+    commit id: "FIX-2"
+    checkout main
+    commit id:"TWO"
+    cherry-pick id:"A"
+    commit id:"THREE"
+    cherry-pick id:"FIX"
+    checkout develop
+    commit id:"C"
+    merge featureA
+    </pre>
+    <pre class="mermaid">
+    ---
+    title: Three branches and a cherry-pick from each (top-to-bottom)
+    ---
+    gitGraph TB:
+    commit id: "ZERO"
+    branch develop
+    commit id:"A"
+    checkout main
+    commit id:"ONE"
+    checkout develop
+    commit id:"B"
+    branch featureA
+    commit id:"FIX"
+    commit id: "FIX-2"
+    checkout main
+    commit id:"TWO"
+    cherry-pick id:"A"
+    commit id:"THREE"
+    cherry-pick id:"FIX"
+    checkout develop
+    commit id:"C"
+    merge featureA
+    </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       const ALLOWED_TAGS = [

demos/index.html

@@ -60,6 +60,9 @@
       <li>
         <h2><a href="./quadrantchart.html">Quadrant charts</a></h2>
       </li>
+      <li>
+        <h2><a href="./xychart.html">XY charts</a></h2>
+      </li>
       <li>
         <h2><a href="./requirements.html">Requirements</a></h2>
       </li>

demos/requirements.html

@@ -17,7 +17,7 @@
     <h1>Requirement diagram demos</h1>
     <pre class="mermaid">
 	requirementDiagram
-	  accTitle: Requirments demo in black and white
+	  accTitle: Requirements demo in black and white
 		accDescr: A series of requirement boxes showing relationships among them. Has meaningless task names
 
 	requirement test_req {

demos/sankey.html

@@ -33,6 +33,7 @@
       ---
       config:
         sankey:
+          useMaxWidth: true
           showValues: false
           width: 1200
           height: 600

demos/state.html

@@ -183,7 +183,7 @@
     </pre>
     <hr />
 
-    <h2>Compsite states can link to themselves</h2>
+    <h2>Composite states can link to themselves</h2>
     <pre class="mermaid">
       stateDiagram-v2
             state Active {
@@ -199,7 +199,7 @@
       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.
+      S1 --> S3: This transition description uses \na newline character\nto create multiple\nlines.
 
     </pre>
     <hr />

demos/xychart.html

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>XY Charts demos</h1>
+    <pre class="mermaid">
+    xychart-beta
+    title "Sales Revenue (in $)"
+    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+    y-axis "Revenue (in $)" 4000 --> 11000
+    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    </pre>
+    <hr />
+    <h1>XY Charts horizontal</h1>
+    <pre class="mermaid">
+    xychart-beta horizontal
+    title "Basic xychart"
+    x-axis "this is x axis" [category1, "category 2", category3, category4]
+    y-axis yaxisText 10 --> 150
+    bar "sample bat" [52, 96, 35, 10]
+    line [23, 46, 75, 43]
+    </pre>
+    <hr />
+    <h1>XY Charts only lines and bar</h1>
+    <pre class="mermaid">
+    xychart-beta
+    line [23, 46, 77, 34]
+    line [45, 32, 33, 12]
+    line [87, 54, 99, 85]
+    line [78, 88, 22, 4]
+    line [22, 29, 75, 33]
+    bar [52, 96, 35, 10]
+    </pre>
+
+    <hr />
+    <h1>XY Charts with +ve and -ve numbers</h1>
+    <pre class="mermaid">
+    xychart-beta
+    line [+1.3, .6, 2.4, -.34]
+    </pre>
+
+    <h1>XY Charts Bar with multiple category</h1>
+    <pre class="mermaid">
+    xychart-beta
+    title "Basic xychart with many categories"
+    x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
+    y-axis yaxisText 10 --> 150
+    bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
+    </pre>
+
+    <h1>XY Charts line with multiple category</h1>
+    <pre class="mermaid">
+    xychart-beta
+    title "Line chart with many category"
+    x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
+    y-axis yaxisText 10 --> 150
+    line "sample line" [52, 96, 35, 10, 87, 34, 67, 99]
+    </pre>
+
+    <h1>XY Charts category with large text</h1>
+    <pre class="mermaid">
+    xychart-beta
+    title "Basic xychart with many categories with category overlap"
+    x-axis "this is x axis" [category1, "Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.", category3, category4, category5, category6, category7]
+    y-axis yaxisText 10 --> 150
+    bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
+    </pre>
+
+    <h1>sparkline demo</h1>
+    <pre class="mermaid">
+---
+config:
+  theme: dark
+  xyChart:
+    width: 200
+    height: 20
+    plotReservedSpacePercent: 100
+---
+    xychart-beta
+      line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
+    </pre>
+
+    <h1>sparkBar demo</h1>
+    <pre class="mermaid">
+---
+config:
+  theme: dark
+  xyChart:
+    width: 200
+    height: 20
+    plotReservedSpacePercent: 100
+---
+    xychart-beta
+      bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
+    </pre>
+
+    <h1>XY Charts demos with all configs</h1>
+    <pre class="mermaid">
+---
+config:
+  theme: forest
+  xyChart:
+    width: 1000
+    height: 600
+    titlePadding: 5
+    titleFontSize: 10
+    xAxis:
+      labelFontSize: 20
+      labelPadding: 10
+      titleFontSize: 30
+      titlePadding: 20
+      tickLength: 10
+      tickWidth: 5
+      axisLineWidth: 5
+    yAxis:
+      labelFontSize: 20
+      labelPadding: 10
+      titleFontSize: 30
+      titlePadding: 20
+      tickLength: 10
+      tickWidth: 5
+      axisLineWidth: 5
+    chartOrientation: horizontal
+    plotReservedSpacePercent: 60
+---
+    xychart-beta
+      title "Sales Revene"
+      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+      y-axis "Revenue (in $)" 4000 --> 11000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+
+    </pre>
+    <h1>XY Charts demos with all theme config</h1>
+    <pre class="mermaid">
+---
+config:
+  themeVariables:
+    xyChart:
+      titleColor: "#ff0000"
+      backgroundColor: "#f0f8ff"
+      yAxisLabelColor: "#ee82ee"
+      yAxisTitleColor: "#7fffd4"
+      yAxisTickColor: "#87ceeb"
+      yAxisLineColor: "#ff6347"
+      xAxisLabelColor: "#7fffd4"
+      xAxisTitleColor: "#ee82ee"
+      xAxisTickColor: "#ff6347"
+      xAxisLineColor: "#87ceeb"
+      plotColorPalette: "#008000, #faba63"
+---
+    xychart-beta
+      title "Sales Revene"
+      x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+      y-axis "Revenue (in $)" 4000 --> 11000
+      bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+      line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+
+    </pre>
+    <hr />
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      mermaid.initialize({
+        theme: 'default',
+        logLevel: 3,
+        securityLevel: 'loose',
+      });
+    </script>
+  </body>
+</html>

docker-compose.yml

@@ -1,7 +1,7 @@
 version: '3.9'
 services:
   mermaid:
-    image: node:18.17.1-alpine3.18
+    image: node:18.19.0-alpine3.18
     stdin_open: true
     tty: true
     working_dir: /mermaid

docs/community/questions-and-suggestions.md

@@ -10,9 +10,8 @@
 
 ## First search to see if someone has already asked (and hopefully been answered) or suggested the same thing.
 
-- Search in Discussions
-- Search in open Issues
-- Search in closed Issues
+- [Search in Discussions](https://github.com/orgs/mermaid-js/discussions)
+- [Search in Issues (Open & Closed)](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue)
 
 If you find an open issue or discussion thread that is similar to your question but isn't answered, you can let us know that you are also interested in it.
 Use the GitHub reactions to add a thumbs-up to the issue or discussion thread.

docs/config/accessibility.md

@@ -97,7 +97,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam
   graph LR
       accTitle: Big Decisions
       accDescr: Bob's Burgers process for making big decisions
-      A[Identify Big Descision] --> B{Make Big Decision}
+      A[Identify Big Decision] --> B{Make Big Decision}
       B --> D[Be done]
 ```
 
@@ -105,7 +105,7 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam
   graph LR
       accTitle: Big Decisions
       accDescr: Bob's Burgers process for making big decisions
-      A[Identify Big Descision] --> B{Make Big Decision}
+      A[Identify Big Decision] --> B{Make Big Decision}
       B --> D[Be done]
 ```
 
@@ -137,7 +137,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
         for making very, very big decisions.
         This is actually a very simple flow: identify the big decision and then make the big decision.
          }
-      A[Identify Big Descision] --> B{Make Big Decision}
+      A[Identify Big Decision] --> B{Make Big Decision}
       B --> D[Be done]
 ```
 
@@ -149,7 +149,7 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
         for making very, very big decisions.
         This is actually a very simple flow: identify the big decision and then make the big decision.
          }
-      A[Identify Big Descision] --> B{Make Big Decision}
+      A[Identify Big Decision] --> B{Make Big Decision}
       B --> D[Be done]
 ```
 

docs/config/configuration.md

@@ -10,8 +10,8 @@ When mermaid starts, configuration is extracted to determine a configuration to
 
 - The default configuration
 - Overrides at the site level are set by the initialize call, and will be applied to all diagrams in the site/app. The term for this is the **siteConfig**.
-- Frontmatter (v\<MERMAID_RELEASE_VERSION>+) - diagram authors can update select configuration parameters in the frontmatter of the diagram. These are applied to the render config.
-- Directives (Deprecated by Frontmatter) - diagram authors can update select configuration parameters directly in the diagram code via directives. These are applied to the render config.
+- Frontmatter (v10.5.0+) - diagram authors can update selected configuration parameters in the frontmatter of the diagram. These are applied to the render config.
+- Directives (Deprecated by Frontmatter) - diagram authors can update selected configuration parameters directly in the diagram code via directives. These are applied to the render config.
 
 **The render config** is configuration that is used when rendering by applying these configurations.
 

docs/config/directives.md

@@ -7,7 +7,7 @@
 # Directives
 
 > **Warning**
-> Directives are deprecated from v\<MERMAID_RELEASE_VERSION>. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details.
+> Directives are deprecated from v10.5.0. Please use the `config` key in frontmatter to pass configuration. See [Configuration](./configuration.md) for more details.
 
 ## Directives
 

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

@@ -16,4 +16,4 @@
 
 #### Defined in
 
-[mermaidAPI.ts:59](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L59)
+[mermaidAPI.ts:60](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L60)

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

@@ -39,7 +39,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
 
 #### Defined in
 
-[mermaidAPI.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L79)
+[mermaidAPI.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L80)
 
 ---
 
@@ -51,4 +51,4 @@ The svg code for the rendered graph.
 
 #### Defined in
 
-[mermaidAPI.ts:69](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L69)
+[mermaidAPI.ts:70](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L70)

docs/config/setup/modules/defaultConfig.md

@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:268](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L268)
+[defaultConfig.ts:272](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L272)
 
 ---
 

docs/config/setup/modules/mermaidAPI.md

@@ -25,7 +25,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 #### Defined in
 
-[mermaidAPI.ts:63](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L63)
+[mermaidAPI.ts:64](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L64)
 
 ## Variables
 
@@ -96,7 +96,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:641](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L641)
+[mermaidAPI.ts:608](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L608)
 
 ## Functions
 
@@ -127,7 +127,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:299](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L299)
+[mermaidAPI.ts:263](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L263)
 
 ---
 
@@ -153,7 +153,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:245](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L245)
+[mermaidAPI.ts:209](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L209)
 
 ---
 
@@ -178,7 +178,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:175](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L175)
+[mermaidAPI.ts:139](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L139)
 
 ---
 
@@ -201,7 +201,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L222)
+[mermaidAPI.ts:186](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L186)
 
 ---
 
@@ -228,47 +228,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:160](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L160)
-
----
-
-### decodeEntities
-
-▸ **decodeEntities**(`text`): `string`
-
-#### Parameters
-
-| Name   | Type     | Description        |
-| :----- | :------- | :----------------- |
-| `text` | `string` | text to be decoded |
-
-#### Returns
-
-`string`
-
-#### Defined in
-
-[mermaidAPI.ts:146](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L146)
-
----
-
-### encodeEntities
-
-▸ **encodeEntities**(`text`): `string`
-
-#### Parameters
-
-| Name   | Type     | Description        |
-| :----- | :------- | :----------------- |
-| `text` | `string` | text to be encoded |
-
-#### Returns
-
-`string`
-
-#### Defined in
-
-[mermaidAPI.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L117)
+[mermaidAPI.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L124)
 
 ---
 
@@ -294,7 +254,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:276](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L276)
+[mermaidAPI.ts:240](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L240)
 
 ---
 
@@ -319,4 +279,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:349](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L349)
+[mermaidAPI.ts:313](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L313)

docs/ecosystem/integrations-community.md

@@ -2,53 +2,63 @@
 >
 > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
 >
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/integrations.md](../../packages/mermaid/src/docs/ecosystem/integrations.md).
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/integrations-community.md](../../packages/mermaid/src/docs/ecosystem/integrations-community.md).
 
 # Integrations
 
-## Recommendations
+## Official integration
 
-### File Extension
+### Mermaid Chart
 
-Applications that support mermaid files [SHOULD](https://datatracker.ietf.org/doc/html/rfc2119#section-3) use `.mermaid` or `.mmd` file extensions.
+Mermaid Chart is built by the team behind Mermaid JS.
 
-### MIME Type
+For more details, visit the [Mermaid Chart page](./mermaid-chart.md), or visit the [Mermaid Chart website](https://www.mermaidchart.com) .
 
-The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for mermaid media is `text/vnd.mermaid`.
+## Community integrations
 
-[IANA](https://www.iana.org/) recognition pending.
+We're excited about the growth of the Mermaid community, and the number of plugins and integrations that have been created by the community.
 
----
+See the list below of community plugins and integrations created with Mermaid.
 
-The following list is a compilation of different integrations and plugins that allow the rendering of mermaid definitions within other applications.
+> **Note**
+> A ✅ indicates Native support for Mermaid on the respective platform.
 
-They also serve as proof of concept, for the variety of things that can be built with mermaid.
+To add an integration to this list, see the [Integrations - create page](./integrations-create.md).
 
-## Productivity
+### Productivity tools
 
-- [GitHub](https://github.com) (**Native support**)
-  - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) (**Native support**)
+- [GitHub](https://github.com) ✅
+  - [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅
   - [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
   - [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
   - [GitHub Writer](https://github.com/ckeditor/github-writer)
-- [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**)
-- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) (**Native support**)
-- [Deepdwn](https://billiam.itch.io/deepdwn) (**Native support**)
-- [Joplin](https://joplinapp.org) (**Native support**)
-- [Slab](https://slab.com) (**Native support**)
-- [Swimm](https://swimm.io) (**Native support**)
-- [Notion](https://notion.so) (**Native support**)
-- [Observable](https://observablehq.com/@observablehq/mermaid) (**Native support**)
-- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) (**Native support**)
+- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
+- [Gitea](https://gitea.io) ✅
+- [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) ✅
+- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
+- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
+- [Deepdwn](https://billiam.itch.io/deepdwn) ✅
+- [Joplin](https://joplinapp.org) ✅
+- [Slab](https://slab.com) ✅
+- [Swimm](https://swimm.io) ✅
+- [Notion](https://notion.so) ✅
+- [Observable](https://observablehq.com/@observablehq/mermaid) ✅
+- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
+- [NotesHub](https://noteshub.app) ✅
 - [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**)
+- [LiveBook](https://livebook.dev) ✅
 - [Atlassian Products](https://www.atlassian.com)
+  - [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
+  - [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
+  - [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
+  - [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
+  - [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
+  - [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
   - [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
   - [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)
@@ -57,15 +67,20 @@ They also serve as proof of concept, for the variety of things that can be built
   - [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/)
+- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
 - [mermerd](https://github.com/KarnerTh/mermerd)
 - Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
+- Codemia [a tool to practice system design problems](https://codemia.io)
 
-## CRM/ERP/Similar
+### CRM/ERP
+
+Customer Relationship Management/Enterprise Resource Planning
 
 - [coreBOS](https://blog.corebos.org/blog/december2019)
 
-## Blogs
+### Blogging
+
+Blogging frameworks and platforms
 
 - [WordPress](https://wordpress.org)
   - [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
@@ -77,7 +92,9 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Nextra](https://nextra.site/)
   - [Mermaid](https://nextra.site/docs/guide/mermaid)
 
-## CMS
+### CMS/ECM
+
+Content Management Systems/Enterprise Content Management
 
 - [VitePress](https://vitepress.vuejs.org/)
   - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
@@ -87,7 +104,9 @@ They also serve as proof of concept, for the variety of things that can be built
   - [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
   - [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
 
-## Communication
+### Communication
+
+Communication tools and platforms
 
 - [Discourse](https://discourse.org)
   - [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid)
@@ -97,9 +116,13 @@ They also serve as proof of concept, for the variety of things that can be built
   - [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
 - [NodeBB](https://nodebb.org)
   - [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
+- [Slack](https://slack.com)
+  - [Mermaid for Slack](https://github.com/JackuB/mermaid-for-slack)
 
-## Wikis
+### Wikis
 
+- [PmWiki](https://www.pmwiki.org)
+  - [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs)
 - [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)
@@ -114,7 +137,7 @@ They also serve as proof of concept, for the variety of things that can be built
   - [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
+### Editor Plugins
 
 - [VS Code](https://code.visualstudio.com/)
   - [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
@@ -130,7 +153,6 @@ They also serve as proof of concept, for the variety of things that can be built
   - [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 _(Atom has been [archived.](https://github.blog/2022-06-08-sunsetting-atom/))_
   - [Markdown Preview Enhanced](https://github.com/shd101wyy/markdown-preview-enhanced)
@@ -165,14 +187,17 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Standard Notes](https://standardnotes.com/)
   - [sn-mermaid](https://github.com/nienow/sn-mermaid)
 
-## Document Generation
+### Document Generation
 
+- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
+- [Unison programming language](https://www.unison-lang.org/docs/usage-topics/documentation/) ✅
+- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
 - [Sphinx](https://www.sphinx-doc.org/en/master/)
   - [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
 - [remark](https://remark.js.org/)
   - [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
 - [rehype](https://github.com/rehypejs/rehype)
-  - [rehype-mermaidjs](https://github.com/remcohaszing/rehype-mermaidjs)
+  - [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid)
 - [Gatsby](https://www.gatsbyjs.com/)
   - [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
 - [JSDoc](https://jsdoc.app/)
@@ -182,15 +207,16 @@ They also serve as proof of concept, for the variety of things that can be built
   - [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)
+- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) ✅
 - [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)
 - [Quarto](https://quarto.org/)
-- [Typora](https://typora.io/) ([Native support](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid))
+- [Typora](https://typora.io/) ✅
+  - [See docs](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid)
 
-## Browser Extensions
+### Browser Extensions
 
 | Name                     | Chrome Web Store                                                                                             | Firefox Add-ons                                                                | Opera                                                                          | Edge                                                                                                                         | Source/Repository                                                                                    |
 | ------------------------ | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
@@ -205,7 +231,7 @@ They also serve as proof of concept, for the variety of things that can be built
 | Monkeys                  | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
 | Mermaid Previewer        | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl)         | -                                                                              | -                                                                              | -                                                                                                                            | -                                                                                                    |
 
-## Other
+### Other
 
 - [Jekyll](https://jekyllrb.com/)
   - [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
@@ -220,6 +246,6 @@ They also serve as proof of concept, for the variety of things that can be built
 - [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)
-- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io)
-  - [ui.mermaid(...)](https://nicegui.io/reference#mermaid_diagrams)
-  - [ui.markdown(..., extras=\['mermaid'\])](https://nicegui.io/reference#markdown_element)
+- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io) ✅
+  - [ui.mermaid(...)](https://nicegui.io/documentation/section_text_elements#markdown_element)
+  - [ui.markdown(..., extras=\['mermaid'\])](https://nicegui.io/documentation/section_text_elements#mermaid_diagrams)

docs/ecosystem/integrations-create.md

@@ -0,0 +1,31 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/integrations-create.md](../../packages/mermaid/src/docs/ecosystem/integrations-create.md).
+
+# Integrations - create
+
+## Recommendations
+
+Below are recommendations for creating plugins and integrations with Mermaid.
+
+### File Extension
+
+Applications that support Mermaid files [SHOULD](https://datatracker.ietf.org/doc/html/rfc2119#section-3) use `.mermaid` or `.mmd` file extensions.
+
+### MIME Type
+
+The recommended [MIME type](https://www.iana.org/assignments/media-types/media-types.xhtml) for Mermaid media is `text/vnd.mermaid`.
+
+Currently pending [IANA](https://www.iana.org/) recognition.
+
+## Showcase
+
+### Mermaid Slack workspace
+
+We would love to see what you create with Mermaid. Please share your creations with us in our [Slack](https://join.slack.com/t/mermaid-talk/shared_invite/zt-22p2r8p9y-qiyP1H38GjFQ6S6jbBkOxQ) workspace [#community-showcase](https://mermaid-talk.slack.com/archives/C05NK37LT40) channel.
+
+### Add to Mermaid Ecosystem
+
+If you have a plugin or integration that you'd like to add to our [Community integrations](/ecosystem/integrations-community) list, please [open a pull request](https://github.com/mermaid-js/mermaid).

docs/ecosystem/mermaid-chart.md

@@ -0,0 +1,54 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/mermaid-chart.md](../../packages/mermaid/src/docs/ecosystem/mermaid-chart.md).
+
+# Mermaid Chart
+
+<br />
+
+<a href="https://www.producthunt.com/posts/mermaid-chart?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-mermaid&#0045;chart" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=416671&theme=light" alt="Mermaid&#0032;Chart - A&#0032;smarter&#0032;way&#0032;to&#0032;create&#0032;diagrams | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+
+## About
+
+[Mermaid Chart](https://www.mermaidchart.com) was born out of the Mermaid open source project and was founded by Knut Sveidqvist together with Open Core Ventures. The lead developers from Mermaid have joined the company and there is a strong connection between the project we all love and Mermaid Chart. Mermaid Chart brings resources to the open source development of Mermaid and makes it possible to work with Mermaid professionally.
+
+## Features
+
+- **Editor** - A web based editor for creating and editing Mermaid diagrams.
+
+- **Presentation** - A presentation mode for viewing Mermaid diagrams in a slideshow format.
+
+- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro plan).
+
+- **Plugins** - A plugin system for extending the functionality of Mermaid.
+
+  Plugins are available for:
+
+  - [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt)
+  - [JetBrains IDE](https://plugins.jetbrains.com/plugin/23043-mermaid-chart)
+  - [Microsoft PowerPoint and Word](https://appsource.microsoft.com/en-us/product/office/WA200006214?tab=Overview)
+  - [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MermaidChart.vscode-mermaid-chart)
+
+- **AI diagramming** - A feature for generating Mermaid diagrams from text using AI (Pro plan).
+
+- **More** - To learn more, visit our [Product](https://www.mermaidchart.com/product) page.
+
+## Plans
+
+- **Free** - A free plan that includes five diagrams.
+
+- **Pro** - A paid plan that includes unlimited diagrams, access to the collaboration feature, and more.
+
+- **Enterprise** - A paid plan for enterprise use that includes all Pro features, and more.
+
+## Access
+
+Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
+
+Mermaid Chart is currently offering a 14-day free trial of our newly-launched Pro tier. To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
+
+## Mermaid JS contributions
+
+First time contributors are eligible for a free Pro tier account for 1 year.

docs/ecosystem/showcases.md

@@ -1,9 +0,0 @@
-> **Warning**
->
-> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
->
-> ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/showcases.md](../../packages/mermaid/src/docs/ecosystem/showcases.md).
-
-# Showcases
-
-- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/Features/diagrams-and-charts).

docs/intro/getting-started.md

@@ -4,30 +4,44 @@
 >
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/intro/getting-started.md](../../packages/mermaid/src/docs/intro/getting-started.md).
 
-# A Mermaid User-Guide for Beginners
+# Mermaid User Guide
 
-Mermaid is composed of three parts: Deployment, Syntax and Configuration.
+## Mermaid is composed of three parts
 
-This section talks about the different ways to deploy Mermaid. Learning the [Syntax](syntax-reference.md) would be of great help to the beginner.
+1.  Deployment
+2.  Syntax
+3.  Configuration
 
-> Generally the live editor is enough for most general uses of mermaid, and is a good place to start learning.
+This section talks about the different ways to **deploy** Mermaid.
 
-**Absolute beginners are advised to view the Video [Tutorials](../config/Tutorials.md) on the Live Editor, to gain a better understanding of mermaid.**
+If you are a beginner:
 
-## Four ways of using mermaid:
+- Check out the [Diagram Syntax](syntax-reference.md) page
+- Check out the [Tutorials](../config/Tutorials.md) page
 
-1.  Using the Mermaid Live Editor at [mermaid.live](https://mermaid.live).
-2.  Using [mermaid plugins](../ecosystem/integrations.md) with programs you are familiar with.
-3.  Calling the Mermaid JavaScript API.
-4.  Deploying Mermaid as a dependency.
+## Ways to use Mermaid
 
-**Note: It is our recommendation that you review all approaches, and choose the one that is best for your project.**
+1.  [Using the Mermaid Live Editor](getting-started.md#_1-using-the-mermaid-live-editor)
+2.  [Using the Mermaid Chart Editor](getting-started.md#_2-using-the-mermaid-chart-editor)
+3.  [Using Mermaid Plugins and Integrations](getting-started.md#_3-using-mermaid-plugins)
+4.  [Calling the Mermaid JavaScript API](getting-started.md#_4-calling-the-mermaid-javascript-api)
+5.  [Adding Mermaid as a dependency](getting-started.md#_5-adding-mermaid-as-a-dependency)
 
-> More in depth information can be found at [Usage](../config/usage.md).
+To learn more, visit the [Usage](../config/usage.md) page.
 
-## 1. Using the Live Editor
+## 1. Using the Mermaid Live Editor
 
-Available at [mermaid.live](https://mermaid.live)
+Available at the [Mermaid Live Editor](https://mermaid.live) website.
+
+### Features
+
+<br />
+
+#### • Diagram Code
+
+In the `Code` panel, write or edit Mermaid code, and instantly `Preview` the rendered result in the diagram panel.
+
+Here is an example of Mermaid code and its rendered result:
 
 ```mermaid-example
 graph TD
@@ -51,79 +65,161 @@ graph TD
     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.
+<br />
 
-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/advanced.md) section. A complete configuration reference cataloging the default values can be found on the [mermaidAPI](../config/setup/README.md) page.
+#### • Configurations
+
+Configuration options are available in the `Configuration` panel. The options are applied to the diagram in the `Preview` panel.
+
+For learn more, visit the [Configuration Reference](../config/setup/README.md) page
 
 ![Code,Config and Preview](./img/Code-Preview-Config.png)
 
-### Editing History
+<br />
 
-Your code will be autosaved every minute into the Timeline tab of History which shows the most recent 30 items.
+#### • Editing History
 
-You can manually save code by clicking the Save icon in the History section. It can also be accessed in the Saved tab. This is stored in the browser storage only.
+Your code will be autosaved and appear in the `Timeline` tab of the `History` section. Edits are saved every minute and only the last 30 edits are viewable.
 
-### Saving a Diagram:
+Alternatively, you can manually save code by clicking on the `Save` icon from the `History` section.
 
-You may choose any of the methods below, to save it
+> **Note**
+> History is stored in the browser storage only.
 
-**We recommend that you save your diagram code on top of any method you choose, in order to make edits and modifications further down the line.**
+<br />
+
+#### • Saving a diagram
+
+There are multiple ways of saving your diagram from the `Actions` section:
+
+- export PNG
+- export SVG
+- export as Markdown
 
 ![Flowchart](./img/Live-Editor-Choices.png)
 
-### Editing your diagrams
+<br />
 
-Editing is as easy as pasting your **Diagram code**, into the `code` section of the `Live Editor`.
+#### • Editing your diagrams
 
-### Loading from Gists
+To edit your diagram, you can copy paste existing Mermaid diagram code into the `Code` section of the `Live Editor`.
 
-The Gist you create should have a code.mmd file and optionally a config.json. [Example](https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a)
+Or:
 
-To load a gist into the Editor, you can use <https://mermaid.live/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a>
+- create a new diagram from scratch
+- use a Sample Diagram from the `Sample Diagrams` section
 
-and to View, <https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a>
+<br />
 
-## 2. Using Mermaid Plugins:
+#### • Loading from Gists
 
-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](../ecosystem/integrations.md).
+The Gist you create should have a `code.mmd` file and optionally a `config.json`, similar to this [example](https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a).
 
-**This is covered in greater detail in the [Usage section](../config/usage.md)**
+> **Note**
+> To learn about Gists, visit the GitHub documentation page on [Creating gists](https://docs.github.com/en/get-started/writing-on-github/editing-and-sharing-content-with-gists/creating-gists).
 
-## 3. Calling the JavaScript API
+Once you have created a Gist, copy paste the Gist URL into the respective field in the `Actions` section and click on the `Load Gist` button.
 
-This method can be used with any common web server like Apache, IIS, nginx, node express.
+Here is an example of a Gist being loaded into the Editor:
 
-You will also need a text editing tool like Notepad++ to generate a .html file. It is then deployed by a web browser (such as Firefox, Chrome, Safari, but not Internet Explorer).
+<https://mermaid.live/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a>
+
+And, here is the diagram view from the above example:
+
+<https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a>
+
+## 2. Using the Mermaid Chart Editor
+
+Available at the [Mermaid Chart](https://www.mermaidchart.com/) website.
+
+Mermaid Chart is a web-based diagram editor that allows you to create and edit diagrams in your browser. It is built by the team behind Mermaid.
+
+Features include:
+
+- AI diagramming
+- Collaboration & multi-user editing
+- Storage
+- and more
+
+To learn more, visit the [Mermaid Chart page](/ecosystem/mermaid-chart.html) in the Ecosystem section of the documentation.
+
+Or go to the [Mermaid Chart website](https://www.mermaidchart.com/app/sign-up) to sign up for a Free account.
+
+## 3. Using Mermaid Plugins
+
+### Mermaid Plugins
+
+You can generate Mermaid diagrams from within popular applications using plug-ins.
+
+For a list of Mermaid Plugins and Integrations, visit the [Integrations page](../ecosystem/integrations-community.md).
+
+### Mermaid Chart Plugins
+
+Mermaid Chart plugins are available for:
+
+- [ChatGPT](https://docs.mermaidchart.com/plugins/chatgpt)
+- [JetBrains IDE](https://docs.mermaidchart.com/plugins/jetbrains-ide)
+- [Microsoft PowerPoint](https://docs.mermaidchart.com/plugins/microsoft-powerpoint)
+- [Microsoft Word](https://docs.mermaidchart.com/plugins/microsoft-word)
+- [Visual Studio Code](https://docs.mermaidchart.com/plugins/visual-studio-code)
+
+To learn more, visit the [Mermaid Chart Plugins](https://www.mermaidchart.com/plugins) page.
+
+### Native Mermaid Support
+
+For apps that support markdown (e.g. [GitHub](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams) and [GitLab](https://handbook.gitlab.com/handbook/tools-and-tips/mermaid/)), you can add Mermaid diagrams by making a `mermaid` code block.
+
+````markdown
+The following code-block will be rendered as a Mermaid diagram:
+
+```mermaid
+flowchart LR
+  A --> B
+```
+````
+
+## 4. Calling the Mermaid JavaScript API
+
+This method can be used with any common web server like `Apache`, `IIS`, `Nginx`, and `Node Express`.
+
+You will also need a text editing tool like `Notepad++` to generate an `html` file. It is then deployed by a web browser, i.e. `Firefox`, `Chrome`, `Safari`.
+
+> **Note**
+> Internet Explorer is not supported.
 
 The API works by pulling rendering instructions from the source `mermaid.js` in order to render diagrams on the page.
 
-### Requirements for the Mermaid API.
+### Requirements for the Mermaid API
 
-When writing the .html file, we give two instructions inside the html code to the web browser:
+When writing the `html` file, we give two instructions inside the `html code` to the `web browser`:
 
-a. The mermaid code for the diagram we want to create.
+a. The Mermaid code for the diagram we want to create.
 
-b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.esm.min.mjs` and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process.
+b. The importing of the Mermaid library through the `mermaid.esm.mjs` or `mermaid.esm.min.mjs`, and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process.
 
-**a. The embedded mermaid diagram definition inside a `<pre class="mermaid">`:**
+#### Examples
+
+- This is an example of an embedded Mermaid diagram definition inside a `<pre class="mermaid">`:
 
 ```html
 <body>
   Here is a mermaid diagram:
   <pre class="mermaid">
-        graph TD 
-        A[Client] --> B[Load Balancer] 
-        B --> C[Server01] 
+        graph TD
+        A[Client] --> B[Load Balancer]
+        B --> C[Server01]
         B --> D[Server02]
   </pre>
 </body>
 ```
 
-**Notes**: Every Mermaid chart/graph/diagram definition, should have separate `<pre>` tags.
+> **Note**
+> Every Mermaid chart/graph/diagram definition should have separate `<pre>` tags.
 
-**b. The import of mermaid and the `mermaid.initialize()` call.**
+- This is an example of a Mermaid import and the `mermaid.initialize()` call.
 
-`mermaid.initialize()` call takes all the definitions contained in all the `<pre class="mermaid">` tags that it finds in the html body and renders them into diagrams. Example:
+> **Note**
+> A `mermaid.initialize()` call takes all the definitions contained within `<pre class="mermaid">` tags and renders them into diagrams.
 
 ```html
 <body>
@@ -134,8 +230,8 @@ b. The importing of mermaid library through the `mermaid.esm.mjs` or `mermaid.es
 </body>
 ```
 
-**Notes**:
-Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doing the opposite lets you control when it starts looking for `<pre>` tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `<pre>` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
+> **Note**
+> Rendering in Mermaid is initialized by the `mermaid.initialize()` call. However, doing the opposite lets you control when it starts looking for `<pre>` tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `<pre>` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
 
 `startOnLoad` is one of the parameters that can be defined by `mermaid.initialize()`
 
@@ -143,9 +239,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doi
 | ----------- | --------------------------------- | ------- | ----------- |
 | startOnLoad | Toggle for Rendering upon loading | Boolean | true, false |
 
-### Working Examples
-
-**Here is a full working example of the mermaidAPI being called through the CDN:**
+In this example, the `mermaidAPI` is being called through the `CDN`:
 
 ```html
 <html>
@@ -175,8 +269,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. However, doi
 </html>
 ```
 
-**Another Option:**
-In this example mermaid.js is referenced in `src` as a separate JavaScript file, in an example Path.
+In this example, `mermaid.js` is referenced in `src` as a separate JavaScript file:
 
 ```html
 <html lang="en">
@@ -204,21 +297,30 @@ In this example mermaid.js is referenced in `src` as a separate JavaScript file,
 </html>
 ```
 
----
+## 5. Adding Mermaid as a dependency
 
-## 4. Adding Mermaid as a dependency.
+Below are the steps for adding Mermaid as a dependency:
 
-1.  install node v16, which would have npm
+1.  Install `node v16`
 
-2.  download yarn using npm by entering the command below:
-    npm install -g yarn
+> **Note**
+> To learn more about downloading and installing `Node.js` and `npm`, visit the [npm Docs website](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
 
-3.  After yarn installs, enter the following command:
-    yarn add mermaid
+1.  Install `yarn` using `npm` with this command:
 
-4.  To add Mermaid as a Dev Dependency
-    yarn add --dev mermaid
+    `npm install -g yarn`
 
-**Comments from Knut Sveidqvist, creator of mermaid:**
+2.  After yarn installs, enter this command:
 
-- In early versions of mermaid, the `<script>` tag was invoked in the `<head>` part of the web page. Nowadays we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflect the previous way which still works.
+    `yarn add mermaid`
+
+3.  To add Mermaid as a dev dependency, enter this command:
+
+    `yarn add --dev mermaid`
+
+## Closing note
+
+> **Note**
+> Comments from Knut Sveidqvist, creator of Mermaid:
+>
+> - In early versions of Mermaid, the `<script>` tag was invoked in the `<head>` part of the web page. Nowadays, we can place it in the `<body>` as seen above. Older parts of the documentation frequently reflect the previous way, which still works.

docs/intro/index.md

@@ -42,11 +42,12 @@ But not having diagrams or docs ruins productivity and hurts organizational lear
 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](../config/Tutorials.md) has video tutorials.
-Use Mermaid with your favorite applications, check out the list of [Integrations and Usages of Mermaid](../ecosystem/integrations.md).
+
+Use Mermaid with your favorite applications, check out the list of [Community Integrations](../ecosystem/integrations-community.md).
 
 For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](../intro/getting-started.md) and [Usage](../config/usage.md).
 
-🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations.md)
+🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](../community/development.md) | 🔌 [Plug-Ins](../ecosystem/integrations-community.md)
 
 > 🖖 Keep a steady pulse: mermaid needs more Collaborators, [Read More](https://github.com/knsv/mermaid/issues/866).
 
@@ -282,6 +283,26 @@ quadrantChart
     Campaign F: [0.35, 0.78]
 ```
 
+### [XY Chart](../syntax/xyChart.md)
+
+```mermaid-example
+xychart-beta
+    title "Sales Revenue"
+    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+    y-axis "Revenue (in $)" 4000 --> 11000
+    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+```
+
+```mermaid
+xychart-beta
+    title "Sales Revenue"
+    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+    y-axis "Revenue (in $)" 4000 --> 11000
+    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+```
+
 ## Installation
 
 **In depth guides and examples can be found at [Getting Started](./getting-started.md) and [Usage](../config/usage.md).**
@@ -319,7 +340,7 @@ To Deploy Mermaid:
 </script>
 ```
 
-**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.**
+**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries to read the diagram/chart definitions and render them into SVG charts.**
 
 **Examples can be found in** [Other examples](../syntax/examples.md)
 

docs/news/announcements.md

@@ -6,8 +6,27 @@
 
 # Announcements
 
-## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
+## 🚀 Mermaid Chart's Visual Editor for Flowcharts
 
-23 August 2023 · 15 mins
+The Mermaid Chart team is excited to introduce a new Visual Editor for flowcharts, enabling users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
 
-Read about the pitfalls of special cases in programming, illustrating how they can lead to complexity, diminish readability, and create maintenance challenges.
+Create flowchart nodes, connect them with edges, update shapes, change colors, and edit labels with just a few clicks that automatically reflect in your diagram’s code for easy customizability.
+
+Read more about it in our latest [BLOG POST](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts) and watch a [DEMO VIDEO](https://www.youtube.com/watch?v=5aja0gijoO0) on our YouTube page.
+
+## 🎉 Mermaid Chart is running a Holiday promotion
+
+### Use <span class="text-[#FE3470]">HOLIDAYS2023</span> to get a 14-day free trial and 25% off a Pro subscription
+
+With a Pro subscription, you get access to:
+
+- AI functionality
+- Team collaboration and multi-user editing
+- Unlimited diagrams and presentations
+- And more!
+
+Redeem the promo code on the [Mermaid Chart website](https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023).
+
+## 📖 Blog posts
+
+Visit our [Blog](./blog.md) to see the latest blog posts.

docs/news/blog.md

@@ -6,6 +6,54 @@
 
 # Blog
 
+## [Introducing Mermaid Chart’s JetBrains IDE Extension](https://www.mermaidchart.com/blog/posts/introducing-mermaid-charts-jetbrains-ide-extension/)
+
+20 December 2023 · 5 mins
+
+Diagrams are essential for documenting your code.
+
+## [Mermaid Chart Releases New Visual Editor For Flowcharts](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts/)
+
+14 December 2023 · 5 mins
+
+Mermaid Chart introduces a new Visual Editor for flowcharts, enabling users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
+
+## [7 best practices (+ examples) for good developer documentation](https://www.mermaidchart.com/blog/posts/7-best-practices-for-good-documentation/)
+
+4 December 2023 · 11 min
+
+Essential strategies for crafting grate developer documentation, with practical examples and insights from leading tech companies.
+
+## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
+
+14 November 2023 · 5 mins
+
+Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
+
+## [How to Use Mermaid Chart as an AI Diagram Generator](https://www.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
+
+1 November 2023 · 5 mins
+
+Would an AI diagram generator make your life easier?
+
+## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/)
+
+12 October 2023 · 4 mins
+
+Mermaid Chart introduces Code Snippets in its editor, streamlining the diagramming process for developers and professionals.
+
+## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
+
+22 September 2023 · 7 mins
+
+A git graph is one of the more useful forms of diagrams for developers and DevOps professionals.
+
+## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://www.mermaidchart.com/blog/posts/present-flow-data-using-sankey-diagrams/)
+
+8 September 2023 · 4 mins
+
+Sankey diagrams are a powerful tool for visualizing flow data.
+
 ## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
 
 23 August 2023 · 15 mins

docs/syntax/c4.md

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

docs/syntax/classDiagram.md

@@ -240,9 +240,9 @@ class BankAccount{
 
 #### Generic Types
 
-Members can be defined using generic types, such as `List<int>`, for fields, parameters, and return types by enclosing the type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported.
+Generics can be representated as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
 
-Generics can be represented as part of a class definition and also in the parameters or the return value of a method/function:
+> _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types.
 
 ```mermaid-example
 classDiagram
@@ -425,8 +425,6 @@ And `Link` can be one of:
 
 A namespace groups classes.
 
-Code:
-
 ```mermaid-example
 classDiagram
 namespace BaseShapes {
@@ -461,9 +459,9 @@ The different cardinality options are :
 - `0..1` Zero or One
 - `1..*` One or more
 - `*` Many
-- `n` n {where n>1}
-- `0..n` zero to n {where n>1}
-- `1..n` one to n {where n>1}
+- `n` n (where n>1)
+- `0..n` zero to n (where n>1)
+- `1..n` one to n (where n>1)
 
 Cardinality can be easily defined by placing the text option within quotes `"` before or after a given arrow. For example:
 
@@ -768,9 +766,30 @@ Beginner's tip—a full example using interactive links in an HTML page:
 
 ## Styling
 
-### Styling a node
+### Styling a node (v10.7.0+)
 
-It is possible to apply specific styles such as a thicker border or a different background color to individual nodes. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
+It is possible to apply specific styles such as a thicker border or a different background color to an individual node using the `style` keyword.
+
+```mermaid-example
+classDiagram
+  class Animal
+  class Mineral
+  style Animal fill:#f9f,stroke:#333,stroke-width:4px
+  style Mineral fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+```
+
+```mermaid
+classDiagram
+  class Animal
+  class Mineral
+  style Animal fill:#f9f,stroke:#333,stroke-width:4px
+  style Mineral 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 to the nodes that
+should have a different look. This is done by predefining classes in css styles that can be applied from the graph definition using the `cssClass` statement or the `:::` short hand.
 
 ```html
 <style>

docs/syntax/entityRelationshipDiagram.md

@@ -90,7 +90,7 @@ Mermaid syntax for ER diagrams is compatible with PlantUML, with an extension to
 
 Where:
 
-- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v\<MERMAID_RELEASE_VERSION>+), and may also contain digits and hyphens.
+- `first-entity` is the name of an entity. Names must begin with an alphabetic character or an underscore (from v10.5.0+), and may also contain digits and hyphens.
 - `relationship` describes the way that both entities inter-relate. See below.
 - `second-entity` is the name of the other entity.
 - `relationship-label` describes the relationship from the perspective of the first entity.
@@ -198,7 +198,7 @@ erDiagram
 
 The `type` values must begin with an alphabetic character and may contain digits, hyphens, underscores, parentheses and square brackets. The `name` values follow a similar format to `type`, but may start with an asterisk as another option to indicate an attribute is a primary key. Other than that, there are no restrictions, and there is no implicit set of valid data types.
 
-### Entity Name Aliases (v\<MERMAID_RELEASE_VERSION>+)
+### Entity Name Aliases (v10.5.0+)
 
 An alias can be added to an entity using square brackets. If provided, the alias will be showed in the diagram instead of the entity name.
 

docs/syntax/flowchart.md

@@ -11,6 +11,13 @@ Flowcharts are composed of **nodes** (geometric shapes) and **edges** (arrows or
 > **Warning**
 > If you are using the word "end" in a Flowchart node, capitalize the entire word or any of the letters (e.g., "End" or "END"), or apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897). Typing "end" in all lowercase letters will break the Flowchart.
 
+> **Warning**
+> If you are using the letter "o" or "x" as the first letter in a connecting Flowchart node, add a space before the letter or capitalize the letter (e.g., "dev--- ops", "dev---Ops").
+>
+> Typing "A---oB" will create a [circle edge](#circle-edge-example).
+>
+> Typing "A---xB" will create a [cross edge](#cross-edge-example).
+
 ### A node (default)
 
 ```mermaid-example
@@ -467,7 +474,7 @@ flowchart TB
     A & B--> C & D
 ```
 
-If you describe the same diagram using the the basic syntax, it will take four lines. A
+If you describe the same diagram using the basic syntax, it will take four lines. A
 word of warning, one could go overboard with this making the flowchart 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.
@@ -488,23 +495,38 @@ flowchart TB
     B --> D
 ```
 
-### New arrow types
+## New arrow types
 
-There are new types of arrows supported as per below:
+There are new types of arrows supported:
+
+- circle edge
+- cross edge
+
+### Circle edge example
 
 ```mermaid-example
 flowchart LR
     A --o B
-    B --x C
 ```
 
 ```mermaid
 flowchart LR
     A --o B
-    B --x C
 ```
 
-### Multi directional arrows
+### Cross edge example
+
+```mermaid-example
+flowchart LR
+    A --x B
+```
+
+```mermaid
+flowchart LR
+    A --x B
+```
+
+## Multi directional arrows
 
 There is the possibility to use multidirectional arrows.
 
@@ -764,7 +786,7 @@ flowchart LR
     end
     %% ^ These subgraphs are identical, except for the links to them:
 
-    %% Link *to* subgraph1: subgraph1 direction is mantained
+    %% Link *to* subgraph1: subgraph1 direction is maintained
     outside --> subgraph1
     %% Link *within* subgraph2:
     %% subgraph2 inherits the direction of the top-level graph (LR)
@@ -783,7 +805,7 @@ flowchart LR
     end
     %% ^ These subgraphs are identical, except for the links to them:
 
-    %% Link *to* subgraph1: subgraph1 direction is mantained
+    %% Link *to* subgraph1: subgraph1 direction is maintained
     outside --> subgraph1
     %% Link *within* subgraph2:
     %% subgraph2 inherits the direction of the top-level graph (LR)
@@ -1112,7 +1134,7 @@ flowchart TD
     B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
-Mermaid is compatible with Font Awesome up to verion 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
+Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free).
 
 ## Graph declarations with spaces between vertices and link and without semicolon
 
@@ -1146,7 +1168,7 @@ The layout of the diagram is done with the renderer. The default renderer is dag
 
 Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams.
 
-The _elk_ renderer is an experimenal feature.
+The _elk_ renderer is an experimental feature.
 You can change the renderer to elk by adding this directive:
 
     %%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%

docs/syntax/gitgraph.md

@@ -366,41 +366,49 @@ A few important rules to note here are:
 1.  You need to provide the `id` for an existing commit to be cherry-picked. If given commit id does not exist it will result in an error. For this, make use of the `commit id:$value` format of declaring commits. See the examples from above.
 2.  The given commit must not exist on the current branch. The cherry-picked commit must always be a different branch than the current branch.
 3.  Current branch must have at least one commit, before you can cherry-pick, otherwise it will cause an error is throw.
+4.  When cherry-picking a merge commit, providing a parent commit ID is mandatory. If the parent attribute is omitted or an invalid parent commit ID is provided, an error will be thrown.
+5.  The specified parent commit must be an immediate parent of the merge commit being cherry-picked.
 
 Let see an example:
 
 ```mermaid-example
     gitGraph
-       commit id: "ZERO"
-       branch develop
-       commit id:"A"
-       checkout main
-       commit id:"ONE"
-       checkout develop
-       commit id:"B"
-       checkout main
-       commit id:"TWO"
-       cherry-pick id:"A"
-       commit id:"THREE"
-       checkout develop
-       commit id:"C"
+        commit id: "ZERO"
+        branch develop
+        branch release
+        commit id:"A"
+        checkout main
+        commit id:"ONE"
+        checkout develop
+        commit id:"B"
+        checkout main
+        merge develop id:"MERGE"
+        commit id:"TWO"
+        checkout release
+        cherry-pick id:"MERGE" parent:"B"
+        commit id:"THREE"
+        checkout develop
+        commit id:"C"
 ```
 
 ```mermaid
     gitGraph
-       commit id: "ZERO"
-       branch develop
-       commit id:"A"
-       checkout main
-       commit id:"ONE"
-       checkout develop
-       commit id:"B"
-       checkout main
-       commit id:"TWO"
-       cherry-pick id:"A"
-       commit id:"THREE"
-       checkout develop
-       commit id:"C"
+        commit id: "ZERO"
+        branch develop
+        branch release
+        commit id:"A"
+        checkout main
+        commit id:"ONE"
+        checkout develop
+        commit id:"B"
+        checkout main
+        merge develop id:"MERGE"
+        commit id:"TWO"
+        checkout release
+        cherry-pick id:"MERGE" parent:"B"
+        commit id:"THREE"
+        checkout develop
+        commit id:"C"
 ```
 
 ## Gitgraph specific configuration options
@@ -827,18 +835,25 @@ Here, we have changed the default main branch name to `MetroLine1`.
 
 ## Orientation (v10.3.0+)
 
-In Mermaid, the default orientation is Left to Right. The branches are lined vertically.
+Mermaid supports two graph orientations: **Left-to-Right** (default) and **Top-to-Bottom**.
+
+You can set this with either `LR:` (for [**Left-to-Right**](#left-to-right-default-lr)) or `TB:` (for [**Top-to-Bottom**](#top-to-bottom-tb)) after `gitGraph`.
+
+### Left to Right (default, `LR:`)
+
+In Mermaid, the default orientation is for commits to run from left to right and for branches to be stacked on top of one another.
+
+However, you can set this explicitly with `LR:` after `gitGraph`.
 
 Usage example:
 
 ```mermaid-example
-    gitGraph
+    gitGraph LR:
        commit
        commit
        branch develop
        commit
        commit
-       commit
        checkout main
        commit
        commit
@@ -848,13 +863,12 @@ Usage example:
 ```
 
 ```mermaid
-    gitGraph
+    gitGraph LR:
        commit
        commit
        branch develop
        commit
        commit
-       commit
        checkout main
        commit
        commit
@@ -863,9 +877,11 @@ Usage example:
        commit
 ```
 
-Sometimes we may want to change the orientation. Currently, Mermaid supports two orientations: **Left to Right**(default) and **Top to Bottom**.
+### Top to Bottom (`TB:`)
 
-In order to change the orientation from top to bottom i.e. branches lined horizontally, you need to add `TB` along with `gitGraph`.
+In `TB` (**Top-to-Bottom**) orientation, the commits run from top to bottom of the graph and branches are arranged side-by-side.
+
+To orient the graph this way, you need to add `TB:` after gitGraph.
 
 Usage example:
 
@@ -876,7 +892,6 @@ Usage example:
        branch develop
        commit
        commit
-       commit
        checkout main
        commit
        commit
@@ -892,7 +907,6 @@ Usage example:
        branch develop
        commit
        commit
-       commit
        checkout main
        commit
        commit

docs/syntax/quadrantChart.md

@@ -102,26 +102,26 @@ Points are used to plot a circle inside the quadrantChart. The syntax is `<text>
 
 ## Chart Configurations
 
-| Parameter                         | Description                                                                                       | Default value |
-| --------------------------------- | ------------------------------------------------------------------------------------------------- | :-----------: |
-| chartWidth                        | Width of the chart                                                                                |      500      |
-| chartHeight                       | Height of the chart                                                                               |      500      |
-| titlePadding                      | Top and Bottom padding of the title                                                               |      10       |
-| titleFontSize                     | Title font size                                                                                   |      20       |
-| quadrantPadding                   | Padding outside all the quadrants                                                                 |       5       |
-| quadrantTextTopPadding            | Quadrant text top padding when text is drawn on top ( not data points are there)                  |       5       |
-| quadrantLabelFontSize             | Quadrant text font size                                                                           |      16       |
-| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants                                                          |       1       |
-| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width                                                             |       2       |
-| xAxisLabelPadding                 | Top and bottom padding of x-axis text                                                             |       5       |
-| xAxisLabelFontSize                | X-axis texts font size                                                                            |      16       |
-| xAxisPosition                     | Position of x-axis (top , bottom) if there are points the x-axis will alway be rendered in bottom |     'top'     |
-| yAxisLabelPadding                 | Left and Right padding of y-axis text                                                             |       5       |
-| yAxisLabelFontSize                | Y-axis texts font size                                                                            |      16       |
-| yAxisPosition                     | Position of y-axis (left , right)                                                                 |    'left'     |
-| pointTextPadding                  | Padding between point and the below text                                                          |       5       |
-| pointLabelFontSize                | Point text font size                                                                              |      12       |
-| pointRadius                       | Radius of the point to be drawn                                                                   |       5       |
+| Parameter                         | Description                                                                                        | Default value |
+| --------------------------------- | -------------------------------------------------------------------------------------------------- | :-----------: |
+| chartWidth                        | Width of the chart                                                                                 |      500      |
+| chartHeight                       | Height of the chart                                                                                |      500      |
+| titlePadding                      | Top and Bottom padding of the title                                                                |      10       |
+| titleFontSize                     | Title font size                                                                                    |      20       |
+| quadrantPadding                   | Padding outside all the quadrants                                                                  |       5       |
+| quadrantTextTopPadding            | Quadrant text top padding when text is drawn on top ( not data points are there)                   |       5       |
+| quadrantLabelFontSize             | Quadrant text font size                                                                            |      16       |
+| quadrantInternalBorderStrokeWidth | Border stroke width inside the quadrants                                                           |       1       |
+| quadrantExternalBorderStrokeWidth | Quadrant external border stroke width                                                              |       2       |
+| xAxisLabelPadding                 | Top and bottom padding of x-axis text                                                              |       5       |
+| xAxisLabelFontSize                | X-axis texts font size                                                                             |      16       |
+| xAxisPosition                     | Position of x-axis (top , bottom) if there are points the x-axis will always be rendered in bottom |     'top'     |
+| yAxisLabelPadding                 | Left and Right padding of y-axis text                                                              |       5       |
+| yAxisLabelFontSize                | Y-axis texts font size                                                                             |      16       |
+| yAxisPosition                     | Position of y-axis (left , right)                                                                  |    'left'     |
+| pointTextPadding                  | Padding between point and the below text                                                           |       5       |
+| pointLabelFontSize                | Point text font size                                                                               |      12       |
+| pointRadius                       | Radius of the point to be drawn                                                                    |       5       |
 
 ## Chart Theme Variables
 

docs/syntax/sequenceDiagram.md

@@ -131,6 +131,14 @@ sequenceDiagram
     Bob->>Alice: I agree
 ```
 
+#### Unfixable actor/participant creation/deletion error
+
+If an error of the following type occurs when creating or deleting an actor/participant:
+
+> The destroyed participant **participant-name** does not have an associated destroying message after its declaration. Please check the sequence diagram.
+
+And fixing diagram code does not get rid of this error and rendering of all other diagrams results in the same error, then you need to update the mermaid version to (v10.7.0+).
+
 ### Grouping / Box
 
 The actor(s) can be grouped in vertical boxes. You can define a color (if not, it will be transparent) and/or a descriptive label using the following notation:

docs/syntax/timeline.md

@@ -217,7 +217,7 @@ Note that there are no sections defined, and each time period and its correspond
 
 2.  Disable the multiColor option using the `disableMultiColor` option. This will make all time periods and events follow the same color scheme.
 
-You will need to add this option either via mermaid.intialize function or directives.
+You will need to add this option either via mermaid.initialize function or directives.
 
 ```javascript
 mermaid.initialize({

docs/syntax/xyChart.md

@@ -0,0 +1,188 @@
+> **Warning**
+>
+> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
+>
+> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/xyChart.md](../../packages/mermaid/src/docs/syntax/xyChart.md).
+
+# XY Chart
+
+> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables.
+
+> It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time.
+
+## Example
+
+```mermaid-example
+xychart-beta
+    title "Sales Revenue"
+    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+    y-axis "Revenue (in $)" 4000 --> 11000
+    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+```
+
+```mermaid
+xychart-beta
+    title "Sales Revenue"
+    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+    y-axis "Revenue (in $)" 4000 --> 11000
+    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+```
+
+## Syntax
+
+> **Note**
+> All text values that contain only one word can be written without `"`. If a text value has many words in it, specifically if it contains spaces, enclose the value in `"`
+
+### Orientations
+
+The chart can be drawn horizontal or vertical, default value is vertical.
+
+    xychart-beta horizontal
+    ...
+
+### Title
+
+The title is a short description of the chart and it will always render on top of the chart.
+
+#### Example
+
+    xychart-beta
+        title "This is a simple example"
+        ...
+
+> **Note**
+> If the title is a single word one no need to use `"`, but if it has space `"` is needed
+
+### x-axis
+
+The x-axis primarily serves as a categorical value, although it can also function as a numeric range value when needed.
+
+#### Example
+
+1.  `x-axis title min --> max` x-axis will function as numeric with the given range
+2.  `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type
+
+### y-axis
+
+The y-axis is employed to represent numerical range values, it cannot have categorical values.
+
+#### Example
+
+1.  `y-axis title min --> max`
+2.  `y-axis title` it will only add the title, the range will be auto generated from data.
+
+> **Note**
+> Both x and y axis are optional if not provided we will try to create the range
+
+### Line chart
+
+A line chart offers the capability to graphically depict lines.
+
+#### Example
+
+1.  `line [2.3, 45, .98, -3.4]` it can have all valid numeric values.
+
+### Bar chart
+
+A bar chart offers the capability to graphically depict bars.
+
+#### Example
+
+1.  `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values.
+
+#### Simplest example
+
+The only two things required are the chart name (`xychart-beta`) and one data set. So you will be able to draw a chart with a simple config like
+
+    xychart-beta
+        line [+1.3, .6, 2.4, -.34]
+
+## Chart Configurations
+
+| Parameter                | Description                                    | Default value |
+| ------------------------ | ---------------------------------------------- | :-----------: |
+| width                    | Width of the chart                             |      700      |
+| height                   | Height of the chart                            |      500      |
+| titlePadding             | Top and Bottom padding of the title            |      10       |
+| titleFontSize            | Title font size                                |      20       |
+| showTitle                | Title to be shown or not                       |     true      |
+| xAxis                    | xAxis configuration                            |  AxisConfig   |
+| yAxis                    | yAxis configuration                            |  AxisConfig   |
+| chartOrientation         | 'vertical' or 'horizontal'                     |  'vertical'   |
+| plotReservedSpacePercent | Minimum space plots will take inside the chart |      50       |
+
+### AxisConfig
+
+| Parameter     | Description                          | Default value |
+| ------------- | ------------------------------------ | :-----------: |
+| showLabel     | Show axis labels or tick values      |     true      |
+| labelFontSize | Font size of the label to be drawn   |      14       |
+| labelPadding  | Top and Bottom padding of the label  |       5       |
+| showTitle     | Axis title to be shown or not        |     true      |
+| titleFontSize | Axis title font size                 |      16       |
+| titlePadding  | Top and Bottom padding of Axis title |       5       |
+| showTick      | Tick to be shown or not              |     true      |
+| tickLength    | How long the tick will be            |       5       |
+| tickWidth     | How width the tick will be           |       2       |
+| showAxisLine  | Axis line to be shown or not         |     true      |
+| axisLineWidth | Thickness of the axis line           |       2       |
+
+## Chart Theme Variables
+
+> **Note**
+> Themes for xychart resides inside xychart attribute so to set the variables use this syntax
+> %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
+
+| Parameter        | Description                                               |
+| ---------------- | --------------------------------------------------------- |
+| backgroundColor  | Background color of the whole chart                       |
+| titleColor       | Color of the Title text                                   |
+| xAxisLableColor  | Color of the x-axis labels                                |
+| xAxisTitleColor  | Color of the x-axis title                                 |
+| xAxisTickColor   | Color of the x-axis tick                                  |
+| xAxisLineColor   | Color of the x-axis line                                  |
+| yAxisLableColor  | Color of the y-axis labels                                |
+| yAxisTitleColor  | Color of the y-axis title                                 |
+| yAxisTickColor   | Color of the y-axis tick                                  |
+| yAxisLineColor   | Color of the y-axis line                                  |
+| plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" |
+
+## Example on config and theme
+
+```mermaid-example
+---
+config:
+    xyChart:
+        width: 900
+        height: 600
+    themeVariables:
+        xyChart:
+            titleColor: "#ff0000"
+---
+xychart-beta
+    title "Sales Revenue"
+    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+    y-axis "Revenue (in $)" 4000 --> 11000
+    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+```
+
+```mermaid
+---
+config:
+    xyChart:
+        width: 900
+        height: 600
+    themeVariables:
+        xyChart:
+            titleColor: "#ff0000"
+---
+xychart-beta
+    title "Sales Revenue"
+    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
+    y-axis "Revenue (in $)" 4000 --> 11000
+    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+```

package.json

@@ -4,7 +4,7 @@
   "version": "10.2.4",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@8.7.5",
+  "packageManager": "pnpm@8.14.1",
   "keywords": [
     "diagram",
     "markdown",
@@ -15,26 +15,26 @@
     "git graph"
   ],
   "scripts": {
-    "build:vite": "ts-node-esm --transpileOnly .vite/build.ts",
+    "build:vite": "tsx .vite/build.ts",
     "build:mermaid": "pnpm build:vite --mermaid",
     "build:viz": "pnpm build:mermaid --visualize",
     "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-zenuml/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly",
     "build:types:watch": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly --watch",
     "build:watch": "pnpm build:vite --watch",
     "build": "pnpm run -r clean && pnpm build:types && pnpm build:vite",
-    "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
+    "dev": "concurrently \"pnpm build:vite --watch\" \"tsx .vite/server.ts\"",
     "dev:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm dev",
     "release": "pnpm build",
     "lint": "eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .",
-    "lint:fix": "eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts",
-    "lint:jison": "ts-node-esm ./scripts/jison/lint.mts",
-    "contributors": "ts-node-esm scripts/updateContributors.ts",
+    "lint:fix": "eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && tsx scripts/fixCSpell.ts",
+    "lint:jison": "tsx ./scripts/jison/lint.mts",
+    "contributors": "tsx scripts/updateContributors.ts",
     "cypress": "cypress run",
     "cypress:open": "cypress open",
     "e2e": "start-server-and-test dev http://localhost:9000/ cypress",
     "coverage:cypress:clean": "rimraf .nyc_output coverage/cypress",
     "e2e:coverage": "pnpm coverage:cypress:clean && VITE_COVERAGE=true pnpm e2e",
-    "coverage:merge": "ts-node-esm scripts/coverage.ts",
+    "coverage:merge": "tsx scripts/coverage.ts",
     "coverage": "pnpm test:coverage --run && pnpm e2e:coverage && pnpm coverage:merge",
     "ci": "vitest run",
     "test": "pnpm lint && vitest run",
@@ -77,8 +77,8 @@
     "@types/node": "^18.16.0",
     "@types/prettier": "^2.7.2",
     "@types/rollup-plugin-visualizer": "^4.2.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.2",
+    "@typescript-eslint/parser": "^6.7.2",
     "@vitest/coverage-v8": "^0.34.0",
     "@vitest/spy": "^0.34.0",
     "@vitest/ui": "^0.34.0",
@@ -88,7 +88,7 @@
     "cypress": "^12.10.0",
     "cypress-image-snapshot": "^4.0.1",
     "esbuild": "^0.19.0",
-    "eslint": "^8.39.0",
+    "eslint": "^8.47.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-cypress": "^2.13.2",
     "eslint-plugin-html": "^7.1.0",
@@ -116,14 +116,14 @@
     "rimraf": "^5.0.0",
     "rollup-plugin-visualizer": "^5.9.2",
     "start-server-and-test": "^2.0.0",
-    "ts-node": "^10.9.1",
+    "tsx": "^4.6.2",
     "typescript": "^5.1.3",
-    "vite": "^4.3.9",
+    "vite": "^4.4.12",
     "vite-plugin-istanbul": "^4.1.0",
     "vitest": "^0.34.0"
   },
   "volta": {
-    "node": "18.17.1"
+    "node": "18.19.0"
   },
   "nyc": {
     "report-dir": "coverage/cypress"

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "10.5.0",
+  "version": "10.7.0",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
@@ -26,21 +26,21 @@
     "clean": "rimraf dist",
     "dev": "pnpm -w dev",
     "docs:code": "typedoc src/defaultConfig.ts src/config.ts src/mermaidAPI.ts && prettier --write ./src/docs/config/setup",
-    "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && ts-node-esm scripts/docs.cli.mts",
-    "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && ts-node-esm scripts/docs.cli.mts --verify",
-    "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && ts-node-esm scripts/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
+    "docs:build": "rimraf ../../docs && pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts",
+    "docs:verify": "pnpm docs:spellcheck && pnpm docs:code && tsx scripts/docs.cli.mts --verify",
+    "docs:pre:vitepress": "pnpm --filter ./src/docs prefetch && rimraf src/vitepress && pnpm docs:code && tsx scripts/docs.cli.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts",
     "docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
-    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm scripts/docs.cli.mts --watch --vitepress\"",
-    "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm scripts/docs.cli.mts --watch --vitepress\"",
+    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"tsx scripts/docs.cli.mts --watch --vitepress\"",
+    "docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"tsx scripts/docs.cli.mts --watch --vitepress\"",
     "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
     "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
-    "docs:release-version": "ts-node-esm scripts/update-release-version.mts",
-    "docs:verify-version": "ts-node-esm scripts/update-release-version.mts --verify",
-    "types:build-config": "ts-node-esm --transpileOnly scripts/create-types-from-json-schema.mts",
-    "types:verify-config": "ts-node-esm scripts/create-types-from-json-schema.mts --verify",
+    "docs:release-version": "tsx scripts/update-release-version.mts",
+    "docs:verify-version": "tsx scripts/update-release-version.mts --verify",
+    "types:build-config": "tsx scripts/create-types-from-json-schema.mts",
+    "types:verify-config": "tsx scripts/create-types-from-json-schema.mts --verify",
     "checkCircle": "npx madge --circular ./src",
     "release": "pnpm build",
-    "prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm -w run build"
+    "prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm docs:release-version && pnpm -w run build"
   },
   "repository": {
     "type": "git",
@@ -70,7 +70,7 @@
     "dagre-d3-es": "7.0.10",
     "dayjs": "^1.11.7",
     "dompurify": "^3.0.5",
-    "elkjs": "^0.8.2",
+    "elkjs": "^0.9.0",
     "khroma": "^2.0.0",
     "lodash-es": "^4.17.21",
     "mdast-util-from-markdown": "^1.3.0",

packages/mermaid/scripts/create-types-from-json-schema.mts

@@ -47,6 +47,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'er',
   'pie',
   'quadrantChart',
+  'xyChart',
   'requirement',
   'mindmap',
   'timeline',

packages/mermaid/scripts/update-release-version.mts

@@ -21,7 +21,7 @@ const versionPlaceholder = '<MERMAID_RELEASE_VERSION>';
 const main = async () => {
   const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**');
   const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]);
-  mdFileGlobs.push('!**/community/development.md');
+  mdFileGlobs.push('!**/community/development.md', '!**/community/code.md');
   const mdFiles = await getFilesFromGlobs(mdFileGlobs);
   mdFiles.sort();
   const mdFilesWithPlaceholder: string[] = [];

packages/mermaid/src/Diagram.ts

@@ -3,6 +3,8 @@ import { log } from './logger.js';
 import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.js';
 import { detectType, getDiagramLoader } from './diagram-api/detectType.js';
 import { UnknownDiagramError } from './errors.js';
+import { encodeEntities } from './utils.js';
+
 import type { DetailedError } from './utils.js';
 import type { DiagramDefinition, DiagramMetadata } from './diagram-api/types.js';
 
@@ -21,6 +23,7 @@ export class Diagram {
 
   private detectError?: UnknownDiagramError;
   constructor(public text: string, public metadata: Pick<DiagramMetadata, 'title'> = {}) {
+    this.text = encodeEntities(text);
     this.text += '\n';
     const cnf = configApi.getConfig();
     try {

packages/mermaid/src/config.type.ts

@@ -68,6 +68,11 @@ export interface MermaidConfig {
    * The maximum allowed size of the users text diagram
    */
   maxTextSize?: number;
+  /**
+   * Defines the maximum number of edges that can be drawn in a graph.
+   *
+   */
+  maxEdges?: number;
   darkMode?: boolean;
   htmlLabels?: boolean;
   /**
@@ -150,6 +155,7 @@ export interface MermaidConfig {
   er?: ErDiagramConfig;
   pie?: PieDiagramConfig;
   quadrantChart?: QuadrantChartConfig;
+  xyChart?: XYChartConfig;
   requirement?: RequirementDiagramConfig;
   mindmap?: MindmapDiagramConfig;
   gitGraph?: GitGraphDiagramConfig;
@@ -703,6 +709,194 @@ export interface QuadrantChartConfig extends BaseDiagramConfig {
    */
   quadrantExternalBorderStrokeWidth?: number;
 }
+/**
+ * This object contains configuration for XYChart axis config
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "XYChartAxisConfig".
+ */
+export interface XYChartAxisConfig {
+  /**
+   * Should show the axis labels (tick text)
+   */
+  showLabel?: boolean;
+  /**
+   * font size of the axis labels (tick text)
+   */
+  labelFontSize?: number;
+  /**
+   * top and bottom space from axis label (tick text)
+   */
+  labelPadding?: number;
+  /**
+   * Should show the axis title
+   */
+  showTitle?: boolean;
+  /**
+   * font size of the axis title
+   */
+  titleFontSize?: number;
+  /**
+   * top and bottom space from axis title
+   */
+  titlePadding?: number;
+  /**
+   * Should show the axis tick lines
+   */
+  showTick?: boolean;
+  /**
+   * length of the axis tick lines
+   */
+  tickLength?: number;
+  /**
+   * width of the axis tick lines
+   */
+  tickWidth?: number;
+  /**
+   * Show line across the axis
+   */
+  showAxisLine?: boolean;
+  /**
+   * Width of the axis line
+   */
+  axisLineWidth?: number;
+}
+/**
+ * This object contains configuration specific to XYCharts
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "XYChartConfig".
+ */
+export interface XYChartConfig extends BaseDiagramConfig {
+  /**
+   * width of the chart
+   */
+  width?: number;
+  /**
+   * height of the chart
+   */
+  height?: number;
+  /**
+   * Font size of the chart title
+   */
+  titleFontSize?: number;
+  /**
+   * Top and bottom space from the chart title
+   */
+  titlePadding?: number;
+  /**
+   * Should show the chart title
+   */
+  showTitle?: boolean;
+  xAxis?: XYChartAxisConfig1;
+  yAxis?: XYChartAxisConfig2;
+  /**
+   * How to plot will be drawn horizontal or vertical
+   */
+  chartOrientation?: 'vertical' | 'horizontal';
+  /**
+   * Minimum percent of space plots of the chart will take
+   */
+  plotReservedSpacePercent?: number;
+}
+/**
+ * This object contains configuration for XYChart axis config
+ */
+export interface XYChartAxisConfig1 {
+  /**
+   * Should show the axis labels (tick text)
+   */
+  showLabel?: boolean;
+  /**
+   * font size of the axis labels (tick text)
+   */
+  labelFontSize?: number;
+  /**
+   * top and bottom space from axis label (tick text)
+   */
+  labelPadding?: number;
+  /**
+   * Should show the axis title
+   */
+  showTitle?: boolean;
+  /**
+   * font size of the axis title
+   */
+  titleFontSize?: number;
+  /**
+   * top and bottom space from axis title
+   */
+  titlePadding?: number;
+  /**
+   * Should show the axis tick lines
+   */
+  showTick?: boolean;
+  /**
+   * length of the axis tick lines
+   */
+  tickLength?: number;
+  /**
+   * width of the axis tick lines
+   */
+  tickWidth?: number;
+  /**
+   * Show line across the axis
+   */
+  showAxisLine?: boolean;
+  /**
+   * Width of the axis line
+   */
+  axisLineWidth?: number;
+}
+/**
+ * This object contains configuration for XYChart axis config
+ */
+export interface XYChartAxisConfig2 {
+  /**
+   * Should show the axis labels (tick text)
+   */
+  showLabel?: boolean;
+  /**
+   * font size of the axis labels (tick text)
+   */
+  labelFontSize?: number;
+  /**
+   * top and bottom space from axis label (tick text)
+   */
+  labelPadding?: number;
+  /**
+   * Should show the axis title
+   */
+  showTitle?: boolean;
+  /**
+   * font size of the axis title
+   */
+  titleFontSize?: number;
+  /**
+   * top and bottom space from axis title
+   */
+  titlePadding?: number;
+  /**
+   * Should show the axis tick lines
+   */
+  showTick?: boolean;
+  /**
+   * length of the axis tick lines
+   */
+  tickLength?: number;
+  /**
+   * width of the axis tick lines
+   */
+  tickWidth?: number;
+  /**
+   * Show line across the axis
+   */
+  showAxisLine?: boolean;
+  /**
+   * Width of the axis line
+   */
+  axisLineWidth?: number;
+}
 /**
  * The object containing configurations specific for entity relationship diagrams
  *

packages/mermaid/src/dagre-wrapper/clusters.js

@@ -3,7 +3,7 @@ import { log } from '../logger.js';
 import createLabel from './createLabel.js';
 import { createText } from '../rendering-util/createText.js';
 import { select } from 'd3';
-import { getConfig } from '../config.js';
+import { getConfig } from '../diagram-api/diagramAPI.js';
 import { evaluate } from '../diagrams/common/common.js';
 
 const rect = (parent, node) => {

packages/mermaid/src/dagre-wrapper/createLabel.js

@@ -1,8 +1,8 @@
 import { select } from 'd3';
 import { log } from '../logger.js';
-import { getConfig } from '../config.js';
+import { getConfig } from '../diagram-api/diagramAPI.js';
 import { evaluate } from '../diagrams/common/common.js';
-import { decodeEntities } from '../mermaidAPI.js';
+import { decodeEntities } from '../utils.js';
 
 /**
  * @param dom

packages/mermaid/src/dagre-wrapper/edgeMarker.spec.ts

@@ -0,0 +1,79 @@
+import type { Mocked } from 'vitest';
+import type { SVG } from '../diagram-api/types.js';
+import { addEdgeMarkers } from './edgeMarker.js';
+
+describe('addEdgeMarker', () => {
+  const svgPath = {
+    attr: vitest.fn(),
+  } as unknown as Mocked<SVG>;
+  const url = 'http://example.com';
+  const id = 'test';
+  const diagramType = 'test';
+
+  beforeEach(() => {
+    svgPath.attr.mockReset();
+  });
+
+  it('should add markers for arrow_cross:arrow_point', () => {
+    const arrowTypeStart = 'arrow_cross';
+    const arrowTypeEnd = 'arrow_point';
+    addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-start',
+      `url(${url}#${id}_${diagramType}-crossStart)`
+    );
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-end',
+      `url(${url}#${id}_${diagramType}-pointEnd)`
+    );
+  });
+
+  it('should add markers for aggregation:arrow_point', () => {
+    const arrowTypeStart = 'aggregation';
+    const arrowTypeEnd = 'arrow_point';
+    addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-start',
+      `url(${url}#${id}_${diagramType}-aggregationStart)`
+    );
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-end',
+      `url(${url}#${id}_${diagramType}-pointEnd)`
+    );
+  });
+
+  it('should add markers for arrow_point:aggregation', () => {
+    const arrowTypeStart = 'arrow_point';
+    const arrowTypeEnd = 'aggregation';
+    addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-start',
+      `url(${url}#${id}_${diagramType}-pointStart)`
+    );
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-end',
+      `url(${url}#${id}_${diagramType}-aggregationEnd)`
+    );
+  });
+
+  it('should add markers for aggregation:composition', () => {
+    const arrowTypeStart = 'aggregation';
+    const arrowTypeEnd = 'composition';
+    addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-start',
+      `url(${url}#${id}_${diagramType}-aggregationStart)`
+    );
+    expect(svgPath.attr).toHaveBeenCalledWith(
+      'marker-end',
+      `url(${url}#${id}_${diagramType}-compositionEnd)`
+    );
+  });
+
+  it('should not add invalid markers', () => {
+    const arrowTypeStart = 'this is an invalid marker';
+    const arrowTypeEnd = ') url(https://my-malicious-site.example)';
+    addEdgeMarkers(svgPath, { arrowTypeStart, arrowTypeEnd }, url, id, diagramType);
+    expect(svgPath.attr).not.toHaveBeenCalled();
+  });
+});

packages/mermaid/src/dagre-wrapper/edgeMarker.ts

@@ -0,0 +1,57 @@
+import type { SVG } from '../diagram-api/types.js';
+import { log } from '../logger.js';
+import type { EdgeData } from '../types.js';
+/**
+ * Adds SVG markers to a path element based on the arrow types specified in the edge.
+ *
+ * @param svgPath - The SVG path element to add markers to.
+ * @param edge - The edge data object containing the arrow types.
+ * @param url - The URL of the SVG marker definitions.
+ * @param id - The ID prefix for the SVG marker definitions.
+ * @param diagramType - The type of diagram being rendered.
+ */
+export const addEdgeMarkers = (
+  svgPath: SVG,
+  edge: Pick<EdgeData, 'arrowTypeStart' | 'arrowTypeEnd'>,
+  url: string,
+  id: string,
+  diagramType: string
+) => {
+  if (edge.arrowTypeStart) {
+    addEdgeMarker(svgPath, 'start', edge.arrowTypeStart, url, id, diagramType);
+  }
+  if (edge.arrowTypeEnd) {
+    addEdgeMarker(svgPath, 'end', edge.arrowTypeEnd, url, id, diagramType);
+  }
+};
+
+const arrowTypesMap = {
+  arrow_cross: 'cross',
+  arrow_point: 'point',
+  arrow_barb: 'barb',
+  arrow_circle: 'circle',
+  aggregation: 'aggregation',
+  extension: 'extension',
+  composition: 'composition',
+  dependency: 'dependency',
+  lollipop: 'lollipop',
+} as const;
+
+const addEdgeMarker = (
+  svgPath: SVG,
+  position: 'start' | 'end',
+  arrowType: string,
+  url: string,
+  id: string,
+  diagramType: string
+) => {
+  const endMarkerType = arrowTypesMap[arrowType as keyof typeof arrowTypesMap];
+
+  if (!endMarkerType) {
+    log.warn(`Unknown arrow type: ${arrowType}`);
+    return; // unknown arrow type, ignore
+  }
+
+  const suffix = position === 'start' ? 'Start' : 'End';
+  svgPath.attr(`marker-${position}`, `url(${url}#${id}_${diagramType}-${endMarkerType}${suffix})`);
+};

packages/mermaid/src/dagre-wrapper/edges.js

@@ -2,10 +2,11 @@ import { log } from '../logger.js';
 import createLabel from './createLabel.js';
 import { createText } from '../rendering-util/createText.js';
 import { line, curveBasis, select } from 'd3';
-import { getConfig } from '../config.js';
+import { getConfig } from '../diagram-api/diagramAPI.js';
 import utils from '../utils.js';
 import { evaluate } from '../diagrams/common/common.js';
 import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
+import { addEdgeMarkers } from './edgeMarker.js';
 
 let edgeLabels = {};
 let terminalLabels = {};
@@ -506,108 +507,8 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
   log.info('arrowTypeStart', edge.arrowTypeStart);
   log.info('arrowTypeEnd', edge.arrowTypeEnd);
 
-  switch (edge.arrowTypeStart) {
-    case 'arrow_cross':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-crossStart' + ')'
-      );
-      break;
-    case 'arrow_point':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-pointStart' + ')'
-      );
-      break;
-    case 'arrow_barb':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-barbStart' + ')'
-      );
-      break;
-    case 'arrow_circle':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-circleStart' + ')'
-      );
-      break;
-    case 'aggregation':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-aggregationStart' + ')'
-      );
-      break;
-    case 'extension':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-extensionStart' + ')'
-      );
-      break;
-    case 'composition':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-compositionStart' + ')'
-      );
-      break;
-    case 'dependency':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-dependencyStart' + ')'
-      );
-      break;
-    case 'lollipop':
-      svgPath.attr(
-        'marker-start',
-        'url(' + url + '#' + id + '_' + diagramType + '-lollipopStart' + ')'
-      );
-      break;
-    default:
-  }
-  switch (edge.arrowTypeEnd) {
-    case 'arrow_cross':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-crossEnd' + ')');
-      break;
-    case 'arrow_point':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-pointEnd' + ')');
-      break;
-    case 'arrow_barb':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-barbEnd' + ')');
-      break;
-    case 'arrow_circle':
-      svgPath.attr('marker-end', 'url(' + url + '#' + id + '_' + diagramType + '-circleEnd' + ')');
-      break;
-    case 'aggregation':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-aggregationEnd' + ')'
-      );
-      break;
-    case 'extension':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-extensionEnd' + ')'
-      );
-      break;
-    case 'composition':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-compositionEnd' + ')'
-      );
-      break;
-    case 'dependency':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-dependencyEnd' + ')'
-      );
-      break;
-    case 'lollipop':
-      svgPath.attr(
-        'marker-end',
-        'url(' + url + '#' + id + '_' + diagramType + '-lollipopEnd' + ')'
-      );
-      break;
-    default:
-  }
+  addEdgeMarkers(svgPath, edge, url, id, diagramType);
+
   let paths = {};
   if (pointsHasChanged) {
     paths.updatedPath = points;

packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js

@@ -231,12 +231,12 @@ export const adjustClustersAndEdges = (graph, depth) => {
     if (children.length > 0) {
       log.debug('Cluster identified', id, descendants);
       edges.forEach((edge) => {
-        // log.debug('Edge, decendants: ', edge, decendants[id]);
+        // log.debug('Edge, descendants: ', edge, descendants[id]);
 
         // Check if any edge leaves the cluster (not the actual cluster, that's a link from the box)
         if (edge.v !== id && edge.w !== id) {
           // Any edge where either the one of the nodes is descending to the cluster but not the other
-          // if (decendants[id].indexOf(edge.v) < 0 && decendants[id].indexOf(edge.w) < 0) {
+          // if (descendants[id].indexOf(edge.v) < 0 && descendants[id].indexOf(edge.w) < 0) {
 
           const d1 = isDescendant(edge.v, id);
           const d2 = isDescendant(edge.w, id);

packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js

@@ -419,7 +419,7 @@ describe('extractDescendants', function () {
       return {};
     });
   });
-  it('Simple case of one level decendants GLB9', function () {
+  it('Simple case of one level descendants GLB9', function () {
     /*
     subgraph A
       a

packages/mermaid/src/dagre-wrapper/nodes.js

@@ -1,7 +1,7 @@
 import { select } from 'd3';
 import { log } from '../logger.js';
 import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util.js';
-import { getConfig } from '../config.js';
+import { getConfig } from '../diagram-api/diagramAPI.js';
 import intersect from './intersect/index.js';
 import createLabel from './createLabel.js';
 import note from './shapes/note.js';
@@ -1013,6 +1013,7 @@ const class_box = (parent, node) => {
   });
 
   rect
+    .attr('style', node.style)
     .attr('class', 'outer title-state')
     .attr('x', -maxWidth / 2 - halfPadding)
     .attr('y', -(maxHeight / 2) - halfPadding)

packages/mermaid/src/dagre-wrapper/shapes/note.js

@@ -1,6 +1,6 @@
 import { updateNodeBounds, labelHelper } from './util.js';
 import { log } from '../../logger.js';
-import { getConfig } from '../../config.js';
+import { getConfig } from '../../diagram-api/diagramAPI.js';
 import intersect from '../intersect/index.js';
 
 const note = async (parent, node) => {

packages/mermaid/src/dagre-wrapper/shapes/util.js

@@ -1,9 +1,9 @@
 import createLabel from '../createLabel.js';
 import { createText } from '../../rendering-util/createText.js';
-import { getConfig } from '../../config.js';
-import { decodeEntities } from '../../mermaidAPI.js';
+import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { select } from 'd3';
 import { evaluate, sanitizeText } from '../../diagrams/common/common.js';
+import { decodeEntities } from '../../utils.js';
 
 export const labelHelper = async (parent, node, _classes, isNode) => {
   let classes;
@@ -80,7 +80,9 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
                     ? getConfig().fontSize
                     : window.getComputedStyle(document.body).fontSize;
                   const enlargingFactor = 5;
-                  img.style.width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
+                  const width = parseInt(bodyFontSize, 10) * enlargingFactor + 'px';
+                  img.style.minWidth = width;
+                  img.style.maxWidth = width;
                 } else {
                   img.style.width = '100%';
                 }