From 21caa3eb727d056ef424df0c76afa5069290d105 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 3 Oct 2022 11:50:42 +0800
Subject: [PATCH 01/98] chore: Auto build docs if only src/docs is changed

---
 .github/workflows/lint.yml | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 44e2f4cb1..c84632264 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -19,6 +19,16 @@ jobs:
         node-version: [16.x]
     steps:
       - uses: actions/checkout@v3
+        if: ${{ github.event_name == 'pull_request' }}
+        with:
+          fetch-depth: 2
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+          ref: ${{ github.event.pull_request.head.ref }}
+
+      - uses: actions/checkout@v3
+        if: ${{ github.event_name != 'pull_request' }}
+        with:
+          fetch-depth: 2
 
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
@@ -38,5 +48,27 @@ jobs:
       - name: Run Linting
         run: yarn lint
 
+      - name: Run changed-files using the fork point of a pull request
+        id: changed-files-fork-point
+        uses: tj-actions/changed-files@v29
+        with:
+          use_fork_point: 'true'
+          files: |
+            src/docs/*
+
+      - name: Run step if any file(s) in the docs folder change
+        if: steps.changed-files-fork-point.outputs.only_modified == 'true'
+        run: |
+          echo "Only files in the src/docs folder has changed."
+          echo "List all the files that have changed: ${{ steps.changed-files-specific.outputs.all_changed_files }}"
+          yarn docs:build
+
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v9
+        if: steps.changed-files-fork-point.outputs.only_modified == 'true'
+        with:
+          message: 'Update docs'
+          add: 'docs/*'
+
       - name: Verify Docs
         run: yarn docs:verify

From 058f1c2edf4908f0bbb63e955bee6e6e359f7caf Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 3 Oct 2022 11:55:33 +0800
Subject: [PATCH 02/98] chore: Update docs path

---
 .github/workflows/lint.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index aa80e5c6e..13b2c4ebe 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -54,7 +54,7 @@ jobs:
         with:
           use_fork_point: 'true'
           files: |
-            src/docs/*
+            packages/mermaid/src/docs/*
 
       - name: Run step if any file(s) in the docs folder change
         if: steps.changed-files-fork-point.outputs.only_modified == 'true'
@@ -68,7 +68,7 @@ jobs:
         if: steps.changed-files-fork-point.outputs.only_modified == 'true'
         with:
           message: 'Update docs'
-          add: 'docs/*'
+          add: 'packages/mermaid/docs/*'
 
       - name: Verify Docs
         run: pnpm run docs:verify

From 8d9800c72709206a182db190df5b4e0447d79aa4 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 3 Oct 2022 11:57:19 +0800
Subject: [PATCH 03/98] fix(docs): Test auto commit

---
 packages/mermaid/src/docs/classDiagram.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/classDiagram.md b/packages/mermaid/src/docs/classDiagram.md
index f46d3689c..51383fb6a 100644
--- a/packages/mermaid/src/docs/classDiagram.md
+++ b/packages/mermaid/src/docs/classDiagram.md
@@ -1,7 +1,8 @@
 # Class diagrams
 
 > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
-> Wikipedia
+>
+> -Wikipedia
 
 The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.
 

From d367e832bed51bd60204316f1765f4df2e863619 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 3 Oct 2022 12:00:59 +0800
Subject: [PATCH 04/98] fix(docs): Test auto commit

---
 .github/workflows/lint.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 13b2c4ebe..c0b0a7f28 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -21,9 +21,9 @@ jobs:
       - uses: actions/checkout@v3
         if: ${{ github.event_name == 'pull_request' }}
         with:
+          # repository: ${{ github.event.pull_request.head.repo.full_name }}
+          # ref: ${{ github.event.pull_request.head.ref }}
           fetch-depth: 2
-          repository: ${{ github.event.pull_request.head.repo.full_name }}
-          ref: ${{ github.event.pull_request.head.ref }}
 
       - uses: actions/checkout@v3
         if: ${{ github.event_name != 'pull_request' }}

From 75db08a60c944e749b5fac5558dc49725fbe858f Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 3 Oct 2022 12:05:48 +0800
Subject: [PATCH 05/98] fix(docs): Test auto commit

---
 .github/workflows/lint.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index c0b0a7f28..fc1121c71 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -57,7 +57,7 @@ jobs:
             packages/mermaid/src/docs/*
 
       - name: Run step if any file(s) in the docs folder change
-        if: steps.changed-files-fork-point.outputs.only_modified == 'true'
+        if: steps.changed-files-fork-point.outputs.any_modified == 'true'
         run: |
           echo "Only files in the src/docs folder has changed."
           echo "List all the files that have changed: ${{ steps.changed-files-specific.outputs.all_changed_files }}"
@@ -65,7 +65,7 @@ jobs:
 
       - name: Commit changes
         uses: EndBug/add-and-commit@v9
-        if: steps.changed-files-fork-point.outputs.only_modified == 'true'
+        if: steps.changed-files-fork-point.outputs.any_modified == 'true'
         with:
           message: 'Update docs'
           add: 'packages/mermaid/docs/*'

From 1d8d677d81570628545437ff2adb487dc6c0d51e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 3 Oct 2022 14:03:44 +0800
Subject: [PATCH 06/98] fix: File location

---
 .github/workflows/lint.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index fc1121c71..6ca6b3519 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -55,6 +55,7 @@ jobs:
           use_fork_point: 'true'
           files: |
             packages/mermaid/src/docs/*
+            packages/mermaid/src/docs.mts
 
       - name: Run step if any file(s) in the docs folder change
         if: steps.changed-files-fork-point.outputs.any_modified == 'true'
@@ -68,7 +69,7 @@ jobs:
         if: steps.changed-files-fork-point.outputs.any_modified == 'true'
         with:
           message: 'Update docs'
-          add: 'packages/mermaid/docs/*'
+          add: 'docs/*'
 
       - name: Verify Docs
         run: pnpm run docs:verify

From 3bae25fe6b353d3621ab4e68d3eee47b47ed8305 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 3 Oct 2022 14:15:28 +0800
Subject: [PATCH 07/98] split lint docs action

---
 .github/workflows/lint-docs.yml | 63 +++++++++++++++++++++++++++++++++
 .github/workflows/lint.yml      | 33 -----------------
 2 files changed, 63 insertions(+), 33 deletions(-)
 create mode 100644 .github/workflows/lint-docs.yml

diff --git a/.github/workflows/lint-docs.yml b/.github/workflows/lint-docs.yml
new file mode 100644
index 000000000..68bda942a
--- /dev/null
+++ b/.github/workflows/lint-docs.yml
@@ -0,0 +1,63 @@
+name: Lint Docs
+
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - ready_for_review
+
+permissions:
+  contents: write
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x]
+    steps:
+      - uses: actions/checkout@v3
+        if: ${{ github.event_name == 'pull_request' }}
+        with:
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+          ref: ${{ github.event.pull_request.head.ref }}
+          fetch-depth: 0
+
+      - 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
+        with:
+          cache: pnpm
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install Packages
+        run: |
+          pnpm install --frozen-lockfile
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress
+
+      - name: Run changed-files using the fork point of a pull request
+        id: changed-files-fork-point
+        uses: tj-actions/changed-files@v29
+        with:
+          use_fork_point: 'true'
+          files: |
+            packages/mermaid/src/docs/*
+            packages/mermaid/src/docs.mts
+
+      - name: Run step if any file(s) in the docs folder change
+        if: steps.changed-files-fork-point.outputs.any_modified == 'true'
+        run: |
+          echo "Only files in the src/docs folder has changed."
+          echo "List all the files that have changed: ${{ steps.changed-files-specific.outputs.all_changed_files }}"
+          yarn docs:build
+
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v9
+        if: steps.changed-files-fork-point.outputs.any_modified == 'true'
+        with:
+          message: 'Update docs'
+          add: 'docs/*'
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 6ca6b3519..dd2f7aa3b 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -19,16 +19,6 @@ jobs:
         node-version: [16.x]
     steps:
       - uses: actions/checkout@v3
-        if: ${{ github.event_name == 'pull_request' }}
-        with:
-          # repository: ${{ github.event.pull_request.head.repo.full_name }}
-          # ref: ${{ github.event.pull_request.head.ref }}
-          fetch-depth: 2
-
-      - uses: actions/checkout@v3
-        if: ${{ github.event_name != 'pull_request' }}
-        with:
-          fetch-depth: 2
 
       - uses: pnpm/action-setup@v2
         # uses version from "packageManager" field in package.json
@@ -48,28 +38,5 @@ jobs:
       - name: Run Linting
         run: pnpm run lint
 
-      - name: Run changed-files using the fork point of a pull request
-        id: changed-files-fork-point
-        uses: tj-actions/changed-files@v29
-        with:
-          use_fork_point: 'true'
-          files: |
-            packages/mermaid/src/docs/*
-            packages/mermaid/src/docs.mts
-
-      - name: Run step if any file(s) in the docs folder change
-        if: steps.changed-files-fork-point.outputs.any_modified == 'true'
-        run: |
-          echo "Only files in the src/docs folder has changed."
-          echo "List all the files that have changed: ${{ steps.changed-files-specific.outputs.all_changed_files }}"
-          yarn docs:build
-
-      - name: Commit changes
-        uses: EndBug/add-and-commit@v9
-        if: steps.changed-files-fork-point.outputs.any_modified == 'true'
-        with:
-          message: 'Update docs'
-          add: 'docs/*'
-
       - name: Verify Docs
         run: pnpm run docs:verify

From 8d6af3dfedd7fb564e889496db6e2e12e1eec012 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 3 Oct 2022 14:21:54 +0800
Subject: [PATCH 08/98] split lint docs action

---
 .github/workflows/lint-docs.yml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/lint-docs.yml b/.github/workflows/lint-docs.yml
index 68bda942a..60faeda31 100644
--- a/.github/workflows/lint-docs.yml
+++ b/.github/workflows/lint-docs.yml
@@ -20,8 +20,8 @@ jobs:
       - uses: actions/checkout@v3
         if: ${{ github.event_name == 'pull_request' }}
         with:
-          repository: ${{ github.event.pull_request.head.repo.full_name }}
-          ref: ${{ github.event.pull_request.head.ref }}
+          # repository: ${{ github.event.pull_request.head.repo.full_name }}
+          # ref: ${{ github.event.pull_request.head.ref }}
           fetch-depth: 0
 
       - uses: pnpm/action-setup@v2
@@ -49,7 +49,7 @@ jobs:
             packages/mermaid/src/docs.mts
 
       - name: Run step if any file(s) in the docs folder change
-        if: steps.changed-files-fork-point.outputs.any_modified == 'true'
+        if: steps.changed-files-fork-point.outputs.only_modified == 'true'
         run: |
           echo "Only files in the src/docs folder has changed."
           echo "List all the files that have changed: ${{ steps.changed-files-specific.outputs.all_changed_files }}"
@@ -57,7 +57,7 @@ jobs:
 
       - name: Commit changes
         uses: EndBug/add-and-commit@v9
-        if: steps.changed-files-fork-point.outputs.any_modified == 'true'
+        if: steps.changed-files-fork-point.outputs.only_modified == 'true'
         with:
           message: 'Update docs'
           add: 'docs/*'

From 9c5c85d34ac1777a93b8e80b15720a5fccbeb57c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 3 Oct 2022 14:24:51 +0800
Subject: [PATCH 09/98] Run doc lint only if files changed

---
 .github/workflows/lint-docs.yml | 33 ++++++++++++++++++---------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/.github/workflows/lint-docs.yml b/.github/workflows/lint-docs.yml
index 60faeda31..734363a22 100644
--- a/.github/workflows/lint-docs.yml
+++ b/.github/workflows/lint-docs.yml
@@ -24,21 +24,6 @@ jobs:
           # ref: ${{ github.event.pull_request.head.ref }}
           fetch-depth: 0
 
-      - 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
-        with:
-          cache: pnpm
-          node-version: ${{ matrix.node-version }}
-
-      - name: Install Packages
-        run: |
-          pnpm install --frozen-lockfile
-        env:
-          CYPRESS_CACHE_FOLDER: .cache/Cypress
-
       - name: Run changed-files using the fork point of a pull request
         id: changed-files-fork-point
         uses: tj-actions/changed-files@v29
@@ -48,6 +33,24 @@ jobs:
             packages/mermaid/src/docs/*
             packages/mermaid/src/docs.mts
 
+      - uses: pnpm/action-setup@v2
+        if: steps.changed-files-fork-point.outputs.only_modified == 'true'
+        # uses version from "packageManager" field in package.json
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        if: steps.changed-files-fork-point.outputs.only_modified == 'true'
+        with:
+          cache: pnpm
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install Packages
+        if: steps.changed-files-fork-point.outputs.only_modified == 'true'
+        run: |
+          pnpm install --frozen-lockfile
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress
+
       - name: Run step if any file(s) in the docs folder change
         if: steps.changed-files-fork-point.outputs.only_modified == 'true'
         run: |

From 0a547e524e1b6f9b98489a847670dea6733d10ab Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 3 Oct 2022 14:30:46 +0800
Subject: [PATCH 10/98] Run doc lint only if files changed

---
 .github/workflows/lint-docs.yml | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/lint-docs.yml b/.github/workflows/lint-docs.yml
index 734363a22..20caab6f0 100644
--- a/.github/workflows/lint-docs.yml
+++ b/.github/workflows/lint-docs.yml
@@ -18,17 +18,17 @@ jobs:
         node-version: [16.x]
     steps:
       - uses: actions/checkout@v3
-        if: ${{ github.event_name == 'pull_request' }}
-        with:
-          # repository: ${{ github.event.pull_request.head.repo.full_name }}
-          # ref: ${{ github.event.pull_request.head.ref }}
-          fetch-depth: 0
+        # if: ${{ github.event_name == 'pull_request' }}
+        # with:
+        # fetch-depth: 0
+        # repository: ${{ github.event.pull_request.head.repo.full_name }}
+        # ref: ${{ github.event.pull_request.head.ref }}
 
       - name: Run changed-files using the fork point of a pull request
         id: changed-files-fork-point
         uses: tj-actions/changed-files@v29
         with:
-          use_fork_point: 'true'
+          # use_fork_point: 'true'
           files: |
             packages/mermaid/src/docs/*
             packages/mermaid/src/docs.mts

From 455c61b2cf38fd8c9739a3b97029cb935574c168 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 3 Oct 2022 14:41:52 +0800
Subject: [PATCH 11/98] Run doc lint only if files changed

---
 .github/workflows/lint-docs.yml | 24 ++++++++++--------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/.github/workflows/lint-docs.yml b/.github/workflows/lint-docs.yml
index 20caab6f0..312de8b1c 100644
--- a/.github/workflows/lint-docs.yml
+++ b/.github/workflows/lint-docs.yml
@@ -18,41 +18,37 @@ jobs:
         node-version: [16.x]
     steps:
       - uses: actions/checkout@v3
-        # if: ${{ github.event_name == 'pull_request' }}
-        # with:
-        # fetch-depth: 0
-        # repository: ${{ github.event.pull_request.head.repo.full_name }}
-        # ref: ${{ github.event.pull_request.head.ref }}
+        with:
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+          ref: ${{ github.event.pull_request.head.ref }}
 
-      - name: Run changed-files using the fork point of a pull request
-        id: changed-files-fork-point
+      - name: Check if source docs are changed
+        id: changed-docs
         uses: tj-actions/changed-files@v29
         with:
-          # use_fork_point: 'true'
           files: |
             packages/mermaid/src/docs/*
             packages/mermaid/src/docs.mts
 
       - uses: pnpm/action-setup@v2
-        if: steps.changed-files-fork-point.outputs.only_modified == 'true'
-        # uses version from "packageManager" field in package.json
+        if: steps.changed-docs.outputs.only_modified == 'true'
 
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
-        if: steps.changed-files-fork-point.outputs.only_modified == 'true'
+        if: steps.changed-docs.outputs.only_modified == 'true'
         with:
           cache: pnpm
           node-version: ${{ matrix.node-version }}
 
       - name: Install Packages
-        if: steps.changed-files-fork-point.outputs.only_modified == 'true'
+        if: steps.changed-docs.outputs.only_modified == 'true'
         run: |
           pnpm install --frozen-lockfile
         env:
           CYPRESS_CACHE_FOLDER: .cache/Cypress
 
       - name: Run step if any file(s) in the docs folder change
-        if: steps.changed-files-fork-point.outputs.only_modified == 'true'
+        if: steps.changed-docs.outputs.only_modified == 'true'
         run: |
           echo "Only files in the src/docs folder has changed."
           echo "List all the files that have changed: ${{ steps.changed-files-specific.outputs.all_changed_files }}"
@@ -60,7 +56,7 @@ jobs:
 
       - name: Commit changes
         uses: EndBug/add-and-commit@v9
-        if: steps.changed-files-fork-point.outputs.only_modified == 'true'
+        if: steps.changed-docs.outputs.only_modified == 'true'
         with:
           message: 'Update docs'
           add: 'docs/*'

From 563c51d4311f1ff8b159355f8553905348d4b86a Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 3 Oct 2022 14:49:35 +0800
Subject: [PATCH 12/98] Get base sha from PR

---
 .github/workflows/lint-docs.yml | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/.github/workflows/lint-docs.yml b/.github/workflows/lint-docs.yml
index 312de8b1c..d9f0ddae0 100644
--- a/.github/workflows/lint-docs.yml
+++ b/.github/workflows/lint-docs.yml
@@ -22,10 +22,22 @@ jobs:
           repository: ${{ github.event.pull_request.head.repo.full_name }}
           ref: ${{ github.event.pull_request.head.ref }}
 
+      - name: Get branch name
+        id: branch-name
+        uses: tj-actions/branch-names@v5
+
+      - uses: nrwl/last-successful-commit-action@v1
+        id: last_successful_commit_pull_request
+        with:
+          branch: ${{ steps.branch-name.outputs.base_ref_branch }}
+          workflow_id: 'lint-docs.yml'
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Check if source docs are changed
         id: changed-docs
         uses: tj-actions/changed-files@v29
         with:
+          base_sha: ${{ steps.last_successful_commit_pull_request.outputs.commit_hash }}
           files: |
             packages/mermaid/src/docs/*
             packages/mermaid/src/docs.mts

From beab2278d808c65c563a0227bed7757421ea5b38 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 14 Nov 2022 22:06:26 +0530
Subject: [PATCH 13/98] feat: Async mermaid docs

---
 cypress/integration/rendering/theme.spec.js   |   1 +
 package.json                                  |   3 -
 packages/mermaid/package.json                 |   9 +-
 .../mermaid/src/docs/.vitepress/config.ts     |   3 +-
 .../docs/.vitepress/mermaid-markdown-all.ts   |  20 +-
 .../src/docs/.vitepress/theme/Mermaid.vue     |  78 +++
 .../.vitepress/theme/{index.ts => index.js}   |   9 +-
 packages/mermaid/src/docs/vite.config.ts      |   5 +
 pnpm-lock.yaml                                | 447 ++----------------
 9 files changed, 155 insertions(+), 420 deletions(-)
 create mode 100644 packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
 rename packages/mermaid/src/docs/.vitepress/theme/{index.ts => index.js} (51%)

diff --git a/cypress/integration/rendering/theme.spec.js b/cypress/integration/rendering/theme.spec.js
index 0eb8d111b..ef3bd9a4b 100644
--- a/cypress/integration/rendering/theme.spec.js
+++ b/cypress/integration/rendering/theme.spec.js
@@ -25,6 +25,7 @@ describe('themeCSS balancing, it', () => {
   });
 });
 
+// TODO: Delete/Rename this describe, keeping the inner contents.
 describe('Pie Chart', () => {
   // beforeEach(()=>{
   //   cy.clock((new Date('2014-06-09')).getTime());
diff --git a/package.json b/package.json
index c23f632df..401408109 100644
--- a/package.json
+++ b/package.json
@@ -100,9 +100,6 @@
     "ts-node": "10.9.1",
     "typescript": "4.8.4",
     "vite": "3.2.3",
-    "vitepress": "1.0.0-alpha.28",
-    "vitepress-plugin-mermaid": "2.0.8",
-    "vitepress-plugin-search": "1.0.4-alpha.15",
     "vitest": "0.25.1"
   },
   "resolutions": {
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 648c114e7..aa7b15524 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -57,7 +57,6 @@
     "dagre": "^0.8.5",
     "dagre-d3": "^0.6.4",
     "dompurify": "2.4.1",
-    "fast-clone": "^1.5.13",
     "graphlib": "^2.1.8",
     "khroma": "^2.0.0",
     "lodash": "^4.17.21",
@@ -91,12 +90,14 @@
     "prettier": "2.7.1",
     "remark": "14.0.2",
     "rimraf": "3.0.2",
-    "shiki": "^0.11.1",
+    "shiki": "0.11.1",
     "start-server-and-test": "1.14.0",
     "typedoc": "0.23.18",
     "typedoc-plugin-markdown": "3.13.6",
     "typescript": "4.8.4",
-    "unist-util-flatmap": "1.0.0"
+    "unist-util-flatmap": "1.0.0",
+    "vitepress": "1.0.0-alpha.28",
+    "vitepress-plugin-search": "1.0.4-alpha.15"
   },
   "resolutions": {
     "d3": "^7.0.0"
@@ -109,4 +110,4 @@
     "**/*.css",
     "**/*.scss"
   ]
-}
+}
\ No newline at end of file
diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts
index 7d3ec40dd..0304c2fe2 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -1,12 +1,10 @@
 import { version } from '../../../package.json';
 import MermaidExample from './mermaid-markdown-all';
-import { MermaidMarkdown } from 'vitepress-plugin-mermaid';
 import { defineConfig, MarkdownOptions } from 'vitepress';
 
 const allMarkdownTransformers: MarkdownOptions = {
   config: async (md) => {
     await MermaidExample(md);
-    MermaidMarkdown(md);
   },
 };
 
@@ -106,6 +104,7 @@ function sidebarSyntax() {
         { text: 'Requirement Diagram', link: '/syntax/requirementDiagram' },
         { text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitgraph' },
         { text: 'C4C Diagram (Context) Diagram 🦺⚠️', link: '/syntax/c4c' },
+        { text: 'Mindmaps 🔥', link: '/syntax/mindmap' },
         { text: 'Other Examples', link: '/syntax/examples' },
       ],
     },
diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
index 7006f20e9..a7c4f96c5 100644
--- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
+++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
@@ -1,5 +1,5 @@
 import type { MarkdownRenderer } from 'vitepress';
-import shiki from 'shiki';
+import { getHighlighter } from 'shiki';
 
 const MermaidExample = async (md: MarkdownRenderer) => {
   const defaultRenderer = md.renderer.rules.fence;
@@ -8,7 +8,7 @@ const MermaidExample = async (md: MarkdownRenderer) => {
     throw new Error('defaultRenderer is undefined');
   }
 
-  const highlighter = await shiki.getHighlighter({
+  const highlighter = await getHighlighter({
     theme: 'material-palenight',
     langs: ['mermaid'],
   });
@@ -28,8 +28,20 @@ const MermaidExample = async (md: MarkdownRenderer) => {
           <button class="copy"></button>
           <span class="lang">mermaid</span>
 ${highlight}
-          </div>
-          <h5>Diagram:</h5>`;
+          </div>`;
+    } else if (token.info.trim() === 'mermaid') {
+      const key = index;
+      return ` ${key}
+      <Suspense> 
+      <template #default>
+      <Mermaid id="mermaid-${key}"  graph="${encodeURIComponent(token.content)}"></Mermaid>
+      </template>
+        <!-- loading state via #fallback slot -->
+        <template #fallback>
+          Loading...
+        </template>
+      </Suspense>
+`;
     }
     if (token.info.trim() === 'warning') {
       return `<div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>${token.content}}</p></div>`;
diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
new file mode 100644
index 000000000..fe2510efd
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
@@ -0,0 +1,78 @@
+<template>
+  <div v-html="svg"></div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref, toRaw } from 'vue';
+import mermaid from 'mermaid';
+import mindmap from '@mermaid-js/mermaid-mindmap';
+import { useData } from 'vitepress';
+try {
+  await mermaid.registerExternalDiagrams([mindmap]);
+} catch (e) {}
+
+const props = defineProps({
+  graph: {
+    type: String,
+    required: true,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+});
+
+const svg = ref(null);
+let mut = null;
+
+const { page } = useData();
+const { frontmatter } = toRaw(page.value);
+const mermaidPageTheme = frontmatter.mermaidTheme || '';
+let mermaidConfig = {
+  securityLevel: 'loose',
+  startOnLoad: false,
+};
+
+onMounted(async () => {
+  mut = new MutationObserver(() => renderChart());
+  mut.observe(document.documentElement, { attributes: true });
+  await renderChart();
+
+  //refresh images on first render
+  const hasImages = /<img([\w\W]+?)>/.exec(decodeURIComponent(props.graph))?.length > 0;
+  if (hasImages)
+    setTimeout(() => {
+      let imgElements = document.getElementsByTagName('img');
+      let imgs = Array.from(imgElements);
+      if (imgs.length) {
+        Promise.all(
+          imgs
+            .filter((img) => !img.complete)
+            .map(
+              (img) =>
+                new Promise((resolve) => {
+                  img.onload = img.onerror = resolve;
+                })
+            )
+        ).then(() => {
+          renderChart();
+        });
+      }
+    }, 100);
+});
+
+onUnmounted(() => mut.disconnect());
+
+const renderChart = async () => {
+  console.log('rendering chart' + props.id + props.graph);
+  let hasDarkClass = document.documentElement.classList.contains('dark');
+  mermaidConfig.theme = mermaidPageTheme || mermaidConfig.theme;
+  if (hasDarkClass) mermaidConfig.theme = 'dark';
+
+  mermaid.initialize({
+    ...mermaidConfig,
+    theme: hasDarkClass ? 'dark' : mermaidPageTheme,
+  });
+  svg.value = await mermaid.renderAsync(props.id, decodeURIComponent(props.graph));
+};
+</script>
diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.js
similarity index 51%
rename from packages/mermaid/src/docs/.vitepress/theme/index.ts
rename to packages/mermaid/src/docs/.vitepress/theme/index.js
index bcce341a2..b565838a9 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.js
@@ -1,12 +1,11 @@
 import DefaultTheme from 'vitepress/theme';
-// @ts-ignore
-import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue';
 import './custom.css';
-
+import Mermaid from './Mermaid.vue';
 export default {
   ...DefaultTheme,
-  enhanceApp({ app }) {
+  enhanceApp(ctx) {
     // register global components
-    app.component('Mermaid', Mermaid);
+    DefaultTheme.enhanceApp(ctx);
+    ctx.app.component('Mermaid', Mermaid);
   },
 };
diff --git a/packages/mermaid/src/docs/vite.config.ts b/packages/mermaid/src/docs/vite.config.ts
index bea6fe26d..15652c21c 100644
--- a/packages/mermaid/src/docs/vite.config.ts
+++ b/packages/mermaid/src/docs/vite.config.ts
@@ -31,6 +31,11 @@ export default defineConfig({
   resolve: {
     alias: {
       mermaid: path.join(__dirname, '../../dist/mermaid.esm.min.mjs'), // Use this one to build
+
+      '@mermaid-js/mermaid-mindmap': path.join(
+        __dirname,
+        '../../../mermaid-mindmap/dist/mermaid-mindmap.esm.min.mjs'
+      ), // Use this one to build
     },
   },
   server: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e5b7f5779..be274e166 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -48,7 +48,7 @@ importers:
         version: 5.42.1_rmayb2veg2btbq6mbmnyivgasy
       '@vitest/coverage-c8':
         specifier: 0.25.1
-        version: 0.25.1_iyb77cyw3lw7duusvxyjdsflhu
+        version: 0.25.1_oullksb5ic6y72oh2wekoaiuii
       '@vitest/ui':
         specifier: 0.25.1
         version: 0.25.1
@@ -148,18 +148,9 @@ importers:
       vite:
         specifier: 3.2.3
         version: 3.2.3_@types+node@18.11.9
-      vitepress:
-        specifier: 1.0.0-alpha.28
-        version: 1.0.0-alpha.28_ysryt2e75uhznkanan6iyjk4mi
-      vitepress-plugin-mermaid:
-        specifier: 2.0.8
-        version: 2.0.8_2q5vfj2vm6nj3r62ddjdsi7aoe
-      vitepress-plugin-search:
-        specifier: 1.0.4-alpha.15
-        version: 1.0.4-alpha.15_s3edpouswd4dgoi2en7bdlrp54
       vitest:
         specifier: 0.25.1
-        version: 0.25.1_iyb77cyw3lw7duusvxyjdsflhu
+        version: 0.25.1_oullksb5ic6y72oh2wekoaiuii
 
   packages/mermaid:
     dependencies:
@@ -178,9 +169,6 @@ importers:
       dompurify:
         specifier: 2.4.1
         version: 2.4.1
-      fast-clone:
-        specifier: ^1.5.13
-        version: 1.5.13
       graphlib:
         specifier: ^2.1.8
         version: 2.1.8
@@ -276,7 +264,7 @@ importers:
         specifier: 3.0.2
         version: 3.0.2
       shiki:
-        specifier: ^0.11.1
+        specifier: 0.11.1
         version: 0.11.1
       start-server-and-test:
         specifier: 1.14.0
@@ -293,6 +281,12 @@ importers:
       unist-util-flatmap:
         specifier: 1.0.0
         version: 1.0.0
+      vitepress:
+        specifier: 1.0.0-alpha.28
+        version: 1.0.0-alpha.28_tbpndr44ulefs3hehwpi2mkf2y
+      vitepress-plugin-search:
+        specifier: 1.0.4-alpha.15
+        version: 1.0.4-alpha.15_s3edpouswd4dgoi2en7bdlrp54
 
   packages/mermaid-example-diagram:
     devDependencies:
@@ -2033,14 +2027,6 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
-  /@rollup/pluginutils/4.2.1:
-    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
-    engines: {node: '>= 8.0.0'}
-    dependencies:
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-    dev: true
-
   /@sideway/address/4.1.4:
     resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==}
     dependencies:
@@ -2174,12 +2160,6 @@ packages:
     resolution: {integrity: sha512-hC7OMnszpxhZPduX+m+nrx+uFoLkWOMiR4oa/AZF3MuSETYTZmFfJAHqZEM8MVlvfG7BEUcgvtwoCTxBp6hm3g==}
     dev: true
 
-  /@types/concat-stream/1.6.1:
-    resolution: {integrity: sha512-eHE4cQPoj6ngxBZMvVf6Hw7Mh4jMW4U9lpGmS5GBPB9RYxlFg+CHaVN7ErNY4W9XfLIEn20b4VDYaIrbq0q4uA==}
-    dependencies:
-      '@types/node': 18.11.9
-    dev: true
-
   /@types/connect-history-api-fallback/1.3.5:
     resolution: {integrity: sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==}
     dependencies:
@@ -2427,12 +2407,6 @@ packages:
     resolution: {integrity: sha512-HXwADeHEP4exXkCIwy2n1+i0f1ilP1ETQOH5KDOugjkTFZPntWo0Gr8stZOaebkxsdx+k0X/K6obU/+it07ocg==}
     dev: true
 
-  /@types/form-data/0.0.33:
-    resolution: {integrity: sha512-8BSvG1kGm83cyJITQMZSulnl6QV8jqAGreJsc5tPu1Jq0vTSOiY/k24Wx82JRpWwZSqrala6sd5rWi6aNXvqcw==}
-    dependencies:
-      '@types/node': 18.11.9
-    dev: true
-
   /@types/geojson/7946.0.10:
     resolution: {integrity: sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==}
     dev: true
@@ -2537,10 +2511,6 @@ packages:
       form-data: 3.0.1
     dev: true
 
-  /@types/node/10.17.60:
-    resolution: {integrity: sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==}
-    dev: true
-
   /@types/node/14.18.29:
     resolution: {integrity: sha512-LhF+9fbIX4iPzhsRLpK5H7iPdvW8L4IwGciXQIOEcuF62+9nw/VQVsOViAOOGxY3OlOKGLFv0sWwJXdwQeTn6A==}
     dev: true
@@ -2553,10 +2523,6 @@ packages:
     resolution: {integrity: sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==}
     dev: true
 
-  /@types/node/8.10.66:
-    resolution: {integrity: sha512-tktOkFUA4kXx2hhhrB8bIFb5TbwzS4uOhKEmwiD+NoiL0qtP2OQ9mFldbgD4dV1djrlBYP6eBuQZiWjuHUpqFw==}
-    dev: true
-
   /@types/normalize-package-data/2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
     dev: true
@@ -2806,15 +2772,15 @@ packages:
       vite: ^3.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 3.2.3_@types+node@18.11.9
+      vite: 3.2.3
       vue: 3.2.41
     dev: true
 
-  /@vitest/coverage-c8/0.25.1_iyb77cyw3lw7duusvxyjdsflhu:
+  /@vitest/coverage-c8/0.25.1_oullksb5ic6y72oh2wekoaiuii:
     resolution: {integrity: sha512-gpl5QNaNeIN0mfRiosCqBFoZcizb5GA458TDnOQXkGDc4kklazxn70u9evGfV62wiiAUfGGebgRhxlBkAa6m6g==}
     dependencies:
       c8: 7.12.0
-      vitest: 0.25.1_iyb77cyw3lw7duusvxyjdsflhu
+      vitest: 0.25.1_oullksb5ic6y72oh2wekoaiuii
     transitivePeerDependencies:
       - '@edge-runtime/vm'
       - '@vitest/browser'
@@ -3136,55 +3102,6 @@ packages:
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
     dev: true
 
-  /@yankeeinlondon/builder-api/0.4.1_dsigm6qpqe3mljd7p5w42sooza:
-    resolution: {integrity: sha512-O6LS9Zg4xqLVpAgea72mNhZvdy9B2BuIgNdsRvNkmnACG8XvlZtEKryGt2ECI/z+dbQICbHDQFCNtZRBrfSMlA==}
-    peerDependencies:
-      fp-ts: ^2.12.1
-      inferred-types: ^0.22.0
-      markdown-it: ^13.0.1
-      vite-plugin-md: '*'
-    dependencies:
-      '@yankeeinlondon/happy-wrapper': 2.6.0_iyb77cyw3lw7duusvxyjdsflhu
-      fp-ts: 2.13.1
-      inferred-types: 0.22.8_iyb77cyw3lw7duusvxyjdsflhu
-      markdown-it: 13.0.1
-      vite-plugin-md: 0.20.4_ssclijsxphu2vue5hnv6ywl23u
-    transitivePeerDependencies:
-      - '@edge-runtime/vm'
-      - '@vitest/browser'
-      - '@vitest/ui'
-      - c8
-      - happy-dom
-      - jsdom
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
-  /@yankeeinlondon/happy-wrapper/2.6.0_iyb77cyw3lw7duusvxyjdsflhu:
-    resolution: {integrity: sha512-az+gEjG4Jl4GbM35ID5pn4v7FwfrgeA1br/B9STXlDLvIsV8q7mCxQ1oYa8bR1iHtNQg7kgW6s9DYheaTemrHQ==}
-    peerDependencies:
-      happy-dom: ^6.0.4
-    dependencies:
-      happy-dom: 6.0.4
-      native-dash: 1.23.2_iyb77cyw3lw7duusvxyjdsflhu
-    transitivePeerDependencies:
-      - '@edge-runtime/vm'
-      - '@vitest/browser'
-      - '@vitest/ui'
-      - c8
-      - jsdom
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
   /JSONSelect/0.4.0:
     resolution: {integrity: sha512-VRLR3Su35MH+XV2lrvh9O7qWoug/TUyj9tLDjn9rtpUCNnILLrHjgd/tB0KrhugCxUpj3UqoLqfYb3fLJdIQQQ==}
     engines: {node: '>=0.4.7'}
@@ -3482,10 +3399,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /asap/2.0.6:
-    resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
-    dev: true
-
   /asn1/0.2.6:
     resolution: {integrity: sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==}
     dependencies:
@@ -3706,29 +3619,6 @@ packages:
       fill-range: 7.0.1
     dev: true
 
-  /brilliant-errors/0.6.0_iyb77cyw3lw7duusvxyjdsflhu:
-    resolution: {integrity: sha512-4+Va/hdXk7tROAmnZ8Vp9D23oOMg6IBJAiZdhRCufMApH0NIFLsvtTb7sL8YuV6gWdLsiXxzR834bh05lC8r8Q==}
-    engines: {node: '>=12.0.0'}
-    dependencies:
-      callsites: 3.1.0
-      common-types: 1.31.1
-      inferred-types: 0.22.8_iyb77cyw3lw7duusvxyjdsflhu
-      vitest: 0.19.1_iyb77cyw3lw7duusvxyjdsflhu
-    transitivePeerDependencies:
-      - '@edge-runtime/vm'
-      - '@vitest/browser'
-      - '@vitest/ui'
-      - c8
-      - happy-dom
-      - jsdom
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
   /browser-process-hrtime/1.0.0:
     resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
     dev: true
@@ -4123,10 +4013,6 @@ packages:
     engines: {node: '>=4.0.0'}
     dev: true
 
-  /common-types/1.31.1:
-    resolution: {integrity: sha512-eixAd22Gmek1dgsPgyqCSjzMAlp8rpSLkb44iEMfOzR9fwGFYEkH+AWOHmwSFxWmO8MvMND/m1jpZX0Wk4+yJA==}
-    dev: true
-
   /compare-func/2.0.0:
     resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
     dependencies:
@@ -4160,16 +4046,6 @@ packages:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
-  /concat-stream/1.6.2:
-    resolution: {integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==}
-    engines: {'0': node >= 0.8}
-    dependencies:
-      buffer-from: 1.1.2
-      inherits: 2.0.4
-      readable-stream: 2.3.7
-      typedarray: 0.0.6
-    dev: true
-
   /concurrently/7.5.0:
     resolution: {integrity: sha512-5E3mwiS+i2JYBzr5BpXkFxOnleZTMsG+WnE/dCG4/P+oiVXrbmrBwJ2ozn4SxwB2EZDrKR568X+puVohxz3/Mg==}
     engines: {node: ^12.20.0 || ^14.13.0 || >=16.0.0}
@@ -4436,10 +4312,6 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /css.escape/1.5.1:
-    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
-    dev: true
-
   /cssom/0.3.8:
     resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
     dev: true
@@ -5876,13 +5748,6 @@ packages:
       - supports-color
     dev: true
 
-  /extend-shallow/2.0.1:
-    resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-extendable: 0.1.1
-    dev: true
-
   /extend/3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
     dev: true
@@ -5906,10 +5771,6 @@ packages:
     engines: {'0': node >=0.6.0}
     dev: true
 
-  /fast-clone/1.5.13:
-    resolution: {integrity: sha512-0ez7coyFBQFjZtId+RJqJ+EQs61w9xARfqjqK0AD9vIUkSxWD4HvPt80+5evebZ1tTnv1GYKrPTipx7kOW5ipA==}
-    dev: false
-
   /fast-deep-equal/3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
@@ -6103,10 +5964,6 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
-  /fp-ts/2.13.1:
-    resolution: {integrity: sha512-0eu5ULPS2c/jsa1lGFneEFFEdTbembJv8e4QKXeVJ3lm/5hyve06dlKZrpxmMwJt6rYen7sxmHHK2CLaXvWuWQ==}
-    dev: true
-
   /fresh/0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -6213,11 +6070,6 @@ packages:
     engines: {node: '>=8.0.0'}
     dev: true
 
-  /get-port/3.2.0:
-    resolution: {integrity: sha512-x5UJKlgeUiNT8nyo/AcnwLnZuZNcSjSw0kogRB+Whd1fjjFq4B1hySFxSFWWSn4mIBzg3sRNUDFYc4g5gjPoLg==}
-    engines: {node: '>=4'}
-    dev: true
-
   /get-stdin/5.0.1:
     resolution: {integrity: sha512-jZV7n6jGE3Gt7fgSTJoz91Ak5MuTLwMwkoYdjxuJ/AmjIsE1UC03y/IWkZCQGEvVNS9qoRNwy5BCqxImv0FVeA==}
     engines: {node: '>=0.12.0'}
@@ -6393,16 +6245,6 @@ packages:
       lodash: 4.17.21
     dev: false
 
-  /gray-matter/4.0.3:
-    resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
-    engines: {node: '>=6.0'}
-    dependencies:
-      js-yaml: 3.14.1
-      kind-of: 6.0.3
-      section-matter: 1.0.0
-      strip-bom-string: 1.0.0
-    dev: true
-
   /handle-thing/2.0.1:
     resolution: {integrity: sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==}
     dev: true
@@ -6420,20 +6262,6 @@ packages:
       uglify-js: 3.17.3
     dev: true
 
-  /happy-dom/6.0.4:
-    resolution: {integrity: sha512-b+ID23Ms0BY08UNLymsOMG7EI2jSlwEt4cbJs938GZfeNAg+fqgkSO3TokQMgSOFoHznpjWmpVjBUL5boJ9PWw==}
-    dependencies:
-      css.escape: 1.5.1
-      he: 1.2.0
-      node-fetch: 2.6.7
-      sync-request: 6.1.0
-      webidl-conversions: 7.0.0
-      whatwg-encoding: 2.0.0
-      whatwg-mimetype: 3.0.0
-    transitivePeerDependencies:
-      - encoding
-    dev: true
-
   /har-schema/2.0.0:
     resolution: {integrity: sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==}
     engines: {node: '>=4'}
@@ -6491,11 +6319,6 @@ packages:
       function-bind: 1.1.1
     dev: true
 
-  /he/1.2.0:
-    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
-    hasBin: true
-    dev: true
-
   /heap/0.2.7:
     resolution: {integrity: sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==}
     dev: false
@@ -6544,16 +6367,6 @@ packages:
       entities: 4.4.0
     dev: true
 
-  /http-basic/8.1.3:
-    resolution: {integrity: sha512-/EcDMwJZh3mABI2NhGfHOGOeOZITqfkEO4p/xK+l3NpyncIHUQBoMvCSF/b5GqvKtySC2srL/GGG3+EtlqlmCw==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      caseless: 0.12.0
-      concat-stream: 1.6.2
-      http-response-object: 3.0.2
-      parse-cache-control: 1.0.1
-    dev: true
-
   /http-cache-semantics/4.1.0:
     resolution: {integrity: sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==}
     dev: true
@@ -6639,12 +6452,6 @@ packages:
       - debug
     dev: true
 
-  /http-response-object/3.0.2:
-    resolution: {integrity: sha512-bqX0XTF6fnXSQcEJ2Iuyr75yVakyjIDCqroJQ/aHfSdlM743Cwqoi2nDYMzLGWUcuTWGWy8AAvOKXTfiv6q9RA==}
-    dependencies:
-      '@types/node': 10.17.60
-    dev: true
-
   /http-signature/1.2.0:
     resolution: {integrity: sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==}
     engines: {node: '>=0.8', npm: '>=1.3.7'}
@@ -6758,25 +6565,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /inferred-types/0.22.8_iyb77cyw3lw7duusvxyjdsflhu:
-    resolution: {integrity: sha512-gs0zTE04eOBso5tFZPA2UoYiH9qMCqCJCUdH9K6P6cofqNkI1L5bx9QDE0XE0khJgLN7TmH+W0JhwBbnkdjzWQ==}
-    dependencies:
-      brilliant-errors: 0.6.0_iyb77cyw3lw7duusvxyjdsflhu
-    transitivePeerDependencies:
-      - '@edge-runtime/vm'
-      - '@vitest/browser'
-      - '@vitest/ui'
-      - c8
-      - happy-dom
-      - jsdom
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
   /inflight/1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     dependencies:
@@ -6879,11 +6667,6 @@ packages:
     hasBin: true
     dev: true
 
-  /is-extendable/0.1.1:
-    resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /is-extglob/2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -8459,26 +8242,6 @@ packages:
     hasBin: true
     dev: true
 
-  /native-dash/1.23.2_iyb77cyw3lw7duusvxyjdsflhu:
-    resolution: {integrity: sha512-Ev5OPB5vDZ+HLj4MXfAwZRHJV/LJr2LHjsIr1UN7jZigMS2JRpF7Qy77t66GURhtzp7GSWLNSLeRwXOg1iwJkQ==}
-    dependencies:
-      brilliant-errors: 0.6.0_iyb77cyw3lw7duusvxyjdsflhu
-      inferred-types: 0.22.8_iyb77cyw3lw7duusvxyjdsflhu
-    transitivePeerDependencies:
-      - '@edge-runtime/vm'
-      - '@vitest/browser'
-      - '@vitest/ui'
-      - c8
-      - happy-dom
-      - jsdom
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
   /natural-compare-lite/1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
     dev: true
@@ -8791,10 +8554,6 @@ packages:
       callsites: 3.1.0
     dev: true
 
-  /parse-cache-control/1.0.1:
-    resolution: {integrity: sha512-60zvsJReQPX5/QP0Kzfd/VrpjScIQ7SHBW6bFCYfEP+fp0Eppr1SHhIO5nd1PjZtvclzSzES9D/p5nFJurwfWg==}
-    dev: true
-
   /parse-entities/2.0.0:
     resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
     dependencies:
@@ -9035,12 +8794,6 @@ packages:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
     dev: true
 
-  /promise/8.3.0:
-    resolution: {integrity: sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==}
-    dependencies:
-      asap: 2.0.6
-    dev: true
-
   /prompts/2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
@@ -9492,14 +9245,6 @@ packages:
       ajv-keywords: 5.1.0_ajv@8.11.0
     dev: true
 
-  /section-matter/1.0.0:
-    resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
-    engines: {node: '>=4'}
-    dependencies:
-      extend-shallow: 2.0.1
-      kind-of: 6.0.3
-    dev: true
-
   /select-hose/2.0.0:
     resolution: {integrity: sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==}
     dev: true
@@ -9972,11 +9717,6 @@ packages:
       ansi-regex: 6.0.1
     dev: true
 
-  /strip-bom-string/1.0.0:
-    resolution: {integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /strip-bom/4.0.0:
     resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
     engines: {node: '>=8'}
@@ -10054,21 +9794,6 @@ packages:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
     dev: true
 
-  /sync-request/6.1.0:
-    resolution: {integrity: sha512-8fjNkrNlNCrVc/av+Jn+xxqfCjYaBoHqCsDz6mt030UMxJGr+GSfCV1dQt2gRtlL63+VPidwDVLr7V2OcTSdRw==}
-    engines: {node: '>=8.0.0'}
-    dependencies:
-      http-response-object: 3.0.2
-      sync-rpc: 1.3.6
-      then-request: 6.0.2
-    dev: true
-
-  /sync-rpc/1.3.6:
-    resolution: {integrity: sha512-J8jTXuZzRlvU7HemDgHi3pGnh/rkoqR/OZSjhTyyZrEkkYQbk7Z33AXp37mkPfPpfdOuj7Ex3H/TJM1z48uPQw==}
-    dependencies:
-      get-port: 3.2.0
-    dev: true
-
   /tapable/2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -10135,23 +9860,6 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
-  /then-request/6.0.2:
-    resolution: {integrity: sha512-3ZBiG7JvP3wbDzA9iNY5zJQcHL4jn/0BWtXIkagfz7QgOL/LqjCEOBQuJNZfu0XYnv5JhKh+cDxCPM4ILrqruA==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      '@types/concat-stream': 1.6.1
-      '@types/form-data': 0.0.33
-      '@types/node': 8.10.66
-      '@types/qs': 6.9.7
-      caseless: 0.12.0
-      concat-stream: 1.6.2
-      form-data: 2.3.3
-      http-basic: 8.1.3
-      http-response-object: 3.0.2
-      promise: 8.3.0
-      qs: 6.11.0
-    dev: true
-
   /throat/6.0.1:
     resolution: {integrity: sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==}
     dev: true
@@ -10178,11 +9886,6 @@ packages:
     resolution: {integrity: sha512-hGYWYBMPr7p4g5IarQE7XhlyWveh1EKhy4wUBS1LrHXCKYgvz+4/jCqgmJqZxxldesn05vccrtME2RLLZNW7iA==}
     dev: true
 
-  /tinypool/0.2.4:
-    resolution: {integrity: sha512-Vs3rhkUH6Qq1t5bqtb816oT+HeJTXfwt2cbPH17sWHIYKTotQIFPk3tf2fgqRrVyMDVOc1EnPgzIxfIulXVzwQ==}
-    engines: {node: '>=14.0.0'}
-    dev: true
-
   /tinypool/0.3.0:
     resolution: {integrity: sha512-NX5KeqHOBZU6Bc0xj9Vr5Szbb1j8tUHIeD18s41aDJaPeC5QTdEhK0SpdpUrZlj2nv5cctNcSjaKNanXlfcVEQ==}
     engines: {node: '>=14.0.0'}
@@ -10417,10 +10120,6 @@ packages:
       is-typedarray: 1.0.0
     dev: true
 
-  /typedarray/0.0.6:
-    resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
-    dev: true
-
   /typedoc-plugin-markdown/3.13.6_typedoc@0.23.18:
     resolution: {integrity: sha512-ISSc9v3BK7HkokxSBuJPttXox4tJ6hP0N9wfSIk0fmLN67+eqtAxbk97gs2nDiuha+RTO5eW9gdeAb+RPP0mgg==}
     peerDependencies:
@@ -10655,34 +10354,37 @@ packages:
       vfile-message: 3.1.2
     dev: true
 
-  /vite-plugin-md/0.20.4_ssclijsxphu2vue5hnv6ywl23u:
-    resolution: {integrity: sha512-W3Z59/ROS2X6OIwPwV2PjE+QkfW0UVGxyf3Z2JR0OLqGJ+Iy2SGA503m/vmATJv+C3DjeU8Oy8diQx1R+IyRwQ==}
+  /vite/3.2.3:
+    resolution: {integrity: sha512-h8jl1TZ76eGs3o2dIBSsvXDLb1m/Ec1iej8ZMdz+PsaFUsftZeWe2CZOI3qogEsMNaywc17gu0q6cQDzh/weCQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
     peerDependencies:
-      '@rollup/pluginutils': ^4.2.1
-      rollup: ^2.77.0
+      '@types/node': '>= 14'
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
     dependencies:
-      '@rollup/pluginutils': 4.2.1
-      '@yankeeinlondon/builder-api': 0.4.1_dsigm6qpqe3mljd7p5w42sooza
-      '@yankeeinlondon/happy-wrapper': 2.6.0_iyb77cyw3lw7duusvxyjdsflhu
-      gray-matter: 4.0.3
-      markdown-it: 13.0.1
+      esbuild: 0.15.13
+      postcss: 8.4.18
+      resolve: 1.22.1
       rollup: 2.79.1
-      source-map-js: 1.0.2
-    transitivePeerDependencies:
-      - '@edge-runtime/vm'
-      - '@vitest/browser'
-      - '@vitest/ui'
-      - c8
-      - fp-ts
-      - happy-dom
-      - inferred-types
-      - jsdom
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
+    optionalDependencies:
+      fsevents: 2.3.2
     dev: true
 
   /vite/3.2.3_@types+node@18.11.9:
@@ -10719,18 +10421,6 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vitepress-plugin-mermaid/2.0.8_2q5vfj2vm6nj3r62ddjdsi7aoe:
-    resolution: {integrity: sha512-ywWxTeg9kMv7ZPf/igCBF4ZHhWZAyRtbPnA12ICQuNK2AMp7r5IHOfnuX1EJQf8gNdsh8bcvvSvm8Ll92fdOTw==}
-    peerDependencies:
-      mermaid: ^8.0.0 || ^9.0.0
-      vite-plugin-md: ^0.20.4
-      vitepress: ^0.21.6 || ^1.0.0 || ^1.0.0-alpha
-    dependencies:
-      mermaid: link:packages/mermaid
-      vite-plugin-md: 0.20.4_ssclijsxphu2vue5hnv6ywl23u
-      vitepress: 1.0.0-alpha.28_ysryt2e75uhznkanan6iyjk4mi
-    dev: true
-
   /vitepress-plugin-search/1.0.4-alpha.15_s3edpouswd4dgoi2en7bdlrp54:
     resolution: {integrity: sha512-Ef/VkhTVYlECVI0H9Ck6745UNPfYFppAqnlxVSMJXdxP2vjOZ5TYNczlTTQ2p9dh16MFw/IurbL1/GrG4nXdNw==}
     engines: {node: ^14.13.1 || ^16.7.0 || >=18}
@@ -10744,12 +10434,12 @@ packages:
       '@types/markdown-it': 12.2.3
       flexsearch: 0.7.31
       markdown-it: 13.0.1
-      vite: 3.2.3_@types+node@18.11.9
-      vitepress: 1.0.0-alpha.28_ysryt2e75uhznkanan6iyjk4mi
+      vite: 3.2.3
+      vitepress: 1.0.0-alpha.28_tbpndr44ulefs3hehwpi2mkf2y
       vue: 3.2.41
     dev: true
 
-  /vitepress/1.0.0-alpha.28_ysryt2e75uhznkanan6iyjk4mi:
+  /vitepress/1.0.0-alpha.28_tbpndr44ulefs3hehwpi2mkf2y:
     resolution: {integrity: sha512-pvbLssDMgLUN1terajmPlFBxHSDGO4DqwexKbjFyr7LeELerVuwGrG6F2J1hxmwOlbpLd1kHXEDqGm9JX/kTDQ==}
     hasBin: true
     dependencies:
@@ -10760,7 +10450,7 @@ packages:
       '@vueuse/core': 9.4.0_vue@3.2.41
       body-scroll-lock: 4.0.0-beta.0
       shiki: 0.11.1
-      vite: 3.2.3_@types+node@18.11.9
+      vite: 3.2.3
       vue: 3.2.41
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -10776,53 +10466,7 @@ packages:
       - terser
     dev: true
 
-  /vitest/0.19.1_iyb77cyw3lw7duusvxyjdsflhu:
-    resolution: {integrity: sha512-E/ZXpFMUahn731wzhMBNzWRp4mGgiZFT0xdHa32cbNO0CSaHpE9hTfteEU247Gi2Dula8uXo5vvrNB6dtszmQA==}
-    engines: {node: '>=v14.16.0'}
-    hasBin: true
-    peerDependencies:
-      '@edge-runtime/vm': '*'
-      '@vitest/browser': '*'
-      '@vitest/ui': '*'
-      c8: '*'
-      happy-dom: '*'
-      jsdom: '*'
-    peerDependenciesMeta:
-      '@edge-runtime/vm':
-        optional: true
-      '@vitest/browser':
-        optional: true
-      '@vitest/ui':
-        optional: true
-      c8:
-        optional: true
-      happy-dom:
-        optional: true
-      jsdom:
-        optional: true
-    dependencies:
-      '@types/chai': 4.3.3
-      '@types/chai-subset': 1.3.3
-      '@types/node': 18.11.9
-      '@vitest/ui': 0.25.1
-      chai: 4.3.6
-      debug: 4.3.4
-      happy-dom: 6.0.4
-      jsdom: 20.0.2
-      local-pkg: 0.4.2
-      tinypool: 0.2.4
-      tinyspy: 1.0.2
-      vite: 3.2.3_@types+node@18.11.9
-    transitivePeerDependencies:
-      - less
-      - sass
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-    dev: true
-
-  /vitest/0.25.1_iyb77cyw3lw7duusvxyjdsflhu:
+  /vitest/0.25.1_oullksb5ic6y72oh2wekoaiuii:
     resolution: {integrity: sha512-eH74h6MkuEgsqR4mAQZeMK9O0PROiKY+i+1GMz/fBi5A3L2ml5U7JQs7LfPU7+uWUziZyLHagl+rkyfR8SLhlA==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
@@ -10852,7 +10496,6 @@ packages:
       acorn-walk: 8.2.0
       chai: 4.3.6
       debug: 4.3.4
-      happy-dom: 6.0.4
       jsdom: 20.0.2
       local-pkg: 0.4.2
       source-map: 0.6.1

From a88a467d4569837f491e67a97f1a70ca570e087b Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 14 Nov 2022 22:14:27 +0530
Subject: [PATCH 14/98] sync

---
 docs/syntax/classDiagram.md                   | 36 +++++++++----------
 .../docs/.vitepress/mermaid-markdown-all.ts   | 13 ++-----
 .../src/docs/.vitepress/theme/Mermaid.vue     | 10 ++----
 3 files changed, 24 insertions(+), 35 deletions(-)

diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
index b825f8671..d57125c84 100644
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -255,16 +255,16 @@ A relationship is a general term covering the specific types of logical connecti
 
 There are eight different types of relations defined for classes under UML which are currently supported:
 
-| Type | Description   |
-| ---- | ------------- | ----------- |
-| <    | --            | Inheritance |
-| \*-- | Composition   |
-| o--  | Aggregation   |
-| -->  | Association   |
-| --   | Link (Solid)  |
-| ..>  | Dependency    |
-| ..   | >             | Realization |
-| ..   | Link (Dashed) |
+| Type    | Description   |
+| ------- | ------------- |
+| `<\|--` | Inheritance   |
+| `\*--`  | Composition   |
+| `o--`   | Aggregation   |
+| `-->`   | Association   |
+| `--`    | Link (Solid)  |
+| `..>`   | Dependency    |
+| `..\|>` | Realization   |
+| `..`    | Link (Dashed) |
 
 ```mermaid-example
 classDiagram
@@ -360,14 +360,14 @@ Here is the syntax:
 
 Where `Relation Type` can be one of:
 
-| Type | Description |
-| ---- | ----------- | ----------- |
-| <    |             | Inheritance |
-| \*   | Composition |
-| o    | Aggregation |
-| >    | Association |
-| <    | Association |
-|      | >           | Realization |
+| Type  | Description |
+| ----- | ----------- |
+| `<\|` | Inheritance |
+| `\*`  | Composition |
+| `o`   | Aggregation |
+| `>`   | Association |
+| `<`   | Association |
+| `\|>` | Realization |
 
 And `Link` can be one of:
 
diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
index a7c4f96c5..e2178a653 100644
--- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
+++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
@@ -31,17 +31,10 @@ ${highlight}
           </div>`;
     } else if (token.info.trim() === 'mermaid') {
       const key = index;
-      return ` ${key}
-      <Suspense> 
-      <template #default>
+      return `
+      ${key}
       <Mermaid id="mermaid-${key}"  graph="${encodeURIComponent(token.content)}"></Mermaid>
-      </template>
-        <!-- loading state via #fallback slot -->
-        <template #fallback>
-          Loading...
-        </template>
-      </Suspense>
-`;
+      `;
     }
     if (token.info.trim() === 'warning') {
       return `<div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>${token.content}}</p></div>`;
diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
index fe2510efd..90ece11a6 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
+++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
@@ -5,11 +5,7 @@
 <script setup>
 import { onMounted, onUnmounted, ref, toRaw } from 'vue';
 import mermaid from 'mermaid';
-import mindmap from '@mermaid-js/mermaid-mindmap';
 import { useData } from 'vitepress';
-try {
-  await mermaid.registerExternalDiagrams([mindmap]);
-} catch (e) {}
 
 const props = defineProps({
   graph: {
@@ -36,7 +32,7 @@ let mermaidConfig = {
 onMounted(async () => {
   mut = new MutationObserver(() => renderChart());
   mut.observe(document.documentElement, { attributes: true });
-  await renderChart();
+  renderChart();
 
   //refresh images on first render
   const hasImages = /<img([\w\W]+?)>/.exec(decodeURIComponent(props.graph))?.length > 0;
@@ -63,7 +59,7 @@ onMounted(async () => {
 
 onUnmounted(() => mut.disconnect());
 
-const renderChart = async () => {
+const renderChart = () => {
   console.log('rendering chart' + props.id + props.graph);
   let hasDarkClass = document.documentElement.classList.contains('dark');
   mermaidConfig.theme = mermaidPageTheme || mermaidConfig.theme;
@@ -73,6 +69,6 @@ const renderChart = async () => {
     ...mermaidConfig,
     theme: hasDarkClass ? 'dark' : mermaidPageTheme,
   });
-  svg.value = await mermaid.renderAsync(props.id, decodeURIComponent(props.graph));
+  svg.value = mermaid.render(props.id, decodeURIComponent(props.graph));
 };
 </script>

From d05fd25339fd4be4237a60a7710f8abc0d46b868 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 15 Nov 2022 23:59:17 +0530
Subject: [PATCH 15/98] Fix #3799: Remove `type` from package.json

---
 packages/mermaid/package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 9cbc695b1..f8ff46325 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -1,11 +1,10 @@
 {
   "name": "mermaid",
-  "version": "9.2.2",
+  "version": "9.2.3-rc.1",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "./dist/mermaid.min.js",
   "module": "./dist/mermaid.core.mjs",
   "types": "./dist/mermaid.d.ts",
-  "type": "commonjs",
   "exports": {
     ".": {
       "require": "./dist/mermaid.min.js",

From 3358406e685e22e7621a0e4851ac0ff02ad21f19 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 16 Nov 2022 00:06:47 +0530
Subject: [PATCH 16/98] fix: release-preview-publish.yml

---
 .github/workflows/release-preview-publish.yml | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml
index 2b2ff559b..da12cb5cc 100644
--- a/.github/workflows/release-preview-publish.yml
+++ b/.github/workflows/release-preview-publish.yml
@@ -10,21 +10,27 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
+          cache: pnpm
           node-version: 18.x
-      - name: Install Yarn
-        run: npm i yarn --global
+
+      - name: Install Packages
+        run: |
+          pnpm install --frozen-lockfile
+        env:
+          CYPRESS_CACHE_FOLDER: .cache/Cypress
 
       - name: Install Json
         run: npm i json --global
 
-      - name: Install Packages
-        run: yarn install --frozen-lockfile
-
       - name: Publish
         run: |
+          cd packages/mermaid
           PREVIEW_VERSION=8
           VERSION=$(echo ${{github.ref}} | tail -c +20)-preview.$PREVIEW_VERSION
           echo $VERSION

From 8d96518092ce582cbce38c391d2cb760eb33ecef Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Tue, 15 Nov 2022 13:47:16 -0800
Subject: [PATCH 17/98] accessibility.js -> ts; + set aria-roledescription; add
 spec

---
 packages/mermaid/src/accessibility.js      | 29 ---------
 packages/mermaid/src/accessibility.spec.ts | 73 ++++++++++++++++++++++
 packages/mermaid/src/accessibility.ts      | 45 +++++++++++++
 3 files changed, 118 insertions(+), 29 deletions(-)
 delete mode 100644 packages/mermaid/src/accessibility.js
 create mode 100644 packages/mermaid/src/accessibility.spec.ts
 create mode 100644 packages/mermaid/src/accessibility.ts

diff --git a/packages/mermaid/src/accessibility.js b/packages/mermaid/src/accessibility.js
deleted file mode 100644
index c59ba270c..000000000
--- a/packages/mermaid/src/accessibility.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * This method will add a basic title and description element to a chart. The yy parser will need to
- * respond to getAccTitle and getAccDescription, where the title is the title element on the chart,
- * which is generally not displayed and the accDescription is the description element on the chart,
- * which is never displayed.
- *
- * The following charts display their title as a visual and accessibility element: gantt
- *
- * @param yy_parser
- * @param svg
- * @param id
- */
-export default function addSVGAccessibilityFields(yy_parser, svg, id) {
-  if (typeof svg.insert === 'undefined') {
-    return;
-  }
-
-  let title_string = yy_parser.getAccTitle();
-  let description = yy_parser.getAccDescription();
-  svg.attr('role', 'img').attr('aria-labelledby', 'chart-title-' + id + ' chart-desc-' + id);
-  svg
-    .insert('desc', ':first-child')
-    .attr('id', 'chart-desc-' + id)
-    .text(description);
-  svg
-    .insert('title', ':first-child')
-    .attr('id', 'chart-title-' + id)
-    .text(title_string);
-}
diff --git a/packages/mermaid/src/accessibility.spec.ts b/packages/mermaid/src/accessibility.spec.ts
new file mode 100644
index 000000000..29a2f125d
--- /dev/null
+++ b/packages/mermaid/src/accessibility.spec.ts
@@ -0,0 +1,73 @@
+// Spec/tests for accessibility
+
+import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
+
+import { MockedD3 } from './tests/MockedD3';
+
+const fauxSvgNode = new MockedD3();
+
+const MockedDiagramDb = {
+  getAccTitle: vi.fn().mockReturnValue('the title'),
+  getAccDescription: vi.fn().mockReturnValue('the description'),
+};
+
+describe('setA11yDiagramInfo', () => {
+  it('sets the aria-roledescription to the diagram type', () => {
+    // @ts-ignore  Required to easily handle the d3 select types
+    const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+    setA11yDiagramInfo(fauxSvgNode, 'flowchart');
+    expect(svg_attr_spy).toHaveBeenCalledWith('aria-roledescription', 'flowchart');
+  });
+});
+
+describe('addSVGa11yTitleDescription', () => {
+  const testDiagramDb = MockedDiagramDb;
+  const givenId = 'theBaseId';
+
+  describe('with the given svg d3 object:', () => {
+    it('does nothing if there is no insert defined', () => {
+      const noInsertSvg = {
+        attr: vi.fn(),
+      };
+      const noInsert_attr_spy = vi.spyOn(noInsertSvg, 'attr').mockReturnValue(noInsertSvg);
+      addSVGa11yTitleDescription(testDiagramDb, noInsertSvg, givenId);
+      expect(noInsert_attr_spy).not.toHaveBeenCalled();
+    });
+
+    it('sets aria-labelledby to the title id and the description id inserted as children', () => {
+      // @ts-ignore Required to easily handle the d3 select types
+      const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+      addSVGa11yTitleDescription(testDiagramDb, fauxSvgNode, givenId);
+      expect(svg_attr_spy).toHaveBeenCalledWith(
+        'aria-labelledby',
+        `chart-title-${givenId} chart-desc-${givenId}`
+      );
+    });
+
+    it('inserts a title tag as the first child with the text set to the accTitle returned by the diagram db', () => {
+      const faux_title = new MockedD3();
+      const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_title);
+      // @ts-ignore  Required to easily handle the d3 select types
+      const title_attr_spy = vi.spyOn(faux_title, 'attr').mockReturnValue(faux_title);
+      const title_text_spy = vi.spyOn(faux_title, 'text');
+
+      addSVGa11yTitleDescription(testDiagramDb, fauxSvgNode, givenId);
+      expect(svg_insert_spy).toHaveBeenCalledWith('title', ':first-child');
+      expect(title_attr_spy).toHaveBeenCalledWith('id', `chart-title-` + givenId);
+      expect(title_text_spy).toHaveBeenNthCalledWith(2, 'the title');
+    });
+
+    it('inserts a desc tag as the 2nd child with the text set to accDescription returned by the diagram db', () => {
+      const faux_desc = new MockedD3();
+      const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_desc);
+      // @ts-ignore  Required to easily handle the d3 select types
+      const desc_attr_spy = vi.spyOn(faux_desc, 'attr').mockReturnValue(faux_desc);
+      const desc_text_spy = vi.spyOn(faux_desc, 'text');
+
+      addSVGa11yTitleDescription(testDiagramDb, fauxSvgNode, givenId);
+      expect(svg_insert_spy).toHaveBeenCalledWith('desc', ':first-child');
+      expect(desc_attr_spy).toHaveBeenCalledWith('id', `chart-desc-` + givenId);
+      expect(desc_text_spy).toHaveBeenNthCalledWith(1, 'the description');
+    });
+  });
+});
diff --git a/packages/mermaid/src/accessibility.ts b/packages/mermaid/src/accessibility.ts
new file mode 100644
index 000000000..246a88f66
--- /dev/null
+++ b/packages/mermaid/src/accessibility.ts
@@ -0,0 +1,45 @@
+/**
+ * Accessibility (a11y) functions, types, helpers
+ *
+ */
+
+// This is just a convenience alias to make it clear the type is a d3 object. (It's easier to make it 'any' instead of the comple typing set in d3)
+type D3object = any;
+
+/**
+ * Set the accessibility (a11y) information for the svg d3 object using the given diagram type
+ * Note that the svg element role _should_ be mapped to a 'graphics-document' by default. Thus we don't set it here, but can set it in the future if needed.
+ * @param svg - d3 object that contains the SVG HTML element
+ * @param diagramType - diagram name for to the aria-roledescription
+ */
+export function setA11yDiagramInfo(svg: D3object, diagramType: string) {
+  svg.attr('aria-roledescription', diagramType);
+}
+
+/**
+ * This method will add a basic title and description element to a chart. The yy parser will need to
+ * respond to getAccTitle and getAccDescription,
+ * where the accessible title is the title element on the chart.
+ *
+ * Note that the accessible title is generally _not_ displayed
+ * and the accessible description is never displayed.
+ *
+ *
+ * The following charts display their title as a visual and accessibility element: gantt.  TODO fix this
+ *
+ * @param diagramDb - the 'db' object/module for a diagram. Must respond to getAccTitle() and getAccDescription()
+ * @param svg - the d3 object that represents the svg element
+ * @param baseId - the id to use as the base for the title and description
+ */
+export function addSVGa11yTitleDescription(diagramDb: any, svg: D3object, baseId: string) {
+  if (typeof svg.insert === 'undefined') {
+    return;
+  }
+
+  const titleId = 'chart-title-' + baseId;
+  const descId = 'chart-desc-' + baseId;
+
+  svg.attr('aria-labelledby', titleId + ' ' + descId);
+  svg.insert('desc', ':first-child').attr('id', descId).text(diagramDb.getAccDescription());
+  svg.insert('title', ':first-child').attr('id', titleId).text(diagramDb.getAccTitle());
+}

From 0d9566dd711374a35fc872f4a327d4a518dfd04b Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Tue, 15 Nov 2022 13:48:35 -0800
Subject: [PATCH 18/98] diagrams: use a11y title,desc specific method (was
 renamed)

---
 packages/mermaid/src/diagrams/c4/c4Renderer.js                | 4 ++--
 packages/mermaid/src/diagrams/class/classRenderer-v2.js       | 4 ++--
 packages/mermaid/src/diagrams/class/classRenderer.js          | 4 ++--
 packages/mermaid/src/diagrams/er/erRenderer.js                | 4 ++--
 packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js    | 4 ++--
 packages/mermaid/src/diagrams/flowchart/flowRenderer.js       | 4 ++--
 packages/mermaid/src/diagrams/gantt/ganttRenderer.js          | 4 ++--
 packages/mermaid/src/diagrams/git/gitGraphRenderer.js         | 4 ++--
 packages/mermaid/src/diagrams/pie/pieRenderer.js              | 4 ++--
 .../mermaid/src/diagrams/requirement/requirementRenderer.js   | 4 ++--
 packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts    | 4 +++-
 packages/mermaid/src/diagrams/state/stateRenderer-v2.js       | 4 ++--
 packages/mermaid/src/diagrams/state/stateRenderer.js          | 4 ++--
 packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts | 3 ++-
 14 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/packages/mermaid/src/diagrams/c4/c4Renderer.js b/packages/mermaid/src/diagrams/c4/c4Renderer.js
index a9072346a..a2d7813c6 100644
--- a/packages/mermaid/src/diagrams/c4/c4Renderer.js
+++ b/packages/mermaid/src/diagrams/c4/c4Renderer.js
@@ -8,7 +8,7 @@ import * as configApi from '../../config';
 import assignWithDepth from '../../assignWithDepth';
 import { wrapLabel, calculateTextWidth, calculateTextHeight } from '../../utils';
 import { configureSvgSize } from '../../setupGraphViewbox';
-import addSVGAccessibilityFields from '../../accessibility';
+import { addSVGa11yTitleDescription } from '../../accessibility';
 
 let globalBoundaryMaxX = 0,
   globalBoundaryMaxY = 0;
@@ -676,7 +676,7 @@ export const draw = function (_text, id, _version, diagObj) {
       (height + extraVertForTitle)
   );
 
-  addSVGAccessibilityFields(parser.yy, diagram, id);
+  addSVGa11yTitleDescription(parser.yy, diagram, id);
   log.debug(`models:`, box);
 };
 
diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.js b/packages/mermaid/src/diagrams/class/classRenderer-v2.js
index fbc2e4833..75e7cdafb 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.js
@@ -7,7 +7,7 @@ import { curveLinear } from 'd3';
 import { interpolateToCurve, getStylesFromArray } from '../../utils';
 import { setupGraphViewbox } from '../../setupGraphViewbox';
 import common from '../common/common';
-import addSVGAccessibilityFields from '../../accessibility';
+import { addSVGa11yTitleDescription } from '../../accessibility';
 
 let idCache = {};
 
@@ -452,7 +452,7 @@ export const draw = function (text, id, _version, diagObj) {
     }
   }
 
-  addSVGAccessibilityFields(diagObj.db, svg, id);
+  addSVGa11yTitleDescription(diagObj.db, svg, id);
   // If node has a link, wrap it in an anchor SVG object.
   // const keys = Object.keys(classes);
   // keys.forEach(function(key) {
diff --git a/packages/mermaid/src/diagrams/class/classRenderer.js b/packages/mermaid/src/diagrams/class/classRenderer.js
index 23b586192..4e4b31a82 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer.js
+++ b/packages/mermaid/src/diagrams/class/classRenderer.js
@@ -5,7 +5,7 @@ import { log } from '../../logger';
 import svgDraw from './svgDraw';
 import { configureSvgSize } from '../../setupGraphViewbox';
 import { getConfig } from '../../config';
-import addSVGAccessibilityFields from '../../accessibility';
+import { addSVGa11yTitleDescription } from '../../accessibility';
 
 let idCache = {};
 const padding = 20;
@@ -272,7 +272,7 @@ export const draw = function (text, id, _version, diagObj) {
   const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
   log.debug(`viewBox ${vBox}`);
   diagram.attr('viewBox', vBox);
-  addSVGAccessibilityFields(diagObj.db, diagram, id);
+  addSVGa11yTitleDescription(diagObj.db, diagram, id);
 };
 
 export default {
diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js
index 323bb4607..f29eb44d7 100644
--- a/packages/mermaid/src/diagrams/er/erRenderer.js
+++ b/packages/mermaid/src/diagrams/er/erRenderer.js
@@ -5,7 +5,7 @@ import { getConfig } from '../../config';
 import { log } from '../../logger';
 import erMarkers from './erMarkers';
 import { configureSvgSize } from '../../setupGraphViewbox';
-import addSVGAccessibilityFields from '../../accessibility';
+import { addSVGa11yTitleDescription } from '../../accessibility';
 import { parseGenericTypes } from '../common/common';
 import { v4 as uuid4 } from 'uuid';
 
@@ -657,7 +657,7 @@ export const draw = function (text, id, _version, diagObj) {
 
   svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
 
-  addSVGAccessibilityFields(diagObj.db, svg, id);
+  addSVGa11yTitleDescription(diagObj.db, svg, id);
 }; // draw
 
 /**
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index 6b7c4c1bf..a5f991a86 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -10,7 +10,7 @@ import { log } from '../../logger';
 import common, { evaluate } from '../common/common';
 import { interpolateToCurve, getStylesFromArray } from '../../utils';
 import { setupGraphViewbox } from '../../setupGraphViewbox';
-import addSVGAccessibilityFields from '../../accessibility';
+import { addSVGa11yTitleDescription } from '../../accessibility';
 
 const conf = {};
 export const setConf = function (cnf) {
@@ -431,7 +431,7 @@ export const draw = function (text, id, _version, diagObj) {
   const svg = root.select(`[id="${id}"]`);
 
   // Adds title and description to the flow chart
-  addSVGAccessibilityFields(diagObj.db, svg, id);
+  addSVGa11yTitleDescription(diagObj.db, svg, id);
 
   // Run the renderer. This is what draws the final graph.
   const element = root.select('#' + id + ' g');
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
index c403b7fe3..e9069ff4d 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
@@ -8,7 +8,7 @@ import common, { evaluate } from '../common/common';
 import { interpolateToCurve, getStylesFromArray } from '../../utils';
 import { setupGraphViewbox } from '../../setupGraphViewbox';
 import flowChartShapes from './flowChartShapes';
-import addSVGAccessibilityFields from '../../accessibility';
+import { addSVGa11yTitleDescription } from '../../accessibility';
 
 const conf = {};
 export const setConf = function (cnf) {
@@ -418,7 +418,7 @@ export const draw = function (text, id, _version, diagObj) {
   const svg = root.select(`[id="${id}"]`);
 
   // Adds title and description to the flow chart
-  addSVGAccessibilityFields(diagObj.db, svg, id);
+  addSVGa11yTitleDescription(diagObj.db, svg, id);
 
   // Run the renderer. This is what draws the final graph.
   const element = root.select('#' + id + ' g');
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 9501dd024..dc92be1f0 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -19,7 +19,7 @@ import {
 import common from '../common/common';
 import { getConfig } from '../../config';
 import { configureSvgSize } from '../../setupGraphViewbox';
-import addSVGAccessibilityFields from '../../accessibility';
+import { addSVGa11yTitleDescription } from '../../accessibility';
 
 export const setConf = function () {
   log.debug('Something is calling, setConf, remove the call');
@@ -116,7 +116,7 @@ export const draw = function (text, id, version, diagObj) {
     .attr('y', conf.titleTopMargin)
     .attr('class', 'titleText');
 
-  addSVGAccessibilityFields(diagObj.db, svg, id);
+  addSVGa11yTitleDescription(diagObj.db, svg, id);
 
   /**
    * @param tasks
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 71698a500..c9e02a1e4 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -1,7 +1,7 @@
 import { select } from 'd3';
 import { getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI';
 import { log } from '../../logger';
-import addSVGAccessibilityFields from '../../accessibility';
+import { addSVGa11yTitleDescription } from '../../accessibility';
 
 let allCommitsDict = {};
 
@@ -513,7 +513,7 @@ export const draw = function (txt, id, ver, diagObj) {
   const diagram = select(`[id="${id}"]`);
 
   // Adds title and description to the flow chart
-  addSVGAccessibilityFields(diagObj.db, diagram, id);
+  addSVGa11yTitleDescription(diagObj.db, diagram, id);
 
   drawCommits(diagram, allCommitsDict, false);
   if (gitGraphConfig.showBranches) {
diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js
index 6cbb99fa3..daddfda86 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.js
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js
@@ -3,7 +3,7 @@ import { select, scaleOrdinal, pie as d3pie, arc } from 'd3';
 import { log } from '../../logger';
 import { configureSvgSize } from '../../setupGraphViewbox';
 import * as configApi from '../../config';
-import addSVGAccessibilityFields from '../../accessibility';
+import { addSVGa11yTitleDescription } from '../../accessibility';
 
 let conf = configApi.getConfig();
 
@@ -53,7 +53,7 @@ export const draw = (txt, id, _version, diagObj) => {
     const diagram = root.select('#' + id);
     configureSvgSize(diagram, height, width, conf.pie.useMaxWidth);
 
-    addSVGAccessibilityFields(diagObj.db, diagram, id);
+    addSVGa11yTitleDescription(diagObj.db, diagram, id);
     // Set viewBox
     elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
 
diff --git a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
index 79d67e76e..60f456f0b 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
+++ b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
@@ -6,7 +6,7 @@ import { configureSvgSize } from '../../setupGraphViewbox';
 import common from '../common/common';
 import markers from './requirementMarkers';
 import { getConfig } from '../../config';
-import addSVGAccessibilityFields from '../../accessibility';
+import { addSVGa11yTitleDescription } from '../../accessibility';
 
 let conf = {};
 let relCnt = 0;
@@ -364,7 +364,7 @@ export const draw = (text, id, _version, diagObj) => {
 
   svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
   // Adds title and description to the requirements diagram
-  addSVGAccessibilityFields(diagObj.db, svg, id);
+  addSVGa11yTitleDescription(diagObj.db, svg, id);
 };
 
 export default {
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index fa943d658..bf8a512c1 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -9,9 +9,11 @@ import * as configApi from '../../config';
 import assignWithDepth from '../../assignWithDepth';
 import utils from '../../utils';
 import { configureSvgSize } from '../../setupGraphViewbox';
-import addSVGAccessibilityFields from '../../accessibility';
+import { addSVGa11yTitleDescription } from '../../accessibility';
 import Diagram from '../../Diagram';
 
+// FIXME insert a11y title and desc
+
 let conf = {};
 
 export const bounds = {
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
index 1011fb6b1..d6bc821c4 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -5,7 +5,7 @@ import { render } from '../../dagre-wrapper/index.js';
 import { log } from '../../logger';
 import { configureSvgSize } from '../../setupGraphViewbox';
 import common from '../common/common';
-import addSVGAccessibilityFields from '../../accessibility';
+import { addSVGa11yTitleDescription } from '../../accessibility';
 import {
   DEFAULT_DIAGRAM_DIRECTION,
   DEFAULT_NESTED_DOC_DIR,
@@ -481,7 +481,7 @@ export const draw = function (text, id, _version, diag) {
     label.insertBefore(rect, label.firstChild);
     // }
   }
-  addSVGAccessibilityFields(diag.db, svg, id);
+  addSVGa11yTitleDescription(diag.db, svg, id);
 };
 
 export default {
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer.js b/packages/mermaid/src/diagrams/state/stateRenderer.js
index 73717a645..b69d1aaee 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer.js
@@ -6,7 +6,7 @@ import common from '../common/common';
 import { drawState, addTitleAndBox, drawEdge } from './shapes';
 import { getConfig } from '../../config';
 import { configureSvgSize } from '../../setupGraphViewbox';
-import addSVGAccessibilityFields from '../../accessibility';
+import { addSVGa11yTitleDescription } from '../../accessibility';
 
 // TODO Move conf object to main conf in mermaidAPI
 let conf;
@@ -97,7 +97,7 @@ export const draw = function (text, id, _version, diagObj) {
     'viewBox',
     `${bounds.x - conf.padding}  ${bounds.y - conf.padding} ` + width + ' ' + height
   );
-  addSVGAccessibilityFields(diagObj.db, diagram, id);
+  addSVGa11yTitleDescription(diagObj.db, diagram, id);
 };
 const getLabelWidth = (text) => {
   return text ? text.length * conf.fontSizeFactor : 1;
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
index 3880a243a..5a2c1283d 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
@@ -3,7 +3,8 @@ import { select } from 'd3';
 import svgDraw from './svgDraw';
 import { getConfig } from '../../config';
 import { configureSvgSize } from '../../setupGraphViewbox';
-import addSVGAccessibilityFields from '../../accessibility';
+import { addSVGa11yTitleDescription } from '../../accessibility';
+// FIXME insert a11y title and desc
 
 export const setConf = function (cnf) {
   const keys = Object.keys(cnf);

From d99707641b33908d87bb18896a3945213f165c08 Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Tue, 15 Nov 2022 13:49:05 -0800
Subject: [PATCH 19/98] add "roledescription" to cSpell list of words (as in
 'aria-roledescription')

---
 cSpell.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cSpell.json b/cSpell.json
index 08fce1d1c..3398361f4 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -60,6 +60,7 @@
     "podlite",
     "ranksep",
     "redmine",
+    "roledescription",
     "sandboxed",
     "setupgraphviewbox",
     "shiki",

From 1ad63d5b0b7a410fd9a1809c14bd95c1b0d927d7 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 16 Nov 2022 09:49:41 +0530
Subject: [PATCH 20/98] chore: Add working directory

---
 .github/workflows/release-preview-publish.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml
index da12cb5cc..f5b70eedd 100644
--- a/.github/workflows/release-preview-publish.yml
+++ b/.github/workflows/release-preview-publish.yml
@@ -29,8 +29,8 @@ jobs:
         run: npm i json --global
 
       - name: Publish
+        working-directory: ./packages/mermaid
         run: |
-          cd packages/mermaid
           PREVIEW_VERSION=8
           VERSION=$(echo ${{github.ref}} | tail -c +20)-preview.$PREVIEW_VERSION
           echo $VERSION

From 503114c0eb76f1b3776fd7b5ac6007eac0c64060 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 16 Nov 2022 10:22:37 +0530
Subject: [PATCH 21/98] fix: Add commit count to release preview

---
 .github/workflows/release-preview-publish.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml
index f5b70eedd..8bcfbc357 100644
--- a/.github/workflows/release-preview-publish.yml
+++ b/.github/workflows/release-preview-publish.yml
@@ -31,7 +31,7 @@ jobs:
       - name: Publish
         working-directory: ./packages/mermaid
         run: |
-          PREVIEW_VERSION=8
+          PREVIEW_VERSION=$(git log --oneline "origin/$GITHUB_REF_NAME" ^"origin/master" | wc -l)
           VERSION=$(echo ${{github.ref}} | tail -c +20)-preview.$PREVIEW_VERSION
           echo $VERSION
           npm version --no-git-tag-version --allow-same-version $VERSION

From 1d828fe8be8ee818c35df0a2c3dfe153d8d83e5a Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 16 Nov 2022 10:27:42 +0530
Subject: [PATCH 22/98] fix: Add commit count to release preview

---
 .github/workflows/release-preview-publish.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml
index 8bcfbc357..f910c67b7 100644
--- a/.github/workflows/release-preview-publish.yml
+++ b/.github/workflows/release-preview-publish.yml
@@ -10,6 +10,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      - run: |
+          git fetch --no-tags --prune --depth=1 origin +refs/heads/master:refs/remotes/origin/master
 
       - uses: pnpm/action-setup@v2
 

From 52ee234c0fec0dc2a00e78844c193963d0359d7c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 16 Nov 2022 10:31:07 +0530
Subject: [PATCH 23/98] fix: Fetch depth

---
 .github/workflows/release-preview-publish.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml
index f910c67b7..ff57b4f58 100644
--- a/.github/workflows/release-preview-publish.yml
+++ b/.github/workflows/release-preview-publish.yml
@@ -11,7 +11,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - run: |
-          git fetch --no-tags --prune --depth=1 origin +refs/heads/master:refs/remotes/origin/master
+          git fetch --no-tags --prune --depth=0 origin +refs/heads/master:refs/remotes/origin/master
 
       - uses: pnpm/action-setup@v2
 

From e05e0f8ae35e7e6c1739a68b76361637aea9b18e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 16 Nov 2022 10:31:49 +0530
Subject: [PATCH 24/98] fix: Fetch depth

---
 .github/workflows/release-preview-publish.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml
index ff57b4f58..e9c4e46a3 100644
--- a/.github/workflows/release-preview-publish.yml
+++ b/.github/workflows/release-preview-publish.yml
@@ -11,7 +11,7 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - run: |
-          git fetch --no-tags --prune --depth=0 origin +refs/heads/master:refs/remotes/origin/master
+          git fetch --no-tags --prune origin +refs/heads/master:refs/remotes/origin/master
 
       - uses: pnpm/action-setup@v2
 

From 2092330eec603abfd673cf782762f217bd8b5e5c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 16 Nov 2022 11:30:58 +0530
Subject: [PATCH 25/98] fix: Fetch depth

---
 .github/workflows/release-preview-publish.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/release-preview-publish.yml b/.github/workflows/release-preview-publish.yml
index e9c4e46a3..5f4936ab6 100644
--- a/.github/workflows/release-preview-publish.yml
+++ b/.github/workflows/release-preview-publish.yml
@@ -10,8 +10,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-      - run: |
-          git fetch --no-tags --prune origin +refs/heads/master:refs/remotes/origin/master
+        with:
+          fetch-depth: 0
 
       - uses: pnpm/action-setup@v2
 

From 03a11e103ec119660bf2e6b3a3294464591d0935 Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Thu, 17 Nov 2022 12:19:31 -0800
Subject: [PATCH 26/98] (minor) fix typo

---
 cypress/integration/rendering/stateDiagram-v2.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index 5b43c890c..adba68ed2 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -328,7 +328,7 @@ describe('State diagram', () => {
       }
     );
   });
-  it('v2 it should be possibel to use a choice', () => {
+  it('v2 it should be possible to use a choice', () => {
     imgSnapshotTest(
       `
   stateDiagram-v2

From 4d7496b8dd74a758186e54745e1d05dfc66a2000 Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Thu, 17 Nov 2022 12:21:45 -0800
Subject: [PATCH 27/98] add error checking (empty diagramType, title, desc) to
 a11y methods

---
 packages/mermaid/src/accessibility.spec.ts | 219 +++++++++++++++------
 packages/mermaid/src/accessibility.ts      |  59 +++---
 2 files changed, 194 insertions(+), 84 deletions(-)

diff --git a/packages/mermaid/src/accessibility.spec.ts b/packages/mermaid/src/accessibility.spec.ts
index 29a2f125d..7336284fe 100644
--- a/packages/mermaid/src/accessibility.spec.ts
+++ b/packages/mermaid/src/accessibility.spec.ts
@@ -1,73 +1,172 @@
-// Spec/tests for accessibility
-
+import { MockedD3 } from './tests/MockedD3';
 import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
 
-import { MockedD3 } from './tests/MockedD3';
+describe('accessibility', () => {
+  const fauxSvgNode = new MockedD3();
 
-const fauxSvgNode = new MockedD3();
-
-const MockedDiagramDb = {
-  getAccTitle: vi.fn().mockReturnValue('the title'),
-  getAccDescription: vi.fn().mockReturnValue('the description'),
-};
-
-describe('setA11yDiagramInfo', () => {
-  it('sets the aria-roledescription to the diagram type', () => {
-    // @ts-ignore  Required to easily handle the d3 select types
-    const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
-    setA11yDiagramInfo(fauxSvgNode, 'flowchart');
-    expect(svg_attr_spy).toHaveBeenCalledWith('aria-roledescription', 'flowchart');
-  });
-});
-
-describe('addSVGa11yTitleDescription', () => {
-  const testDiagramDb = MockedDiagramDb;
-  const givenId = 'theBaseId';
-
-  describe('with the given svg d3 object:', () => {
-    it('does nothing if there is no insert defined', () => {
-      const noInsertSvg = {
-        attr: vi.fn(),
-      };
-      const noInsert_attr_spy = vi.spyOn(noInsertSvg, 'attr').mockReturnValue(noInsertSvg);
-      addSVGa11yTitleDescription(testDiagramDb, noInsertSvg, givenId);
-      expect(noInsert_attr_spy).not.toHaveBeenCalled();
-    });
-
-    it('sets aria-labelledby to the title id and the description id inserted as children', () => {
-      // @ts-ignore Required to easily handle the d3 select types
+  describe('setA11yDiagramInfo', () => {
+    it('sets the aria-roledescription to the diagram type', () => {
+      // @ts-ignore  Required to easily handle the d3 select types
       const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
-      addSVGa11yTitleDescription(testDiagramDb, fauxSvgNode, givenId);
-      expect(svg_attr_spy).toHaveBeenCalledWith(
-        'aria-labelledby',
-        `chart-title-${givenId} chart-desc-${givenId}`
-      );
+      setA11yDiagramInfo(fauxSvgNode, 'flowchart');
+      expect(svg_attr_spy).toHaveBeenCalledWith('aria-roledescription', 'flowchart');
     });
 
-    it('inserts a title tag as the first child with the text set to the accTitle returned by the diagram db', () => {
-      const faux_title = new MockedD3();
-      const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_title);
+    it('does nothing if the diagram type is empty', () => {
       // @ts-ignore  Required to easily handle the d3 select types
-      const title_attr_spy = vi.spyOn(faux_title, 'attr').mockReturnValue(faux_title);
-      const title_text_spy = vi.spyOn(faux_title, 'text');
-
-      addSVGa11yTitleDescription(testDiagramDb, fauxSvgNode, givenId);
-      expect(svg_insert_spy).toHaveBeenCalledWith('title', ':first-child');
-      expect(title_attr_spy).toHaveBeenCalledWith('id', `chart-title-` + givenId);
-      expect(title_text_spy).toHaveBeenNthCalledWith(2, 'the title');
+      const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+      setA11yDiagramInfo(fauxSvgNode, '');
+      expect(svg_attr_spy).not.toHaveBeenCalled();
     });
+  });
 
-    it('inserts a desc tag as the 2nd child with the text set to accDescription returned by the diagram db', () => {
-      const faux_desc = new MockedD3();
-      const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_desc);
-      // @ts-ignore  Required to easily handle the d3 select types
-      const desc_attr_spy = vi.spyOn(faux_desc, 'attr').mockReturnValue(faux_desc);
-      const desc_text_spy = vi.spyOn(faux_desc, 'text');
+  describe('addSVGa11yTitleDescription', () => {
+    const givenId = 'theBaseId';
 
-      addSVGa11yTitleDescription(testDiagramDb, fauxSvgNode, givenId);
-      expect(svg_insert_spy).toHaveBeenCalledWith('desc', ':first-child');
-      expect(desc_attr_spy).toHaveBeenCalledWith('id', `chart-desc-` + givenId);
-      expect(desc_text_spy).toHaveBeenNthCalledWith(1, 'the description');
+    describe('with the given svg d3 object:', () => {
+      it('does nothing if there is no insert defined', () => {
+        const noInsertSvg = {
+          attr: vi.fn(),
+        };
+        const noInsert_attr_spy = vi.spyOn(noInsertSvg, 'attr').mockReturnValue(noInsertSvg);
+        addSVGa11yTitleDescription(noInsertSvg, 'some title', 'some desc', givenId);
+        expect(noInsert_attr_spy).not.toHaveBeenCalled();
+      });
+
+      describe('given an a11y title', () => {
+        const a11yTitle = 'a11y title';
+
+        describe('given an a11y description', () => {
+          const a11yDesc = 'a11y description';
+
+          it('sets aria-labelledby to the title id and the description id inserted as children', () => {
+            // @ts-ignore Required to easily handle the d3 select types
+            const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svg_attr_spy).toHaveBeenCalledWith(
+              'aria-labelledby',
+              `chart-title-${givenId} chart-desc-${givenId}`
+            );
+          });
+
+          it('inserts a title tag as the first child with the text set to the accTitle given', () => {
+            const faux_title = new MockedD3();
+            const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_title);
+            // @ts-ignore  Required to easily handle the d3 select types
+            const title_attr_spy = vi.spyOn(faux_title, 'attr').mockReturnValue(faux_title);
+            const title_text_spy = vi.spyOn(faux_title, 'text');
+
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svg_insert_spy).toHaveBeenCalledWith('desc', ':first-child');
+            expect(title_attr_spy).toHaveBeenCalledWith('id', `chart-desc-` + givenId);
+            expect(title_text_spy).toHaveBeenNthCalledWith(1, 'a11y description');
+          });
+
+          it('inserts a desc tag as the 2nd child with the text set to accDescription given', () => {
+            const faux_desc = new MockedD3();
+            const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_desc);
+            // @ts-ignore  Required to easily handle the d3 select types
+            const desc_attr_spy = vi.spyOn(faux_desc, 'attr').mockReturnValue(faux_desc);
+            const desc_text_spy = vi.spyOn(faux_desc, 'text');
+
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svg_insert_spy).toHaveBeenCalledWith('desc', ':first-child');
+            expect(desc_attr_spy).toHaveBeenCalledWith('id', `chart-desc-` + givenId);
+            expect(desc_text_spy).toHaveBeenNthCalledWith(1, 'a11y description');
+          });
+        });
+
+        describe(`no a11y description`, () => {
+          const a11yDesc = undefined;
+
+          it('sets aria-labelledby to the title id inserted as a child', () => {
+            // @ts-ignore Required to easily handle the d3 select types
+            const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svg_attr_spy).toHaveBeenCalledWith('aria-labelledby', `chart-title-${givenId}`);
+          });
+
+          it('inserts a title tag as the first child with the text set to the accTitle given', () => {
+            const faux_title = new MockedD3();
+            const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_title);
+            // @ts-ignore  Required to easily handle the d3 select types
+            const title_attr_spy = vi.spyOn(faux_title, 'attr').mockReturnValue(faux_title);
+            const title_text_spy = vi.spyOn(faux_title, 'text');
+
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svg_insert_spy).toHaveBeenCalledWith('title', ':first-child');
+            expect(title_attr_spy).toHaveBeenCalledWith('id', `chart-title-` + givenId);
+            expect(title_text_spy).toHaveBeenNthCalledWith(1, 'a11y title');
+          });
+
+          it('no description tag is inserted', () => {
+            const faux_title = new MockedD3();
+            const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_title);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svg_insert_spy).not.toHaveBeenCalledWith('desc', ':first-child');
+          });
+        });
+      });
+
+      describe('no a11y title', () => {
+        const a11yTitle = undefined;
+
+        describe('given an a11y description', () => {
+          const a11yDesc = 'a11y description';
+
+          it('no title tag inserted', () => {
+            const faux_title = new MockedD3();
+            const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_title);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svg_insert_spy).not.toHaveBeenCalledWith('title', ':first-child');
+          });
+
+          it('sets aria-labelledby to the description id inserted as a child', () => {
+            // @ts-ignore Required to easily handle the d3 select types
+            const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svg_attr_spy).toHaveBeenCalledWith('aria-labelledby', `chart-desc-${givenId}`);
+          });
+
+          it('inserts a desc tag as a child with the text set to accDescription given', () => {
+            const faux_desc = new MockedD3();
+            const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_desc);
+            // @ts-ignore  Required to easily handle the d3 select types
+            const desc_attr_spy = vi.spyOn(faux_desc, 'attr').mockReturnValue(faux_desc);
+            const desc_text_spy = vi.spyOn(faux_desc, 'text');
+
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svg_insert_spy).toHaveBeenCalledWith('desc', ':first-child');
+            expect(desc_attr_spy).toHaveBeenCalledWith('id', `chart-desc-` + givenId);
+            expect(desc_text_spy).toHaveBeenNthCalledWith(1, 'a11y description');
+          });
+        });
+
+        describe('no a11y description', () => {
+          const a11yDesc = undefined;
+
+          it('no title tag inserted', () => {
+            const faux_title = new MockedD3();
+            const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_title);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svg_insert_spy).not.toHaveBeenCalledWith('title', ':first-child');
+          });
+
+          it('no description tag inserted', () => {
+            const faux_desc = new MockedD3();
+            const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_desc);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svg_insert_spy).not.toHaveBeenCalledWith('desc', ':first-child');
+          });
+
+          it('no aria-labelledby is set', () => {
+            // @ts-ignore Required to easily handle the d3 select types
+            const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svg_attr_spy).not.toHaveBeenCalled();
+          });
+        });
+      });
     });
   });
 });
diff --git a/packages/mermaid/src/accessibility.ts b/packages/mermaid/src/accessibility.ts
index 246a88f66..eff9a4edc 100644
--- a/packages/mermaid/src/accessibility.ts
+++ b/packages/mermaid/src/accessibility.ts
@@ -3,43 +3,54 @@
  *
  */
 
-// This is just a convenience alias to make it clear the type is a d3 object. (It's easier to make it 'any' instead of the comple typing set in d3)
+import { isEmpty, compact } from 'lodash';
+
+// This is just a convenience alias to make it clear the type is a d3 object. (It's easier to make it 'any' instead of the complete typing set in d3)
 type D3object = any;
 
 /**
- * Set the accessibility (a11y) information for the svg d3 object using the given diagram type
- * Note that the svg element role _should_ be mapped to a 'graphics-document' by default. Thus we don't set it here, but can set it in the future if needed.
+ * Add aria-roledescription to the svg element to the diagramType
+ *
  * @param svg - d3 object that contains the SVG HTML element
  * @param diagramType - diagram name for to the aria-roledescription
  */
-export function setA11yDiagramInfo(svg: D3object, diagramType: string) {
-  svg.attr('aria-roledescription', diagramType);
+export function setA11yDiagramInfo(svg: D3object, diagramType: string | null | undefined) {
+  if (!isEmpty(diagramType)) {
+    svg.attr('aria-roledescription', diagramType);
+  }
 }
-
 /**
- * This method will add a basic title and description element to a chart. The yy parser will need to
- * respond to getAccTitle and getAccDescription,
- * where the accessible title is the title element on the chart.
+ * Add an accessible title and/or description element to a chart.
+ * The title is usually not displayed and the description is never displayed.
  *
- * Note that the accessible title is generally _not_ displayed
- * and the accessible description is never displayed.
+ * The following charts display their title as a visual and accessibility element: gantt
  *
- *
- * The following charts display their title as a visual and accessibility element: gantt.  TODO fix this
- *
- * @param diagramDb - the 'db' object/module for a diagram. Must respond to getAccTitle() and getAccDescription()
- * @param svg - the d3 object that represents the svg element
- * @param baseId - the id to use as the base for the title and description
+ * @param svg - d3 node to insert the a11y title and desc info
+ * @param a11yTitle - a11y title. null and undefined are meaningful: means to skip it
+ * @param a11yDesc - a11y description.  null and undefined are meaningful: means to skip it
+ * @param baseId - id used to construct the a11y title and description id
  */
-export function addSVGa11yTitleDescription(diagramDb: any, svg: D3object, baseId: string) {
+export function addSVGa11yTitleDescription(
+  svg: D3object,
+  a11yTitle: string | null | undefined,
+  a11yDesc: string | null | undefined,
+  baseId: string
+) {
   if (typeof svg.insert === 'undefined') {
     return;
   }
 
-  const titleId = 'chart-title-' + baseId;
-  const descId = 'chart-desc-' + baseId;
-
-  svg.attr('aria-labelledby', titleId + ' ' + descId);
-  svg.insert('desc', ':first-child').attr('id', descId).text(diagramDb.getAccDescription());
-  svg.insert('title', ':first-child').attr('id', titleId).text(diagramDb.getAccTitle());
+  const titleId = a11yTitle ? 'chart-title-' + baseId : null;
+  const descId = a11yDesc ? 'chart-desc-' + baseId : null;
+  if (a11yTitle || a11yDesc) {
+    svg.attr('aria-labelledby', compact([titleId, descId]).join(' '));
+    if (a11yDesc) {
+      svg.insert('desc', ':first-child').attr('id', descId).text(a11yDesc);
+    }
+    if (a11yTitle) {
+      svg.insert('title', ':first-child').attr('id', titleId).text(a11yTitle);
+    }
+  } else {
+    return;
+  }
 }

From 8a3c4f64b2d05a8173a879474c3e139d0be3fb0b Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Thu, 17 Nov 2022 12:23:01 -0800
Subject: [PATCH 28/98] MockedD3: node() return Element; add selectAll()

---
 packages/mermaid/src/tests/MockedD3.ts | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/tests/MockedD3.ts b/packages/mermaid/src/tests/MockedD3.ts
index d7c16b3a8..24cb9043f 100644
--- a/packages/mermaid/src/tests/MockedD3.ts
+++ b/packages/mermaid/src/tests/MockedD3.ts
@@ -1,12 +1,18 @@
 /**
  * This is a mocked/stubbed version of the d3 Selection type. Each of the main functions are all
  * mocked (via vi.fn()) so you can track if they have been called, etc.
+ *
+ * Note that node() returns a HTML Element with tag 'svg'. It is an empty element (no innerHTML, no children, etc).
+ * This potentially allows testing of mermaidAPI render().
  */
+
 export class MockedD3 {
   public attribs = new Map<string, string | null>();
   public id: string | undefined = '';
   _children: MockedD3[] = [];
 
+  _containingHTMLdoc = new Document();
+
   constructor(givenId = 'mock-id') {
     this.id = givenId;
   }
@@ -29,6 +35,11 @@ export class MockedD3 {
     return new MockedD3(cleanId);
   });
 
+  // This has the same implementation as select(). (It calls it.)
+  selectAll = vi.fn().mockImplementation(({ select_str = '' }): MockedD3 => {
+    return this.select(select_str);
+  });
+
   append = vi
     .fn()
     .mockImplementation(function (this: MockedD3, type: string, id = '' + '-appended'): MockedD3 {
@@ -87,9 +98,18 @@ export class MockedD3 {
     this.attribs.set('text', attrValue);
     return this;
   }
-  // NOTE: Arbitrarily returns an empty object. The return value could be something different with a mockReturnValue() or mockImplementation()
-  public node = vi.fn().mockReturnValue({});
 
+  // NOTE: Returns a HTML ELement with tag 'svg' that has _another_ 'svg' element child.
+  // This allows different tests to succeed -- some need a top level 'svg' and some need a 'svg' element to be the firstChild
+  // Real implementation returns an HTML Element
+  public node = vi.fn().mockImplementation(() => {
+    const topElem = this._containingHTMLdoc.createElement('svg');
+    const elem_svgChild = this._containingHTMLdoc.createElement('svg'); // another svg element
+    topElem.appendChild(elem_svgChild);
+    return topElem;
+  });
+
+  // TODO Is this correct? shouldn't it return a list of HTML Elements?
   nodes = vi.fn().mockImplementation(function (this: MockedD3): MockedD3[] {
     return this._children;
   });

From 1fc02940ae9fbb8c3f6ad892bd7202eed20638e8 Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Thu, 17 Nov 2022 12:24:16 -0800
Subject: [PATCH 29/98] move mocks specific to only seq spec files out of
 global d3 mock

---
 .../diagrams/sequence/sequenceDiagram.spec.js | 54 +++++++++++++++++++
 .../src/diagrams/sequence/svgDraw.spec.js     | 28 +++++++++-
 2 files changed, 81 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
index 9422a5f37..6395940b0 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js
@@ -1,8 +1,62 @@
+import { vi } from 'vitest';
+
 import * as configApi from '../../config';
 import mermaidAPI from '../../mermaidAPI';
 import Diagram from '../../Diagram';
 import { addDiagrams } from '../../diagram-api/diagram-orchestration';
+
+/**
+ * Sequence diagrams require their own very special version of a mocked d3 module
+ * diagrams/sequence/svgDraw uses statements like this with d3 nodes: (note the [0][0])
+ *
+ *   // in drawText(...)
+ *   textHeight += (textElem._groups || textElem)[0][0].getBBox().height;
+ */
+vi.mock('d3', () => {
+  const NewD3 = function () {
+    function returnThis() {
+      return this;
+    }
+    return {
+      append: function () {
+        return NewD3();
+      },
+      lower: returnThis,
+      attr: returnThis,
+      style: returnThis,
+      text: returnThis,
+      // [0][0] (below) is required by drawText() in packages/mermaid/src/diagrams/sequence/svgDraw.js
+      0: {
+        0: {
+          getBBox: function () {
+            return {
+              height: 10,
+              width: 20,
+            };
+          },
+        },
+      },
+    };
+  };
+
+  return {
+    select: function () {
+      return new NewD3();
+    },
+
+    selectAll: function () {
+      return new NewD3();
+    },
+
+    curveBasis: 'basis',
+    curveLinear: 'linear',
+    curveCardinal: 'cardinal',
+  };
+});
+// -------------------------------
+
 addDiagrams();
+
 /**
  * @param conf
  * @param key
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.spec.js b/packages/mermaid/src/diagrams/sequence/svgDraw.spec.js
index 580dafe89..8e5f5f32b 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.spec.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.spec.js
@@ -1,5 +1,31 @@
+import { vi } from 'vitest';
 import svgDraw from './svgDraw';
-import { MockD3 } from 'd3';
+
+// This is the only place that uses this mock
+export const MockD3 = (name, parent) => {
+  const children = [];
+  const elem = {
+    get __children() {
+      return children;
+    },
+    get __name() {
+      return name;
+    },
+    get __parent() {
+      return parent;
+    },
+  };
+  elem.append = (name) => {
+    const mockElem = MockD3(name, elem);
+    children.push(mockElem);
+    return mockElem;
+  };
+  elem.lower = vi.fn(() => elem);
+  elem.attr = vi.fn(() => elem);
+  elem.text = vi.fn(() => elem);
+  elem.style = vi.fn(() => elem);
+  return elem;
+};
 
 describe('svgDraw', function () {
   describe('drawRect', function () {

From 1ad537bc4d44025a361546aa45a8291a248b4049 Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Thu, 17 Nov 2022 12:24:58 -0800
Subject: [PATCH 30/98] d3 mock: use MockedD3; remove sequence specific mock
 code

---
 __mocks__/d3.ts | 59 +++----------------------------------------------
 1 file changed, 3 insertions(+), 56 deletions(-)

diff --git a/__mocks__/d3.ts b/__mocks__/d3.ts
index 67f09b6f4..af35020c5 100644
--- a/__mocks__/d3.ts
+++ b/__mocks__/d3.ts
@@ -1,67 +1,14 @@
 // @ts-nocheck TODO: Fix TS
-import { vi } from 'vitest';
-
-const NewD3 = function () {
-  /**
-   *
-   */
-  function returnThis() {
-    return this;
-  }
-  return {
-    append: function () {
-      return NewD3();
-    },
-    lower: returnThis,
-    attr: returnThis,
-    style: returnThis,
-    text: returnThis,
-    0: {
-      0: {
-        getBBox: function () {
-          return {
-            height: 10,
-            width: 20,
-          };
-        },
-      },
-    },
-  };
-};
+import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3';
 
 export const select = function () {
-  return new NewD3();
+  return new MockedD3();
 };
 
 export const selectAll = function () {
-  return new NewD3();
+  return new MockedD3();
 };
 
 export const curveBasis = 'basis';
 export const curveLinear = 'linear';
 export const curveCardinal = 'cardinal';
-
-export const MockD3 = (name, parent) => {
-  const children = [];
-  const elem = {
-    get __children() {
-      return children;
-    },
-    get __name() {
-      return name;
-    },
-    get __parent() {
-      return parent;
-    },
-  };
-  elem.append = (name) => {
-    const mockElem = MockD3(name, elem);
-    children.push(mockElem);
-    return mockElem;
-  };
-  elem.lower = vi.fn(() => elem);
-  elem.attr = vi.fn(() => elem);
-  elem.text = vi.fn(() => elem);
-  elem.style = vi.fn(() => elem);
-  return elem;
-};

From f62c5d9698d8738b7058ec8834c5d62e677d9178 Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Thu, 17 Nov 2022 12:25:14 -0800
Subject: [PATCH 31/98] add diagram renderer mocks

---
 __mocks__/c4Renderer.js          | 21 +++++++++++++++++++++
 __mocks__/classRenderer-v2.js    | 16 ++++++++++++++++
 __mocks__/classRenderer.js       | 13 +++++++++++++
 __mocks__/erRenderer.js          | 16 ++++++++++++++++
 __mocks__/flowRenderer-v2.js     | 24 ++++++++++++++++++++++++
 __mocks__/ganttRenderer.js       | 16 ++++++++++++++++
 __mocks__/gitGraphRenderer.js    | 13 +++++++++++++
 __mocks__/journeyRenderer.js     | 15 +++++++++++++++
 __mocks__/pieRenderer.js         | 13 +++++++++++++
 __mocks__/requirementRenderer.js | 13 +++++++++++++
 __mocks__/sequenceRenderer.js    | 23 +++++++++++++++++++++++
 __mocks__/stateRenderer-v2.js    | 22 ++++++++++++++++++++++
 12 files changed, 205 insertions(+)
 create mode 100644 __mocks__/c4Renderer.js
 create mode 100644 __mocks__/classRenderer-v2.js
 create mode 100644 __mocks__/classRenderer.js
 create mode 100644 __mocks__/erRenderer.js
 create mode 100644 __mocks__/flowRenderer-v2.js
 create mode 100644 __mocks__/ganttRenderer.js
 create mode 100644 __mocks__/gitGraphRenderer.js
 create mode 100644 __mocks__/journeyRenderer.js
 create mode 100644 __mocks__/pieRenderer.js
 create mode 100644 __mocks__/requirementRenderer.js
 create mode 100644 __mocks__/sequenceRenderer.js
 create mode 100644 __mocks__/stateRenderer-v2.js

diff --git a/__mocks__/c4Renderer.js b/__mocks__/c4Renderer.js
new file mode 100644
index 000000000..576d5d863
--- /dev/null
+++ b/__mocks__/c4Renderer.js
@@ -0,0 +1,21 @@
+/**
+ * Mocked C4Context diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const drawPersonOrSystemArray = vi.fn();
+export const drawBoundary = vi.fn();
+
+export const setConf = vi.fn();
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  drawPersonOrSystemArray,
+  drawBoundary,
+  setConf,
+  draw,
+};
diff --git a/__mocks__/classRenderer-v2.js b/__mocks__/classRenderer-v2.js
new file mode 100644
index 000000000..1ad95806f
--- /dev/null
+++ b/__mocks__/classRenderer-v2.js
@@ -0,0 +1,16 @@
+/**
+ * Mocked class diagram v2 renderer
+ */
+
+import { vi } from 'vitest';
+
+export const setConf = vi.fn();
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  setConf,
+  draw,
+};
diff --git a/__mocks__/classRenderer.js b/__mocks__/classRenderer.js
new file mode 100644
index 000000000..1c20de4b1
--- /dev/null
+++ b/__mocks__/classRenderer.js
@@ -0,0 +1,13 @@
+/**
+ * Mocked class diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  draw,
+};
diff --git a/__mocks__/erRenderer.js b/__mocks__/erRenderer.js
new file mode 100644
index 000000000..845d641f7
--- /dev/null
+++ b/__mocks__/erRenderer.js
@@ -0,0 +1,16 @@
+/**
+ * Mocked er diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const setConf = vi.fn();
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  setConf,
+  draw,
+};
diff --git a/__mocks__/flowRenderer-v2.js b/__mocks__/flowRenderer-v2.js
new file mode 100644
index 000000000..89cc86031
--- /dev/null
+++ b/__mocks__/flowRenderer-v2.js
@@ -0,0 +1,24 @@
+/**
+ * Mocked flow (flowchart) diagram v2 renderer
+ */
+
+import { vi } from 'vitest';
+
+export const setConf = vi.fn();
+export const addVertices = vi.fn();
+export const addEdges = vi.fn();
+export const getClasses = vi.fn().mockImplementation(() => {
+  return {};
+});
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  setConf,
+  addVertices,
+  addEdges,
+  getClasses,
+  draw,
+};
diff --git a/__mocks__/ganttRenderer.js b/__mocks__/ganttRenderer.js
new file mode 100644
index 000000000..957249832
--- /dev/null
+++ b/__mocks__/ganttRenderer.js
@@ -0,0 +1,16 @@
+/**
+ * Mocked gantt diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const setConf = vi.fn();
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  setConf,
+  draw,
+};
diff --git a/__mocks__/gitGraphRenderer.js b/__mocks__/gitGraphRenderer.js
new file mode 100644
index 000000000..1daa82ca4
--- /dev/null
+++ b/__mocks__/gitGraphRenderer.js
@@ -0,0 +1,13 @@
+/**
+ * Mocked git (graph) diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  draw,
+};
diff --git a/__mocks__/journeyRenderer.js b/__mocks__/journeyRenderer.js
new file mode 100644
index 000000000..2bc77c0b1
--- /dev/null
+++ b/__mocks__/journeyRenderer.js
@@ -0,0 +1,15 @@
+/**
+ * Mocked pie (picChart) diagram renderer
+ */
+
+import { vi } from 'vitest';
+export const setConf = vi.fn();
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  setConf,
+  draw,
+};
diff --git a/__mocks__/pieRenderer.js b/__mocks__/pieRenderer.js
new file mode 100644
index 000000000..317c69901
--- /dev/null
+++ b/__mocks__/pieRenderer.js
@@ -0,0 +1,13 @@
+/**
+ * Mocked pie (picChart) diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  draw,
+};
diff --git a/__mocks__/requirementRenderer.js b/__mocks__/requirementRenderer.js
new file mode 100644
index 000000000..48d8997ac
--- /dev/null
+++ b/__mocks__/requirementRenderer.js
@@ -0,0 +1,13 @@
+/**
+ * Mocked requirement diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  draw,
+};
diff --git a/__mocks__/sequenceRenderer.js b/__mocks__/sequenceRenderer.js
new file mode 100644
index 000000000..11080c6bb
--- /dev/null
+++ b/__mocks__/sequenceRenderer.js
@@ -0,0 +1,23 @@
+/**
+ * Mocked sequence diagram renderer
+ */
+
+import { vi } from 'vitest';
+
+export const bounds = vi.fn();
+export const drawActors = vi.fn();
+export const drawActorsPopup = vi.fn();
+
+export const setConf = vi.fn();
+
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  bounds,
+  drawActors,
+  drawActorsPopup,
+  setConf,
+  draw,
+};
diff --git a/__mocks__/stateRenderer-v2.js b/__mocks__/stateRenderer-v2.js
new file mode 100644
index 000000000..a2d103b50
--- /dev/null
+++ b/__mocks__/stateRenderer-v2.js
@@ -0,0 +1,22 @@
+/**
+ * Mocked state diagram v2 renderer
+ */
+
+import { vi } from 'vitest';
+
+export const setConf = vi.fn();
+export const getClasses = vi.fn().mockImplementation(() => {
+  return {};
+});
+export const stateDomId = vi.fn().mockImplementation(() => {
+  return 'mocked-stateDiagram-stateDomId';
+});
+export const draw = vi.fn().mockImplementation(() => {
+  return '';
+});
+
+export default {
+  setConf,
+  getClasses,
+  draw,
+};

From 29efc116f340bc85fa670035b8d411ca957de3fe Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Thu, 17 Nov 2022 12:27:17 -0800
Subject: [PATCH 32/98] put a11y into mermaidAPI render; add render spec (mock
 diagram renderers etc)

---
 docs/community/newDiagram.md            |  4 +-
 docs/config/setup/modules/mermaidAPI.md | 20 +++---
 packages/mermaid/src/mermaidAPI.spec.ts | 96 +++++++++++++++++++++++--
 packages/mermaid/src/mermaidAPI.ts      | 15 +++-
 4 files changed, 118 insertions(+), 17 deletions(-)

diff --git a/docs/community/newDiagram.md b/docs/community/newDiagram.md
index da86f9838..e49dd3749 100644
--- a/docs/community/newDiagram.md
+++ b/docs/community/newDiagram.md
@@ -214,7 +214,9 @@ The functions for setting title and description are provided by a common module.
       clear as commonClear,
     } from '../../commonDb';
 
-For rendering the accessibility tags you have again an existing function you can use.
+Starting with Mermaid version, the accessibility tags are inserted into the SVG element in the `render` function in mermaidAPI.
+
+In version \_\_\_ and before, you need to insert the accessibility tags in your renderer:
 
 **In the renderer:**
 
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 0acfe4f97..baa4a939c 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -80,7 +80,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:949](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L949)
+[mermaidAPI.ts:960](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L960)
 
 ## Functions
 
@@ -111,7 +111,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:292](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L292)
+[mermaidAPI.ts:294](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L294)
 
 ---
 
@@ -137,7 +137,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:243](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L243)
+[mermaidAPI.ts:245](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L245)
 
 ---
 
@@ -163,7 +163,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L170)
+[mermaidAPI.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L172)
 
 ---
 
@@ -186,7 +186,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:220](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L220)
+[mermaidAPI.ts:222](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L222)
 
 ---
 
@@ -213,7 +213,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L154)
+[mermaidAPI.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L156)
 
 ---
 
@@ -233,7 +233,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L128)
+[mermaidAPI.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L130)
 
 ---
 
@@ -253,7 +253,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L99)
+[mermaidAPI.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L101)
 
 ---
 
@@ -279,7 +279,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:271](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L271)
+[mermaidAPI.ts:273](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L273)
 
 ---
 
@@ -305,4 +305,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:343](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L343)
+[mermaidAPI.ts:345](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L345)
diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts
index 786b163c4..fcc547546 100644
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -1,6 +1,38 @@
 'use strict';
 import { vi } from 'vitest';
 
+// -------------------------------------
+//  Mocks and mocking
+
+import { MockedD3 } from './tests/MockedD3';
+
+// Note: If running this directly from within an IDE, the mocks directory must be at packages/mermaid/mocks
+vi.mock('d3');
+vi.mock('dagre-d3');
+
+// mermaidAPI.spec.ts:
+import * as accessibility from './accessibility'; // Import it this way so we can use spyOn(accessibility,...)
+vi.mock('./accessibility', () => ({
+  setA11yDiagramInfo: vi.fn(),
+  addSVGa11yTitleDescription: vi.fn(),
+}));
+
+// Mock the renderers specifically so we can test render(). Need to mock draw() for each renderer
+vi.mock('./diagrams/c4/c4Renderer');
+vi.mock('./diagrams/class/classRenderer');
+vi.mock('./diagrams/class/classRenderer-v2');
+vi.mock('./diagrams/er/erRenderer');
+vi.mock('./diagrams/flowchart/flowRenderer-v2');
+vi.mock('./diagrams/git/gitGraphRenderer');
+vi.mock('./diagrams/gantt/ganttRenderer');
+vi.mock('./diagrams/user-journey/journeyRenderer');
+vi.mock('./diagrams/pie/pieRenderer');
+vi.mock('./diagrams/requirement/requirementRenderer');
+vi.mock('./diagrams/sequence/sequenceRenderer');
+vi.mock('./diagrams/state/stateRenderer-v2');
+
+// -------------------------------------
+
 import mermaid from './mermaid';
 import { MermaidConfig } from './config.type';
 
@@ -37,7 +69,10 @@ vi.mock('stylis', () => {
 });
 import { compile, serialize } from 'stylis';
 
-import { MockedD3 } from './tests/MockedD3';
+/**
+ * @see https://vitest.dev/guide/mocking.html Mock part of a module
+ * To investigate how to mock just some methods from a module - call the actual implementation and then mock others, e.g. so they can be spied on
+ */
 
 // -------------------------------------------------------------------------------------
 
@@ -335,7 +370,8 @@ describe('mermaidAPI', function () {
             const htmlElements = ['> *', 'span'];
 
             it('creates CSS styles for every style and textStyle in every classDef', () => {
-              // @todo TODO Can't figure out how to spy on the cssImportantStyles method. That would be a much better approach than manually checking the result
+              // @todo TODO Can't figure out how to spy on the cssImportantStyles method.
+              //   That would be a much better approach than manually checking the result
 
               const styles = createCssStyles(mocked_config, graphType, classDefs);
               htmlElements.forEach((htmlElement) => {
@@ -373,7 +409,7 @@ describe('mermaidAPI', function () {
             const htmlElements = ['rect', 'polygon', 'ellipse', 'circle'];
 
             it('creates CSS styles for every style and textStyle in every classDef', () => {
-              // @todo TODO Can't figure out how to spy on the cssImportantStyles method. That would be a much better approach than manually checking the result
+              // TODO Can't figure out how to spy on the cssImportantStyles method. That would be a much better approach than manually checking the result.
 
               const styles = createCssStyles(mocked_config_no_htmlLabels, graphType, classDefs);
               htmlElements.forEach((htmlElement) => {
@@ -510,7 +546,7 @@ describe('mermaidAPI', function () {
       expect(config.testLiteral).toBe(true);
     });
 
-    it('copies a an object into the configuration', function () {
+    it('copies an object into the configuration', function () {
       const orgConfig: any = mermaidAPI.getConfig();
       expect(orgConfig.testObject).toBe(undefined);
 
@@ -616,6 +652,7 @@ describe('mermaidAPI', function () {
       expect(mermaidAPI.defaultConfig['logLevel']).toBe(5);
     });
   });
+
   describe('dompurify config', function () {
     it('allows dompurify config to be set', function () {
       mermaidAPI.initialize({ dompurifyConfig: { ADD_ATTR: ['onclick'] } });
@@ -623,6 +660,7 @@ describe('mermaidAPI', function () {
       expect(mermaidAPI!.getConfig()!.dompurifyConfig!.ADD_ATTR).toEqual(['onclick']);
     });
   });
+
   describe('parse', function () {
     mermaid.parseError = undefined; // ensure it parseError undefined
     it('throws for an invalid definition (with no mermaid.parseError() defined)', function () {
@@ -646,4 +684,54 @@ describe('mermaidAPI', function () {
       expect(mermaidAPI.parse('graph TD;A--x|text including URL space|B;')).toEqual(true);
     });
   });
+
+  describe('render', () => {
+    // These are more like integration tests right now because nothing is mocked.
+    // But it is faster that a cypress test and there's no real reason to actually evaluate an image pixel by pixel.
+
+    // render(id, text, cb?, svgContainingElement?)
+
+    // Test all diagram types.  Note that old flowchart 'graph' type will invoke the flowRenderer-v2. (See the flowchart v2 detector.)
+    // We have to have both the specific textDiagramType and the expected type name because the expected type may be slightly different than was is put in the diagram text (ex: in -v2 diagrams)
+    const diagramTypesAndExpectations = [
+      { textDiagramType: 'C4Context', expectedType: 'c4' },
+      { textDiagramType: 'classDiagram', expectedType: 'classDiagram' },
+      { textDiagramType: 'classDiagram-v2', expectedType: 'classDiagram' },
+      { textDiagramType: 'erDiagram', expectedType: 'er' },
+      { textDiagramType: 'graph', expectedType: 'flowchart-v2' },
+      { textDiagramType: 'flowchart', expectedType: 'flowchart-v2' },
+      { textDiagramType: 'gitGraph', expectedType: 'gitGraph' },
+      { textDiagramType: 'gantt', expectedType: 'gantt' },
+      { textDiagramType: 'journey', expectedType: 'journey' },
+      { textDiagramType: 'pie', expectedType: 'pie' },
+      { textDiagramType: 'requirementDiagram', expectedType: 'requirement' },
+      { textDiagramType: 'sequenceDiagram', expectedType: 'sequence' },
+      { textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' },
+    ];
+
+    describe('accessibility', () => {
+      const id = 'mermaid-fauxId';
+      const a11yTitle = 'a11y title';
+      const a11yDescr = 'a11y description';
+
+      diagramTypesAndExpectations.forEach((testedDiagram) => {
+        describe(`${testedDiagram.textDiagramType}`, () => {
+          const diagramType = testedDiagram.textDiagramType;
+          const diagramText = `${diagramType}\n accTitle: ${a11yTitle}\n accDescr: ${a11yDescr}\n`;
+          const expectedDiagramType = testedDiagram.expectedType;
+
+          it('aria-roledscription is set to the diagram type, addSVGa11yTitleDescription is called', () => {
+            const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo');
+            const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription');
+            mermaidAPI.render(id, diagramText);
+            expect(a11yDiagramInfo_spy).toHaveBeenCalledWith(
+              expect.anything(),
+              expectedDiagramType
+            );
+            expect(a11yTitleDesc_spy).toHaveBeenCalled();
+          });
+        });
+      });
+    });
+  });
 });
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 0df1da305..18076b488 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -29,6 +29,8 @@ import utils, { directiveSanitizer } from './utils';
 import DOMPurify from 'dompurify';
 import { MermaidConfig } from './config.type';
 import { evaluate } from './diagrams/common/common';
+import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
+
 import { isEmpty } from 'lodash';
 
 // diagram names that support classDef statements
@@ -487,12 +489,13 @@ const render = function (
     parseEncounteredException = error;
   }
 
-  // Get the temporary div element containing the svg
+  // Get the temporary div element containing the svg (the parent HTML Element)
   const element = root.select(enclosingDivID_selector).node();
   const graphType = diag.type;
 
   // -------------------------------------------------------------------------------
   // Create and insert the styles (user styles, theme styles, config styles)
+  //  These are dealing with HTML Elements, not d3 nodes.
 
   // Insert an element into svg. This is where we put the styles
   const svg = element.firstChild;
@@ -509,6 +512,7 @@ const render = function (
     idSelector
   );
 
+  // svg is a HTML element (not a d3 node)
   const style1 = document.createElement('style');
   style1.innerHTML = `${idSelector} ` + rules;
   svg.insertBefore(style1, firstChild);
@@ -522,6 +526,13 @@ const render = function (
     throw e;
   }
 
+  // This is the d3 node for the svg element
+  const svgNode = root.select(`${enclosingDivID_selector} svg`);
+  setA11yDiagramInfo(svgNode, graphType);
+  const a11yTitle = diag.db.getAccTitle !== undefined ? diag.db.getAccTitle() : null;
+  const a11yDescr = diag.db.getAccDescription !== undefined ? diag.db.getAccDescription() : null;
+  addSVGa11yTitleDescription(svgNode, a11yTitle, a11yDescr, svgNode.attr('id'));
+
   // -------------------------------------------------------------------------------
   // Clean up SVG code
   root.select(`[id="${id}"]`).selectAll('foreignobject > *').attr('xmlns', XMLNS_XHTML_STD);
@@ -763,7 +774,7 @@ const renderAsync = async function (
   attachFunctions();
 
   // -------------------------------------------------------------------------------
-  // Remove the temporary element if appropriate
+  // Remove the temporary HTML element if appropriate
   const tmpElementSelector = isSandboxed ? iFrameID_selector : enclosingDivID_selector;
   const node = select(tmpElementSelector).node();
   if (node && 'remove' in node) {

From 0adc6a6112bca1d6461eb85ae7603b7fa7b3287f Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Thu, 17 Nov 2022 12:28:11 -0800
Subject: [PATCH 33/98] remove a11y from individual diagrams; now happens in
 mermaidAPI render

---
 cypress/integration/rendering/gantt.spec.js   | 32 ---------
 .../integration/rendering/requirement.spec.js | 65 -------------------
 .../mermaid/src/diagrams/c4/c4Renderer.js     |  2 -
 .../src/diagrams/class/classRenderer-v2.js    |  2 -
 .../src/diagrams/class/classRenderer.js       |  2 -
 .../mermaid/src/diagrams/er/erRenderer.js     |  3 -
 .../src/diagrams/er/parser/erDiagram.spec.js  | 16 -----
 .../src/diagrams/flowchart/flowRenderer-v2.js |  4 --
 .../src/diagrams/flowchart/flowRenderer.js    |  4 --
 .../src/diagrams/gantt/ganttRenderer.js       |  3 -
 .../src/diagrams/git/gitGraphRenderer.js      |  4 --
 .../mermaid/src/diagrams/pie/pieRenderer.js   |  2 -
 .../requirement/requirementRenderer.js        |  3 -
 .../src/diagrams/sequence/sequenceRenderer.ts |  4 --
 .../src/diagrams/state/stateRenderer-v2.js    |  2 -
 .../src/diagrams/state/stateRenderer.js       |  2 -
 .../diagrams/user-journey/journeyRenderer.ts  |  4 --
 17 files changed, 154 deletions(-)

diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index b75e682c6..c0156eee3 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -310,38 +310,6 @@ describe('Gantt diagram', () => {
     );
   });
 
-  it('should render accessibility tags', function () {
-    const expectedTitle = 'Gantt Diagram';
-    const expectedAccDescription = 'Tasks for Q4';
-    renderGraph(
-      `
-      gantt
-      accTitle: ${expectedTitle}
-      accDescr: ${expectedAccDescription}
-      dateFormat  YYYY-MM-DD
-      section Section
-      A task :a1, 2014-01-01, 30d
-      `,
-      {}
-    );
-    cy.get('svg').should((svg) => {
-      const el = svg.get(0);
-      const children = Array.from(el.children);
-
-      const titleEl = children.find(function (node) {
-        return node.tagName === 'title';
-      });
-      const descriptionEl = children.find(function (node) {
-        return node.tagName === 'desc';
-      });
-
-      expect(titleEl).to.exist;
-      expect(titleEl.textContent).to.equal(expectedTitle);
-      expect(descriptionEl).to.exist;
-      expect(descriptionEl.textContent).to.equal(expectedAccDescription);
-    });
-  });
-
   it('should render a gantt diagram with tick is 15 minutes', () => {
     imgSnapshotTest(
       `
diff --git a/cypress/integration/rendering/requirement.spec.js b/cypress/integration/rendering/requirement.spec.js
index be27f39fa..0bf9014bf 100644
--- a/cypress/integration/rendering/requirement.spec.js
+++ b/cypress/integration/rendering/requirement.spec.js
@@ -46,69 +46,4 @@ describe('Requirement diagram', () => {
     );
     cy.get('svg');
   });
-
-  it('should render accessibility tags', function () {
-    const expectedTitle = 'Gantt Diagram';
-    const expectedAccDescription = 'Tasks for Q4';
-    renderGraph(
-      `
-    requirementDiagram
-    accTitle: ${expectedTitle}
-    accDescr: ${expectedAccDescription}
-
-    requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    functionalRequirement test_req2 {
-    id: 1.1
-    text: the second test text.
-    risk: low
-    verifymethod: inspection
-    }
-
-    performanceRequirement test_req3 {
-    id: 1.2
-    text: the third test text.
-    risk: medium
-    verifymethod: demonstration
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    element test_entity2 {
-    type: word doc
-    docRef: reqs/test_entity
-    }
-
-
-    test_entity - satisfies -> test_req2
-    test_req - traces -> test_req2
-    test_req - contains -> test_req3
-    test_req <- copies - test_entity2
-      `,
-      {}
-    );
-    cy.get('svg').should((svg) => {
-      const el = svg.get(0);
-      const children = Array.from(el.children);
-
-      const titleEl = children.find(function (node) {
-        return node.tagName === 'title';
-      });
-      const descriptionEl = children.find(function (node) {
-        return node.tagName === 'desc';
-      });
-
-      expect(titleEl).to.exist;
-      expect(titleEl.textContent).to.equal(expectedTitle);
-      expect(descriptionEl).to.exist;
-      expect(descriptionEl.textContent).to.equal(expectedAccDescription);
-    });
-  });
 });
diff --git a/packages/mermaid/src/diagrams/c4/c4Renderer.js b/packages/mermaid/src/diagrams/c4/c4Renderer.js
index a2d7813c6..580abbccc 100644
--- a/packages/mermaid/src/diagrams/c4/c4Renderer.js
+++ b/packages/mermaid/src/diagrams/c4/c4Renderer.js
@@ -8,7 +8,6 @@ import * as configApi from '../../config';
 import assignWithDepth from '../../assignWithDepth';
 import { wrapLabel, calculateTextWidth, calculateTextHeight } from '../../utils';
 import { configureSvgSize } from '../../setupGraphViewbox';
-import { addSVGa11yTitleDescription } from '../../accessibility';
 
 let globalBoundaryMaxX = 0,
   globalBoundaryMaxY = 0;
@@ -676,7 +675,6 @@ export const draw = function (_text, id, _version, diagObj) {
       (height + extraVertForTitle)
   );
 
-  addSVGa11yTitleDescription(parser.yy, diagram, id);
   log.debug(`models:`, box);
 };
 
diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.js b/packages/mermaid/src/diagrams/class/classRenderer-v2.js
index 75e7cdafb..9c7002aa4 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.js
@@ -7,7 +7,6 @@ import { curveLinear } from 'd3';
 import { interpolateToCurve, getStylesFromArray } from '../../utils';
 import { setupGraphViewbox } from '../../setupGraphViewbox';
 import common from '../common/common';
-import { addSVGa11yTitleDescription } from '../../accessibility';
 
 let idCache = {};
 
@@ -452,7 +451,6 @@ export const draw = function (text, id, _version, diagObj) {
     }
   }
 
-  addSVGa11yTitleDescription(diagObj.db, svg, id);
   // If node has a link, wrap it in an anchor SVG object.
   // const keys = Object.keys(classes);
   // keys.forEach(function(key) {
diff --git a/packages/mermaid/src/diagrams/class/classRenderer.js b/packages/mermaid/src/diagrams/class/classRenderer.js
index 4e4b31a82..b66222ccc 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer.js
+++ b/packages/mermaid/src/diagrams/class/classRenderer.js
@@ -5,7 +5,6 @@ import { log } from '../../logger';
 import svgDraw from './svgDraw';
 import { configureSvgSize } from '../../setupGraphViewbox';
 import { getConfig } from '../../config';
-import { addSVGa11yTitleDescription } from '../../accessibility';
 
 let idCache = {};
 const padding = 20;
@@ -272,7 +271,6 @@ export const draw = function (text, id, _version, diagObj) {
   const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
   log.debug(`viewBox ${vBox}`);
   diagram.attr('viewBox', vBox);
-  addSVGa11yTitleDescription(diagObj.db, diagram, id);
 };
 
 export default {
diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js
index f29eb44d7..ac32a0287 100644
--- a/packages/mermaid/src/diagrams/er/erRenderer.js
+++ b/packages/mermaid/src/diagrams/er/erRenderer.js
@@ -5,7 +5,6 @@ import { getConfig } from '../../config';
 import { log } from '../../logger';
 import erMarkers from './erMarkers';
 import { configureSvgSize } from '../../setupGraphViewbox';
-import { addSVGa11yTitleDescription } from '../../accessibility';
 import { parseGenericTypes } from '../common/common';
 import { v4 as uuid4 } from 'uuid';
 
@@ -656,8 +655,6 @@ export const draw = function (text, id, _version, diagObj) {
   configureSvgSize(svg, height, width, conf.useMaxWidth);
 
   svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
-
-  addSVGa11yTitleDescription(diagObj.db, svg, id);
 }; // draw
 
 /**
diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
index eb738fe4b..6131f7697 100644
--- a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
@@ -337,22 +337,6 @@ describe('when parsing ER diagram it...', function () {
     expect(erDb.getAccDescription()).toBe('this graph is about stuff');
   });
 
-  it('should allow for a accessibility title and multi line description (accDescr)', function () {
-    const teacherRole = 'is teacher of';
-    const line1 = `TEACHER }o--o{ STUDENT : "${teacherRole}"`;
-
-    erDiagram.parser.parse(
-      `erDiagram
-      accTitle: graph title
-      accDescr {
-        this graph is about stuff
-      }\n
-      ${line1}`
-    );
-    expect(erDb.getAccTitle()).toBe('graph title');
-    expect(erDb.getAccDescription()).toBe('this graph is about stuff');
-  });
-
   it('should allow more than one relationship between the same two entities', function () {
     const line1 = 'CAR ||--o{ PERSON : "insured for"';
     const line2 = 'CAR }o--|| PERSON : "owned by"';
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index a5f991a86..437c5a120 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -10,7 +10,6 @@ import { log } from '../../logger';
 import common, { evaluate } from '../common/common';
 import { interpolateToCurve, getStylesFromArray } from '../../utils';
 import { setupGraphViewbox } from '../../setupGraphViewbox';
-import { addSVGa11yTitleDescription } from '../../accessibility';
 
 const conf = {};
 export const setConf = function (cnf) {
@@ -430,9 +429,6 @@ export const draw = function (text, id, _version, diagObj) {
   // Set up an SVG group so that we can translate the final graph.
   const svg = root.select(`[id="${id}"]`);
 
-  // Adds title and description to the flow chart
-  addSVGa11yTitleDescription(diagObj.db, svg, id);
-
   // Run the renderer. This is what draws the final graph.
   const element = root.select('#' + id + ' g');
   render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
index e9069ff4d..69eb8a9f3 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
@@ -8,7 +8,6 @@ import common, { evaluate } from '../common/common';
 import { interpolateToCurve, getStylesFromArray } from '../../utils';
 import { setupGraphViewbox } from '../../setupGraphViewbox';
 import flowChartShapes from './flowChartShapes';
-import { addSVGa11yTitleDescription } from '../../accessibility';
 
 const conf = {};
 export const setConf = function (cnf) {
@@ -417,9 +416,6 @@ export const draw = function (text, id, _version, diagObj) {
   // Set up an SVG group so that we can translate the final graph.
   const svg = root.select(`[id="${id}"]`);
 
-  // Adds title and description to the flow chart
-  addSVGa11yTitleDescription(diagObj.db, svg, id);
-
   // Run the renderer. This is what draws the final graph.
   const element = root.select('#' + id + ' g');
   render(element, g);
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index dc92be1f0..9840cede4 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -19,7 +19,6 @@ import {
 import common from '../common/common';
 import { getConfig } from '../../config';
 import { configureSvgSize } from '../../setupGraphViewbox';
-import { addSVGa11yTitleDescription } from '../../accessibility';
 
 export const setConf = function () {
   log.debug('Something is calling, setConf, remove the call');
@@ -116,8 +115,6 @@ export const draw = function (text, id, version, diagObj) {
     .attr('y', conf.titleTopMargin)
     .attr('class', 'titleText');
 
-  addSVGa11yTitleDescription(diagObj.db, svg, id);
-
   /**
    * @param tasks
    * @param pageWidth
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index c9e02a1e4..fdd07059c 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -1,7 +1,6 @@
 import { select } from 'd3';
 import { getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI';
 import { log } from '../../logger';
-import { addSVGa11yTitleDescription } from '../../accessibility';
 
 let allCommitsDict = {};
 
@@ -512,9 +511,6 @@ export const draw = function (txt, id, ver, diagObj) {
 
   const diagram = select(`[id="${id}"]`);
 
-  // Adds title and description to the flow chart
-  addSVGa11yTitleDescription(diagObj.db, diagram, id);
-
   drawCommits(diagram, allCommitsDict, false);
   if (gitGraphConfig.showBranches) {
     drawBranches(diagram, branches);
diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js
index daddfda86..d02f97f3f 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.js
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js
@@ -3,7 +3,6 @@ import { select, scaleOrdinal, pie as d3pie, arc } from 'd3';
 import { log } from '../../logger';
 import { configureSvgSize } from '../../setupGraphViewbox';
 import * as configApi from '../../config';
-import { addSVGa11yTitleDescription } from '../../accessibility';
 
 let conf = configApi.getConfig();
 
@@ -53,7 +52,6 @@ export const draw = (txt, id, _version, diagObj) => {
     const diagram = root.select('#' + id);
     configureSvgSize(diagram, height, width, conf.pie.useMaxWidth);
 
-    addSVGa11yTitleDescription(diagObj.db, diagram, id);
     // Set viewBox
     elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
 
diff --git a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
index 60f456f0b..9b5675adf 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
+++ b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
@@ -6,7 +6,6 @@ import { configureSvgSize } from '../../setupGraphViewbox';
 import common from '../common/common';
 import markers from './requirementMarkers';
 import { getConfig } from '../../config';
-import { addSVGa11yTitleDescription } from '../../accessibility';
 
 let conf = {};
 let relCnt = 0;
@@ -363,8 +362,6 @@ export const draw = (text, id, _version, diagObj) => {
   configureSvgSize(svg, height, width, conf.useMaxWidth);
 
   svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
-  // Adds title and description to the requirements diagram
-  addSVGa11yTitleDescription(diagObj.db, svg, id);
 };
 
 export default {
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index bf8a512c1..356b1d4c4 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -9,11 +9,8 @@ import * as configApi from '../../config';
 import assignWithDepth from '../../assignWithDepth';
 import utils from '../../utils';
 import { configureSvgSize } from '../../setupGraphViewbox';
-import { addSVGa11yTitleDescription } from '../../accessibility';
 import Diagram from '../../Diagram';
 
-// FIXME insert a11y title and desc
-
 let conf = {};
 
 export const bounds = {
@@ -906,7 +903,6 @@ export const draw = function (_text: string, id: string, _version: string, diagO
       (height + extraVertForTitle)
   );
 
-  addSVGAccessibilityFields(diagObj.db, diagram, id);
   log.debug(`models:`, bounds.models);
 };
 
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
index e3255bc65..ca0cf039c 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -5,7 +5,6 @@ import { render } from '../../dagre-wrapper/index.js';
 import { log } from '../../logger';
 import { configureSvgSize } from '../../setupGraphViewbox';
 import common from '../common/common';
-import { addSVGa11yTitleDescription } from '../../accessibility';
 import {
   DEFAULT_DIAGRAM_DIRECTION,
   DEFAULT_NESTED_DOC_DIR,
@@ -472,7 +471,6 @@ export const draw = function (text, id, _version, diag) {
     label.insertBefore(rect, label.firstChild);
     // }
   }
-  addSVGa11yTitleDescription(diag.db, svg, id);
 };
 
 export default {
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer.js b/packages/mermaid/src/diagrams/state/stateRenderer.js
index b69d1aaee..e4e882106 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer.js
@@ -6,7 +6,6 @@ import common from '../common/common';
 import { drawState, addTitleAndBox, drawEdge } from './shapes';
 import { getConfig } from '../../config';
 import { configureSvgSize } from '../../setupGraphViewbox';
-import { addSVGa11yTitleDescription } from '../../accessibility';
 
 // TODO Move conf object to main conf in mermaidAPI
 let conf;
@@ -97,7 +96,6 @@ export const draw = function (text, id, _version, diagObj) {
     'viewBox',
     `${bounds.x - conf.padding}  ${bounds.y - conf.padding} ` + width + ' ' + height
   );
-  addSVGa11yTitleDescription(diagObj.db, diagram, id);
 };
 const getLabelWidth = (text) => {
   return text ? text.length * conf.fontSizeFactor : 1;
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
index 5a2c1283d..f3b6acb25 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
@@ -3,8 +3,6 @@ import { select } from 'd3';
 import svgDraw from './svgDraw';
 import { getConfig } from '../../config';
 import { configureSvgSize } from '../../setupGraphViewbox';
-import { addSVGa11yTitleDescription } from '../../accessibility';
-// FIXME insert a11y title and desc
 
 export const setConf = function (cnf) {
   const keys = Object.keys(cnf);
@@ -122,8 +120,6 @@ export const draw = function (text, id, version, diagObj) {
   diagram.attr('viewBox', `${box.startx} -25 ${width} ${height + extraVertForTitle}`);
   diagram.attr('preserveAspectRatio', 'xMinYMin meet');
   diagram.attr('height', height + extraVertForTitle + 25);
-
-  addSVGAccessibilityFields(diagObj.db, diagram, id);
 };
 
 export const bounds = {

From 4fb4aa417cb5633e81ce49c1b87d7a695f49a56e Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Thu, 17 Nov 2022 15:45:28 -0800
Subject: [PATCH 34/98] doc: revise A11y: fix multi-line ex, +describedby,
 alpha sort examples

---
 docs/community/newDiagram.md                  |  46 +-
 docs/config/accessibility.md                  | 409 +++++++++++-------
 .../mermaid/src/docs/config/accessibility.md  | 257 ++++++-----
 3 files changed, 417 insertions(+), 295 deletions(-)

diff --git a/docs/community/newDiagram.md b/docs/community/newDiagram.md
index e49dd3749..288af42cd 100644
--- a/docs/community/newDiagram.md
+++ b/docs/community/newDiagram.md
@@ -14,8 +14,8 @@ This would be to define a jison grammar for the new diagram type. That should st
 
 For instance:
 
-- the flowchart starts with the keyword graph.
-- the sequence diagram starts with the keyword sequenceDiagram
+- the flowchart starts with the keyword _graph_
+- the sequence diagram starts with the keyword _sequenceDiagram_
 
 #### Store data found during parsing
 
@@ -61,6 +61,11 @@ Place the renderer in the diagram folder.
 ### Step 3: Detection of the new diagram type
 
 The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
+[This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
+For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
+would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.
+
+Note that the diagram type key does not have to be the same as the diagram keyword chosen for the [grammar](#grammar), but it is helpful if they are the same.
 
 ### Step 4: The final piece - triggering the rendering
 
@@ -168,17 +173,23 @@ It is probably a good idea to keep the handling similar to this in your new diag
 
 ## Accessibility
 
-The syntax for adding title and description looks like this:
+Mermaid automatically adds the following accessibility information for the diagram SVG HTML element:
 
-    accTitle: The title
-    accDescr: The description
+- aria-roledescription
+- accessible title
+- accessible description
 
-    accDescr {
-    	Syntax for a description text
-    	written on multiple lines.
-    }
+### aria-roledescription
 
-In a similar way to the directives the jison syntax are quite similar between the diagrams.
+The aria-roledescription is automatically set to [the diagram type](#step-3--detection-of-the-new-diagram-type) and inserted into the SVG element.
+
+See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) in [the Accessible Rich Internet Applications W3 standard.](https://www.w3.org/WAI/standards-guidelines/aria/)
+
+### accessible title and description
+
+The syntax for accessible titles and descriptions is described in [the Accessibility documenation section.](../config/accessibility.md)
+
+In a similar way to the directives, the jison syntax are quite similar between the diagrams.
 
 ```jison
 
@@ -214,20 +225,7 @@ The functions for setting title and description are provided by a common module.
       clear as commonClear,
     } from '../../commonDb';
 
-Starting with Mermaid version, the accessibility tags are inserted into the SVG element in the `render` function in mermaidAPI.
-
-In version \_\_\_ and before, you need to insert the accessibility tags in your renderer:
-
-**In the renderer:**
-
-```js
-import addSVGAccessibilityFields from '../../accessibility';
-
-/* ... */
-
-// Adds title and description to the flow chart
-addSVGAccessibilityFields(parser.yy, svg, id);
-```
+The accessibility title and description are inserted into the SVG element in the `render` function in mermaidAPI.
 
 ## Theming
 
diff --git a/docs/config/accessibility.md b/docs/config/accessibility.md
index 8fa4aa3ac..e5b96670e 100644
--- a/docs/config/accessibility.md
+++ b/docs/config/accessibility.md
@@ -10,118 +10,169 @@
 
 Now with Mermaid library in much wider use, we have started to work towards more accessible features, based on the feedback from the community.
 
-To begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**.
+Adding accessibility means that the rich information communicated by visual diagrams can be made available to those using assistive technologies (and of course to search engines).
+[Read more about Accessible Rich Internet Applications and the W3 standards.](https://www.w3.org/WAI/standards-guidelines/aria/)
 
-This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain.
+Mermaid will automatically insert the [aria-roledescription](#aria-roledescription) and, if provided in the diagram text by the diagram author, the [accessible title and description.](#accessible-title-and-description)
 
-## Defining Accessibility Options
+### aria-roledescription
 
-### Single line accessibility values
+The [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) for the SVG HTML element is set to the diagram type key. (Note this may be slightly different than the keyword used for the diagram in the diagram text.)
 
-The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like:
+For example: The diagram type key for a state diagram is "stateDiagram". Here (a part of) the HTML of the SVG tag that shows the automatically inserted aria-roledscription set to "stateDiagram". _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_
 
-- `accTitle: "Your Accessibility Title"` or
-- `accDescr: "Your Accessibility Description"`
+```html
+<svg
+  aria-roledescription="stateDiagram"
+  class="statediagram"
+  xmlns="http://www.w3.org/2000/svg"
+  width="100%"
+  id="mermaid-1668720491568"
+></svg>
+```
 
-**When these two options are defined, they will add a corresponding `<title>` and `<desc>` tag in the SVG.**
+### Accessible Title and Description
 
-Let us take a look at the following example with a flowchart diagram:
+Support for accessible titles and descriptions is available for all diagrams/chart types. We have tried to keep the same keywords and format for all diagrams so that it is easy to understand and maintain.
+
+The accessible title and description will add `<title>` and `<desc>` elements within the SVG element and the [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby) and [aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby) attributes in the SVG tag.
+
+Here is HTML that is generated, showing that the SVG element is labelled by the accessible title (id = `chart-title-mermaid-1668725057758`)
+and described by the accessible description (id = `chart-desc-mermaid-1668725057758` );
+and the accessible title element (text = "This is the accessible title")
+and the accessible description element (text = "This is an accessible description").
+
+_(Note that some of the SVG attributes and the SVG contents are omitted for clarity.)_
+
+```html
+<svg
+  aria-labelledby="chart-title-mermaid-1668725057758"
+  aria-describedby="chart-desc-mermaid-1668725057758"
+  xmlns="http://www.w3.org/2000/svg"
+  width="100%"
+  id="mermaid-1668725057758"
+>
+  <title id="chart-title-mermaid-1668725057758">This is the accessible title</title>
+  <desc id="chart-desc-mermaid-1668725057758">This is an accessible description</desc>
+</svg>
+```
+
+Details for the syntax follow.
+
+#### accessible title
+
+The **accessible title** is specified with the **accTitle** _keyword_, followed by a colon (`:`), and the string value for the title.
+The string value ends at the end of the line. (It can only be a single line.)
+
+Ex: `accTitle: This is a single line title`
+
+See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-examples) for how this can be used in a diagram and the resulting HTML generated.
+
+#### accessible description
+
+An accessible description can be 1 line long (a single line) or many lines long.
+
+The **single line accessible description** is specified with the **accDescr** _keyword_, followed by a colon (`:`), followed by the string value for the description.
+
+Ex: `accDescr: This is a single line description.`
+
+A **multiple line accessible description** _does not have a colon (`:`) after the accDescr keyword_ and is surrounded by curly brackets (`{}`).
+
+Ex:
+
+    accDescr { The official Bob's Burgers corporate processes that are used
+            for making very, very big decisions.
+            This is actually a very simple flow: see the big decision and then make the big decision.}
+
+See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-examples) for how this can be used in a diagram and the resulting HTML generated.
+
+#### accTitle and accDescr Usage Examples
+
+- Flowchart with the accessible title "Big Decisions" and the single-line accessible description "Bob's Burgers process for making big decisions"
 
 ```mermaid-example
-   graph LR
-      accTitle: Big decisions
-      accDescr: Flow chart of the decision making process
-      A[Hard] -->|Text| B(Round)
-      B --> C{Decision}
-      C -->|One| D[Result 1]
-
+  graph LR
+      accTitle: Big Decisions
+      accDescr: Bob's Burgers process for making big decisions
+      A[Identify Big Descision] --> B{Make Big Decision}
+      B --> D[Be done]
 ```
 
 ```mermaid
-   graph LR
-      accTitle: Big decisions
-      accDescr: Flow chart of the decision making process
-      A[Hard] -->|Text| B(Round)
-      B --> C{Decision}
-      C -->|One| D[Result 1]
-
+  graph LR
+      accTitle: Big Decisions
+      accDescr: Bob's Burgers process for making big decisions
+      A[Identify Big Descision] --> B{Make Big Decision}
+      B --> D[Be done]
 ```
 
-See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
+Here is the HTML generated for the SVG element: _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_
 
-![Accessibility options rendered inside SVG](img/accessibility-div-example.png)
+```html
+<svg
+  aria-labelledby="chart-title-mermaid_382ee221"
+  aria-describedby="chart-desc-mermaid_382ee221"
+  aria-roledescription="flowchart-v2"
+  xmlns="http://www.w3.org/2000/svg"
+  width="100%"
+  id="mermaid_382ee221"
+>
+  <title id="chart-title-mermaid_382ee221">Big decisions</title>
+  <desc id="chart-desc-mermaid_382ee221">Bob's Burgers process for making big decisions</desc>
+</svg>
+```
 
-### Multi-line Accessibility title/description
-
-You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then multiple lines, followed by a closing `}`.
-
-`accTitle: My single line title value` (**_single line format_**)
-
-vs
-
-`accDescr: { My multi-line description of the diagram }` (**_multi-line format_**)
-
-Let us look at it in the following example, with same flowchart:
+- Flowchart with the accessible title "Bob's Burger's Making Big Decisions" and the multiple line accessible description "The official Bob's Burgers corporate processes that are used
+  for making very, very big decisions.
+  This is actually a very simple flow: identify the big decision and then make the big decision."
 
 ```mermaid-example
-   graph LR
-      accTitle: Big decisions
-
+  graph LR
+      accTitle: Bob's Burger's Making Big Decisions
       accDescr {
-        My multi-line description
-        of the diagram
-      }
-
-      A[Hard] -->|Text| B(Round)
-      B --> C{Decision}
-      C -->|One| D[Result 1]
-
+        The official Bob's Burgers corporate processes that are used
+        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}
+      B --> D[Be done]
 ```
 
 ```mermaid
-   graph LR
-      accTitle: Big decisions
-
+  graph LR
+      accTitle: Bob's Burger's Making Big Decisions
       accDescr {
-        My multi-line description
-        of the diagram
-      }
-
-      A[Hard] -->|Text| B(Round)
-      B --> C{Decision}
-      C -->|One| D[Result 1]
-
+        The official Bob's Burgers corporate processes that are used
+        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}
+      B --> D[Be done]
 ```
 
-See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
+Here is the HTML generated for the SVG element: _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_
 
-![Accessibility options rendered inside SVG](img/accessibility-div-example-2.png)
-
-### Sample Code Snippet for other diagram types
-
-#### Sequence Diagram
-
-```mermaid-example
-   sequenceDiagram
-      accTitle: My Sequence Diagram
-      accDescr: My Sequence Diagram Description
-
-      Alice->>John: Hello John, how are you?
-      John-->>Alice: Great!
-      Alice-)John: See you later!
+```html
+<svg
+  aria-labelledby="chart-title-mermaid_382ee221"
+  aria-describedby="chart-desc-mermaid_382ee221"
+  aria-roledescription="flowchart-v2"
+  xmlns="http://www.w3.org/2000/svg"
+  width="100%"
+  id="mermaid_382ee221"
+>
+  <title id="chart-title-mermaid_382ee221">Big decisions</title>
+  <desc id="chart-desc-mermaid_382ee221">
+    The official Bob's Burgers corporate processes that are used for making very, very big
+    decisions. This is actually a very simple flow: identify the big decision and then make the big
+    decision.
+  </desc>
+</svg>
 ```
 
-```mermaid
-   sequenceDiagram
-      accTitle: My Sequence Diagram
-      accDescr: My Sequence Diagram Description
+#### Sample Code Snippets for other diagram types
 
-      Alice->>John: Hello John, how are you?
-      John-->>Alice: Great!
-      Alice-)John: See you later!
-```
-
-#### Class Diagram
+##### Class Diagram
 
 ```mermaid-example
    classDiagram
@@ -139,27 +190,7 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
       Vehicle <|-- Car
 ```
 
-#### State Diagram
-
-```mermaid-example
-   stateDiagram
-      accTitle: My State Diagram
-      accDescr: My State Diagram Description
-
-       s1 --> s2
-
-```
-
-```mermaid
-   stateDiagram
-      accTitle: My State Diagram
-      accDescr: My State Diagram Description
-
-       s1 --> s2
-
-```
-
-#### Entity Relationship Diagram
+##### Entity Relationship Diagram
 
 ```mermaid-example
    erDiagram
@@ -183,41 +214,7 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
 
 ```
 
-#### User Journey Diagram
-
-```mermaid-example
-  journey
-      accTitle: My User Journey Diagram
-      accDescr: My User Journey Diagram Description
-
-      title My working day
-      section Go to work
-        Make tea: 5: Me
-        Go upstairs: 3: Me
-        Do work: 1: Me, Cat
-      section Go home
-        Go downstairs: 5: Me
-        Sit down: 5: Me
-
-```
-
-```mermaid
-  journey
-      accTitle: My User Journey Diagram
-      accDescr: My User Journey Diagram Description
-
-      title My working day
-      section Go to work
-        Make tea: 5: Me
-        Go upstairs: 3: Me
-        Do work: 1: Me, Cat
-      section Go home
-        Go downstairs: 5: Me
-        Sit down: 5: Me
-
-```
-
-#### Gantt Chart
+##### Gantt Chart
 
 ```mermaid-example
    gantt
@@ -251,7 +248,45 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
 
 ```
 
-#### Pie Chart
+##### Gitgraph
+
+```mermaid-example
+  gitGraph
+      accTitle: My Gitgraph Accessibility Title
+      accDescr: My Gitgraph Accessibility Description
+
+     commit
+     commit
+     branch develop
+     checkout develop
+     commit
+     commit
+     checkout main
+     merge develop
+     commit
+     commit
+
+```
+
+```mermaid
+  gitGraph
+      accTitle: My Gitgraph Accessibility Title
+      accDescr: My Gitgraph Accessibility Description
+
+     commit
+     commit
+     branch develop
+     checkout develop
+     commit
+     commit
+     checkout main
+     merge develop
+     commit
+     commit
+
+```
+
+##### Pie Chart
 
 ```mermaid-example
    pie
@@ -279,7 +314,7 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
 
 ```
 
-#### Requirement Diagram
+##### Requirement Diagram
 
 ```mermaid-example
   requirementDiagram
@@ -321,40 +356,78 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
 
 ```
 
-#### Gitgraph
+##### Sequence Diagram
 
 ```mermaid-example
-  gitGraph
-      accTitle: My Gitgraph Accessibility Title
-      accDescr: My Gitgraph Accessibility Description
+   sequenceDiagram
+      accTitle: My Sequence Diagram
+      accDescr: My Sequence Diagram Description
 
-     commit
-     commit
-     branch develop
-     checkout develop
-     commit
-     commit
-     checkout main
-     merge develop
-     commit
-     commit
+      Alice->>John: Hello John, how are you?
+      John-->>Alice: Great!
+      Alice-)John: See you later!
+```
+
+```mermaid
+   sequenceDiagram
+      accTitle: My Sequence Diagram
+      accDescr: My Sequence Diagram Description
+
+      Alice->>John: Hello John, how are you?
+      John-->>Alice: Great!
+      Alice-)John: See you later!
+```
+
+##### State Diagram
+
+```mermaid-example
+   stateDiagram
+      accTitle: My State Diagram
+      accDescr: My State Diagram Description
+
+       s1 --> s2
 
 ```
 
 ```mermaid
-  gitGraph
-      accTitle: My Gitgraph Accessibility Title
-      accDescr: My Gitgraph Accessibility Description
+   stateDiagram
+      accTitle: My State Diagram
+      accDescr: My State Diagram Description
 
-     commit
-     commit
-     branch develop
-     checkout develop
-     commit
-     commit
-     checkout main
-     merge develop
-     commit
-     commit
+       s1 --> s2
+
+```
+
+##### User Journey Diagram
+
+```mermaid-example
+  journey
+      accTitle: My User Journey Diagram
+      accDescr: My User Journey Diagram Description
+
+      title My working day
+      section Go to work
+        Make tea: 5: Me
+        Go upstairs: 3: Me
+        Do work: 1: Me, Cat
+      section Go home
+        Go downstairs: 5: Me
+        Sit down: 5: Me
+
+```
+
+```mermaid
+  journey
+      accTitle: My User Journey Diagram
+      accDescr: My User Journey Diagram Description
+
+      title My working day
+      section Go to work
+        Make tea: 5: Me
+        Go upstairs: 3: Me
+        Do work: 1: Me, Cat
+      section Go home
+        Go downstairs: 5: Me
+        Sit down: 5: Me
 
 ```
diff --git a/packages/mermaid/src/docs/config/accessibility.md b/packages/mermaid/src/docs/config/accessibility.md
index ade20a839..5545ce1bc 100644
--- a/packages/mermaid/src/docs/config/accessibility.md
+++ b/packages/mermaid/src/docs/config/accessibility.md
@@ -4,83 +4,121 @@
 
 Now with Mermaid library in much wider use, we have started to work towards more accessible features, based on the feedback from the community.
 
-To begin with, we have added a new feature to Mermaid library, which is to support accessibility options, **Accessibility Title** and **Accessibility Description**.
+Adding accessibility means that the rich information communicated by visual diagrams can be made available to those using assistive technologies (and of course to search engines).
+[Read more about Accessible Rich Internet Applications and the W3 standards.](https://www.w3.org/WAI/standards-guidelines/aria/)
 
-This support for accessibility options is available for all the diagrams/chart types. Also, we have tired to keep the same format for the accessibility options, so that it is easy to understand and maintain.
+Mermaid will automatically insert the [aria-roledescription](#aria-roledescription) and, if provided in the diagram text by the diagram author, the [accessible title and description.](#accessible-title-and-description) 
 
-## Defining Accessibility Options
+### aria-roledescription
 
-### Single line accessibility values
+The [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) for the SVG HTML element is set to the diagram type key.  (Note this may be slightly different than the keyword used for the diagram in the diagram text.)
 
-The diagram authors can now add the accessibility options in the diagram definition, using the `accTitle` and `accDescr` keywords, where each keyword is followed by `:` and the string value for title and description like:
+For example: The diagram type key for a state diagram is "stateDiagram". Here (a part of) the HTML of the SVG tag that shows the automatically inserted aria-roledscription set to "stateDiagram". _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_
+```html
+<svg aria-roledescription="stateDiagram"  class="statediagram" xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-1668720491568">
+```
 
-- `accTitle: "Your Accessibility Title"` or
-- `accDescr: "Your Accessibility Description"`
+### Accessible Title and Description
 
-**When these two options are defined, they will add a corresponding `<title>` and `<desc>` tag in the SVG.**
+Support for accessible titles and descriptions is available for all diagrams/chart types. We have tried to keep the same keywords and format for all diagrams so that it is easy to understand and maintain.
 
-Let us take a look at the following example with a flowchart diagram:
+The accessible title and description will add `<title>` and `<desc>` elements within the SVG element and the [aria-labelledby](https://www.w3.org/TR/wai-aria/#aria-labelledby) and [aria-describedby](https://www.w3.org/TR/wai-aria/#aria-describedby) attributes in the SVG tag.
+
+Here is HTML that is generated, showing that the SVG element is labelled by the accessible title (id = `chart-title-mermaid-1668725057758`)
+and described by the accessible description (id = `chart-desc-mermaid-1668725057758` );
+and the accessible title element (text = "This is the accessible title")
+and the accessible description element (text = "This is an accessible description").
+
+_(Note that some of the SVG attributes and the SVG contents are omitted for clarity.)_
+
+```html
+<svg aria-labelledby="chart-title-mermaid-1668725057758" aria-describedby="chart-desc-mermaid-1668725057758"  xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-1668725057758">
+  <title id="chart-title-mermaid-1668725057758">This is the accessible title</title>
+  <desc id="chart-desc-mermaid-1668725057758">This is an accessible description</desc>
+```
+
+Details for the syntax follow.
+
+
+#### accessible title
+The **accessible title** is specified with the **accTitle** _keyword_, followed by a colon (`:`), and the string value for the title.
+The string value ends at the end of the line. (It can only be a single line.)
+ 
+Ex: `accTitle: This is a single line title` 
+
+See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-examples) for how this can be used in a diagram and the resulting HTML generated.
+
+
+#### accessible description
+
+An accessible description can be 1 line long (a single line) or many lines long.
+
+The **single line accessible description** is specified with the **accDescr** _keyword_, followed by a colon (`:`), followed by the string value for the description.
+
+Ex: `accDescr: This is a single line description.`
+
+A **multiple line accessible description** _does not have a colon (`:`) after the accDescr keyword_ and is surrounded by curly brackets (`{}`).
+
+Ex:
+```
+accDescr { The official Bob's Burgers corporate processes that are used
+        for making very, very big decisions.
+        This is actually a very simple flow: see the big decision and then make the big decision.}
+```
+
+See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-examples) for how this can be used in a diagram and the resulting HTML generated.
+
+
+#### accTitle and accDescr Usage Examples
+
+- Flowchart with the accessible title "Big Decisions" and the single-line accessible description "Bob's Burgers process for making big decisions"
 
 ```mermaid-example
-   graph LR
-      accTitle: Big decisions
-      accDescr: Flow chart of the decision making process
-      A[Hard] -->|Text| B(Round)
-      B --> C{Decision}
-      C -->|One| D[Result 1]
+  graph LR
+      accTitle: Big Decisions
+      accDescr: Bob's Burgers process for making big decisions
+      A[Identify Big Descision] --> B{Make Big Decision}
+      B --> D[Be done]
+```
+
+Here is the HTML generated for the SVG element: _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_
+```html
+<svg aria-labelledby="chart-title-mermaid_382ee221" aria-describedby="chart-desc-mermaid_382ee221" aria-roledescription="flowchart-v2"  xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid_382ee221">
+  <title id="chart-title-mermaid_382ee221">Big decisions</title>
+  <desc id="chart-desc-mermaid_382ee221">Bob's Burgers process for making big decisions</desc>
 
 ```
 
-See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
-
-![Accessibility options rendered inside SVG](img/accessibility-div-example.png)
-
-### Multi-line Accessibility title/description
-
-You can also define the accessibility options in a multi-line format, where the keyword is followed by opening curly bracket `{` and then multiple lines, followed by a closing `}`.
-
-`accTitle: My single line title value` (**_single line format_**)
-
-vs
-
-`accDescr: { My multi-line description of the diagram }` (**_multi-line format_**)
-
-Let us look at it in the following example, with same flowchart:
+* Flowchart with the accessible title "Bob's Burger's Making Big Decisions" and the multiple line accessible description "The official Bob's Burgers corporate processes that are used
+  for making very, very big decisions.
+  This is actually a very simple flow: identify the big decision and then make the big decision."
 
 ```mermaid-example
-   graph LR
-      accTitle: Big decisions
-
+  graph LR
+      accTitle: Bob's Burger's Making Big Decisions
       accDescr {
-        My multi-line description
-        of the diagram
-      }
+        The official Bob's Burgers corporate processes that are used
+        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}
+      B --> D[Be done]
+```
 
-      A[Hard] -->|Text| B(Round)
-      B --> C{Decision}
-      C -->|One| D[Result 1]
+Here is the HTML generated for the SVG element: _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_
+```html
+<svg aria-labelledby="chart-title-mermaid_382ee221" aria-describedby="chart-desc-mermaid_382ee221" aria-roledescription="flowchart-v2"  xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid_382ee221">
+  <title id="chart-title-mermaid_382ee221">Big decisions</title>
+  <desc id="chart-desc-mermaid_382ee221">The official Bob's Burgers corporate processes that are used
+    for making very, very big decisions.
+    This is actually a very simple flow: identify the big decision and then make the big decision.</desc>
 
 ```
 
-See in the code snippet above, the `accTitle` and `accDescr` are defined in the diagram definition. They result in the following tags in SVG code:
 
-![Accessibility options rendered inside SVG](img/accessibility-div-example-2.png)
+#### Sample Code Snippets for other diagram types
 
-### Sample Code Snippet for other diagram types
-
-#### Sequence Diagram
-
-```mermaid-example
-   sequenceDiagram
-      accTitle: My Sequence Diagram
-      accDescr: My Sequence Diagram Description
-
-      Alice->>John: Hello John, how are you?
-      John-->>Alice: Great!
-      Alice-)John: See you later!
-```
-
-#### Class Diagram
+##### Class Diagram
 
 ```mermaid-example
    classDiagram
@@ -90,18 +128,7 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
       Vehicle <|-- Car
 ```
 
-#### State Diagram
-
-```mermaid-example
-   stateDiagram
-      accTitle: My State Diagram
-      accDescr: My State Diagram Description
-
-       s1 --> s2
-
-```
-
-#### Entity Relationship Diagram
+##### Entity Relationship Diagram
 
 ```mermaid-example
    erDiagram
@@ -114,25 +141,7 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
 
 ```
 
-#### User Journey Diagram
-
-```mermaid-example
-  journey
-      accTitle: My User Journey Diagram
-      accDescr: My User Journey Diagram Description
-
-      title My working day
-      section Go to work
-        Make tea: 5: Me
-        Go upstairs: 3: Me
-        Do work: 1: Me, Cat
-      section Go home
-        Go downstairs: 5: Me
-        Sit down: 5: Me
-
-```
-
-#### Gantt Chart
+##### Gantt Chart
 
 ```mermaid-example
    gantt
@@ -150,7 +159,27 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
 
 ```
 
-#### Pie Chart
+##### Gitgraph
+
+```mermaid-example
+  gitGraph
+      accTitle: My Gitgraph Accessibility Title
+      accDescr: My Gitgraph Accessibility Description
+
+     commit
+     commit
+     branch develop
+     checkout develop
+     commit
+     commit
+     checkout main
+     merge develop
+     commit
+     commit
+
+```
+
+##### Pie Chart
 
 ```mermaid-example
    pie
@@ -165,7 +194,7 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
 
 ```
 
-#### Requirement Diagram
+##### Requirement Diagram
 
 ```mermaid-example
   requirementDiagram
@@ -187,22 +216,44 @@ See in the code snippet above, the `accTitle` and `accDescr` are defined in the
 
 ```
 
-#### Gitgraph
+##### Sequence Diagram
 
 ```mermaid-example
-  gitGraph
-      accTitle: My Gitgraph Accessibility Title
-      accDescr: My Gitgraph Accessibility Description
+   sequenceDiagram
+      accTitle: My Sequence Diagram
+      accDescr: My Sequence Diagram Description
 
-     commit
-     commit
-     branch develop
-     checkout develop
-     commit
-     commit
-     checkout main
-     merge develop
-     commit
-     commit
+      Alice->>John: Hello John, how are you?
+      John-->>Alice: Great!
+      Alice-)John: See you later!
+```
+
+##### State Diagram
+
+```mermaid-example
+   stateDiagram
+      accTitle: My State Diagram
+      accDescr: My State Diagram Description
+
+       s1 --> s2
+
+```
+
+
+##### User Journey Diagram
+
+```mermaid-example
+  journey
+      accTitle: My User Journey Diagram
+      accDescr: My User Journey Diagram Description
+
+      title My working day
+      section Go to work
+        Make tea: 5: Me
+        Go upstairs: 3: Me
+        Do work: 1: Me, Cat
+      section Go home
+        Go downstairs: 5: Me
+        Sit down: 5: Me
 
 ```

From 9cc862b951082dbe143e7bc5fb3fc2b5875862af Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Thu, 17 Nov 2022 15:48:17 -0800
Subject: [PATCH 35/98] doc: adding diagrams: revise a11y section

---
 .../mermaid/src/docs/community/newDiagram.md  | 45 +++++++++----------
 1 file changed, 22 insertions(+), 23 deletions(-)

diff --git a/packages/mermaid/src/docs/community/newDiagram.md b/packages/mermaid/src/docs/community/newDiagram.md
index 74026b3ff..ed8c1e8aa 100644
--- a/packages/mermaid/src/docs/community/newDiagram.md
+++ b/packages/mermaid/src/docs/community/newDiagram.md
@@ -8,8 +8,8 @@ This would be to define a jison grammar for the new diagram type. That should st
 
 For instance:
 
-- the flowchart starts with the keyword graph.
-- the sequence diagram starts with the keyword sequenceDiagram
+- the flowchart starts with the keyword _graph_
+- the sequence diagram starts with the keyword _sequenceDiagram_
 
 #### Store data found during parsing
 
@@ -56,6 +56,11 @@ Place the renderer in the diagram folder.
 ### Step 3: Detection of the new diagram type
 
 The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
+[This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type. 
+For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
+would voice that as "U-M-L Deployment diagram."  Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.
+
+Note that the diagram type key does not have to be the same as the diagram keyword chosen for the [grammar](#grammar), but it is helpful if they are the same.
 
 ### Step 4: The final piece - triggering the rendering
 
@@ -163,19 +168,23 @@ It is probably a good idea to keep the handling similar to this in your new diag
 
 ## Accessibility
 
-The syntax for adding title and description looks like this:
+Mermaid automatically adds the following accessibility information for the diagram SVG HTML element:
+- aria-roledescription 
+- accessible title
+- accessible description
 
-```
-accTitle: The title
-accDescr: The description
 
-accDescr {
-	Syntax for a description text
-	written on multiple lines.
-}
-```
+### aria-roledescription
 
-In a similar way to the directives the jison syntax are quite similar between the diagrams.
+The aria-roledescription is automatically set to [the diagram type](#step-3--detection-of-the-new-diagram-type) and inserted into the SVG element.
+
+See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) in [the Accessible Rich Internet Applications W3 standard.](https://www.w3.org/WAI/standards-guidelines/aria/)
+
+### accessible title and description
+
+The syntax for accessible titles and descriptions is described in [the Accessibility documenation section.](../config/accessibility.md)
+
+In a similar way to the directives, the jison syntax are quite similar between the diagrams.
 
 ```jison
 
@@ -213,18 +222,8 @@ import {
 } from '../../commonDb';
 ```
 
-For rendering the accessibility tags you have again an existing function you can use.
+The accessibility title and description are inserted into the SVG element in the `render` function in mermaidAPI.
 
-**In the renderer:**
-
-```js
-import addSVGAccessibilityFields from '../../accessibility';
-
-/* ... */
-
-// Adds title and description to the flow chart
-addSVGAccessibilityFields(parser.yy, svg, id);
-```
 
 ## Theming
 

From 68b1805c40dc4505cc755d7cae475cbd2444cd83 Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Thu, 17 Nov 2022 15:49:37 -0800
Subject: [PATCH 36/98] (minor) fix typo, whitespace formatting

---
 demos/state.html                   | 4 ++--
 packages/mermaid/src/mermaidAPI.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/demos/state.html b/demos/state.html
index dbe2286a3..6f6dfba00 100644
--- a/demos/state.html
+++ b/demos/state.html
@@ -68,8 +68,8 @@
     <pre class="mermaid">
     stateDiagram-v2
       accTitle: very very simple state
-    accDescr: This is a state diagram showing one state
-    State1
+      accDescr: This is a state diagram showing one state
+      State1
     </pre>
     <hr />
 
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 18076b488..072ff595a 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -381,7 +381,7 @@ export const removeExistingElements = (
  * @param id - The id for the SVG element (the element to be rendered)
  * @param text - The text for the graph definition
  * @param cb - Callback which is called after rendering is finished with the svg code as in param.
- * @param container - HTML element where the svg will be inserted. (Is usually element with the .mermaid class)
+ * @param svgContainingElement - HTML element where the svg will be inserted. (Is usually element with the .mermaid class)
  *   If no svgContainingElement is provided then the SVG element will be appended to the body.
  *    Selector to element in which a div with the graph temporarily will be
  *   inserted. If one is provided a hidden div will be inserted in the body of the page instead. The

From b51759d36eebfdf7445909b048f0e8a0dfd540fd Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Thu, 17 Nov 2022 15:50:52 -0800
Subject: [PATCH 37/98] set describeby to accessible description element id

---
 packages/mermaid/src/accessibility.spec.ts | 170 +++++++++++++--------
 packages/mermaid/src/accessibility.ts      |   7 +-
 2 files changed, 112 insertions(+), 65 deletions(-)

diff --git a/packages/mermaid/src/accessibility.spec.ts b/packages/mermaid/src/accessibility.spec.ts
index 7336284fe..87d9a1cd0 100644
--- a/packages/mermaid/src/accessibility.spec.ts
+++ b/packages/mermaid/src/accessibility.spec.ts
@@ -33,46 +33,95 @@ describe('accessibility', () => {
         expect(noInsert_attr_spy).not.toHaveBeenCalled();
       });
 
+      // ----------------
+      // Convenience functions to DRY up the spec
+
+      function expectAriaLabelledByIsTitleId(
+        svgD3Node: any,
+        title: string | null | undefined,
+        desc: string | null | undefined,
+        givenId: string
+      ) {
+        // @ts-ignore Required to easily handle the d3 select types
+        const svg_attr_spy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
+        addSVGa11yTitleDescription(svgD3Node, title, desc, givenId);
+        expect(svg_attr_spy).toHaveBeenCalledWith('aria-labelledby', `chart-title-${givenId}`);
+      }
+
+      function expectAriaDescribedByIsDescId(
+        svgD3Node: any,
+        title: string | null | undefined,
+        desc: string | null | undefined,
+        givenId: string
+      ) {
+        // @ts-ignore Required to easily handle the d3 select types
+        const svg_attr_spy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
+        addSVGa11yTitleDescription(svgD3Node, title, desc, givenId);
+        expect(svg_attr_spy).toHaveBeenCalledWith('aria-describedby', `chart-desc-${givenId}`);
+      }
+
+      function a11yTitleTagInserted(
+        svgD3Node: any,
+        title: string | null | undefined,
+        desc: string | null | undefined,
+        givenId: string,
+        callNumber: number
+      ) {
+        a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'title', title);
+      }
+
+      function a11yDescTagInserted(
+        svgD3Node: any,
+        title: string | null | undefined,
+        desc: string | null | undefined,
+        givenId: string,
+        callNumber: number
+      ) {
+        a11yTagInserted(svgD3Node, title, desc, givenId, callNumber, 'desc', desc);
+      }
+
+      function a11yTagInserted(
+        svgD3Node: any,
+        title: string | null | undefined,
+        desc: string | null | undefined,
+        givenId: string,
+        callNumber: number,
+        expectedPrefix: string,
+        expectedText: string | null | undefined
+      ) {
+        const faux_insertedD3 = new MockedD3();
+        const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_insertedD3);
+        // @ts-ignore  Required to easily handle the d3 select types
+        const title_attr_spy = vi.spyOn(faux_insertedD3, 'attr').mockReturnValue(faux_insertedD3);
+        const title_text_spy = vi.spyOn(faux_insertedD3, 'text');
+
+        addSVGa11yTitleDescription(fauxSvgNode, title, desc, givenId);
+        expect(svg_insert_spy).toHaveBeenCalledWith(expectedPrefix, ':first-child');
+        expect(title_attr_spy).toHaveBeenCalledWith('id', `chart-${expectedPrefix}-${givenId}`);
+        expect(title_text_spy).toHaveBeenNthCalledWith(callNumber, expectedText);
+      }
+      // ----------------
+
       describe('given an a11y title', () => {
         const a11yTitle = 'a11y title';
 
         describe('given an a11y description', () => {
           const a11yDesc = 'a11y description';
 
-          it('sets aria-labelledby to the title id and the description id inserted as children', () => {
-            // @ts-ignore Required to easily handle the d3 select types
-            const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
-            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svg_attr_spy).toHaveBeenCalledWith(
-              'aria-labelledby',
-              `chart-title-${givenId} chart-desc-${givenId}`
-            );
+          it('sets aria-labelledby to the title id inserted as a child', () => {
+            expectAriaLabelledByIsTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+          });
+
+          it('sets aria-describedby to the description id inserted as a child', () => {
+            expectAriaDescribedByIsDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
           });
 
           it('inserts a title tag as the first child with the text set to the accTitle given', () => {
-            const faux_title = new MockedD3();
-            const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_title);
-            // @ts-ignore  Required to easily handle the d3 select types
-            const title_attr_spy = vi.spyOn(faux_title, 'attr').mockReturnValue(faux_title);
-            const title_text_spy = vi.spyOn(faux_title, 'text');
-
-            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svg_insert_spy).toHaveBeenCalledWith('desc', ':first-child');
-            expect(title_attr_spy).toHaveBeenCalledWith('id', `chart-desc-` + givenId);
-            expect(title_text_spy).toHaveBeenNthCalledWith(1, 'a11y description');
+            a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 2);
           });
 
           it('inserts a desc tag as the 2nd child with the text set to accDescription given', () => {
-            const faux_desc = new MockedD3();
-            const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_desc);
-            // @ts-ignore  Required to easily handle the d3 select types
-            const desc_attr_spy = vi.spyOn(faux_desc, 'attr').mockReturnValue(faux_desc);
-            const desc_text_spy = vi.spyOn(faux_desc, 'text');
-
-            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svg_insert_spy).toHaveBeenCalledWith('desc', ':first-child');
-            expect(desc_attr_spy).toHaveBeenCalledWith('id', `chart-desc-` + givenId);
-            expect(desc_text_spy).toHaveBeenNthCalledWith(1, 'a11y description');
+            a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
           });
         });
 
@@ -80,23 +129,18 @@ describe('accessibility', () => {
           const a11yDesc = undefined;
 
           it('sets aria-labelledby to the title id inserted as a child', () => {
+            expectAriaLabelledByIsTitleId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+          });
+
+          it('no aria-describedby is set', () => {
             // @ts-ignore Required to easily handle the d3 select types
             const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svg_attr_spy).toHaveBeenCalledWith('aria-labelledby', `chart-title-${givenId}`);
+            expect(svg_attr_spy).not.toHaveBeenCalledWith('aria-describedby', expect.anything());
           });
 
           it('inserts a title tag as the first child with the text set to the accTitle given', () => {
-            const faux_title = new MockedD3();
-            const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_title);
-            // @ts-ignore  Required to easily handle the d3 select types
-            const title_attr_spy = vi.spyOn(faux_title, 'attr').mockReturnValue(faux_title);
-            const title_text_spy = vi.spyOn(faux_title, 'text');
-
-            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svg_insert_spy).toHaveBeenCalledWith('title', ':first-child');
-            expect(title_attr_spy).toHaveBeenCalledWith('id', `chart-title-` + givenId);
-            expect(title_text_spy).toHaveBeenNthCalledWith(1, 'a11y title');
+            a11yTitleTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
           });
 
           it('no description tag is inserted', () => {
@@ -114,6 +158,13 @@ describe('accessibility', () => {
         describe('given an a11y description', () => {
           const a11yDesc = 'a11y description';
 
+          it('no aria-labelledby is set', () => {
+            // @ts-ignore Required to easily handle the d3 select types
+            const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svg_attr_spy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything());
+          });
+
           it('no title tag inserted', () => {
             const faux_title = new MockedD3();
             const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_title);
@@ -121,30 +172,32 @@ describe('accessibility', () => {
             expect(svg_insert_spy).not.toHaveBeenCalledWith('title', ':first-child');
           });
 
-          it('sets aria-labelledby to the description id inserted as a child', () => {
-            // @ts-ignore Required to easily handle the d3 select types
-            const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
-            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svg_attr_spy).toHaveBeenCalledWith('aria-labelledby', `chart-desc-${givenId}`);
+          it('sets aria-describedby to the description id inserted as a child', () => {
+            expectAriaDescribedByIsDescId(fauxSvgNode, a11yTitle, a11yDesc, givenId);
           });
 
-          it('inserts a desc tag as a child with the text set to accDescription given', () => {
-            const faux_desc = new MockedD3();
-            const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_desc);
-            // @ts-ignore  Required to easily handle the d3 select types
-            const desc_attr_spy = vi.spyOn(faux_desc, 'attr').mockReturnValue(faux_desc);
-            const desc_text_spy = vi.spyOn(faux_desc, 'text');
-
-            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svg_insert_spy).toHaveBeenCalledWith('desc', ':first-child');
-            expect(desc_attr_spy).toHaveBeenCalledWith('id', `chart-desc-` + givenId);
-            expect(desc_text_spy).toHaveBeenNthCalledWith(1, 'a11y description');
+          it('inserts a desc tag as the 2nd child with the text set to accDescription given', () => {
+            a11yDescTagInserted(fauxSvgNode, a11yTitle, a11yDesc, givenId, 1);
           });
         });
 
         describe('no a11y description', () => {
           const a11yDesc = undefined;
 
+          it('no aria-labelledby is set', () => {
+            // @ts-ignore Required to easily handle the d3 select types
+            const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svg_attr_spy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything());
+          });
+
+          it('no aria-describedby is set', () => {
+            // @ts-ignore Required to easily handle the d3 select types
+            const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
+            expect(svg_attr_spy).not.toHaveBeenCalledWith('aria-describedby', expect.anything());
+          });
+
           it('no title tag inserted', () => {
             const faux_title = new MockedD3();
             const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_title);
@@ -158,13 +211,6 @@ describe('accessibility', () => {
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
             expect(svg_insert_spy).not.toHaveBeenCalledWith('desc', ':first-child');
           });
-
-          it('no aria-labelledby is set', () => {
-            // @ts-ignore Required to easily handle the d3 select types
-            const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
-            addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svg_attr_spy).not.toHaveBeenCalled();
-          });
         });
       });
     });
diff --git a/packages/mermaid/src/accessibility.ts b/packages/mermaid/src/accessibility.ts
index eff9a4edc..2940de959 100644
--- a/packages/mermaid/src/accessibility.ts
+++ b/packages/mermaid/src/accessibility.ts
@@ -40,14 +40,15 @@ export function addSVGa11yTitleDescription(
     return;
   }
 
-  const titleId = a11yTitle ? 'chart-title-' + baseId : null;
-  const descId = a11yDesc ? 'chart-desc-' + baseId : null;
   if (a11yTitle || a11yDesc) {
-    svg.attr('aria-labelledby', compact([titleId, descId]).join(' '));
     if (a11yDesc) {
+      const descId = 'chart-desc-' + baseId;
+      svg.attr('aria-describedby', descId);
       svg.insert('desc', ':first-child').attr('id', descId).text(a11yDesc);
     }
     if (a11yTitle) {
+      const titleId = 'chart-title-' + baseId;
+      svg.attr('aria-labelledby', titleId);
       svg.insert('title', ':first-child').attr('id', titleId).text(a11yTitle);
     }
   } else {

From 69526402e2d952352e3195080fa7b2553ee2c767 Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Thu, 17 Nov 2022 16:51:23 -0800
Subject: [PATCH 38/98] format .md files

---
 docs/community/development.md                 | 246 +++++++++++++++---
 .../mermaid/src/docs/community/newDiagram.md  |   9 +-
 .../mermaid/src/docs/config/accessibility.md  |  67 +++--
 3 files changed, 259 insertions(+), 63 deletions(-)

diff --git a/docs/community/development.md b/docs/community/development.md
index 58ca4670b..8503fb141 100644
--- a/docs/community/development.md
+++ b/docs/community/development.md
@@ -4,7 +4,17 @@
 >
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/community/development.md](../../packages/mermaid/src/docs/community/development.md).
 
-# Development and Contribution 🙌
+# Contributing to Mermaid
+
+## Contents
+
+- [Technical Requirements and Setup](#technical-requirements-and-setup)
+- [Contributing Code](#contributing-code)
+- [Contributing Documentation](#contributing-documentation)
+- [Questions or Suggestions?](#questions-or-suggestions)
+- [Last Words](#last-words)
+
+---
 
 So you want to help? That's great!
 
@@ -12,72 +22,141 @@ So you want to help? That's great!
 
 Here are a few things to get you started on the right path.
 
-**The Docs Structure is dictated by [.vitepress/config.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/.vitepress/config.ts)**.
+## Technical Requirements and Setup
 
-**Note: Commits and Pull Requests should be directed to the develop branch.**
+### Technical Requirements
 
-## Branching
+These are the tools we use for working with the code and documentation.
 
-Mermaid uses a [Git Flow](https://guides.github.com/introduction/flow/)–inspired approach to branching. So development is done in the `develop` branch.
+- [volta](https://volta.sh/) to manage node versions.
+- [Node.js](https://nodejs.org/en/). `volta install node`
+- [pnpm](https://pnpm.io/) package manager. `volta install pnpm`
+- [npx](https://docs.npmjs.com/cli/v8/commands/npx) the packaged executor in npm. This is needed [to install pnpm.](#2-install-pnpm)
 
-Once development is done we branch a `release` branch from `develop` for testing.
+Follow [the setup steps below](#setup) to install them and verify they are working
 
-Once the release happens we merge the `release` branch with `master` and kill the `release` branch.
+### Setup
 
-This means that **you should branch off your pull request from develop** and direct all Pull Requests to it.
+Follow these steps to set up the environment you need to work on code and/or documentation.
+
+#### 1. Fork and clone the repository
+
+In GitHub, you first _fork_ a repository when you are going to make changes and submit pull requests.
+
+Then you _clone_ a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with.
+
+[Here is a GitHub document that gives an overview of the process.](https://docs.github.com/en/get-started/quickstart/fork-a-repo)
+
+#### 2. Install pnpm
+
+Once you have cloned the repository onto your development machine, change into the `mermaid` project folder so that you can install `pnpm`. You will need `npx` to install pnpm because volta doesn't support it yet.
+
+Ex:
+
+```bash
+# Change into the mermaid directory (the top level director of the mermaid project repository)
+cd mermaid
+# npx is required for first install because volta does not support pnpm yet
+npx pnpm install
+```
+
+#### 3. Verify Everything Is Working
+
+Once you have installed pnpm, you can run the `test` script to verify that pnpm is working _and_ that the repository has been cloned correctly:
+
+```bash
+pnpm test
+```
+
+The `test` script and others are in the top-level `package.json` file.
+
+All tests should run sucessfully without any errors or failures. (You might see _lint_ or _formatting_ warnings; those are ok during this step.)
 
 ## Contributing Code
 
-We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein _knsv, Knut Sveidqvist_ is the primary reviewer of changes and merging pull requests. The process is as follows:
+The basic steps for contributing code are:
 
-- Large changes reviewed by knsv or other developer asked to review by knsv
-- Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
-- Documentation (we encourage updates to the `/packages/mermaid/src/docs` folder; you can submit them via direct commits)
+```mermaid-example
+graph LR
+    git[1. Checkout a  git branch] --> codeTest[2. write tests and code] --> doc[3. update documentation] --> submit[4.submit a PR]
+```
 
-When you commit code, create a branch with the following naming convention:
+```mermaid
+graph LR
+    git[1. Checkout a  git branch] --> codeTest[2. write tests and code] --> doc[3. update documentation] --> submit[4.submit a PR]
+```
 
-Start with the type, such as **feature** or **bug**, followed by the issue number for reference, and a text that describes the issue.
+1.  **Create** and checkout a git branch and work on your code in the branch
+2.  Write and update **tests** (unit and perhaps even integration (e2e) tests) (If you do TDD/BDD, the order might be different.)
+3.  **Let users know** that things have changed or been added in the documents! This is often overlooked, but _critical_
+4.  **Submit** your code as a _pull request._
 
-**One example:**
+### 1. Checkout a git branch
 
-`feature/945_state_diagrams`
+Mermaid uses a [Git Flow](https://guides.github.com/introduction/flow/)–inspired approach to branching.
 
-**Another example:**
+Development is done in the `develop` branch.
 
-`bug/123_nasty_bug_branch`
+Once development is done we branch a `release` branch from `develop` for testing.
 
-## Contributing to Documentation
+Once the release happens we merge the `release` branch with `master` and delete the `release` branch. The live product and on-line documentation are what is in the `master` branch.
 
-If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?
+**All new work should be based on the `develop` branch.**
 
-The docs are located in the `src/docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via **[.vitepress/config.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/.vitepress/config.ts)**.
+**When you are ready to do work, always, ALWAYS:**
 
-> **All the documents displayed in the GitHub.io page are listed in [.vitepress/config.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/.vitepress/config.ts)**.
+1.  Make sure you have the most up to date version of the `develop` branch. (fetch or pull to update it)
+2.  Check out the `develop` branch
+3.  Create a new branch for your work. Please name the branch following our naming convention below.
 
-The contents of <https://mermaid-js.github.io/mermaid/> are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
+We use the follow naming convention for branches:
 
-## How to Contribute to Documentation
+```text
+   [feature | bug | chore | docs]/[issue number]_[short description using dashes ('-') or underscores ('_') instead of spaces]
+```
 
-We are a little less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
+- The first part is the **type** of change: a feature, bug, chore, or documentation change ('docs')
+- followed by a _slash_ (which helps to group like types together in many git tools)
+- followed by the **issue number**
+- followed by an _underscore_ ('\_')
+- followed by a short text description (but use dashes ('-') or underscores ('\_') instead of spaces)
 
-The documentation is located in the `src/docs` directory and organized according to relevant subfolder.
+If your work is specific to a single diagram type, it is a good idea to put the diagram type at the start of the dscription. This will help use keep release notes organized: it will help us keep changes for a diagram type together.
 
-The `docs` folder will be automatically generated when committing to `src/docs` and should not be edited manually.
+**Ex: A new feature described in issue 2945 that adds a new arrow type called 'florbs' to state diagrams**
 
-We encourage contributions to the documentation at [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
+`feature/2945_state-diagram-new-arrow-florbs`
 
-### Add Unit Tests for Parsing
+**Ex: A bug described in issue 1123 that causes random ugly red text in multiple diagram types**
+`bug/1123_fix_random_ugly_red_text`
 
-This is important so that, if someone that does not know about this great feature suggests a change to the grammar, they get notified early on when that change breaks the parser. Another important aspect is that, without proper parsing, tests refactoring is pretty much impossible.
+### 2. Write Tests
 
-### Add E2E Tests
+Tests ensure that each function, module, or part of code does what it says it will do. This is critically
+important when other changes are made to ensure that existing code is not broken (no regression).
 
-This tests the rendering and visual appearance of the diagrams. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
+Just as important, the tests act as _specifications:_ they specify what the code does (or should do).
+Whenever someone is new to a section of code, they should be able to read the tests to get a thorough understanding of what it does and why.
+
+If you are fixing a bug, you should add tests to ensure that your code has actually fixed the bug, to specify/describe what the code is doing, and to ensure the bug doesn't happen again.
+(If there had been a test for the situation, the bug never would have happened in the first place.)
+You may need to change existing tests if they were inaccurate.
+
+If you are adding a feature, you will definitely need to add tests. Depending on the size of your feature, you may need to add integration tests.
+
+#### Unit Tests for Parsing
+
+If you are adding or changing the text that describes a diagram (the _grammar_), you will need to add (or change) tests for the _parser._
+
+#### Integration/End-to-End (e2e) tests
+
+These test the rendering and visual appearance of the diagrams.
+This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
 
 To start working with the e2e tests:
 
-1.  Run `pnpm run dev` to start the dev server
-2.  Start **Cypress** by running `pnpm exec cypress open` in the **mermaid** folder.
+1.  Run `pnpm run dev` to start the dev server (or use the `pnpm dev` script)
+2.  Start **Cypress** by running `pnpm exec cypress open` in the **mermaid** folder (or use the `pnpm cypress:open` script).
 
 The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
 
@@ -107,17 +186,87 @@ it('should render forks and joins', () => {
 });
 ```
 
-### Any Questions or Suggestions?
+\[TODO - running the tests against what is expected in development. ]
 
-After logging in at [GitHub.com](https://www.github.com), open or append to an issue [using the GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22).
+\[TODO - how to generate new screenshots]
+....
 
-### How to Contribute a Suggestion
+### 3. Update Documentation
+
+If the users have no way to know that things have changed, then you haven't really _fixed_ anything for the users; you've just added to making Mermaid feel broken.
+Likewise, if users don't know that there is a new feature that you've implemented, it will forever remain unknown and unused.
+
+The documentation has to be updated to users know that things have changed and added!
+
+We know it can sometimes be hard to code _and_ write user documentation.
+
+\[TODO - how to submit documentation changes -- see [Contributing Documentation](#contributing-documentation)
+
+Create another issue specifically for the documentation.\
+You will need to help with the PR, but definitely ask for help if you feel stuck.
+When it feels hard to write stuff out, explaining it to someone and having that person ask you clarifying questions can often be 80% of the work!]
+
+When in doubt, write up and submit what you can. It can be clarified and refined later. (With documentation, something is better than nothing!)
+
+### 4. Submit your pull request
+
+\[TODO - PR titles should start with (fix | feat | ....)]
+
+We make all changes via Pull Requests (PRs). As we have many Pull Requests from developers new to Mermaid, \
+we have put in place a process wherein _knsv, Knut Sveidqvist_ is the primary reviewer of changes and merging pull requests. The process is as follows:
+
+- Large changes are reviewed by knsv or other developer asked to review by knsv
+- Smaller, low-risk changes like dependencies, documentation, etc. can be reviewed and merged by active collaborators
+
+**Reminder: Pull Requests should be submitted to the develop branch.**
+
+## Contributing Documentation
+
+\[TODO: This section is still a WIP. It still needs revision.]
+
+If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?
+
+The docs are located in the `src/docs` folder and are written in Markdown. Just pick the right section and start typing.
+If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**.
+
+> **All the documents displayed in the GitHub.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**.
+
+The contents of <https://mermaid-js.github.io/mermaid/> are based on the docs from the `master` branch.
+Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
+
+### How to Contribute to Documentation
+
+We are a little less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
+
+The documentation is located in the `src/docs` directory and organized according to relevant subfolder.
+
+The contents of <https://mermaid-js.github.io/mermaid/> are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
+
+**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**
+
+The `docs` folder will be automatically generated when committing to `src/docs` and should not be edited manually.
+
+We encourage contributions to the documentation at [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
+
+- Documentation (we encourage updates to the `src/docs` folder; you can submit them via direct commits)
+
+The source files for documentation are in `/packages/mermaid/docs` and are written in markdown.
+
+**_DO NOT CHANGE FILES IN `/docs`_**
+
+### The official documentation site
+
+**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Docsify](https://docsify.js.org), a simple documentation site generator.**
+
+\[TODO - how to preview the documents on a local machine? how to run VitePress?]
+
+If you want to preview the whole documentation site on your machine, you need to install `docsify-cli`:
 
 Markdown is used to format the text, for more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
 
 To edit Docs on your computer:
 
-1.  Find the Markdown file (.md) to edit in the [packages/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs) directory in the `develop` branch.
+1.  Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs) directory in the `develop` branch.
 2.  Create a fork of the develop branch.
 3.  Make changes or add new documentation.
 4.  Commit changes to your fork and push it to GitHub.
@@ -126,12 +275,31 @@ To edit Docs on your computer:
 To edit Docs on GitHub:
 
 1.  Login to [GitHub.com](https://www.github.com).
-2.  Navigate to [packages/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs).
+2.  Navigate to [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs).
 3.  To edit a file, click the pencil icon at the top-right of the file contents panel.
 4.  Describe what you changed in the **Propose file change** section, located at the bottom of the page.
 5.  Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch).
 6.  Create a Pull Request of your newly forked branch by clicking the green **Create Pull Request** button.
 
+## Questions or Suggestions?
+
+#### First search to see if someone has already asked (and hopefully been answered) or suggested the same thing.
+
+- search in the Discussions
+- search in the open Issues
+
+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. \[TODO: describe +1, upvote]
+This helps the team know the relative interest in something and helps them set priorities and assignments.
+
+Feel free to add to the discussion on the issue or topic.
+
+If you can't find anything that already addresses your question or suggestion, _open a new issue:_
+
+Log in to [GitHub.com](https://www.github.com), open or append to an issue [using the GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22).
+
+### How to Contribute a Suggestion
+
 ## Last Words
 
 Don't get daunted if it is hard in the beginning. We have a great community with only encouraging words. So, if you get stuck, ask for help and hints in the Slack forum. If you want to show off something good, show it off there.
diff --git a/packages/mermaid/src/docs/community/newDiagram.md b/packages/mermaid/src/docs/community/newDiagram.md
index ed8c1e8aa..57a454671 100644
--- a/packages/mermaid/src/docs/community/newDiagram.md
+++ b/packages/mermaid/src/docs/community/newDiagram.md
@@ -56,9 +56,9 @@ Place the renderer in the diagram folder.
 ### Step 3: Detection of the new diagram type
 
 The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
-[This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type. 
+[This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
 For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
-would voice that as "U-M-L Deployment diagram."  Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.
+would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.
 
 Note that the diagram type key does not have to be the same as the diagram keyword chosen for the [grammar](#grammar), but it is helpful if they are the same.
 
@@ -169,11 +169,11 @@ It is probably a good idea to keep the handling similar to this in your new diag
 ## Accessibility
 
 Mermaid automatically adds the following accessibility information for the diagram SVG HTML element:
-- aria-roledescription 
+
+- aria-roledescription
 - accessible title
 - accessible description
 
-
 ### aria-roledescription
 
 The aria-roledescription is automatically set to [the diagram type](#step-3--detection-of-the-new-diagram-type) and inserted into the SVG element.
@@ -224,7 +224,6 @@ import {
 
 The accessibility title and description are inserted into the SVG element in the `render` function in mermaidAPI.
 
-
 ## Theming
 
 Mermaid supports themes and has an integrated theming engine. You can read more about how the themes can be used [in the docs](../config/theming.md).
diff --git a/packages/mermaid/src/docs/config/accessibility.md b/packages/mermaid/src/docs/config/accessibility.md
index 5545ce1bc..e7947adec 100644
--- a/packages/mermaid/src/docs/config/accessibility.md
+++ b/packages/mermaid/src/docs/config/accessibility.md
@@ -7,15 +7,22 @@ Now with Mermaid library in much wider use, we have started to work towards more
 Adding accessibility means that the rich information communicated by visual diagrams can be made available to those using assistive technologies (and of course to search engines).
 [Read more about Accessible Rich Internet Applications and the W3 standards.](https://www.w3.org/WAI/standards-guidelines/aria/)
 
-Mermaid will automatically insert the [aria-roledescription](#aria-roledescription) and, if provided in the diagram text by the diagram author, the [accessible title and description.](#accessible-title-and-description) 
+Mermaid will automatically insert the [aria-roledescription](#aria-roledescription) and, if provided in the diagram text by the diagram author, the [accessible title and description.](#accessible-title-and-description)
 
 ### aria-roledescription
 
-The [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) for the SVG HTML element is set to the diagram type key.  (Note this may be slightly different than the keyword used for the diagram in the diagram text.)
+The [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) for the SVG HTML element is set to the diagram type key. (Note this may be slightly different than the keyword used for the diagram in the diagram text.)
 
 For example: The diagram type key for a state diagram is "stateDiagram". Here (a part of) the HTML of the SVG tag that shows the automatically inserted aria-roledscription set to "stateDiagram". _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_
+
 ```html
-<svg aria-roledescription="stateDiagram"  class="statediagram" xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-1668720491568">
+<svg
+  aria-roledescription="stateDiagram"
+  class="statediagram"
+  xmlns="http://www.w3.org/2000/svg"
+  width="100%"
+  id="mermaid-1668720491568"
+></svg>
 ```
 
 ### Accessible Title and Description
@@ -32,23 +39,29 @@ and the accessible description element (text = "This is an accessible descriptio
 _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.)_
 
 ```html
-<svg aria-labelledby="chart-title-mermaid-1668725057758" aria-describedby="chart-desc-mermaid-1668725057758"  xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid-1668725057758">
+<svg
+  aria-labelledby="chart-title-mermaid-1668725057758"
+  aria-describedby="chart-desc-mermaid-1668725057758"
+  xmlns="http://www.w3.org/2000/svg"
+  width="100%"
+  id="mermaid-1668725057758"
+>
   <title id="chart-title-mermaid-1668725057758">This is the accessible title</title>
   <desc id="chart-desc-mermaid-1668725057758">This is an accessible description</desc>
+</svg>
 ```
 
 Details for the syntax follow.
 
-
 #### accessible title
+
 The **accessible title** is specified with the **accTitle** _keyword_, followed by a colon (`:`), and the string value for the title.
 The string value ends at the end of the line. (It can only be a single line.)
- 
-Ex: `accTitle: This is a single line title` 
+
+Ex: `accTitle: This is a single line title`
 
 See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-examples) for how this can be used in a diagram and the resulting HTML generated.
 
-
 #### accessible description
 
 An accessible description can be 1 line long (a single line) or many lines long.
@@ -60,6 +73,7 @@ Ex: `accDescr: This is a single line description.`
 A **multiple line accessible description** _does not have a colon (`:`) after the accDescr keyword_ and is surrounded by curly brackets (`{}`).
 
 Ex:
+
 ```
 accDescr { The official Bob's Burgers corporate processes that are used
         for making very, very big decisions.
@@ -68,7 +82,6 @@ accDescr { The official Bob's Burgers corporate processes that are used
 
 See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-examples) for how this can be used in a diagram and the resulting HTML generated.
 
-
 #### accTitle and accDescr Usage Examples
 
 - Flowchart with the accessible title "Big Decisions" and the single-line accessible description "Bob's Burgers process for making big decisions"
@@ -82,14 +95,22 @@ See [the accTitle and accDescr usage examples](#acctitle-and-accdescr-usage-exam
 ```
 
 Here is the HTML generated for the SVG element: _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_
+
 ```html
-<svg aria-labelledby="chart-title-mermaid_382ee221" aria-describedby="chart-desc-mermaid_382ee221" aria-roledescription="flowchart-v2"  xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid_382ee221">
+<svg
+  aria-labelledby="chart-title-mermaid_382ee221"
+  aria-describedby="chart-desc-mermaid_382ee221"
+  aria-roledescription="flowchart-v2"
+  xmlns="http://www.w3.org/2000/svg"
+  width="100%"
+  id="mermaid_382ee221"
+>
   <title id="chart-title-mermaid_382ee221">Big decisions</title>
   <desc id="chart-desc-mermaid_382ee221">Bob's Burgers process for making big decisions</desc>
-
+</svg>
 ```
 
-* Flowchart with the accessible title "Bob's Burger's Making Big Decisions" and the multiple line accessible description "The official Bob's Burgers corporate processes that are used
+- Flowchart with the accessible title "Bob's Burger's Making Big Decisions" and the multiple line accessible description "The official Bob's Burgers corporate processes that are used
   for making very, very big decisions.
   This is actually a very simple flow: identify the big decision and then make the big decision."
 
@@ -106,16 +127,25 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
 ```
 
 Here is the HTML generated for the SVG element: _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_
+
 ```html
-<svg aria-labelledby="chart-title-mermaid_382ee221" aria-describedby="chart-desc-mermaid_382ee221" aria-roledescription="flowchart-v2"  xmlns="http://www.w3.org/2000/svg" width="100%" id="mermaid_382ee221">
+<svg
+  aria-labelledby="chart-title-mermaid_382ee221"
+  aria-describedby="chart-desc-mermaid_382ee221"
+  aria-roledescription="flowchart-v2"
+  xmlns="http://www.w3.org/2000/svg"
+  width="100%"
+  id="mermaid_382ee221"
+>
   <title id="chart-title-mermaid_382ee221">Big decisions</title>
-  <desc id="chart-desc-mermaid_382ee221">The official Bob's Burgers corporate processes that are used
-    for making very, very big decisions.
-    This is actually a very simple flow: identify the big decision and then make the big decision.</desc>
-
+  <desc id="chart-desc-mermaid_382ee221">
+    The official Bob's Burgers corporate processes that are used for making very, very big
+    decisions. This is actually a very simple flow: identify the big decision and then make the big
+    decision.
+  </desc>
+</svg>
 ```
 
-
 #### Sample Code Snippets for other diagram types
 
 ##### Class Diagram
@@ -239,7 +269,6 @@ Here is the HTML generated for the SVG element: _(Note that some of the SVG attr
 
 ```
 
-
 ##### User Journey Diagram
 
 ```mermaid-example

From 67a015c71d42e8cd6870337807244ff9e528d164 Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Thu, 17 Nov 2022 16:58:18 -0800
Subject: [PATCH 39/98] re-re-fixed the contributing doc

---
 docs/community/development.md | 256 ++++++----------------------------
 1 file changed, 44 insertions(+), 212 deletions(-)

diff --git a/docs/community/development.md b/docs/community/development.md
index 8503fb141..58ca4670b 100644
--- a/docs/community/development.md
+++ b/docs/community/development.md
@@ -4,17 +4,7 @@
 >
 > ## Please edit the corresponding file in [/packages/mermaid/src/docs/community/development.md](../../packages/mermaid/src/docs/community/development.md).
 
-# Contributing to Mermaid
-
-## Contents
-
-- [Technical Requirements and Setup](#technical-requirements-and-setup)
-- [Contributing Code](#contributing-code)
-- [Contributing Documentation](#contributing-documentation)
-- [Questions or Suggestions?](#questions-or-suggestions)
-- [Last Words](#last-words)
-
----
+# Development and Contribution 🙌
 
 So you want to help? That's great!
 
@@ -22,141 +12,72 @@ So you want to help? That's great!
 
 Here are a few things to get you started on the right path.
 
-## Technical Requirements and Setup
+**The Docs Structure is dictated by [.vitepress/config.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/.vitepress/config.ts)**.
 
-### Technical Requirements
+**Note: Commits and Pull Requests should be directed to the develop branch.**
 
-These are the tools we use for working with the code and documentation.
+## Branching
 
-- [volta](https://volta.sh/) to manage node versions.
-- [Node.js](https://nodejs.org/en/). `volta install node`
-- [pnpm](https://pnpm.io/) package manager. `volta install pnpm`
-- [npx](https://docs.npmjs.com/cli/v8/commands/npx) the packaged executor in npm. This is needed [to install pnpm.](#2-install-pnpm)
-
-Follow [the setup steps below](#setup) to install them and verify they are working
-
-### Setup
-
-Follow these steps to set up the environment you need to work on code and/or documentation.
-
-#### 1. Fork and clone the repository
-
-In GitHub, you first _fork_ a repository when you are going to make changes and submit pull requests.
-
-Then you _clone_ a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with.
-
-[Here is a GitHub document that gives an overview of the process.](https://docs.github.com/en/get-started/quickstart/fork-a-repo)
-
-#### 2. Install pnpm
-
-Once you have cloned the repository onto your development machine, change into the `mermaid` project folder so that you can install `pnpm`. You will need `npx` to install pnpm because volta doesn't support it yet.
-
-Ex:
-
-```bash
-# Change into the mermaid directory (the top level director of the mermaid project repository)
-cd mermaid
-# npx is required for first install because volta does not support pnpm yet
-npx pnpm install
-```
-
-#### 3. Verify Everything Is Working
-
-Once you have installed pnpm, you can run the `test` script to verify that pnpm is working _and_ that the repository has been cloned correctly:
-
-```bash
-pnpm test
-```
-
-The `test` script and others are in the top-level `package.json` file.
-
-All tests should run sucessfully without any errors or failures. (You might see _lint_ or _formatting_ warnings; those are ok during this step.)
-
-## Contributing Code
-
-The basic steps for contributing code are:
-
-```mermaid-example
-graph LR
-    git[1. Checkout a  git branch] --> codeTest[2. write tests and code] --> doc[3. update documentation] --> submit[4.submit a PR]
-```
-
-```mermaid
-graph LR
-    git[1. Checkout a  git branch] --> codeTest[2. write tests and code] --> doc[3. update documentation] --> submit[4.submit a PR]
-```
-
-1.  **Create** and checkout a git branch and work on your code in the branch
-2.  Write and update **tests** (unit and perhaps even integration (e2e) tests) (If you do TDD/BDD, the order might be different.)
-3.  **Let users know** that things have changed or been added in the documents! This is often overlooked, but _critical_
-4.  **Submit** your code as a _pull request._
-
-### 1. Checkout a git branch
-
-Mermaid uses a [Git Flow](https://guides.github.com/introduction/flow/)–inspired approach to branching.
-
-Development is done in the `develop` branch.
+Mermaid uses a [Git Flow](https://guides.github.com/introduction/flow/)–inspired approach to branching. So development is done in the `develop` branch.
 
 Once development is done we branch a `release` branch from `develop` for testing.
 
-Once the release happens we merge the `release` branch with `master` and delete the `release` branch. The live product and on-line documentation are what is in the `master` branch.
+Once the release happens we merge the `release` branch with `master` and kill the `release` branch.
 
-**All new work should be based on the `develop` branch.**
+This means that **you should branch off your pull request from develop** and direct all Pull Requests to it.
 
-**When you are ready to do work, always, ALWAYS:**
+## Contributing Code
 
-1.  Make sure you have the most up to date version of the `develop` branch. (fetch or pull to update it)
-2.  Check out the `develop` branch
-3.  Create a new branch for your work. Please name the branch following our naming convention below.
+We make all changes via Pull Requests. As we have many Pull Requests from developers new to mermaid, we have put in place a process, wherein _knsv, Knut Sveidqvist_ is the primary reviewer of changes and merging pull requests. The process is as follows:
 
-We use the follow naming convention for branches:
+- Large changes reviewed by knsv or other developer asked to review by knsv
+- Smaller, low-risk changes like dependencies, documentation, etc. can be merged by active collaborators
+- Documentation (we encourage updates to the `/packages/mermaid/src/docs` folder; you can submit them via direct commits)
 
-```text
-   [feature | bug | chore | docs]/[issue number]_[short description using dashes ('-') or underscores ('_') instead of spaces]
-```
+When you commit code, create a branch with the following naming convention:
 
-- The first part is the **type** of change: a feature, bug, chore, or documentation change ('docs')
-- followed by a _slash_ (which helps to group like types together in many git tools)
-- followed by the **issue number**
-- followed by an _underscore_ ('\_')
-- followed by a short text description (but use dashes ('-') or underscores ('\_') instead of spaces)
+Start with the type, such as **feature** or **bug**, followed by the issue number for reference, and a text that describes the issue.
 
-If your work is specific to a single diagram type, it is a good idea to put the diagram type at the start of the dscription. This will help use keep release notes organized: it will help us keep changes for a diagram type together.
+**One example:**
 
-**Ex: A new feature described in issue 2945 that adds a new arrow type called 'florbs' to state diagrams**
+`feature/945_state_diagrams`
 
-`feature/2945_state-diagram-new-arrow-florbs`
+**Another example:**
 
-**Ex: A bug described in issue 1123 that causes random ugly red text in multiple diagram types**
-`bug/1123_fix_random_ugly_red_text`
+`bug/123_nasty_bug_branch`
 
-### 2. Write Tests
+## Contributing to Documentation
 
-Tests ensure that each function, module, or part of code does what it says it will do. This is critically
-important when other changes are made to ensure that existing code is not broken (no regression).
+If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?
 
-Just as important, the tests act as _specifications:_ they specify what the code does (or should do).
-Whenever someone is new to a section of code, they should be able to read the tests to get a thorough understanding of what it does and why.
+The docs are located in the `src/docs` folder and are written in Markdown. Just pick the right section and start typing. If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via **[.vitepress/config.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/.vitepress/config.ts)**.
 
-If you are fixing a bug, you should add tests to ensure that your code has actually fixed the bug, to specify/describe what the code is doing, and to ensure the bug doesn't happen again.
-(If there had been a test for the situation, the bug never would have happened in the first place.)
-You may need to change existing tests if they were inaccurate.
+> **All the documents displayed in the GitHub.io page are listed in [.vitepress/config.ts](https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/docs/.vitepress/config.ts)**.
 
-If you are adding a feature, you will definitely need to add tests. Depending on the size of your feature, you may need to add integration tests.
+The contents of <https://mermaid-js.github.io/mermaid/> are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
 
-#### Unit Tests for Parsing
+## How to Contribute to Documentation
 
-If you are adding or changing the text that describes a diagram (the _grammar_), you will need to add (or change) tests for the _parser._
+We are a little less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
 
-#### Integration/End-to-End (e2e) tests
+The documentation is located in the `src/docs` directory and organized according to relevant subfolder.
 
-These test the rendering and visual appearance of the diagrams.
-This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
+The `docs` folder will be automatically generated when committing to `src/docs` and should not be edited manually.
+
+We encourage contributions to the documentation at [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
+
+### Add Unit Tests for Parsing
+
+This is important so that, if someone that does not know about this great feature suggests a change to the grammar, they get notified early on when that change breaks the parser. Another important aspect is that, without proper parsing, tests refactoring is pretty much impossible.
+
+### Add E2E Tests
+
+This tests the rendering and visual appearance of the diagrams. This ensures that the rendering of that feature in the e2e will be reviewed in the release process going forward. Less chance that it breaks!
 
 To start working with the e2e tests:
 
-1.  Run `pnpm run dev` to start the dev server (or use the `pnpm dev` script)
-2.  Start **Cypress** by running `pnpm exec cypress open` in the **mermaid** folder (or use the `pnpm cypress:open` script).
+1.  Run `pnpm run dev` to start the dev server
+2.  Start **Cypress** by running `pnpm exec cypress open` in the **mermaid** folder.
 
 The rendering tests are very straightforward to create. There is a function `imgSnapshotTest`, which takes a diagram in text form and the mermaid options, and it renders that diagram in Cypress.
 
@@ -186,87 +107,17 @@ it('should render forks and joins', () => {
 });
 ```
 
-\[TODO - running the tests against what is expected in development. ]
+### Any Questions or Suggestions?
 
-\[TODO - how to generate new screenshots]
-....
+After logging in at [GitHub.com](https://www.github.com), open or append to an issue [using the GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22).
 
-### 3. Update Documentation
-
-If the users have no way to know that things have changed, then you haven't really _fixed_ anything for the users; you've just added to making Mermaid feel broken.
-Likewise, if users don't know that there is a new feature that you've implemented, it will forever remain unknown and unused.
-
-The documentation has to be updated to users know that things have changed and added!
-
-We know it can sometimes be hard to code _and_ write user documentation.
-
-\[TODO - how to submit documentation changes -- see [Contributing Documentation](#contributing-documentation)
-
-Create another issue specifically for the documentation.\
-You will need to help with the PR, but definitely ask for help if you feel stuck.
-When it feels hard to write stuff out, explaining it to someone and having that person ask you clarifying questions can often be 80% of the work!]
-
-When in doubt, write up and submit what you can. It can be clarified and refined later. (With documentation, something is better than nothing!)
-
-### 4. Submit your pull request
-
-\[TODO - PR titles should start with (fix | feat | ....)]
-
-We make all changes via Pull Requests (PRs). As we have many Pull Requests from developers new to Mermaid, \
-we have put in place a process wherein _knsv, Knut Sveidqvist_ is the primary reviewer of changes and merging pull requests. The process is as follows:
-
-- Large changes are reviewed by knsv or other developer asked to review by knsv
-- Smaller, low-risk changes like dependencies, documentation, etc. can be reviewed and merged by active collaborators
-
-**Reminder: Pull Requests should be submitted to the develop branch.**
-
-## Contributing Documentation
-
-\[TODO: This section is still a WIP. It still needs revision.]
-
-If it is not in the documentation, it's like it never happened. Wouldn't that be sad? With all the effort that was put into the feature?
-
-The docs are located in the `src/docs` folder and are written in Markdown. Just pick the right section and start typing.
-If you want to propose changes to the structure of the documentation, such as adding a new section or a new file you do that via the **[sidebar](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**.
-
-> **All the documents displayed in the GitHub.io page are listed in [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**.
-
-The contents of <https://mermaid-js.github.io/mermaid/> are based on the docs from the `master` branch.
-Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
-
-### How to Contribute to Documentation
-
-We are a little less strict here, it is OK to commit directly in the `develop` branch if you are a collaborator.
-
-The documentation is located in the `src/docs` directory and organized according to relevant subfolder.
-
-The contents of <https://mermaid-js.github.io/mermaid/> are based on the docs from the `master` branch. Updates committed to the `master` branch are reflected in the [Mermaid Docs](https://mermaid-js.github.io/mermaid/) once released.
-
-**The Docs Structure is dictated by [sidebar.md](https://github.com/mermaid-js/mermaid/edit/develop/src/docs/_sidebar.md)**
-
-The `docs` folder will be automatically generated when committing to `src/docs` and should not be edited manually.
-
-We encourage contributions to the documentation at [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs). We publish documentation using GitHub Pages with [Docsify](https://www.youtube.com/watch?v=TV88lp7egMw&t=3s)
-
-- Documentation (we encourage updates to the `src/docs` folder; you can submit them via direct commits)
-
-The source files for documentation are in `/packages/mermaid/docs` and are written in markdown.
-
-**_DO NOT CHANGE FILES IN `/docs`_**
-
-### The official documentation site
-
-**[The mermaid documentation site](https://mermaid-js.github.io/mermaid/) is powered by [Docsify](https://docsify.js.org), a simple documentation site generator.**
-
-\[TODO - how to preview the documents on a local machine? how to run VitePress?]
-
-If you want to preview the whole documentation site on your machine, you need to install `docsify-cli`:
+### How to Contribute a Suggestion
 
 Markdown is used to format the text, for more information about Markdown [see the GitHub Markdown help page](https://help.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax).
 
 To edit Docs on your computer:
 
-1.  Find the Markdown file (.md) to edit in the [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs) directory in the `develop` branch.
+1.  Find the Markdown file (.md) to edit in the [packages/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs) directory in the `develop` branch.
 2.  Create a fork of the develop branch.
 3.  Make changes or add new documentation.
 4.  Commit changes to your fork and push it to GitHub.
@@ -275,31 +126,12 @@ To edit Docs on your computer:
 To edit Docs on GitHub:
 
 1.  Login to [GitHub.com](https://www.github.com).
-2.  Navigate to [mermaid-js/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/src/docs).
+2.  Navigate to [packages/mermaid/src/docs](https://github.com/mermaid-js/mermaid/tree/develop/packages/mermaid/src/docs).
 3.  To edit a file, click the pencil icon at the top-right of the file contents panel.
 4.  Describe what you changed in the **Propose file change** section, located at the bottom of the page.
 5.  Submit your changes by clicking the button **Propose file change** at the bottom (by automatic creation of a fork and a new branch).
 6.  Create a Pull Request of your newly forked branch by clicking the green **Create Pull Request** button.
 
-## Questions or Suggestions?
-
-#### First search to see if someone has already asked (and hopefully been answered) or suggested the same thing.
-
-- search in the Discussions
-- search in the open Issues
-
-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. \[TODO: describe +1, upvote]
-This helps the team know the relative interest in something and helps them set priorities and assignments.
-
-Feel free to add to the discussion on the issue or topic.
-
-If you can't find anything that already addresses your question or suggestion, _open a new issue:_
-
-Log in to [GitHub.com](https://www.github.com), open or append to an issue [using the GitHub issue tracker of the mermaid-js repository](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22).
-
-### How to Contribute a Suggestion
-
 ## Last Words
 
 Don't get daunted if it is hard in the beginning. We have a great community with only encouraging words. So, if you get stuck, ask for help and hints in the Slack forum. If you want to show off something good, show it off there.

From e9f8ba6915376b2bd30e0b63075fb243806c2d4c Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 18 Nov 2022 11:28:29 +0530
Subject: [PATCH 40/98] doc: Add mindmap integration docs

---
 docs/mindmap.md                                  | 14 ++++++++++++++
 docs/n00b-gettingStarted.md                      |  4 ++++
 packages/mermaid/src/docs/mindmap.md             | 14 ++++++++++++++
 packages/mermaid/src/docs/n00b-gettingStarted.md |  4 ++++
 4 files changed, 36 insertions(+)

diff --git a/docs/mindmap.md b/docs/mindmap.md
index 32f1e099d..935572ddc 100644
--- a/docs/mindmap.md
+++ b/docs/mindmap.md
@@ -235,3 +235,17 @@ Root
         B
       C
 ```
+
+## Integrating with your library/website.
+
+Mindmap uses the experimental lazy loading & async rendering features which could change in the future.
+
+```html
+<script type="module">
+  import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+  import mindmap from 'https://unpkg.com/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap.esm.min.mjs';
+  await mermaid.registerExternalDiagrams([mindmap]);
+</script>
+```
+
+You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/fcf53c98c25604c90a218104268c339be53035a6/src/lib/util/mermaid.ts) to see how the async loading is done.
diff --git a/docs/n00b-gettingStarted.md b/docs/n00b-gettingStarted.md
index feac48919..e4e98d082 100644
--- a/docs/n00b-gettingStarted.md
+++ b/docs/n00b-gettingStarted.md
@@ -119,6 +119,10 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 | ----------- | --------------------------------- | ------- | ----------- |
 | startOnLoad | Toggle for Rendering upon loading | Boolean | true, false |
 
+### Adding external diagrams to mermaid
+
+Please refer to the [Mindmap](./mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
+
 ### Working Examples
 
 **Here is a full working example of the mermaidAPI being called through the CDN:**
diff --git a/packages/mermaid/src/docs/mindmap.md b/packages/mermaid/src/docs/mindmap.md
index 5aa6f4953..2b47e3e19 100644
--- a/packages/mermaid/src/docs/mindmap.md
+++ b/packages/mermaid/src/docs/mindmap.md
@@ -153,3 +153,17 @@ Root
         B
       C
 ```
+
+## Integrating with your library/website.
+
+Mindmap uses the experimental lazy loading & async rendering features which could change in the future.
+
+```html
+<script type="module">
+  import mermaid from '<CDN_URL>/mermaid@<MERMAID_VERSION>/dist/mermaid.esm.min.mjs';
+  import mindmap from '<CDN_URL>/@mermaid-js/mermaid-mindmap@<MERMAID_VERSION>/dist/mermaid-mindmap.esm.min.mjs';
+  await mermaid.registerExternalDiagrams([mindmap]);
+</script>
+```
+
+You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/fcf53c98c25604c90a218104268c339be53035a6/src/lib/util/mermaid.ts) to see how the async loading is done.
diff --git a/packages/mermaid/src/docs/n00b-gettingStarted.md b/packages/mermaid/src/docs/n00b-gettingStarted.md
index 095cece24..398541eb1 100644
--- a/packages/mermaid/src/docs/n00b-gettingStarted.md
+++ b/packages/mermaid/src/docs/n00b-gettingStarted.md
@@ -117,6 +117,10 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 | ----------- | --------------------------------- | ------- | ----------- |
 | startOnLoad | Toggle for Rendering upon loading | Boolean | true, false |
 
+### Adding external diagrams to mermaid
+
+Please refer to the [Mindmap](./mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
+
 ### Working Examples
 
 **Here is a full working example of the mermaidAPI being called through the CDN:**

From 2a98791ec9005d0ec0c8f2e0a71f1452ea7c993e Mon Sep 17 00:00:00 2001
From: Ashley Engelund <weedySeaDragon@users.noreply.github.com>
Date: Sun, 20 Nov 2022 12:17:21 -0800
Subject: [PATCH 41/98] use optional chaining check for get acc title and get
 acc description

Co-authored-by: Alois Klink <alois@aloisklink.com>
---
 packages/mermaid/src/mermaidAPI.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 072ff595a..c1b2f2556 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -529,8 +529,8 @@ const render = function (
   // This is the d3 node for the svg element
   const svgNode = root.select(`${enclosingDivID_selector} svg`);
   setA11yDiagramInfo(svgNode, graphType);
-  const a11yTitle = diag.db.getAccTitle !== undefined ? diag.db.getAccTitle() : null;
-  const a11yDescr = diag.db.getAccDescription !== undefined ? diag.db.getAccDescription() : null;
+  const a11yTitle = diag.db.getAccTitle?.();
+  const a11yDescr = diag.db.getAccDescription?.();
   addSVGa11yTitleDescription(svgNode, a11yTitle, a11yDescr, svgNode.attr('id'));
 
   // -------------------------------------------------------------------------------

From a9c337302a5204dd3413659aa9ebacf34ecf779c Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Sun, 20 Nov 2022 12:27:29 -0800
Subject: [PATCH 42/98] export D3Element from mermaidAPI; use in accessibility

---
 docs/config/setup/modules/mermaidAPI.md    | 10 ++++++++++
 packages/mermaid/src/accessibility.spec.ts | 11 ++++++-----
 packages/mermaid/src/accessibility.ts      | 10 ++++------
 packages/mermaid/src/mermaidAPI.ts         |  2 +-
 4 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index baa4a939c..ef8a08b91 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -12,6 +12,16 @@
 
 Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
+## Type Aliases
+
+### D3Element
+
+Ƭ **D3Element**: `any`
+
+#### Defined in
+
+[mermaidAPI.ts:73](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L73)
+
 ## Variables
 
 ### mermaidAPI
diff --git a/packages/mermaid/src/accessibility.spec.ts b/packages/mermaid/src/accessibility.spec.ts
index 87d9a1cd0..57d5e8933 100644
--- a/packages/mermaid/src/accessibility.spec.ts
+++ b/packages/mermaid/src/accessibility.spec.ts
@@ -1,5 +1,6 @@
 import { MockedD3 } from './tests/MockedD3';
 import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
+import { D3Element } from './mermaidAPI';
 
 describe('accessibility', () => {
   const fauxSvgNode = new MockedD3();
@@ -37,7 +38,7 @@ describe('accessibility', () => {
       // Convenience functions to DRY up the spec
 
       function expectAriaLabelledByIsTitleId(
-        svgD3Node: any,
+        svgD3Node: D3Element,
         title: string | null | undefined,
         desc: string | null | undefined,
         givenId: string
@@ -49,7 +50,7 @@ describe('accessibility', () => {
       }
 
       function expectAriaDescribedByIsDescId(
-        svgD3Node: any,
+        svgD3Node: D3Element,
         title: string | null | undefined,
         desc: string | null | undefined,
         givenId: string
@@ -61,7 +62,7 @@ describe('accessibility', () => {
       }
 
       function a11yTitleTagInserted(
-        svgD3Node: any,
+        svgD3Node: D3Element,
         title: string | null | undefined,
         desc: string | null | undefined,
         givenId: string,
@@ -71,7 +72,7 @@ describe('accessibility', () => {
       }
 
       function a11yDescTagInserted(
-        svgD3Node: any,
+        svgD3Node: D3Element,
         title: string | null | undefined,
         desc: string | null | undefined,
         givenId: string,
@@ -81,7 +82,7 @@ describe('accessibility', () => {
       }
 
       function a11yTagInserted(
-        svgD3Node: any,
+        svgD3Node: D3Element,
         title: string | null | undefined,
         desc: string | null | undefined,
         givenId: string,
diff --git a/packages/mermaid/src/accessibility.ts b/packages/mermaid/src/accessibility.ts
index 2940de959..a84edec0c 100644
--- a/packages/mermaid/src/accessibility.ts
+++ b/packages/mermaid/src/accessibility.ts
@@ -2,11 +2,9 @@
  * Accessibility (a11y) functions, types, helpers
  *
  */
+import { D3Element } from './mermaidAPI';
 
-import { isEmpty, compact } from 'lodash';
-
-// This is just a convenience alias to make it clear the type is a d3 object. (It's easier to make it 'any' instead of the complete typing set in d3)
-type D3object = any;
+import { isEmpty } from 'lodash';
 
 /**
  * Add aria-roledescription to the svg element to the diagramType
@@ -14,7 +12,7 @@ type D3object = any;
  * @param svg - d3 object that contains the SVG HTML element
  * @param diagramType - diagram name for to the aria-roledescription
  */
-export function setA11yDiagramInfo(svg: D3object, diagramType: string | null | undefined) {
+export function setA11yDiagramInfo(svg: D3Element, diagramType: string | null | undefined) {
   if (!isEmpty(diagramType)) {
     svg.attr('aria-roledescription', diagramType);
   }
@@ -31,7 +29,7 @@ export function setA11yDiagramInfo(svg: D3object, diagramType: string | null | u
  * @param baseId - id used to construct the a11y title and description id
  */
 export function addSVGa11yTitleDescription(
-  svg: D3object,
+  svg: D3Element,
   a11yTitle: string | null | undefined,
   a11yDesc: string | null | undefined,
   baseId: string
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index c1b2f2556..808dec809 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -70,7 +70,7 @@ interface DiagramStyleClassDef {
 
 // This makes it clear that we're working with a d3 selected element of some kind, even though it's hard to specify the exact type.
 // @ts-ignore Could replicate the type definition in d3. This also makes it possible to use the untyped info from the js diagram files.
-type D3Element = any;
+export type D3Element = any;
 
 // ----------------------------------------------------------------------------
 

From 1f64302ae213b4c057fb4268288fbc72ea705fe7 Mon Sep 17 00:00:00 2001
From: Dan Fallon <dan@daninprogress.com>
Date: Sun, 20 Nov 2022 22:42:26 -0600
Subject: [PATCH 43/98] Use stylis to prepend idSelector

code previously manually inserted idSelector before the generated CSS.
This could produce incorrect CSS.

Adding & in front of rules will ensure that it behaves properly.
Stylis seems permissive about the lack of nesting selector, but fails
if there is no selector at all. (e.g. "{...props...}")

We should probably do this for each diagram's style.ts files as well
---
 packages/mermaid/src/mermaidAPI.ts |  4 ++--
 packages/mermaid/src/styles.ts     | 20 ++++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 0df1da305..d9ef9a561 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -510,7 +510,7 @@ const render = function (
   );
 
   const style1 = document.createElement('style');
-  style1.innerHTML = `${idSelector} ` + rules;
+  style1.innerHTML = rules;
   svg.insertBefore(style1, firstChild);
 
   // -------------------------------------------------------------------------------
@@ -706,7 +706,7 @@ const renderAsync = async function (
   );
 
   const style1 = document.createElement('style');
-  style1.innerHTML = `${idSelector} ` + rules;
+  style1.innerHTML = rules;
   svg.insertBefore(style1, firstChild);
 
   // -------------------------------------------------------------------------------
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index 0c4a7e1a5..055f63be5 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -53,7 +53,7 @@ const getStyles = (
   } else {
     log.warn(`No theme found for ${type}`);
   }
-  return ` {
+  return ` & {
     font-family: ${options.fontFamily};
     font-size: ${options.fontSize};
     fill: ${options.textColor}
@@ -61,40 +61,40 @@ const getStyles = (
 
   /* Classes common for multiple diagrams */
 
-  .error-icon {
+  & .error-icon {
     fill: ${options.errorBkgColor};
   }
-  .error-text {
+  & .error-text {
     fill: ${options.errorTextColor};
     stroke: ${options.errorTextColor};
   }
 
-  .edge-thickness-normal {
+  & .edge-thickness-normal {
     stroke-width: 2px;
   }
-  .edge-thickness-thick {
+  & .edge-thickness-thick {
     stroke-width: 3.5px
   }
-  .edge-pattern-solid {
+  & .edge-pattern-solid {
     stroke-dasharray: 0;
   }
 
-  .edge-pattern-dashed{
+  & .edge-pattern-dashed{
     stroke-dasharray: 3;
   }
   .edge-pattern-dotted {
     stroke-dasharray: 2;
   }
 
-  .marker {
+  & .marker {
     fill: ${options.lineColor};
     stroke: ${options.lineColor};
   }
-  .marker.cross {
+  & .marker.cross {
     stroke: ${options.lineColor};
   }
 
-  svg {
+  & svg {
     font-family: ${options.fontFamily};
     font-size: ${options.fontSize};
   }

From 32cf349d12d4db4d9b5ef72e0898f05b1122523f Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 23 Nov 2022 00:26:37 +0530
Subject: [PATCH 44/98] chore: Add lodash-eslint rule

---
 .eslintrc.json | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index d83222f3a..1d052e22b 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -21,7 +21,16 @@
     "plugin:@cspell/recommended",
     "prettier"
   ],
-  "plugins": ["@typescript-eslint", "no-only-tests", "html", "jest", "jsdoc", "json", "@cspell"],
+  "plugins": [
+    "@typescript-eslint",
+    "no-only-tests",
+    "html",
+    "jest",
+    "jsdoc",
+    "json",
+    "@cspell",
+    "lodash"
+  ],
   "rules": {
     "curly": "error",
     "no-console": "error",
@@ -53,7 +62,8 @@
         "allowEmptyCatch": true
       }
     ],
-    "no-only-tests/no-only-tests": "error"
+    "no-only-tests/no-only-tests": "error",
+    "lodash/import-scope": ["error", "method"]
   },
   "overrides": [
     {

From 8116c8b40d679d0d9009a45c251e0d0e1235382f Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 23 Nov 2022 00:26:50 +0530
Subject: [PATCH 45/98] chore: Add lodash-eslint rule

---
 package.json   |   6 ++-
 pnpm-lock.yaml | 107 ++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 105 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 36846a313..628fcecd2 100644
--- a/package.json
+++ b/package.json
@@ -60,8 +60,8 @@
     "@cspell/eslint-plugin": "^6.14.2",
     "@types/eslint": "^8.4.10",
     "@types/express": "^4.17.14",
-    "@types/jsdom": "^20.0.1",
     "@types/js-yaml": "^4.0.5",
+    "@types/jsdom": "^20.0.1",
     "@types/lodash": "^4.14.188",
     "@types/mdast": "^3.0.10",
     "@types/node": "^18.11.9",
@@ -83,17 +83,19 @@
     "eslint-plugin-jest": "^27.1.5",
     "eslint-plugin-jsdoc": "^39.6.2",
     "eslint-plugin-json": "^3.1.0",
+    "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-tsdoc": "^0.2.17",
+    "eslint-plugin-unicorn": "^45.0.0",
     "express": "^4.18.2",
     "globby": "^13.1.2",
     "husky": "^8.0.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.3.1",
     "jison": "^0.4.18",
-    "jsdom": "^20.0.2",
     "js-yaml": "^4.1.0",
+    "jsdom": "^20.0.2",
     "lint-staged": "^13.0.3",
     "path-browserify": "^1.0.1",
     "pnpm": "^7.15.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 25849114f..91e22e019 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -91,6 +91,9 @@ importers:
       eslint-plugin-json:
         specifier: ^3.1.0
         version: 3.1.0
+      eslint-plugin-lodash:
+        specifier: ^7.4.0
+        version: 7.4.0_eslint@8.27.0
       eslint-plugin-markdown:
         specifier: ^3.0.0
         version: 3.0.0_eslint@8.27.0
@@ -100,6 +103,9 @@ importers:
       eslint-plugin-tsdoc:
         specifier: ^0.2.17
         version: 0.2.17
+      eslint-plugin-unicorn:
+        specifier: ^45.0.0
+        version: 45.0.0_eslint@8.27.0
       express:
         specifier: ^4.18.2
         version: 4.18.2
@@ -1766,7 +1772,7 @@ packages:
       '@types/node': 18.11.9
       ansi-escapes: 4.3.2
       chalk: 4.1.2
-      ci-info: 3.4.0
+      ci-info: 3.6.2
       exit: 0.1.2
       graceful-fs: 4.2.10
       jest-changed-files: 29.2.0
@@ -3785,6 +3791,11 @@ packages:
       ieee754: 1.2.1
     dev: true
 
+  /builtin-modules/3.3.0:
+    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
+    engines: {node: '>=6'}
+    dev: true
+
   /bytes/3.0.0:
     resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
     engines: {node: '>= 0.8'}
@@ -3975,8 +3986,9 @@ packages:
     engines: {node: '>=6.0'}
     dev: true
 
-  /ci-info/3.4.0:
-    resolution: {integrity: sha512-t5QdPT5jq3o262DOQ8zA6E1tlH2upmUc4Hlvrbx1pGYJuiiHl7O7rvVNI+l8HTVhd/q3Qc9vqimkNk5yiXsAug==}
+  /ci-info/3.6.2:
+    resolution: {integrity: sha512-lVZdhvbEudris15CLytp2u6Y0p5EKfztae9Fqa189MfNmln9F33XuH69v5fvNfiRN5/0eAUz2yJL3mo+nhaRKg==}
+    engines: {node: '>=8'}
     dev: true
 
   /cjs-module-lexer/1.2.2:
@@ -3990,6 +4002,13 @@ packages:
       jsonlint: 1.6.0
     dev: true
 
+  /clean-regexp/1.0.0:
+    resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
+    engines: {node: '>=4'}
+    dependencies:
+      escape-string-regexp: 1.0.5
+    dev: true
+
   /clean-stack/2.2.0:
     resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
     engines: {node: '>=6'}
@@ -5560,6 +5579,16 @@ packages:
       vscode-json-languageservice: 4.2.1
     dev: true
 
+  /eslint-plugin-lodash/7.4.0_eslint@8.27.0:
+    resolution: {integrity: sha512-Tl83UwVXqe1OVeBRKUeWcfg6/pCW1GTRObbdnbEJgYwjxp5Q92MEWQaH9+dmzbRt6kvYU1Mp893E79nJiCSM8A==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: '>=2'
+    dependencies:
+      eslint: 8.27.0
+      lodash: 4.17.21
+    dev: true
+
   /eslint-plugin-markdown/3.0.0_eslint@8.27.0:
     resolution: {integrity: sha512-hRs5RUJGbeHDLfS7ELanT0e29Ocyssf/7kBM+p7KluY5AwngGkDf8Oyu4658/NZSGTTq05FZeWbkxXtbVyHPwg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -5584,6 +5613,31 @@ packages:
       '@microsoft/tsdoc-config': 0.16.2
     dev: true
 
+  /eslint-plugin-unicorn/45.0.0_eslint@8.27.0:
+    resolution: {integrity: sha512-iP8cMRxXKHonKioOhnCoCcqVhoqhAp6rB+nsoLjXFDxTHz3btWMAp8xwzjHA0B1K6YV/U/Yvqn1bUXZt8sJPuQ==}
+    engines: {node: '>=14.18'}
+    peerDependencies:
+      eslint: '>=8.28.0'
+    dependencies:
+      '@babel/helper-validator-identifier': 7.19.1
+      ci-info: 3.6.2
+      clean-regexp: 1.0.0
+      eslint: 8.27.0
+      eslint-utils: 3.0.0_eslint@8.27.0
+      esquery: 1.4.0
+      indent-string: 4.0.0
+      is-builtin-module: 3.2.0
+      jsesc: 3.0.2
+      lodash: 4.17.21
+      pluralize: 8.0.0
+      read-pkg-up: 7.0.1
+      regexp-tree: 0.1.24
+      regjsparser: 0.9.1
+      safe-regex: 2.1.1
+      semver: 7.3.8
+      strip-indent: 3.0.0
+    dev: true
+
   /eslint-scope/5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -6867,11 +6921,18 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /is-builtin-module/3.2.0:
+    resolution: {integrity: sha512-phDA4oSGt7vl1n5tJvTWooWWAsXLY+2xCnxNqvKhGEzujg+A43wPlPOyDg3C8XQHN+6k/JTQWJ/j0dQh/qr+Hw==}
+    engines: {node: '>=6'}
+    dependencies:
+      builtin-modules: 3.3.0
+    dev: true
+
   /is-ci/3.0.1:
     resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==}
     hasBin: true
     dependencies:
-      ci-info: 3.4.0
+      ci-info: 3.6.2
     dev: true
 
   /is-core-module/2.10.0:
@@ -7169,7 +7230,7 @@ packages:
       '@types/node': 18.11.9
       babel-jest: 29.3.1_@babel+core@7.12.3
       chalk: 4.1.2
-      ci-info: 3.4.0
+      ci-info: 3.6.2
       deepmerge: 4.2.2
       glob: 7.2.3
       graceful-fs: 4.2.10
@@ -7455,7 +7516,7 @@ packages:
       '@jest/types': 29.3.1
       '@types/node': 18.11.9
       chalk: 4.1.2
-      ci-info: 3.4.0
+      ci-info: 3.6.2
       graceful-fs: 4.2.10
       picomatch: 2.3.1
     dev: true
@@ -7644,12 +7705,23 @@ packages:
       - utf-8-validate
     dev: true
 
+  /jsesc/0.5.0:
+    resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
+    hasBin: true
+    dev: true
+
   /jsesc/2.5.2:
     resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
     engines: {node: '>=4'}
     hasBin: true
     dev: true
 
+  /jsesc/3.0.2:
+    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: true
+
   /json-buffer/3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
     dev: true
@@ -8965,6 +9037,11 @@ packages:
       xmlbuilder: 15.1.1
     dev: true
 
+  /pluralize/8.0.0:
+    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
+    engines: {node: '>=4'}
+    dev: true
+
   /png-async/0.9.4:
     resolution: {integrity: sha512-B//AXX9TkneKfgtOpT1mdUnnhk2BImGD+a98vImsMU8uo1dBeHyW/kM2erWZ/CsYteTPU/xKG+t6T62heHkC3A==}
     dev: true
@@ -9251,11 +9328,23 @@ packages:
       strip-indent: 3.0.0
     dev: true
 
+  /regexp-tree/0.1.24:
+    resolution: {integrity: sha512-s2aEVuLhvnVJW6s/iPgEGK6R+/xngd2jNQ+xy4bXNDKxZKJH6jpPHY6kVeVv1IeLCHgswRj+Kl3ELaDjG6V1iw==}
+    hasBin: true
+    dev: true
+
   /regexpp/3.2.0:
     resolution: {integrity: sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==}
     engines: {node: '>=8'}
     dev: true
 
+  /regjsparser/0.9.1:
+    resolution: {integrity: sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==}
+    hasBin: true
+    dependencies:
+      jsesc: 0.5.0
+    dev: true
+
   /remark-parse/10.0.1:
     resolution: {integrity: sha512-1fUyHr2jLsVOkhbvPRBJ5zTKZZyD6yZzYaWCS6BPBdQ8vEMBCH+9zNCDA6tET/zHCi/jLqjCWtlJZUPk+DbnFw==}
     dependencies:
@@ -9487,6 +9576,12 @@ packages:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
     dev: true
 
+  /safe-regex/2.1.1:
+    resolution: {integrity: sha512-rx+x8AMzKb5Q5lQ95Zoi6ZbJqwCLkqi3XuJXp5P3rT8OEc6sZCJG5AE5dU3lsgRr/F4Bs31jSlVN+j5KrsGu9A==}
+    dependencies:
+      regexp-tree: 0.1.24
+    dev: true
+
   /safer-buffer/2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 

From 7f4368415d833f5d7761b56e532c18342dff5799 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 23 Nov 2022 01:05:08 +0530
Subject: [PATCH 46/98] chore: Add eslint-unicorn & fix

---
 .eslintrc.json                                |  27 ++++-
 cSpell.json                                   |   1 +
 cypress/integration/rendering/gantt.spec.js   |   2 +-
 .../integration/rendering/requirement.spec.js |   2 +-
 cypress/platform/viewer.js                    |   2 +-
 docs/config/setup/modules/config.md           |  18 ++--
 docs/config/setup/modules/mermaidAPI.md       |  16 +--
 packages/mermaid-mindmap/src/mermaidUtils.ts  |   3 +-
 packages/mermaid/src/accessibility.js         |   2 +-
 packages/mermaid/src/assignWithDepth.js       |   6 +-
 packages/mermaid/src/config.ts                |  20 ++--
 .../mermaid/src/dagre-wrapper/createLabel.js  |   6 +-
 packages/mermaid/src/dagre-wrapper/edges.js   |   2 +-
 packages/mermaid/src/dagre-wrapper/index.js   |   2 +-
 .../src/dagre-wrapper/mermaid-graphlib.js     |  87 +++++++--------
 .../dagre-wrapper/mermaid-graphlib.spec.js    |  10 +-
 packages/mermaid/src/dagre-wrapper/nodes.js   |   6 +-
 .../mermaid/src/dagre-wrapper/shapes/util.js  |   2 +-
 .../mermaid/src/diagram-api/detectType.ts     |   3 +-
 .../mermaid/src/diagram-api/frontmatter.ts    |   2 +-
 .../mermaid/src/diagrams/c4/c4Renderer.js     |  15 ++-
 packages/mermaid/src/diagrams/c4/svgDraw.js   |  37 ++++---
 .../mermaid/src/diagrams/class/classDb.js     |  18 ++--
 .../src/diagrams/class/classRenderer-v2.js    |  22 ++--
 .../src/diagrams/class/classRenderer.js       |   8 +-
 .../mermaid/src/diagrams/class/svgDraw.js     |  13 ++-
 .../mermaid/src/diagrams/common/common.ts     |   2 +-
 packages/mermaid/src/diagrams/er/erDb.js      |   2 +-
 .../mermaid/src/diagrams/er/erRenderer.js     |  16 ++-
 .../mermaid/src/diagrams/flowchart/flowDb.js  | 100 ++++++++----------
 .../src/diagrams/flowchart/flowRenderer-v2.js |  36 +++----
 .../src/diagrams/flowchart/flowRenderer.js    |  36 +++----
 .../flowchart/parser/flow-direction.spec.js   |   4 +-
 .../flowchart/parser/subgraph.spec.js         |  12 +--
 .../mermaid/src/diagrams/gantt/ganttDb.js     |  67 ++++++------
 .../src/diagrams/gantt/ganttRenderer.js       |  36 +++----
 .../mermaid/src/diagrams/git/gitGraphAst.js   |  18 ++--
 .../src/diagrams/git/gitGraphRenderer-old.js  |   3 +-
 .../src/diagrams/git/gitGraphRenderer.js      |  19 ++--
 packages/mermaid/src/diagrams/git/layout.js   |   4 +-
 packages/mermaid/src/diagrams/pie/pieDb.js    |   2 +-
 .../mermaid/src/diagrams/pie/pieRenderer.js   |   6 +-
 .../src/diagrams/requirement/requirementDb.js |  16 +--
 .../requirement/requirementRenderer.js        |   2 +-
 .../src/diagrams/sequence/sequenceDb.js       |  26 ++---
 .../src/diagrams/sequence/sequenceRenderer.ts |  12 +--
 .../mermaid/src/diagrams/sequence/svgDraw.js  |  45 ++++----
 packages/mermaid/src/diagrams/state/shapes.js |  10 +-
 .../mermaid/src/diagrams/state/stateDb.js     |  44 ++++----
 .../src/diagrams/state/stateRenderer-v2.js    |  20 ++--
 .../src/diagrams/state/stateRenderer.js       |   8 +-
 .../src/diagrams/user-journey/journeyDb.js    |   4 +-
 .../diagrams/user-journey/journeyRenderer.ts  |   5 +-
 .../src/diagrams/user-journey/svgDraw.js      |   8 +-
 packages/mermaid/src/mermaid.ts               |  14 +--
 packages/mermaid/src/mermaidAPI.spec.ts       |   6 +-
 packages/mermaid/src/mermaidAPI.ts            |  64 +++++------
 packages/mermaid/src/tests/MockedD3.ts        |   2 +-
 packages/mermaid/src/utils.ts                 |  50 +++++----
 scripts/jison/lint.mts                        |   2 +-
 60 files changed, 494 insertions(+), 539 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 1d052e22b..9d7eacecd 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -29,7 +29,8 @@
     "jsdoc",
     "json",
     "@cspell",
-    "lodash"
+    "lodash",
+    "unicorn"
   ],
   "rules": {
     "curly": "error",
@@ -63,7 +64,29 @@
       }
     ],
     "no-only-tests/no-only-tests": "error",
-    "lodash/import-scope": ["error", "method"]
+    "lodash/import-scope": ["error", "method"],
+    "unicorn/better-regex": "error",
+    "unicorn/no-abusive-eslint-disable": "error",
+    "unicorn/no-array-push-push": "error",
+    "unicorn/no-for-loop": "error",
+    "unicorn/no-instanceof-array": "error",
+    "unicorn/no-typeof-undefined": "error",
+    "unicorn/no-unnecessary-await": "error",
+    "unicorn/no-unsafe-regex": "warn",
+    "unicorn/no-useless-promise-resolve-reject": "error",
+    "unicorn/prefer-array-find": "error",
+    "unicorn/prefer-array-flat-map": "error",
+    "unicorn/prefer-array-index-of": "error",
+    "unicorn/prefer-array-some": "error",
+    "unicorn/prefer-default-parameters": "error",
+    "unicorn/prefer-includes": "error",
+    "unicorn/prefer-negative-index": "error",
+    "unicorn/prefer-object-from-entries": "error",
+    "unicorn/prefer-string-starts-ends-with": "error",
+    "unicorn/prefer-string-trim-start-end": "error",
+    "unicorn/string-content": "error",
+    "unicorn/prefer-spread": "error",
+    "unicorn/no-lonely-if": "error"
   },
   "overrides": [
     {
diff --git a/cSpell.json b/cSpell.json
index 03891165f..0a66bf8c8 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -15,6 +15,7 @@
     "bisheng",
     "brolin",
     "brotli",
+    "classdef",
     "codedoc",
     "colour",
     "cpettitt",
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index b75e682c6..325cca065 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -326,7 +326,7 @@ describe('Gantt diagram', () => {
     );
     cy.get('svg').should((svg) => {
       const el = svg.get(0);
-      const children = Array.from(el.children);
+      const children = [...el.children];
 
       const titleEl = children.find(function (node) {
         return node.tagName === 'title';
diff --git a/cypress/integration/rendering/requirement.spec.js b/cypress/integration/rendering/requirement.spec.js
index be27f39fa..8a8d188ff 100644
--- a/cypress/integration/rendering/requirement.spec.js
+++ b/cypress/integration/rendering/requirement.spec.js
@@ -96,7 +96,7 @@ describe('Requirement diagram', () => {
     );
     cy.get('svg').should((svg) => {
       const el = svg.get(0);
-      const children = Array.from(el.children);
+      const children = [...el.children];
 
       const titleEl = children.find(function (node) {
         return node.tagName === 'title';
diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js
index 1f02c578b..c06976e97 100644
--- a/cypress/platform/viewer.js
+++ b/cypress/platform/viewer.js
@@ -54,7 +54,7 @@ function merge(current, update) {
     if (
       current.hasOwnProperty(key) &&
       typeof current[key] === 'object' &&
-      !(current[key] instanceof Array)
+      !Array.isArray(current[key])
     ) {
       merge(current[key], update[key]);
 
diff --git a/docs/config/setup/modules/config.md b/docs/config/setup/modules/config.md
index 993a7627b..8381dc8c7 100644
--- a/docs/config/setup/modules/config.md
+++ b/docs/config/setup/modules/config.md
@@ -36,7 +36,7 @@ Pushes in a directive to the configuration
 
 #### Defined in
 
-[config.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L193)
+[config.ts:191](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L191)
 
 ---
 
@@ -60,7 +60,7 @@ The currentConfig
 
 #### Defined in
 
-[config.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L138)
+[config.ts:137](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L137)
 
 ---
 
@@ -84,7 +84,7 @@ The siteConfig
 
 #### Defined in
 
-[config.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L97)
+[config.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L96)
 
 ---
 
@@ -118,7 +118,7 @@ The siteConfig
 
 #### Defined in
 
-[config.ts:225](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L225)
+[config.ts:223](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L223)
 
 ---
 
@@ -147,7 +147,7 @@ options in-place
 
 #### Defined in
 
-[config.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L153)
+[config.ts:152](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L152)
 
 ---
 
@@ -167,7 +167,7 @@ options in-place
 
 #### Defined in
 
-[config.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L76)
+[config.ts:75](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L75)
 
 ---
 
@@ -199,7 +199,7 @@ The currentConfig merged with the sanitized conf
 
 #### Defined in
 
-[config.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L114)
+[config.ts:113](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L113)
 
 ---
 
@@ -232,7 +232,7 @@ The new siteConfig
 
 #### Defined in
 
-[config.ts:62](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L62)
+[config.ts:61](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L61)
 
 ---
 
@@ -273,4 +273,4 @@ The new siteConfig
 
 #### Defined in
 
-[config.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L80)
+[config.ts:79](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L79)
diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 0acfe4f97..d24369c3c 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -80,7 +80,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:949](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L949)
+[mermaidAPI.ts:939](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L939)
 
 ## Functions
 
@@ -111,7 +111,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:292](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L292)
+[mermaidAPI.ts:284](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L284)
 
 ---
 
@@ -137,7 +137,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:243](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L243)
+[mermaidAPI.ts:235](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L235)
 
 ---
 
@@ -163,7 +163,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:170](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L170)
+[mermaidAPI.ts:164](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L164)
 
 ---
 
@@ -186,7 +186,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:220](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L220)
+[mermaidAPI.ts:212](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L212)
 
 ---
 
@@ -213,7 +213,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L154)
+[mermaidAPI.ts:148](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L148)
 
 ---
 
@@ -279,7 +279,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:271](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L271)
+[mermaidAPI.ts:263](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L263)
 
 ---
 
@@ -305,4 +305,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:343](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L343)
+[mermaidAPI.ts:335](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L335)
diff --git a/packages/mermaid-mindmap/src/mermaidUtils.ts b/packages/mermaid-mindmap/src/mermaidUtils.ts
index 7d8ac38bf..b575c201b 100644
--- a/packages/mermaid-mindmap/src/mermaidUtils.ts
+++ b/packages/mermaid-mindmap/src/mermaidUtils.ts
@@ -1,6 +1,7 @@
 const warning = (s: string) => {
   // Todo remove debug code
-  console.error('Log function was called before initialization', s); // eslint-disable-line
+  // eslint-disable-next-line no-console
+  console.error('Log function was called before initialization', s);
 };
 
 export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
diff --git a/packages/mermaid/src/accessibility.js b/packages/mermaid/src/accessibility.js
index c59ba270c..4d4837fff 100644
--- a/packages/mermaid/src/accessibility.js
+++ b/packages/mermaid/src/accessibility.js
@@ -11,7 +11,7 @@
  * @param id
  */
 export default function addSVGAccessibilityFields(yy_parser, svg, id) {
-  if (typeof svg.insert === 'undefined') {
+  if (svg.insert === undefined) {
     return;
   }
 
diff --git a/packages/mermaid/src/assignWithDepth.js b/packages/mermaid/src/assignWithDepth.js
index eff568d3e..898481c30 100644
--- a/packages/mermaid/src/assignWithDepth.js
+++ b/packages/mermaid/src/assignWithDepth.js
@@ -32,20 +32,20 @@ const assignWithDepth = function (dst, src, config) {
     return dst;
   } else if (Array.isArray(src) && Array.isArray(dst)) {
     src.forEach((s) => {
-      if (dst.indexOf(s) === -1) {
+      if (!dst.includes(s)) {
         dst.push(s);
       }
     });
     return dst;
   }
-  if (typeof dst === 'undefined' || depth <= 0) {
+  if (dst === undefined || depth <= 0) {
     if (dst !== undefined && dst !== null && typeof dst === 'object' && typeof src === 'object') {
       return Object.assign(dst, src);
     } else {
       return src;
     }
   }
-  if (typeof src !== 'undefined' && typeof dst === 'object' && typeof src === 'object') {
+  if (src !== undefined && typeof dst === 'object' && typeof src === 'object') {
     Object.keys(src).forEach((key) => {
       if (
         typeof src[key] === 'object' &&
diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts
index 3ff946af2..8750c8fa5 100644
--- a/packages/mermaid/src/config.ts
+++ b/packages/mermaid/src/config.ts
@@ -18,8 +18,7 @@ export const updateCurrentConfig = (siteCfg: MermaidConfig, _directives: any[])
 
   // Join directives
   let sumOfDirectives: MermaidConfig = {};
-  for (let i = 0; i < _directives.length; i++) {
-    const d = _directives[i];
+  for (const d of _directives) {
     sanitize(d);
 
     // Apply the data from the directive where the the overrides the themeVariables
@@ -153,7 +152,7 @@ export const getConfig = (): MermaidConfig => {
 export const sanitize = (options: any) => {
   // Checking that options are not in the list of excluded options
   ['secure', ...(siteConfig.secure ?? [])].forEach((key) => {
-    if (typeof options[key] !== 'undefined') {
+    if (options[key] !== undefined) {
       // DO NOT attempt to print options[key] within `${}` as a malicious script
       // can exploit the logger's attempt to stringify the value and execute arbitrary code
       log.debug(`Denied attempt to modify a secure key ${key}`, options[key]);
@@ -170,14 +169,13 @@ export const sanitize = (options: any) => {
   // Check that there no attempts of xss, there should be no tags at all in the directive
   // blocking data urls as base64 urls can contain svg's with inline script tags
   Object.keys(options).forEach((key) => {
-    if (typeof options[key] === 'string') {
-      if (
-        options[key].indexOf('<') > -1 ||
-        options[key].indexOf('>') > -1 ||
-        options[key].indexOf('url(data:') > -1
-      ) {
-        delete options[key];
-      }
+    if (
+      typeof options[key] === 'string' &&
+      (options[key].includes('<') ||
+        options[key].includes('>') ||
+        options[key].includes('url(data:'))
+    ) {
+      delete options[key];
     }
     if (typeof options[key] === 'object') {
       sanitize(options[key]);
diff --git a/packages/mermaid/src/dagre-wrapper/createLabel.js b/packages/mermaid/src/dagre-wrapper/createLabel.js
index 9d7951798..af5032096 100644
--- a/packages/mermaid/src/dagre-wrapper/createLabel.js
+++ b/packages/mermaid/src/dagre-wrapper/createLabel.js
@@ -54,7 +54,7 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
     const node = {
       isNode,
       label: decodeEntities(vertexText).replace(
-        /fa[lrsb]?:fa-[\w-]+/g,
+        /fa[blrs]?:fa-[\w-]+/g,
         (s) => `<i class='${s.replace(':', ' ')}'></i>`
       ),
       labelStyle: style.replace('fill:', 'color:'),
@@ -74,7 +74,7 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
       rows = [];
     }
 
-    for (let j = 0; j < rows.length; j++) {
+    for (const row of rows) {
       const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
       tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
       tspan.setAttribute('dy', '1em');
@@ -84,7 +84,7 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
       } else {
         tspan.setAttribute('class', 'row');
       }
-      tspan.textContent = rows[j].trim();
+      tspan.textContent = row.trim();
       svgLabel.appendChild(tspan);
     }
     return svgLabel;
diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
index 4d23ca3ea..5213d0684 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -324,7 +324,7 @@ const cutPathAtIntersect = (_points, boundryNode) => {
         pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y);
       });
       // // if (!pointPresent) {
-      if (!points.find((e) => e.x === inter.x && e.y === inter.y)) {
+      if (!points.some((e) => e.x === inter.x && e.y === inter.y)) {
         points.push(inter);
       } else {
         log.warn('abc88 no intersect', inter, points);
diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index 8b77c8520..e2d7d51f4 100644
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -37,7 +37,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
   // to the abstract node and is later used by dagre for the layout
   graph.nodes().forEach(function (v) {
     const node = graph.node(v);
-    if (typeof parentCluster !== 'undefined') {
+    if (parentCluster !== undefined) {
       const data = JSON.parse(JSON.stringify(parentCluster.clusterData));
       // data.clusterPositioning = true;
       log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster);
diff --git a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
index 15fadc940..5722f7cc0 100644
--- a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
+++ b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js
@@ -4,27 +4,20 @@ import * as graphlibJson from 'dagre-d3-es/src/graphlib/json';
 import * as graphlib from 'dagre-d3-es/src/graphlib';
 
 export let clusterDb = {};
-let decendants = {};
+let descendants = {};
 let parents = {};
 
 export const clear = () => {
-  decendants = {};
+  descendants = {};
   parents = {};
   clusterDb = {};
 };
 
-const isDecendant = (id, ancenstorId) => {
+const isDescendant = (id, ancenstorId) => {
   // if (id === ancenstorId) return true;
 
-  log.trace(
-    'In isDecendant',
-    ancenstorId,
-    ' ',
-    id,
-    ' = ',
-    decendants[ancenstorId].indexOf(id) >= 0
-  );
-  if (decendants[ancenstorId].indexOf(id) >= 0) {
+  log.trace('In isDecendant', ancenstorId, ' ', id, ' = ', descendants[ancenstorId].includes(id));
+  if (descendants[ancenstorId].includes(id)) {
     return true;
   }
 
@@ -32,7 +25,7 @@ const isDecendant = (id, ancenstorId) => {
 };
 
 const edgeInCluster = (edge, clusterId) => {
-  log.info('Decendants of ', clusterId, ' is ', decendants[clusterId]);
+  log.info('Decendants of ', clusterId, ' is ', descendants[clusterId]);
   log.info('Edge is ', edge);
   // Edges to/from the cluster is not in the cluster, they are in the parent
   if (edge.v === clusterId) {
@@ -42,15 +35,15 @@ const edgeInCluster = (edge, clusterId) => {
     return false;
   }
 
-  if (!decendants[clusterId]) {
+  if (!descendants[clusterId]) {
     log.debug('Tilt, ', clusterId, ',not in decendants');
     return false;
   }
   return (
-    decendants[clusterId].indexOf(edge.v) >= 0 ||
-    isDecendant(edge.v, clusterId) ||
-    isDecendant(edge.w, clusterId) ||
-    decendants[clusterId].indexOf(edge.w) >= 0
+    descendants[clusterId].includes(edge.v) ||
+    isDescendant(edge.v, clusterId) ||
+    isDescendant(edge.w, clusterId) ||
+    descendants[clusterId].includes(edge.w)
   );
 };
 
@@ -132,14 +125,14 @@ const copy = (clusterId, graph, newGraph, rootId) => {
     graph.removeNode(node);
   });
 };
-export const extractDecendants = (id, graph) => {
+export const extractDescendants = (id, graph) => {
   // log.debug('Extracting ', id);
   const children = graph.children(id);
-  let res = [].concat(children);
+  let res = [...children];
 
-  for (let i = 0; i < children.length; i++) {
-    parents[children[i]] = id;
-    res = res.concat(extractDecendants(children[i], graph));
+  for (const child of children) {
+    parents[child] = id;
+    res = [...res, ...extractDescendants(child, graph)];
   }
 
   return res;
@@ -154,13 +147,13 @@ export const extractDecendants = (id, graph) => {
 export const validate = (graph) => {
   const edges = graph.edges();
   log.trace('Edges: ', edges);
-  for (let i = 0; i < edges.length; i++) {
-    if (graph.children(edges[i].v).length > 0) {
-      log.trace('The node ', edges[i].v, ' is part of and edge even though it has children');
+  for (const edge of edges) {
+    if (graph.children(edge.v).length > 0) {
+      log.trace('The node ', edge.v, ' is part of and edge even though it has children');
       return false;
     }
-    if (graph.children(edges[i].w).length > 0) {
-      log.trace('The node ', edges[i].w, ' is part of and edge even though it has children');
+    if (graph.children(edge.w).length > 0) {
+      log.trace('The node ', edge.w, ' is part of and edge even though it has children');
       return false;
     }
   }
@@ -183,8 +176,8 @@ export const findNonClusterChild = (id, graph) => {
     log.trace('This is a valid node', id);
     return id;
   }
-  for (let i = 0; i < children.length; i++) {
-    const _id = findNonClusterChild(children[i], graph);
+  for (const child of children) {
+    const _id = findNonClusterChild(child, graph);
     if (_id) {
       log.trace('Found replacement for', id, ' => ', _id);
       return _id;
@@ -226,7 +219,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
         ' Replacement id in edges: ',
         findNonClusterChild(id, graph)
       );
-      decendants[id] = extractDecendants(id, graph);
+      descendants[id] = extractDescendants(id, graph);
       clusterDb[id] = { id: findNonClusterChild(id, graph), clusterData: graph.node(id) };
     }
   });
@@ -236,7 +229,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
     const children = graph.children(id);
     const edges = graph.edges();
     if (children.length > 0) {
-      log.debug('Cluster identified', id, decendants);
+      log.debug('Cluster identified', id, descendants);
       edges.forEach((edge) => {
         // log.debug('Edge, decendants: ', edge, decendants[id]);
 
@@ -245,19 +238,19 @@ export const adjustClustersAndEdges = (graph, depth) => {
           // 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) {
 
-          const d1 = isDecendant(edge.v, id);
-          const d2 = isDecendant(edge.w, id);
+          const d1 = isDescendant(edge.v, id);
+          const d2 = isDescendant(edge.w, id);
 
           // d1 xor d2 - if either d1 is true and d2 is false or the other way around
           if (d1 ^ d2) {
             log.warn('Edge: ', edge, ' leaves cluster ', id);
-            log.warn('Decendants of XXX ', id, ': ', decendants[id]);
+            log.warn('Decendants of XXX ', id, ': ', descendants[id]);
             clusterDb[id].externalConnections = true;
           }
         }
       });
     } else {
-      log.debug('Not a cluster ', id, decendants);
+      log.debug('Not a cluster ', id, descendants);
     }
   });
 
@@ -277,7 +270,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
       'ids:',
       e.v,
       e.w,
-      'Translateing: ',
+      'Translating: ',
       clusterDb[e.v],
       ' --- ',
       clusterDb[e.w]
@@ -347,8 +340,7 @@ export const extractor = (graph, depth) => {
   // for (let i = 0;)
   let nodes = graph.nodes();
   let hasChildren = false;
-  for (let i = 0; i < nodes.length; i++) {
-    const node = nodes[i];
+  for (const node of nodes) {
     const children = graph.children(node);
     hasChildren = hasChildren || children.length > 0;
   }
@@ -360,9 +352,7 @@ export const extractor = (graph, depth) => {
   // const clusters = Object.keys(clusterDb);
   // clusters.forEach(clusterId => {
   log.debug('Nodes = ', nodes, depth);
-  for (let i = 0; i < nodes.length; i++) {
-    const node = nodes[i];
-
+  for (const node of nodes) {
     log.debug(
       'Extracting node',
       node,
@@ -394,11 +384,9 @@ export const extractor = (graph, depth) => {
 
       const graphSettings = graph.graph();
       let dir = graphSettings.rankdir === 'TB' ? 'LR' : 'TB';
-      if (clusterDb[node]) {
-        if (clusterDb[node].clusterData && clusterDb[node].clusterData.dir) {
-          dir = clusterDb[node].clusterData.dir;
-          log.warn('Fixing dir', clusterDb[node].clusterData.dir, dir);
-        }
+      if (clusterDb[node] && clusterDb[node].clusterData && clusterDb[node].clusterData.dir) {
+        dir = clusterDb[node].clusterData.dir;
+        log.warn('Fixing dir', clusterDb[node].clusterData.dir, dir);
       }
 
       const clusterGraph = new graphlib.Graph({
@@ -446,8 +434,7 @@ export const extractor = (graph, depth) => {
 
   nodes = graph.nodes();
   log.warn('New list of nodes', nodes);
-  for (let i = 0; i < nodes.length; i++) {
-    const node = nodes[i];
+  for (const node of nodes) {
     const data = graph.node(node);
     log.warn(' Now next level', node, data);
     if (data.clusterNode) {
@@ -464,7 +451,7 @@ const sorter = (graph, nodes) => {
   nodes.forEach((node) => {
     const children = graph.children(node);
     const sorted = sorter(graph, children);
-    result = result.concat(sorted);
+    result = [...result, ...sorted];
   });
 
   return result;
diff --git a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js
index 49b022f4d..f594e3430 100644
--- a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js
+++ b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js
@@ -3,7 +3,7 @@ import * as graphlib from 'dagre-d3-es/src/graphlib';
 import {
   validate,
   adjustClustersAndEdges,
-  extractDecendants,
+  extractDescendants,
   sortNodesByHierarchy,
 } from './mermaid-graphlib';
 import { setLogLevel, log } from '../logger';
@@ -400,7 +400,7 @@ flowchart TB
     expect(aGraph.parent('B')).toBe(undefined);
   });
 });
-describe('extractDecendants', function () {
+describe('extractDescendants', function () {
   let g;
   beforeEach(function () {
     setLogLevel(1);
@@ -443,9 +443,9 @@ describe('extractDecendants', function () {
     g.setEdge('A', 'C', { data: 'link2' }, '2');
 
     // log.info(g.edges())
-    const d1 = extractDecendants('A', g);
-    const d2 = extractDecendants('B', g);
-    const d3 = extractDecendants('C', g);
+    const d1 = extractDescendants('A', g);
+    const d2 = extractDescendants('B', g);
+    const d3 = extractDescendants('C', g);
 
     expect(d1).toEqual(['a']);
     expect(d2).toEqual(['b']);
diff --git a/packages/mermaid/src/dagre-wrapper/nodes.js b/packages/mermaid/src/dagre-wrapper/nodes.js
index 316432b95..fda789323 100644
--- a/packages/mermaid/src/dagre-wrapper/nodes.js
+++ b/packages/mermaid/src/dagre-wrapper/nodes.js
@@ -391,12 +391,10 @@ const labelRect = (parent, node) => {
 function applyNodePropertyBorders(rect, borders, totalWidth, totalHeight) {
   const strokeDashArray = [];
   const addBorder = (length) => {
-    strokeDashArray.push(length);
-    strokeDashArray.push(0);
+    strokeDashArray.push(length, 0);
   };
   const skipBorder = (length) => {
-    strokeDashArray.push(0);
-    strokeDashArray.push(length);
+    strokeDashArray.push(0, length);
   };
   if (borders.includes('t')) {
     log.debug('add top border');
diff --git a/packages/mermaid/src/dagre-wrapper/shapes/util.js b/packages/mermaid/src/dagre-wrapper/shapes/util.js
index dfd1a93ba..6de0da638 100644
--- a/packages/mermaid/src/dagre-wrapper/shapes/util.js
+++ b/packages/mermaid/src/dagre-wrapper/shapes/util.js
@@ -21,7 +21,7 @@ export const labelHelper = (parent, node, _classes, isNode) => {
 
   // Replace labelText with default value if undefined
   let labelText;
-  if (typeof node.labelText === 'undefined') {
+  if (node.labelText === undefined) {
     labelText = '';
   } else {
     labelText = typeof node.labelText === 'string' ? node.labelText : node.labelText[0];
diff --git a/packages/mermaid/src/diagram-api/detectType.ts b/packages/mermaid/src/diagram-api/detectType.ts
index 6f9857221..2ff0b5532 100644
--- a/packages/mermaid/src/diagram-api/detectType.ts
+++ b/packages/mermaid/src/diagram-api/detectType.ts
@@ -3,8 +3,7 @@ import { log } from '../logger';
 import { DetectorRecord, DiagramDetector, DiagramLoader } from './types';
 import { frontMatterRegex } from './frontmatter';
 
-const directive =
-  /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
+const directive = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
 const anyComment = /\s*%%.*\n/gm;
 
 const detectors: Record<string, DetectorRecord> = {};
diff --git a/packages/mermaid/src/diagram-api/frontmatter.ts b/packages/mermaid/src/diagram-api/frontmatter.ts
index 800e7399b..d6811388c 100644
--- a/packages/mermaid/src/diagram-api/frontmatter.ts
+++ b/packages/mermaid/src/diagram-api/frontmatter.ts
@@ -7,7 +7,7 @@ import * as yaml from 'js-yaml';
 // Note that JS doesn't support the "\A" anchor, which means we can't use
 // multiline mode.
 // Relevant YAML spec: https://yaml.org/spec/1.2.2/#914-explicit-documents
-export const frontMatterRegex = /^(?:---\s*[\r\n])(.*?)(?:[\r\n]---\s*[\r\n]+)/s;
+export const frontMatterRegex = /^-{3}\s*[\n\r](.*?)[\n\r]-{3}\s*[\n\r]+/s;
 
 type FrontMatterMetadata = {
   title?: string;
diff --git a/packages/mermaid/src/diagrams/c4/c4Renderer.js b/packages/mermaid/src/diagrams/c4/c4Renderer.js
index a9072346a..6490a8e19 100644
--- a/packages/mermaid/src/diagrams/c4/c4Renderer.js
+++ b/packages/mermaid/src/diagrams/c4/c4Renderer.js
@@ -48,7 +48,7 @@ class Bounds {
   }
 
   updateVal(obj, key, val, fun) {
-    if (typeof obj[key] === 'undefined') {
+    if (obj[key] === undefined) {
       obj[key] = val;
     } else {
       obj[key] = fun(val, obj[key]);
@@ -177,12 +177,12 @@ function calcC4ShapeTextWH(textType, c4Shape, c4ShapeTextWrap, textConf, textLim
       let lineHeight = 0;
       c4Shape[textType].height = 0;
       c4Shape[textType].width = 0;
-      for (let i = 0; i < lines.length; i++) {
+      for (const line of lines) {
         c4Shape[textType].width = Math.max(
-          calculateTextWidth(lines[i], textConf),
+          calculateTextWidth(line, textConf),
           c4Shape[textType].width
         );
-        lineHeight = calculateTextHeight(lines[i], textConf);
+        lineHeight = calculateTextHeight(line, textConf);
         c4Shape[textType].height = c4Shape[textType].height + lineHeight;
       }
       // c4Shapes[textType].height = c4Shapes[textType].textLines * textConf.fontSize;
@@ -212,9 +212,9 @@ export const drawC4ShapeArray = function (currentBounds, diagram, c4ShapeArray,
   // Upper Y is relative point
   let Y = 0;
   // Draw the c4ShapeArray
-  for (let i = 0; i < c4ShapeKeys.length; i++) {
+  for (const c4ShapeKey of c4ShapeKeys) {
     Y = 0;
-    const c4Shape = c4ShapeArray[c4ShapeKeys[i]];
+    const c4Shape = c4ShapeArray[c4ShapeKey];
 
     // calc c4 shape type width and height
 
@@ -461,8 +461,7 @@ function drawInsideBoundary(
   //   conf.width * conf.c4ShapeInRow + conf.c4ShapeMargin * conf.c4ShapeInRow * 2,
   //   parentBounds.data.widthLimit / Math.min(conf.c4BoundaryInRow, currentBoundaries.length)
   // );
-  for (let i = 0; i < currentBoundaries.length; i++) {
-    let currentBoundary = currentBoundaries[i];
+  for (let [i, currentBoundary] of currentBoundaries.entries()) {
     let Y = 0;
     currentBoundary.image = { width: 0, height: 0, Y: 0 };
     if (currentBoundary.sprite) {
diff --git a/packages/mermaid/src/diagrams/c4/svgDraw.js b/packages/mermaid/src/diagrams/c4/svgDraw.js
index 437a24bcb..d9727f074 100644
--- a/packages/mermaid/src/diagrams/c4/svgDraw.js
+++ b/packages/mermaid/src/diagrams/c4/svgDraw.js
@@ -52,8 +52,8 @@ export const drawText = function (elem, textData) {
   let dy = 0;
   let yfunc = () => textData.y;
   if (
-    typeof textData.valign !== 'undefined' &&
-    typeof textData.textMargin !== 'undefined' &&
+    textData.valign !== undefined &&
+    textData.textMargin !== undefined &&
     textData.textMargin > 0
   ) {
     switch (textData.valign) {
@@ -78,9 +78,9 @@ export const drawText = function (elem, textData) {
     }
   }
   if (
-    typeof textData.anchor !== 'undefined' &&
-    typeof textData.textMargin !== 'undefined' &&
-    typeof textData.width !== 'undefined'
+    textData.anchor !== undefined &&
+    textData.textMargin !== undefined &&
+    textData.width !== undefined
   ) {
     switch (textData.anchor) {
       case 'left':
@@ -106,12 +106,11 @@ export const drawText = function (elem, textData) {
         break;
     }
   }
-  for (let i = 0; i < lines.length; i++) {
-    let line = lines[i];
+  for (let [i, line] of lines.entries()) {
     if (
-      typeof textData.textMargin !== 'undefined' &&
+      textData.textMargin !== undefined &&
       textData.textMargin === 0 &&
-      typeof textData.fontSize !== 'undefined'
+      textData.fontSize !== undefined
     ) {
       dy = i * textData.fontSize;
     }
@@ -119,28 +118,28 @@ export const drawText = function (elem, textData) {
     const textElem = elem.append('text');
     textElem.attr('x', textData.x);
     textElem.attr('y', yfunc());
-    if (typeof textData.anchor !== 'undefined') {
+    if (textData.anchor !== undefined) {
       textElem
         .attr('text-anchor', textData.anchor)
         .attr('dominant-baseline', textData.dominantBaseline)
         .attr('alignment-baseline', textData.alignmentBaseline);
     }
-    if (typeof textData.fontFamily !== 'undefined') {
+    if (textData.fontFamily !== undefined) {
       textElem.style('font-family', textData.fontFamily);
     }
-    if (typeof textData.fontSize !== 'undefined') {
+    if (textData.fontSize !== undefined) {
       textElem.style('font-size', textData.fontSize);
     }
-    if (typeof textData.fontWeight !== 'undefined') {
+    if (textData.fontWeight !== undefined) {
       textElem.style('font-weight', textData.fontWeight);
     }
-    if (typeof textData.fill !== 'undefined') {
+    if (textData.fill !== undefined) {
       textElem.attr('fill', textData.fill);
     }
-    if (typeof textData.class !== 'undefined') {
+    if (textData.class !== undefined) {
       textElem.attr('class', textData.class);
     }
-    if (typeof textData.dy !== 'undefined') {
+    if (textData.dy !== undefined) {
       textElem.attr('dy', textData.dy);
     } else if (dy !== 0) {
       textElem.attr('dy', dy);
@@ -149,7 +148,7 @@ export const drawText = function (elem, textData) {
     if (textData.tspan) {
       const span = textElem.append('tspan');
       span.attr('x', textData.x);
-      if (typeof textData.fill !== 'undefined') {
+      if (textData.fill !== undefined) {
         span.attr('fill', textData.fill);
       }
       span.text(line);
@@ -157,8 +156,8 @@ export const drawText = function (elem, textData) {
       textElem.text(line);
     }
     if (
-      typeof textData.valign !== 'undefined' &&
-      typeof textData.textMargin !== 'undefined' &&
+      textData.valign !== undefined &&
+      textData.textMargin !== undefined &&
       textData.textMargin > 0
     ) {
       textHeight += (textElem._groups || textElem)[0][0].getBBox().height;
diff --git a/packages/mermaid/src/diagrams/class/classDb.js b/packages/mermaid/src/diagrams/class/classDb.js
index 9830c059e..2c6690e39 100644
--- a/packages/mermaid/src/diagrams/class/classDb.js
+++ b/packages/mermaid/src/diagrams/class/classDb.js
@@ -52,7 +52,7 @@ const splitClassNameAndType = function (id) {
 export const addClass = function (id) {
   let classId = splitClassNameAndType(id);
   // Only add class if not exists
-  if (typeof classes[classId.className] !== 'undefined') {
+  if (classes[classId.className] !== undefined) {
     return;
   }
 
@@ -77,9 +77,9 @@ export const addClass = function (id) {
  */
 export const lookUpDomId = function (id) {
   const classKeys = Object.keys(classes);
-  for (let i = 0; i < classKeys.length; i++) {
-    if (classes[classKeys[i]].id === id) {
-      return classes[classKeys[i]].domId;
+  for (const classKey of classKeys) {
+    if (classes[classKey].id === id) {
+      return classes[classKey].domId;
     }
   }
 };
@@ -207,7 +207,7 @@ export const setCssClass = function (ids, className) {
     if (_id[0].match(/\d/)) {
       id = MERMAID_DOM_ID_PREFIX + id;
     }
-    if (typeof classes[id] !== 'undefined') {
+    if (classes[id] !== undefined) {
       classes[id].cssClasses.push(className);
     }
   });
@@ -222,7 +222,7 @@ export const setCssClass = function (ids, className) {
 const setTooltip = function (ids, tooltip) {
   const config = configApi.getConfig();
   ids.split(',').forEach(function (id) {
-    if (typeof tooltip !== 'undefined') {
+    if (tooltip !== undefined) {
       classes[id].tooltip = common.sanitizeText(tooltip, config);
     }
   });
@@ -244,7 +244,7 @@ export const setLink = function (ids, linkStr, target) {
     if (_id[0].match(/\d/)) {
       id = MERMAID_DOM_ID_PREFIX + id;
     }
-    if (typeof classes[id] !== 'undefined') {
+    if (classes[id] !== undefined) {
       classes[id].link = utils.formatUrl(linkStr, config);
       if (config.securityLevel === 'sandbox') {
         classes[id].linkTarget = '_top';
@@ -281,10 +281,10 @@ const setClickFunc = function (domId, functionName, functionArgs) {
   if (config.securityLevel !== 'loose') {
     return;
   }
-  if (typeof functionName === 'undefined') {
+  if (functionName === undefined) {
     return;
   }
-  if (typeof classes[id] !== 'undefined') {
+  if (classes[id] !== undefined) {
     let argList = [];
     if (typeof functionArgs === 'string') {
       /* Splits functionArgs by ',', ignoring all ',' in double quoted strings */
diff --git a/packages/mermaid/src/diagrams/class/classRenderer-v2.js b/packages/mermaid/src/diagrams/class/classRenderer-v2.js
index 905e6ee2f..c4e7e0291 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/class/classRenderer-v2.js
@@ -10,8 +10,6 @@ import { setupGraphViewbox } from '../../setupGraphViewbox';
 import common from '../common/common';
 import addSVGAccessibilityFields from '../../accessibility';
 
-let idCache = {};
-
 const sanitizeText = (txt) => common.sanitizeText(txt, getConfig());
 
 let conf = {
@@ -275,16 +273,16 @@ export const addRelations = function (relations, g) {
     let style = '';
     let labelStyle = '';
 
-    if (typeof edge.style !== 'undefined') {
+    if (edge.style !== undefined) {
       const styles = getStylesFromArray(edge.style);
       style = styles.style;
       labelStyle = styles.labelStyle;
     } else {
       style = 'fill:none';
-      if (typeof defaultStyle !== 'undefined') {
+      if (defaultStyle !== undefined) {
         style = defaultStyle;
       }
-      if (typeof defaultLabelStyle !== 'undefined') {
+      if (defaultLabelStyle !== undefined) {
         labelStyle = defaultLabelStyle;
       }
     }
@@ -292,17 +290,17 @@ export const addRelations = function (relations, g) {
     edgeData.style = style;
     edgeData.labelStyle = labelStyle;
 
-    if (typeof edge.interpolate !== 'undefined') {
+    if (edge.interpolate !== undefined) {
       edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
-    } else if (typeof relations.defaultInterpolate !== 'undefined') {
+    } else if (relations.defaultInterpolate !== undefined) {
       edgeData.curve = interpolateToCurve(relations.defaultInterpolate, curveLinear);
     } else {
       edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
     }
 
     edge.text = edge.title;
-    if (typeof edge.text === 'undefined') {
-      if (typeof edge.style !== 'undefined') {
+    if (edge.text === undefined) {
+      if (edge.style !== undefined) {
         edgeData.arrowheadStyle = 'fill: #333';
       }
     } else {
@@ -316,7 +314,7 @@ export const addRelations = function (relations, g) {
         edgeData.labelType = 'text';
         edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
 
-        if (typeof edge.style === 'undefined') {
+        if (edge.style === undefined) {
           edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
         }
 
@@ -438,9 +436,7 @@ export const draw = function (text, id, _version, diagObj) {
   if (!conf.htmlLabels) {
     const doc = securityLevel === 'sandbox' ? sandboxElement.nodes()[0].contentDocument : document;
     const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
-    for (let k = 0; k < labels.length; k++) {
-      const label = labels[k];
-
+    for (const label of labels) {
       // Get dimensions of label
       const dim = label.getBBox();
 
diff --git a/packages/mermaid/src/diagrams/class/classRenderer.js b/packages/mermaid/src/diagrams/class/classRenderer.js
index 74e2a48c2..c500a73a7 100644
--- a/packages/mermaid/src/diagrams/class/classRenderer.js
+++ b/packages/mermaid/src/diagrams/class/classRenderer.js
@@ -180,8 +180,8 @@ export const draw = function (text, id, _version, diagObj) {
   const classes = diagObj.db.getClasses();
   const keys = Object.keys(classes);
 
-  for (let i = 0; i < keys.length; i++) {
-    const classDef = classes[keys[i]];
+  for (const key of keys) {
+    const classDef = classes[key];
     const node = svgDraw.drawClass(diagram, classDef, conf, diagObj);
     idCache[node.id] = node;
 
@@ -240,7 +240,7 @@ export const draw = function (text, id, _version, diagObj) {
 
   dagreLayout(g);
   g.nodes().forEach(function (v) {
-    if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {
+    if (v !== undefined && g.node(v) !== undefined) {
       log.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));
       root
         .select('#' + (diagObj.db.lookUpDomId(v) || v))
@@ -256,7 +256,7 @@ export const draw = function (text, id, _version, diagObj) {
   });
 
   g.edges().forEach(function (e) {
-    if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') {
+    if (e !== undefined && g.edge(e) !== undefined) {
       log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));
       svgDraw.drawEdge(diagram, g.edge(e), g.edge(e).relation, conf, diagObj);
     }
diff --git a/packages/mermaid/src/diagrams/class/svgDraw.js b/packages/mermaid/src/diagrams/class/svgDraw.js
index 35f793460..cc6909280 100644
--- a/packages/mermaid/src/diagrams/class/svgDraw.js
+++ b/packages/mermaid/src/diagrams/class/svgDraw.js
@@ -102,7 +102,7 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) {
     p2_card_y = cardinality_2_point.y;
   }
 
-  if (typeof relation.title !== 'undefined') {
+  if (relation.title !== undefined) {
     const g = elem.append('g').attr('class', 'classLabel');
     const label = g
       .append('text')
@@ -125,7 +125,7 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) {
   }
 
   log.info('Rendering relation ' + JSON.stringify(relation));
-  if (typeof relation.relationTitle1 !== 'undefined' && relation.relationTitle1 !== 'none') {
+  if (relation.relationTitle1 !== undefined && relation.relationTitle1 !== 'none') {
     const g = elem.append('g').attr('class', 'cardinality');
     g.append('text')
       .attr('class', 'type1')
@@ -135,7 +135,7 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) {
       .attr('font-size', '6')
       .text(relation.relationTitle1);
   }
-  if (typeof relation.relationTitle2 !== 'undefined' && relation.relationTitle2 !== 'none') {
+  if (relation.relationTitle2 !== undefined && relation.relationTitle2 !== 'none') {
     const g = elem.append('g').attr('class', 'cardinality');
     g.append('text')
       .attr('class', 'type2')
@@ -355,8 +355,8 @@ export const drawNote = function (elem, note, conf, diagObj) {
 };
 
 export const parseMember = function (text) {
-  const fieldRegEx = /^(\+|-|~|#)?(\w+)(~\w+~|\[\])?\s+(\w+) *(\*|\$)?$/;
-  const methodRegEx = /^([+|\-|~|#])?(\w+) *\( *(.*)\) *(\*|\$)? *(\w*[~|[\]]*\s*\w*~?)$/;
+  const fieldRegEx = /^([#+~-])?(\w+)(~\w+~|\[])?\s+(\w+) *([$*])?$/;
+  const methodRegEx = /^([#+|~-])?(\w+) *\( *(.*)\) *([$*])? *(\w*[[\]|~]*\s*\w*~?)$/;
 
   let fieldMatch = text.match(fieldRegEx);
   let methodMatch = text.match(methodRegEx);
@@ -420,7 +420,6 @@ const buildLegacyDisplay = function (text) {
   // if for some reason we don't have any match, use old format to parse text
   let displayText = '';
   let cssStyle = '';
-  let memberText = '';
   let returnType = '';
   let methodStart = text.indexOf('(');
   let methodEnd = text.indexOf(')');
@@ -433,7 +432,7 @@ const buildLegacyDisplay = function (text) {
     if (firstChar.match(/\w/)) {
       methodName = text.substring(0, methodStart).trim();
     } else {
-      if (firstChar.match(/\+|-|~|#/)) {
+      if (firstChar.match(/[#+~-]/)) {
         visibility = firstChar;
       }
 
diff --git a/packages/mermaid/src/diagrams/common/common.ts b/packages/mermaid/src/diagrams/common/common.ts
index 782915cc1..194a9a4c0 100644
--- a/packages/mermaid/src/diagrams/common/common.ts
+++ b/packages/mermaid/src/diagrams/common/common.ts
@@ -152,7 +152,7 @@ export const evaluate = (val?: string | boolean): boolean =>
 export const parseGenericTypes = function (text: string): string {
   let cleanedText = text;
 
-  if (text.indexOf('~') !== -1) {
+  if (text.includes('~')) {
     cleanedText = cleanedText.replace(/~([^~].*)/, '<$1');
     cleanedText = cleanedText.replace(/~([^~]*)$/, '>$1');
 
diff --git a/packages/mermaid/src/diagrams/er/erDb.js b/packages/mermaid/src/diagrams/er/erDb.js
index 96b60836b..026e08420 100644
--- a/packages/mermaid/src/diagrams/er/erDb.js
+++ b/packages/mermaid/src/diagrams/er/erDb.js
@@ -32,7 +32,7 @@ export const parseDirective = function (statement, context, type) {
 };
 
 const addEntity = function (name) {
-  if (typeof entities[name] === 'undefined') {
+  if (entities[name] === undefined) {
     entities[name] = { attributes: [] };
     log.info('Added new entity :', name);
   }
diff --git a/packages/mermaid/src/diagrams/er/erRenderer.js b/packages/mermaid/src/diagrams/er/erRenderer.js
index 36267f415..101beebb9 100644
--- a/packages/mermaid/src/diagrams/er/erRenderer.js
+++ b/packages/mermaid/src/diagrams/er/erRenderer.js
@@ -11,7 +11,7 @@ import { parseGenericTypes } from '../common/common';
 import { v4 as uuid4 } from 'uuid';
 
 /** Regex used to remove chars from the entity name so the result can be used in an id */
-const BAD_ID_CHARS_REGEXP = /[^A-Za-z0-9]([\W])*/g;
+const BAD_ID_CHARS_REGEXP = /[^\dA-Za-z](\W)*/g;
 
 // Configuration
 let conf = {};
@@ -28,8 +28,8 @@ let entityNameIds = new Map();
  */
 export const setConf = function (cnf) {
   const keys = Object.keys(cnf);
-  for (let i = 0; i < keys.length; i++) {
-    conf[keys[i]] = cnf[keys[i]];
+  for (const key of keys) {
+    conf[key] = cnf[key];
   }
 };
 
@@ -356,7 +356,7 @@ const drawEntities = function (svgNode, entities, graph) {
 
 const adjustEntities = function (svgNode, graph) {
   graph.nodes().forEach(function (v) {
-    if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') {
+    if (v !== undefined && graph.node(v) !== undefined) {
       svgNode
         .select('#' + v)
         .attr(
@@ -387,7 +387,7 @@ const getEdgeName = function (rel) {
  * Add each relationship to the graph
  *
  * @param relationships The relationships to be added
- * @param {Graph} g The graph
+ * @param g The graph
  * @returns {Array} The array of relationships
  */
 const addRelationships = function (relationships, g) {
@@ -652,10 +652,8 @@ export const draw = function (text, id, _version, diagObj) {
  * Although the official XML standard for ids says that many more characters are valid in the id,
  * this keeps things simple by accepting only A-Za-z0-9.
  *
- * @param {string} [str?=''] Given string to use as the basis for the id. Default is `''`
- * @param {string} [prefix?=''] String to put at the start, followed by '-'. Default is `''`
- * @param str
- * @param prefix
+ * @param {string} str Given string to use as the basis for the id. Default is `''`
+ * @param {string} prefix String to put at the start, followed by '-'. Default is `''`
  * @returns {string}
  * @see https://www.w3.org/TR/xml/#NT-Name
  */
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.js b/packages/mermaid/src/diagrams/flowchart/flowDb.js
index 38754c667..9181ab9cc 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.js
@@ -46,9 +46,9 @@ export const parseDirective = function (statement, context, type) {
  */
 export const lookUpDomId = function (id) {
   const veritceKeys = Object.keys(vertices);
-  for (let i = 0; i < veritceKeys.length; i++) {
-    if (vertices[veritceKeys[i]].id === id) {
-      return vertices[veritceKeys[i]].domId;
+  for (const veritceKey of veritceKeys) {
+    if (vertices[veritceKey].id === id) {
+      return vertices[veritceKey].domId;
     }
   }
   return id;
@@ -68,7 +68,7 @@ export const lookUpDomId = function (id) {
 export const addVertex = function (_id, text, type, style, classes, dir, props = {}) {
   let txt;
   let id = _id;
-  if (typeof id === 'undefined') {
+  if (id === undefined) {
     return;
   }
   if (id.trim().length === 0) {
@@ -77,7 +77,7 @@ export const addVertex = function (_id, text, type, style, classes, dir, props =
 
   // if (id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
 
-  if (typeof vertices[id] === 'undefined') {
+  if (vertices[id] === undefined) {
     vertices[id] = {
       id: id,
       domId: MERMAID_DOM_ID_PREFIX + id + '-' + vertexCounter,
@@ -86,7 +86,7 @@ export const addVertex = function (_id, text, type, style, classes, dir, props =
     };
   }
   vertexCounter++;
-  if (typeof text !== 'undefined') {
+  if (text !== undefined) {
     config = configApi.getConfig();
     txt = sanitizeText(text.trim());
 
@@ -97,33 +97,29 @@ export const addVertex = function (_id, text, type, style, classes, dir, props =
 
     vertices[id].text = txt;
   } else {
-    if (typeof vertices[id].text === 'undefined') {
+    if (vertices[id].text === undefined) {
       vertices[id].text = _id;
     }
   }
-  if (typeof type !== 'undefined') {
+  if (type !== undefined) {
     vertices[id].type = type;
   }
-  if (typeof style !== 'undefined') {
-    if (style !== null) {
-      style.forEach(function (s) {
-        vertices[id].styles.push(s);
-      });
-    }
+  if (style !== undefined && style !== null) {
+    style.forEach(function (s) {
+      vertices[id].styles.push(s);
+    });
   }
-  if (typeof classes !== 'undefined') {
-    if (classes !== null) {
-      classes.forEach(function (s) {
-        vertices[id].classes.push(s);
-      });
-    }
+  if (classes !== undefined && classes !== null) {
+    classes.forEach(function (s) {
+      vertices[id].classes.push(s);
+    });
   }
-  if (typeof dir !== 'undefined') {
+  if (dir !== undefined) {
     vertices[id].dir = dir;
   }
-  if (typeof vertices[id].props === 'undefined') {
+  if (vertices[id].props === undefined) {
     vertices[id].props = props;
-  } else if (typeof props !== 'undefined') {
+  } else if (props !== undefined) {
     Object.assign(vertices[id].props, props);
   }
 };
@@ -134,9 +130,9 @@ export const addVertex = function (_id, text, type, style, classes, dir, props =
  * @param _start
  * @param _end
  * @param type
- * @param linktext
+ * @param linkText
  */
-export const addSingleLink = function (_start, _end, type, linktext) {
+export const addSingleLink = function (_start, _end, type, linkText) {
   let start = _start;
   let end = _end;
   // if (start[0].match(/\d/)) start = MERMAID_DOM_ID_PREFIX + start;
@@ -144,18 +140,18 @@ export const addSingleLink = function (_start, _end, type, linktext) {
   // log.info('Got edge...', start, end);
 
   const edge = { start: start, end: end, type: undefined, text: '' };
-  linktext = type.text;
+  linkText = type.text;
 
-  if (typeof linktext !== 'undefined') {
-    edge.text = sanitizeText(linktext.trim());
+  if (linkText !== undefined) {
+    edge.text = sanitizeText(linkText.trim());
 
-    // strip quotes if string starts and exnds with a quote
+    // strip quotes if string starts and ends with a quote
     if (edge.text[0] === '"' && edge.text[edge.text.length - 1] === '"') {
       edge.text = edge.text.substring(1, edge.text.length - 1);
     }
   }
 
-  if (typeof type !== 'undefined') {
+  if (type !== undefined) {
     edge.type = type.type;
     edge.stroke = type.stroke;
     edge.length = type.length;
@@ -207,21 +203,19 @@ export const updateLink = function (positions, style) {
 };
 
 export const addClass = function (id, style) {
-  if (typeof classes[id] === 'undefined') {
+  if (classes[id] === undefined) {
     classes[id] = { id: id, styles: [], textStyles: [] };
   }
 
-  if (typeof style !== 'undefined') {
-    if (style !== null) {
-      style.forEach(function (s) {
-        if (s.match('color')) {
-          const newStyle1 = s.replace('fill', 'bgFill');
-          const newStyle2 = newStyle1.replace('color', 'fill');
-          classes[id].textStyles.push(newStyle2);
-        }
-        classes[id].styles.push(s);
-      });
-    }
+  if (style !== undefined && style !== null) {
+    style.forEach(function (s) {
+      if (s.match('color')) {
+        const newStyle1 = s.replace('fill', 'bgFill');
+        const newStyle2 = newStyle1.replace('color', 'fill');
+        classes[id].textStyles.push(newStyle2);
+      }
+      classes[id].styles.push(s);
+    });
   }
 };
 
@@ -257,11 +251,11 @@ export const setClass = function (ids, className) {
     // let id = version === 'gen-2' ? lookUpDomId(_id) : _id;
     let id = _id;
     // if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id;
-    if (typeof vertices[id] !== 'undefined') {
+    if (vertices[id] !== undefined) {
       vertices[id].classes.push(className);
     }
 
-    if (typeof subGraphLookup[id] !== 'undefined') {
+    if (subGraphLookup[id] !== undefined) {
       subGraphLookup[id].classes.push(className);
     }
   });
@@ -269,7 +263,7 @@ export const setClass = function (ids, className) {
 
 const setTooltip = function (ids, tooltip) {
   ids.split(',').forEach(function (id) {
-    if (typeof tooltip !== 'undefined') {
+    if (tooltip !== undefined) {
       tooltips[version === 'gen-1' ? lookUpDomId(id) : id] = sanitizeText(tooltip);
     }
   });
@@ -281,7 +275,7 @@ const setClickFun = function (id, functionName, functionArgs) {
   if (configApi.getConfig().securityLevel !== 'loose') {
     return;
   }
-  if (typeof functionName === 'undefined') {
+  if (functionName === undefined) {
     return;
   }
   let argList = [];
@@ -304,7 +298,7 @@ const setClickFun = function (id, functionName, functionArgs) {
     argList.push(id);
   }
 
-  if (typeof vertices[id] !== 'undefined') {
+  if (vertices[id] !== undefined) {
     vertices[id].haveCallback = true;
     funs.push(function () {
       const elem = document.querySelector(`[id="${domId}"]`);
@@ -330,7 +324,7 @@ const setClickFun = function (id, functionName, functionArgs) {
  */
 export const setLink = function (ids, linkStr, target) {
   ids.split(',').forEach(function (id) {
-    if (typeof vertices[id] !== 'undefined') {
+    if (vertices[id] !== undefined) {
       vertices[id].link = utils.formatUrl(linkStr, config);
       vertices[id].linkTarget = target;
     }
@@ -484,7 +478,7 @@ export const addSubGraph = function (_id, list, _title) {
       if (type in prims) {
         return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true);
       } else {
-        return objs.indexOf(item) >= 0 ? false : objs.push(item);
+        return objs.includes(item) ? false : objs.push(item);
       }
     });
     return { nodeList, dir };
@@ -530,8 +524,8 @@ export const addSubGraph = function (_id, list, _title) {
 };
 
 const getPosForId = function (id) {
-  for (let i = 0; i < subGraphs.length; i++) {
-    if (subGraphs[i].id === id) {
+  for (const [i, subGraph] of subGraphs.entries()) {
+    if (subGraph.id === id) {
       return i;
     }
   }
@@ -622,11 +616,11 @@ const destructStartLink = (_str) => {
 
   let stroke = 'normal';
 
-  if (str.indexOf('=') !== -1) {
+  if (str.includes('=')) {
     stroke = 'thick';
   }
 
-  if (str.indexOf('.') !== -1) {
+  if (str.includes('.')) {
     stroke = 'dotted';
   }
 
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
index fa1b692cf..be3fffa0c 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v2.js
@@ -16,8 +16,8 @@ import addSVGAccessibilityFields from '../../accessibility';
 const conf = {};
 export const setConf = function (cnf) {
   const keys = Object.keys(cnf);
-  for (let i = 0; i < keys.length; i++) {
-    conf[keys[i]] = cnf[keys[i]];
+  for (const key of keys) {
+    conf[key] = cnf[key];
   }
 };
 
@@ -60,7 +60,7 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
       // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
       const node = {
         label: vertexText.replace(
-          /fa[lrsb]?:fa-[\w-]+/g,
+          /fa[blrs]?:fa-[\w-]+/g,
           (s) => `<i class='${s.replace(':', ' ')}'></i>`
         ),
       };
@@ -72,12 +72,12 @@ export const addVertices = function (vert, g, svgId, root, doc, diagObj) {
 
       const rows = vertexText.split(common.lineBreakRegex);
 
-      for (let j = 0; j < rows.length; j++) {
+      for (const row of rows) {
         const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
         tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
         tspan.setAttribute('dy', '1em');
         tspan.setAttribute('x', '1');
-        tspan.textContent = rows[j];
+        tspan.textContent = row;
         svgLabel.appendChild(tspan);
       }
       vertexNode = svgLabel;
@@ -198,7 +198,7 @@ export const addEdges = function (edges, g, diagObj) {
   let defaultStyle;
   let defaultLabelStyle;
 
-  if (typeof edges.defaultStyle !== 'undefined') {
+  if (edges.defaultStyle !== undefined) {
     const defaultStyles = getStylesFromArray(edges.defaultStyle);
     defaultStyle = defaultStyles.style;
     defaultLabelStyle = defaultStyles.labelStyle;
@@ -210,7 +210,7 @@ export const addEdges = function (edges, g, diagObj) {
     // Identify Link
     var linkIdBase = 'L-' + edge.start + '-' + edge.end;
     // count the links from+to the same node to give unique id
-    if (typeof linkIdCnt[linkIdBase] === 'undefined') {
+    if (linkIdCnt[linkIdBase] === undefined) {
       linkIdCnt[linkIdBase] = 0;
       log.info('abc78 new entry', linkIdBase, linkIdCnt[linkIdBase]);
     } else {
@@ -262,10 +262,10 @@ export const addEdges = function (edges, g, diagObj) {
     switch (edge.stroke) {
       case 'normal':
         style = 'fill:none;';
-        if (typeof defaultStyle !== 'undefined') {
+        if (defaultStyle !== undefined) {
           style = defaultStyle;
         }
-        if (typeof defaultLabelStyle !== 'undefined') {
+        if (defaultLabelStyle !== undefined) {
           labelStyle = defaultLabelStyle;
         }
         edgeData.thickness = 'normal';
@@ -282,7 +282,7 @@ export const addEdges = function (edges, g, diagObj) {
         edgeData.style = 'stroke-width: 3.5px;fill:none;';
         break;
     }
-    if (typeof edge.style !== 'undefined') {
+    if (edge.style !== undefined) {
       const styles = getStylesFromArray(edge.style);
       style = styles.style;
       labelStyle = styles.labelStyle;
@@ -291,16 +291,16 @@ export const addEdges = function (edges, g, diagObj) {
     edgeData.style = edgeData.style += style;
     edgeData.labelStyle = edgeData.labelStyle += labelStyle;
 
-    if (typeof edge.interpolate !== 'undefined') {
+    if (edge.interpolate !== undefined) {
       edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
-    } else if (typeof edges.defaultInterpolate !== 'undefined') {
+    } else if (edges.defaultInterpolate !== undefined) {
       edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
     } else {
       edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
     }
 
-    if (typeof edge.text === 'undefined') {
-      if (typeof edge.style !== 'undefined') {
+    if (edge.text === undefined) {
+      if (edge.style !== undefined) {
         edgeData.arrowheadStyle = 'fill: #333';
       }
     } else {
@@ -311,7 +311,7 @@ export const addEdges = function (edges, g, diagObj) {
     edgeData.labelType = 'text';
     edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
 
-    if (typeof edge.style === 'undefined') {
+    if (edge.style === undefined) {
       edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';
     }
 
@@ -360,7 +360,7 @@ export const draw = function (text, id, _version, diagObj) {
 
   // Fetch the default direction, use TD if none was found
   let dir = diagObj.db.getDirection();
-  if (typeof dir === 'undefined') {
+  if (dir === undefined) {
     dir = 'TD';
   }
 
@@ -448,9 +448,7 @@ export const draw = function (text, id, _version, diagObj) {
   // Add label rects for non html labels
   if (!conf.htmlLabels) {
     const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
-    for (let k = 0; k < labels.length; k++) {
-      const label = labels[k];
-
+    for (const label of labels) {
       // Get dimensions of label
       const dim = label.getBBox();
 
diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
index 7febc4034..4b3232189 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer.js
@@ -14,8 +14,8 @@ import addSVGAccessibilityFields from '../../accessibility';
 const conf = {};
 export const setConf = function (cnf) {
   const keys = Object.keys(cnf);
-  for (let i = 0; i < keys.length; i++) {
-    conf[keys[i]] = cnf[keys[i]];
+  for (const key of keys) {
+    conf[key] = cnf[key];
   }
 };
 
@@ -59,7 +59,7 @@ export const addVertices = function (vert, g, svgId, root, _doc, diagObj) {
       // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
       const node = {
         label: vertexText.replace(
-          /fa[lrsb]?:fa-[\w-]+/g,
+          /fa[blrs]?:fa-[\w-]+/g,
           (s) => `<i class='${s.replace(':', ' ')}'></i>`
         ),
       };
@@ -71,12 +71,12 @@ export const addVertices = function (vert, g, svgId, root, _doc, diagObj) {
 
       const rows = vertexText.split(common.lineBreakRegex);
 
-      for (let j = 0; j < rows.length; j++) {
+      for (const row of rows) {
         const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
         tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
         tspan.setAttribute('dy', '1em');
         tspan.setAttribute('x', '1');
-        tspan.textContent = rows[j];
+        tspan.textContent = row;
         svgLabel.appendChild(tspan);
       }
       vertexNode = svgLabel;
@@ -167,7 +167,7 @@ export const addEdges = function (edges, g, diagObj) {
   let defaultStyle;
   let defaultLabelStyle;
 
-  if (typeof edges.defaultStyle !== 'undefined') {
+  if (edges.defaultStyle !== undefined) {
     const defaultStyles = getStylesFromArray(edges.defaultStyle);
     defaultStyle = defaultStyles.style;
     defaultLabelStyle = defaultStyles.labelStyle;
@@ -193,7 +193,7 @@ export const addEdges = function (edges, g, diagObj) {
     let style = '';
     let labelStyle = '';
 
-    if (typeof edge.style !== 'undefined') {
+    if (edge.style !== undefined) {
       const styles = getStylesFromArray(edge.style);
       style = styles.style;
       labelStyle = styles.labelStyle;
@@ -201,10 +201,10 @@ export const addEdges = function (edges, g, diagObj) {
       switch (edge.stroke) {
         case 'normal':
           style = 'fill:none';
-          if (typeof defaultStyle !== 'undefined') {
+          if (defaultStyle !== undefined) {
             style = defaultStyle;
           }
-          if (typeof defaultLabelStyle !== 'undefined') {
+          if (defaultLabelStyle !== undefined) {
             labelStyle = defaultLabelStyle;
           }
           break;
@@ -220,16 +220,16 @@ export const addEdges = function (edges, g, diagObj) {
     edgeData.style = style;
     edgeData.labelStyle = labelStyle;
 
-    if (typeof edge.interpolate !== 'undefined') {
+    if (edge.interpolate !== undefined) {
       edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
-    } else if (typeof edges.defaultInterpolate !== 'undefined') {
+    } else if (edges.defaultInterpolate !== undefined) {
       edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
     } else {
       edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
     }
 
-    if (typeof edge.text === 'undefined') {
-      if (typeof edge.style !== 'undefined') {
+    if (edge.text === undefined) {
+      if (edge.style !== undefined) {
         edgeData.arrowheadStyle = 'fill: #333';
       }
     } else {
@@ -241,14 +241,14 @@ export const addEdges = function (edges, g, diagObj) {
         edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}" style="${
           edgeData.labelStyle
         }">${edge.text.replace(
-          /fa[lrsb]?:fa-[\w-]+/g,
+          /fa[blrs]?:fa-[\w-]+/g,
           (s) => `<i class='${s.replace(':', ' ')}'></i>`
         )}</span>`;
       } else {
         edgeData.labelType = 'text';
         edgeData.label = edge.text.replace(common.lineBreakRegex, '\n');
 
-        if (typeof edge.style === 'undefined') {
+        if (edge.style === undefined) {
           edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';
         }
 
@@ -316,7 +316,7 @@ export const draw = function (text, id, _version, diagObj) {
 
   // Fetch the default direction, use TD if none was found
   let dir = diagObj.db.getDirection();
-  if (typeof dir === 'undefined') {
+  if (dir === undefined) {
     dir = 'TD';
   }
   const nodeSpacing = conf.nodeSpacing || 50;
@@ -459,9 +459,7 @@ export const draw = function (text, id, _version, diagObj) {
   // Add label rects for non html labels
   if (!conf.htmlLabels) {
     const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
-    for (let k = 0; k < labels.length; k++) {
-      const label = labels[k];
-
+    for (const label of labels) {
       // Get dimensions of label
       const dim = label.getBBox();
 
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
index 6cba33f88..5c2094737 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/flow-direction.spec.js
@@ -79,8 +79,8 @@ describe('when parsing directions', function () {
     const subgraphs = flow.parser.yy.getSubGraphs();
     expect(subgraphs.length).toBe(2);
 
-    const subgraphA = filter(subgraphs, (o) => o.id === 'A')[0];
-    const subgraphB = filter(subgraphs, (o) => o.id === 'B')[0];
+    const subgraphA = subgraphs.find((o) => o.id === 'A');
+    const subgraphB = subgraphs.find((o) => o.id === 'B');
 
     expect(subgraphB.nodes[0]).toBe('c');
     expect(subgraphB.dir).toBe('LR');
diff --git a/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js b/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
index 6fec233e7..5ba6a5361 100644
--- a/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
+++ b/packages/mermaid/src/diagrams/flowchart/parser/subgraph.spec.js
@@ -254,8 +254,8 @@ describe('when parsing subgraphs', function () {
     const subgraphs = flow.parser.yy.getSubGraphs();
     expect(subgraphs.length).toBe(2);
 
-    const subgraphA = filter(subgraphs, (o) => o.id === 'A')[0];
-    const subgraphB = filter(subgraphs, (o) => o.id === 'B')[0];
+    const subgraphA = subgraphs.find((o) => o.id === 'A');
+    const subgraphB = subgraphs.find((o) => o.id === 'B');
 
     expect(subgraphB.nodes[0]).toBe('c');
     expect(subgraphA.nodes).toContain('B');
@@ -279,8 +279,8 @@ describe('when parsing subgraphs', function () {
     const subgraphs = flow.parser.yy.getSubGraphs();
     expect(subgraphs.length).toBe(2);
 
-    const subgraphA = filter(subgraphs, (o) => o.id === 'A')[0];
-    const subgraphB = filter(subgraphs, (o) => o.id === 'B')[0];
+    const subgraphA = subgraphs.find((o) => o.id === 'A');
+    const subgraphB = subgraphs.find((o) => o.id === 'B');
 
     expect(subgraphB.nodes[0]).toBe('c');
     expect(subgraphA.nodes).toContain('B');
@@ -302,8 +302,8 @@ describe('when parsing subgraphs', function () {
     const subgraphs = flow.parser.yy.getSubGraphs();
     expect(subgraphs.length).toBe(2);
 
-    const subgraphA = filter(subgraphs, (o) => o.id === 'A')[0];
-    const subgraphB = filter(subgraphs, (o) => o.id === 'B')[0];
+    const subgraphA = subgraphs.find((o) => o.id === 'A');
+    const subgraphB = subgraphs.find((o) => o.id === 'B');
     expect(subgraphB.nodes[0]).toBe('c');
     expect(subgraphA.nodes).toContain('B');
     expect(subgraphA.nodes).toContain('b');
diff --git a/packages/mermaid/src/diagrams/gantt/ganttDb.js b/packages/mermaid/src/diagrams/gantt/ganttDb.js
index a0f18c3b8..a1c74dd62 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttDb.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttDb.js
@@ -150,16 +150,16 @@ export const getTasks = function () {
 };
 
 export const isInvalidDate = function (date, dateFormat, excludes, includes) {
-  if (includes.indexOf(date.format(dateFormat.trim())) >= 0) {
+  if (includes.includes(date.format(dateFormat.trim()))) {
     return false;
   }
-  if (date.isoWeekday() >= 6 && excludes.indexOf('weekends') >= 0) {
+  if (date.isoWeekday() >= 6 && excludes.includes('weekends')) {
     return true;
   }
-  if (excludes.indexOf(date.format('dddd').toLowerCase()) >= 0) {
+  if (excludes.includes(date.format('dddd').toLowerCase())) {
     return true;
   }
-  return excludes.indexOf(date.format(dateFormat.trim())) >= 0;
+  return excludes.includes(date.format(dateFormat.trim()));
 };
 
 const checkTaskDates = function (task, dateFormat, excludes, includes) {
@@ -202,7 +202,7 @@ const getStartDate = function (prevTime, dateFormat, str) {
     let latestEndingTask = null;
     afterStatement[1].split(' ').forEach(function (id) {
       let task = findTaskById(id);
-      if (typeof task !== 'undefined') {
+      if (task !== undefined) {
         if (!latestEndingTask) {
           latestEndingTask = task;
         } else {
@@ -230,7 +230,7 @@ const getStartDate = function (prevTime, dateFormat, str) {
     log.debug('Invalid date:' + str);
     log.debug('With date format:' + dateFormat.trim());
     const d = new Date(str);
-    if (typeof d === 'undefined' || isNaN(d.getTime())) {
+    if (d === undefined || isNaN(d.getTime())) {
       throw new Error('Invalid date:' + str);
     }
     return d;
@@ -258,15 +258,14 @@ const getStartDate = function (prevTime, dateFormat, str) {
  *   string.
  */
 const parseDuration = function (str) {
-  const statement = /^(\d+(?:\.\d+)?)([yMwdhms]|ms)$/.exec(str.trim());
+  const statement = /^(\d+(?:\.\d+)?)([Mdhmswy]|ms)$/.exec(str.trim());
   if (statement !== null) {
     return moment.duration(Number.parseFloat(statement[1]), statement[2]);
   }
   return moment.duration.invalid();
 };
 
-const getEndDate = function (prevTime, dateFormat, str, inclusive) {
-  inclusive = inclusive || false;
+const getEndDate = function (prevTime, dateFormat, str, inclusive = false) {
   str = str.trim();
 
   // Check for actual date
@@ -288,7 +287,7 @@ const getEndDate = function (prevTime, dateFormat, str, inclusive) {
 
 let taskCnt = 0;
 const parseId = function (idStr) {
-  if (typeof idStr === 'undefined') {
+  if (idStr === undefined) {
     taskCnt = taskCnt + 1;
     return 'task' + taskCnt;
   }
@@ -510,10 +509,10 @@ const compileTasks = function () {
   };
 
   let allProcessed = true;
-  for (let i = 0; i < rawTasks.length; i++) {
+  for (const [i, rawTask] of rawTasks.entries()) {
     compileTask(i);
 
-    allProcessed = allProcessed && rawTasks[i].processed;
+    allProcessed = allProcessed && rawTask.processed;
   }
   return allProcessed;
 };
@@ -531,7 +530,7 @@ export const setLink = function (ids, _linkStr) {
   }
   ids.split(',').forEach(function (id) {
     let rawTask = findTaskById(id);
-    if (typeof rawTask !== 'undefined') {
+    if (rawTask !== undefined) {
       pushFun(id, () => {
         window.open(linkStr, '_self');
       });
@@ -550,7 +549,7 @@ export const setLink = function (ids, _linkStr) {
 export const setClass = function (ids, className) {
   ids.split(',').forEach(function (id) {
     let rawTask = findTaskById(id);
-    if (typeof rawTask !== 'undefined') {
+    if (rawTask !== undefined) {
       rawTask.classes.push(className);
     }
   });
@@ -560,7 +559,7 @@ const setClickFun = function (id, functionName, functionArgs) {
   if (configApi.getConfig().securityLevel !== 'loose') {
     return;
   }
-  if (typeof functionName === 'undefined') {
+  if (functionName === undefined) {
     return;
   }
 
@@ -585,7 +584,7 @@ const setClickFun = function (id, functionName, functionArgs) {
   }
 
   let rawTask = findTaskById(id);
-  if (typeof rawTask !== 'undefined') {
+  if (rawTask !== undefined) {
     pushFun(id, () => {
       utils.runFunc(functionName, ...argList);
     });
@@ -600,24 +599,26 @@ const setClickFun = function (id, functionName, functionArgs) {
  * @param callbackFunction A function to be executed when clicked on the task or the task's text
  */
 const pushFun = function (id, callbackFunction) {
-  funs.push(function () {
-    // const elem = d3.select(element).select(`[id="${id}"]`)
-    const elem = document.querySelector(`[id="${id}"]`);
-    if (elem !== null) {
-      elem.addEventListener('click', function () {
-        callbackFunction();
-      });
+  funs.push(
+    function () {
+      // const elem = d3.select(element).select(`[id="${id}"]`)
+      const elem = document.querySelector(`[id="${id}"]`);
+      if (elem !== null) {
+        elem.addEventListener('click', function () {
+          callbackFunction();
+        });
+      }
+    },
+    function () {
+      // const elem = d3.select(element).select(`[id="${id}-text"]`)
+      const elem = document.querySelector(`[id="${id}-text"]`);
+      if (elem !== null) {
+        elem.addEventListener('click', function () {
+          callbackFunction();
+        });
+      }
     }
-  });
-  funs.push(function () {
-    // const elem = d3.select(element).select(`[id="${id}-text"]`)
-    const elem = document.querySelector(`[id="${id}-text"]`);
-    if (elem !== null) {
-      elem.addEventListener('click', function () {
-        callbackFunction();
-      });
-    }
-  });
+  );
 };
 
 /**
diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
index 9501dd024..ab2407ecd 100644
--- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
+++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js
@@ -46,11 +46,11 @@ export const draw = function (text, id, version, diagObj) {
   const elem = doc.getElementById(id);
   w = elem.parentElement.offsetWidth;
 
-  if (typeof w === 'undefined') {
+  if (w === undefined) {
     w = 1200;
   }
 
-  if (typeof conf.useWidth !== 'undefined') {
+  if (conf.useWidth !== undefined) {
     w = conf.useWidth;
   }
 
@@ -77,8 +77,8 @@ export const draw = function (text, id, version, diagObj) {
 
   let categories = [];
 
-  for (let i = 0; i < taskArray.length; i++) {
-    categories.push(taskArray[i].type);
+  for (const element of taskArray) {
+    categories.push(element.type);
   }
 
   const catsUnfiltered = categories; // for vert labels
@@ -178,8 +178,8 @@ export const draw = function (text, id, version, diagObj) {
       })
       .attr('height', theGap)
       .attr('class', function (d) {
-        for (let i = 0; i < categories.length; i++) {
-          if (d.type === categories[i]) {
+        for (const [i, category] of categories.entries()) {
+          if (d.type === category) {
             return 'section section' + (i % conf.numberSectionStyles);
           }
         }
@@ -247,8 +247,8 @@ export const draw = function (text, id, version, diagObj) {
         }
 
         let secNum = 0;
-        for (let i = 0; i < categories.length; i++) {
-          if (d.type === categories[i]) {
+        for (const [i, category] of categories.entries()) {
+          if (d.type === category) {
             secNum = i % conf.numberSectionStyles;
           }
         }
@@ -339,8 +339,8 @@ export const draw = function (text, id, version, diagObj) {
         }
 
         let secNum = 0;
-        for (let i = 0; i < categories.length; i++) {
-          if (d.type === categories[i]) {
+        for (const [i, category] of categories.entries()) {
+          if (d.type === category) {
             secNum = i % conf.numberSectionStyles;
           }
         }
@@ -400,7 +400,7 @@ export const draw = function (text, id, version, diagObj) {
 
       rectangles
         .filter(function (d) {
-          return typeof links[d.id] !== 'undefined';
+          return links[d.id] !== undefined;
         })
         .each(function (o) {
           var taskRect = doc.querySelector('#' + o.id);
@@ -500,7 +500,7 @@ export const draw = function (text, id, version, diagObj) {
       .tickSize(-h + theTopPad + conf.gridLineStartPadding)
       .tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));
 
-    const reTickInterval = /^([1-9][0-9]*)(minute|hour|day|week|month)$/;
+    const reTickInterval = /^([1-9]\d*)(minute|hour|day|week|month)$/;
     const resultTickInterval = reTickInterval.exec(
       diagObj.db.getTickInterval() || conf.tickInterval
     );
@@ -588,8 +588,8 @@ export const draw = function (text, id, version, diagObj) {
     const numOccurances = [];
     let prevGap = 0;
 
-    for (let i = 0; i < categories.length; i++) {
-      numOccurances[i] = [categories[i], getCount(categories[i], catsUnfiltered)];
+    for (const [i, category] of categories.entries()) {
+      numOccurances[i] = [category, getCount(category, catsUnfiltered)];
     }
 
     svg
@@ -604,14 +604,14 @@ export const draw = function (text, id, version, diagObj) {
         const svgLabel = doc.createElementNS('http://www.w3.org/2000/svg', 'text');
         svgLabel.setAttribute('dy', dy + 'em');
 
-        for (let j = 0; j < rows.length; j++) {
+        for (const [j, row] of rows.entries()) {
           const tspan = doc.createElementNS('http://www.w3.org/2000/svg', 'tspan');
           tspan.setAttribute('alignment-baseline', 'central');
           tspan.setAttribute('x', '10');
           if (j > 0) {
             tspan.setAttribute('dy', '1em');
           }
-          tspan.textContent = rows[j];
+          tspan.textContent = row;
           svgLabel.appendChild(tspan);
         }
         return svgLabel;
@@ -630,8 +630,8 @@ export const draw = function (text, id, version, diagObj) {
       .attr('font-size', conf.sectionFontSize)
       .attr('font-size', conf.sectionFontSize)
       .attr('class', function (d) {
-        for (let i = 0; i < categories.length; i++) {
-          if (d[0] === categories[i]) {
+        for (const [i, category] of categories.entries()) {
+          if (d[0] === category) {
             return 'sectionTitle sectionTitle' + (i % conf.numberSectionStyles);
           }
         }
diff --git a/packages/mermaid/src/diagrams/git/gitGraphAst.js b/packages/mermaid/src/diagrams/git/gitGraphAst.js
index 65980933d..dded48efa 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphAst.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphAst.js
@@ -131,7 +131,7 @@ export const commit = function (msg, id, type, tag) {
 
 export const branch = function (name, order) {
   name = common.sanitizeText(name, configApi.getConfig());
-  if (typeof branches[name] === 'undefined') {
+  if (branches[name] === undefined) {
     branches[name] = head != null ? head.id : null;
     branchesConfig[name] = { name, order: order ? parseInt(order, 10) : null };
     checkout(name);
@@ -169,7 +169,7 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag
       expected: ['branch abc'],
     };
     throw error;
-  } else if (typeof currentCommit === 'undefined' || !currentCommit) {
+  } else if (currentCommit === undefined || !currentCommit) {
     let error = new Error(
       'Incorrect usage of "merge". Current branch (' + curBranch + ')has no commits'
     );
@@ -181,7 +181,7 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag
       expected: ['commit'],
     };
     throw error;
-  } else if (typeof branches[otherBranch] === 'undefined') {
+  } else if (branches[otherBranch] === undefined) {
     let error = new Error(
       'Incorrect usage of "merge". Branch to be merged (' + otherBranch + ') does not exist'
     );
@@ -193,7 +193,7 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag
       expected: ['branch ' + otherBranch],
     };
     throw error;
-  } else if (typeof otherCommit === 'undefined' || !otherCommit) {
+  } else if (otherCommit === undefined || !otherCommit) {
     let error = new Error(
       'Incorrect usage of "merge". Branch to be merged (' + otherBranch + ') has no commits'
     );
@@ -215,7 +215,7 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag
       expected: ['branch abc'],
     };
     throw error;
-  } else if (custom_id && typeof commits[custom_id] !== 'undefined') {
+  } else if (custom_id && commits[custom_id] !== undefined) {
     let error = new Error(
       'Incorrect usage of "merge". Commit with id:' +
         custom_id +
@@ -267,7 +267,7 @@ export const cherryPick = function (sourceId, targetId, tag) {
   targetId = common.sanitizeText(targetId, configApi.getConfig());
   tag = common.sanitizeText(tag, configApi.getConfig());
 
-  if (!sourceId || typeof commits[sourceId] === 'undefined') {
+  if (!sourceId || commits[sourceId] === undefined) {
     let error = new Error(
       'Incorrect usage of "cherryPick". Source commit id should exist and provided'
     );
@@ -296,7 +296,7 @@ export const cherryPick = function (sourceId, targetId, tag) {
     };
     throw error;
   }
-  if (!targetId || typeof commits[targetId] === 'undefined') {
+  if (!targetId || commits[targetId] === undefined) {
     // cherry-pick source commit to current branch
 
     if (sourceCommitBranch === curBranch) {
@@ -313,7 +313,7 @@ export const cherryPick = function (sourceId, targetId, tag) {
       throw error;
     }
     const currentCommit = commits[branches[curBranch]];
-    if (typeof currentCommit === 'undefined' || !currentCommit) {
+    if (currentCommit === undefined || !currentCommit) {
       let error = new Error(
         'Incorrect usage of "cherry-pick". Current branch (' + curBranch + ')has no commits'
       );
@@ -344,7 +344,7 @@ export const cherryPick = function (sourceId, targetId, tag) {
 };
 export const checkout = function (branch) {
   branch = common.sanitizeText(branch, configApi.getConfig());
-  if (typeof branches[branch] === 'undefined') {
+  if (branches[branch] === undefined) {
     let error = new Error(
       'Trying to checkout branch which is not yet created. (Help try using "branch ' + branch + '")'
     );
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js
index bfb0ea71c..ca288bfae 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer-old.js
@@ -310,8 +310,7 @@ function renderCommitHistory(svg, commitId, branches, direction) {
  * @param direction
  * @param branchColor
  */
-function renderLines(svg, commit, direction, branchColor) {
-  branchColor = branchColor || 0;
+function renderLines(svg, commit, direction, branchColor = 0) {
   while (commit.seq > 0 && !commit.lineDrawn) {
     if (typeof commit.parent === 'string') {
       svgDrawLineForCommits(svg, commit.id, commit.parent, direction, branchColor);
diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
index 75e8d445d..6874363ad 100644
--- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
+++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js
@@ -47,13 +47,13 @@ const drawText = (txt) => {
     rows = [];
   }
 
-  for (let j = 0; j < rows.length; j++) {
+  for (const row of rows) {
     const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
     tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
     tspan.setAttribute('dy', '1em');
     tspan.setAttribute('x', '0');
     tspan.setAttribute('class', 'row');
-    tspan.textContent = rows[j].trim();
+    tspan.textContent = row.trim();
     svgLabel.appendChild(tspan);
   }
   /**
@@ -91,7 +91,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
     if (modifyGraph) {
       let typeClass;
       let commitSymbolType =
-        typeof commit.customType !== 'undefined' && commit.customType !== ''
+        commit.customType !== undefined && commit.customType !== ''
           ? commit.customType
           : commit.type;
       switch (commitSymbolType) {
@@ -319,23 +319,16 @@ const hasOverlappingCommits = (commit1, commit2, allCommits) => {
  *
  * @param {any} y1
  * @param {any} y2
- * @param {any} _depth
+ * @param {any} depth
  * @returns {number} Y value between y1 and y2
  */
-const findLane = (y1, y2, _depth) => {
-  const depth = _depth || 0;
-
+const findLane = (y1, y2, depth = 0) => {
   const candidate = y1 + Math.abs(y1 - y2) / 2;
   if (depth > 5) {
     return candidate;
   }
 
-  let ok = true;
-  for (let i = 0; i < lanes.length; i++) {
-    if (Math.abs(lanes[i] - candidate) < 10) {
-      ok = false;
-    }
-  }
+  let ok = lanes.every((lane) => Math.abs(lane - candidate) >= 10);
   if (ok) {
     lanes.push(candidate);
     return candidate;
diff --git a/packages/mermaid/src/diagrams/git/layout.js b/packages/mermaid/src/diagrams/git/layout.js
index dd8f23843..de866a72b 100644
--- a/packages/mermaid/src/diagrams/git/layout.js
+++ b/packages/mermaid/src/diagrams/git/layout.js
@@ -5,8 +5,8 @@ export default (dir, _branches) => {
   const branches = [];
   const commits = [];
 
-  for (let i = 0; i < _branches.length; i++) {
-    const branch = Object.assign({}, _branches[i]);
+  for (const [i, _branch] of _branches.entries()) {
+    const branch = Object.assign({}, _branch);
     if (dir === 'TB' || dir === 'BT') {
       branch.x = config.branchOffset * i;
       branch.y = -1;
diff --git a/packages/mermaid/src/diagrams/pie/pieDb.js b/packages/mermaid/src/diagrams/pie/pieDb.js
index 8ef4d9efc..5ccf6d29e 100644
--- a/packages/mermaid/src/diagrams/pie/pieDb.js
+++ b/packages/mermaid/src/diagrams/pie/pieDb.js
@@ -21,7 +21,7 @@ export const parseDirective = function (statement, context, type) {
 
 const addSection = function (id, value) {
   id = common.sanitizeText(id, configApi.getConfig());
-  if (typeof sections[id] === 'undefined') {
+  if (sections[id] === undefined) {
     sections[id] = value;
     log.debug('Added new section :', id);
   }
diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js
index 60e9a59c9..c5d86ad65 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.js
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js
@@ -39,14 +39,14 @@ export const draw = (txt, id, _version, diagObj) => {
     const elem = doc.getElementById(id);
     width = elem.parentElement.offsetWidth;
 
-    if (typeof width === 'undefined') {
+    if (width === undefined) {
       width = 1200;
     }
 
-    if (typeof conf.useWidth !== 'undefined') {
+    if (conf.useWidth !== undefined) {
       width = conf.useWidth;
     }
-    if (typeof conf.pie.useWidth !== 'undefined') {
+    if (conf.pie.useWidth !== undefined) {
       width = conf.pie.useWidth;
     }
 
diff --git a/packages/mermaid/src/diagrams/requirement/requirementDb.js b/packages/mermaid/src/diagrams/requirement/requirementDb.js
index 9d48f0b2d..df5eb0ab9 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementDb.js
+++ b/packages/mermaid/src/diagrams/requirement/requirementDb.js
@@ -53,7 +53,7 @@ export const parseDirective = function (statement, context, type) {
 };
 
 const addRequirement = (name, type) => {
-  if (typeof requirements[name] === 'undefined') {
+  if (requirements[name] === undefined) {
     requirements[name] = {
       name,
       type,
@@ -72,31 +72,31 @@ const addRequirement = (name, type) => {
 const getRequirements = () => requirements;
 
 const setNewReqId = (id) => {
-  if (typeof latestRequirement != 'undefined') {
+  if (latestRequirement !== undefined) {
     latestRequirement.id = id;
   }
 };
 
 const setNewReqText = (text) => {
-  if (typeof latestRequirement != 'undefined') {
+  if (latestRequirement !== undefined) {
     latestRequirement.text = text;
   }
 };
 
 const setNewReqRisk = (risk) => {
-  if (typeof latestRequirement != 'undefined') {
+  if (latestRequirement !== undefined) {
     latestRequirement.risk = risk;
   }
 };
 
 const setNewReqVerifyMethod = (verifyMethod) => {
-  if (typeof latestRequirement != 'undefined') {
+  if (latestRequirement !== undefined) {
     latestRequirement.verifyMethod = verifyMethod;
   }
 };
 
 const addElement = (name) => {
-  if (typeof elements[name] === 'undefined') {
+  if (elements[name] === undefined) {
     elements[name] = {
       name,
 
@@ -113,13 +113,13 @@ const addElement = (name) => {
 const getElements = () => elements;
 
 const setNewElementType = (type) => {
-  if (typeof latestElement != 'undefined') {
+  if (latestElement !== undefined) {
     latestElement.type = type;
   }
 };
 
 const setNewElementDocRef = (docRef) => {
-  if (typeof latestElement != 'undefined') {
+  if (latestElement !== undefined) {
     latestElement.docRef = docRef;
   }
 };
diff --git a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
index 10469d50d..a0019f46b 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
+++ b/packages/mermaid/src/diagrams/requirement/requirementRenderer.js
@@ -284,7 +284,7 @@ const addRelationships = (relationships, g) => {
 
 const adjustEntities = function (svgNode, graph) {
   graph.nodes().forEach(function (v) {
-    if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') {
+    if (v !== undefined && graph.node(v) !== undefined) {
       svgNode.select('#' + v);
       svgNode
         .select('#' + v)
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDb.js b/packages/mermaid/src/diagrams/sequence/sequenceDb.js
index ba9d0549b..e2bc4ecf1 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDb.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.js
@@ -60,15 +60,11 @@ const activationCount = (part) => {
   let i;
   let count = 0;
   for (i = 0; i < messages.length; i++) {
-    if (messages[i].type === LINETYPE.ACTIVE_START) {
-      if (messages[i].from.actor === part) {
-        count++;
-      }
+    if (messages[i].type === LINETYPE.ACTIVE_START && messages[i].from.actor === part) {
+      count++;
     }
-    if (messages[i].type === LINETYPE.ACTIVE_END) {
-      if (messages[i].from.actor === part) {
-        count--;
-      }
+    if (messages[i].type === LINETYPE.ACTIVE_END && messages[i].from.actor === part) {
+      count--;
     }
   }
   return count;
@@ -143,7 +139,7 @@ export const setWrap = function (wrapSetting) {
 export const autoWrap = () => {
   // if setWrap has been called, use that value, otherwise use the value from the config
   // TODO: refactor, always use the config value let setWrap update the config value
-  if (typeof wrapEnabled !== 'undefined') {
+  if (wrapEnabled !== undefined) {
     return wrapEnabled;
   }
   return configApi.getConfig().sequence.wrap;
@@ -159,11 +155,11 @@ export const clear = function () {
 export const parseMessage = function (str) {
   const _str = str.trim();
   const message = {
-    text: _str.replace(/^[:]?(?:no)?wrap:/, '').trim(),
+    text: _str.replace(/^:?(?:no)?wrap:/, '').trim(),
     wrap:
-      _str.match(/^[:]?wrap:/) !== null
+      _str.match(/^:?wrap:/) !== null
         ? true
-        : _str.match(/^[:]?nowrap:/) !== null
+        : _str.match(/^:?nowrap:/) !== null
         ? false
         : undefined,
   };
@@ -223,7 +219,7 @@ export const addNote = function (actor, placement, message) {
   };
 
   // Coerce actor into a [to, from, ...] array
-  const actors = [].concat(actor, actor);
+  const actors = [actor, actor];
 
   notes.push(note);
   messages.push({
@@ -337,7 +333,7 @@ export const addDetails = function (actorId, text) {
 };
 
 export const getActorProperty = function (actor, key) {
-  if (typeof actor !== 'undefined' && typeof actor.properties !== 'undefined') {
+  if (actor !== undefined && actor.properties !== undefined) {
     return actor.properties[key];
   }
 
@@ -345,7 +341,7 @@ export const getActorProperty = function (actor, key) {
 };
 
 export const apply = function (param) {
-  if (param instanceof Array) {
+  if (Array.isArray(param)) {
     param.forEach(function (item) {
       apply(item);
     });
diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index fa943d658..738b86540 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -91,7 +91,7 @@ export const bounds = {
     setConf(configApi.getConfig());
   },
   updateVal: function (obj, key, val, fun) {
-    if (typeof obj[key] === 'undefined') {
+    if (obj[key] === undefined) {
       obj[key] = val;
     } else {
       obj[key] = fun(val, obj[key]);
@@ -481,8 +481,8 @@ export const drawActors = function (
   let prevWidth = 0;
   let prevMargin = 0;
   let maxHeight = 0;
-  for (let i = 0; i < actorKeys.length; i++) {
-    const actor = actors[actorKeys[i]];
+  for (const actorKey of actorKeys) {
+    const actor = actors[actorKey];
 
     // Add some rendering data to the object
     actor.width = actor.width || conf.width;
@@ -509,8 +509,8 @@ export const drawActors = function (
 export const drawActorsPopup = function (diagram, actors, actorKeys, doc) {
   let maxHeight = 0;
   let maxWidth = 0;
-  for (let i = 0; i < actorKeys.length; i++) {
-    const actor = actors[actorKeys[i]];
+  for (const actorKey of actorKeys) {
+    const actor = actors[actorKey];
     const minMenuWidth = getRequiredPopupWidth(actor);
     const menuDimensions = svgDraw.drawPopup(
       diagram,
@@ -1180,7 +1180,7 @@ const buildMessageModel = function (msg, actors, diagObj) {
   const toBounds = activationBounds(msg.to, actors);
   const fromIdx = fromBounds[0] <= toBounds[0] ? 1 : 0;
   const toIdx = fromBounds[0] < toBounds[0] ? 0 : 1;
-  const allBounds = fromBounds.concat(toBounds);
+  const allBounds = [...fromBounds, ...toBounds];
   const boundedWidth = Math.abs(toBounds[toIdx] - fromBounds[fromIdx]);
   if (msg.wrap && msg.message) {
     msg.message = utils.wrapLabel(
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
index ed4373514..ce1caea69 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -13,7 +13,7 @@ export const drawRect = function (elem, rectData) {
   rectElem.attr('rx', rectData.rx);
   rectElem.attr('ry', rectData.ry);
 
-  if (typeof rectData.class !== 'undefined') {
+  if (rectData.class !== undefined) {
     rectElem.attr('class', rectData.class);
   }
 
@@ -62,7 +62,7 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe
   g.attr('display', displayValue);
   addPopupInteraction('#actor' + actorCnt + '_popup', actorCnt);
   var actorClass = '';
-  if (typeof rectData.class !== 'undefined') {
+  if (rectData.class !== undefined) {
     actorClass = ' ' + rectData.class;
   }
 
@@ -160,8 +160,8 @@ export const drawText = function (elem, textData) {
   let dy = 0;
   let yfunc = () => textData.y;
   if (
-    typeof textData.valign !== 'undefined' &&
-    typeof textData.textMargin !== 'undefined' &&
+    textData.valign !== undefined &&
+    textData.textMargin !== undefined &&
     textData.textMargin > 0
   ) {
     switch (textData.valign) {
@@ -186,9 +186,9 @@ export const drawText = function (elem, textData) {
     }
   }
   if (
-    typeof textData.anchor !== 'undefined' &&
-    typeof textData.textMargin !== 'undefined' &&
-    typeof textData.width !== 'undefined'
+    textData.anchor !== undefined &&
+    textData.textMargin !== undefined &&
+    textData.width !== undefined
   ) {
     switch (textData.anchor) {
       case 'left':
@@ -214,12 +214,11 @@ export const drawText = function (elem, textData) {
         break;
     }
   }
-  for (let i = 0; i < lines.length; i++) {
-    let line = lines[i];
+  for (let [i, line] of lines.entries()) {
     if (
-      typeof textData.textMargin !== 'undefined' &&
+      textData.textMargin !== undefined &&
       textData.textMargin === 0 &&
-      typeof textData.fontSize !== 'undefined'
+      textData.fontSize !== undefined
     ) {
       dy = i * textData.fontSize;
     }
@@ -227,28 +226,28 @@ export const drawText = function (elem, textData) {
     const textElem = elem.append('text');
     textElem.attr('x', textData.x);
     textElem.attr('y', yfunc());
-    if (typeof textData.anchor !== 'undefined') {
+    if (textData.anchor !== undefined) {
       textElem
         .attr('text-anchor', textData.anchor)
         .attr('dominant-baseline', textData.dominantBaseline)
         .attr('alignment-baseline', textData.alignmentBaseline);
     }
-    if (typeof textData.fontFamily !== 'undefined') {
+    if (textData.fontFamily !== undefined) {
       textElem.style('font-family', textData.fontFamily);
     }
-    if (typeof textData.fontSize !== 'undefined') {
+    if (textData.fontSize !== undefined) {
       textElem.style('font-size', textData.fontSize);
     }
-    if (typeof textData.fontWeight !== 'undefined') {
+    if (textData.fontWeight !== undefined) {
       textElem.style('font-weight', textData.fontWeight);
     }
-    if (typeof textData.fill !== 'undefined') {
+    if (textData.fill !== undefined) {
       textElem.attr('fill', textData.fill);
     }
-    if (typeof textData.class !== 'undefined') {
+    if (textData.class !== undefined) {
       textElem.attr('class', textData.class);
     }
-    if (typeof textData.dy !== 'undefined') {
+    if (textData.dy !== undefined) {
       textElem.attr('dy', textData.dy);
     } else if (dy !== 0) {
       textElem.attr('dy', dy);
@@ -257,7 +256,7 @@ export const drawText = function (elem, textData) {
     if (textData.tspan) {
       const span = textElem.append('tspan');
       span.attr('x', textData.x);
-      if (typeof textData.fill !== 'undefined') {
+      if (textData.fill !== undefined) {
         span.attr('fill', textData.fill);
       }
       span.text(line);
@@ -265,8 +264,8 @@ export const drawText = function (elem, textData) {
       textElem.text(line);
     }
     if (
-      typeof textData.valign !== 'undefined' &&
-      typeof textData.textMargin !== 'undefined' &&
+      textData.valign !== undefined &&
+      textData.textMargin !== undefined &&
       textData.textMargin > 0
     ) {
       textHeight += (textElem._groups || textElem)[0][0].getBBox().height;
@@ -561,7 +560,7 @@ export const drawLoop = function (elem, loopModel, labelText, conf) {
   drawLoopLine(loopModel.stopx, loopModel.starty, loopModel.stopx, loopModel.stopy);
   drawLoopLine(loopModel.startx, loopModel.stopy, loopModel.stopx, loopModel.stopy);
   drawLoopLine(loopModel.startx, loopModel.starty, loopModel.startx, loopModel.stopy);
-  if (typeof loopModel.sections !== 'undefined') {
+  if (loopModel.sections !== undefined) {
     loopModel.sections.forEach(function (item) {
       drawLoopLine(loopModel.startx, item.y, loopModel.stopx, item.y).style(
         'stroke-dasharray',
@@ -601,7 +600,7 @@ export const drawLoop = function (elem, loopModel, labelText, conf) {
 
   let textElem = drawText(g, txt);
 
-  if (typeof loopModel.sectionTitles !== 'undefined') {
+  if (loopModel.sectionTitles !== undefined) {
     loopModel.sectionTitles.forEach(function (item, idx) {
       if (item.message) {
         txt.text = item.message;
diff --git a/packages/mermaid/src/diagrams/state/shapes.js b/packages/mermaid/src/diagrams/state/shapes.js
index aa99ff862..0a495e56c 100644
--- a/packages/mermaid/src/diagrams/state/shapes.js
+++ b/packages/mermaid/src/diagrams/state/shapes.js
@@ -197,10 +197,8 @@ export const addTitleAndBox = (g, stateDef, altBkg) => {
   if (titleWidth > orgWidth) {
     startX = (orgWidth - width) / 2 + pad;
   }
-  if (Math.abs(orgX - graphBox.x) < pad) {
-    if (titleWidth > orgWidth) {
-      startX = orgX - (titleWidth - orgWidth) / 2;
-    }
+  if (Math.abs(orgX - graphBox.x) < pad && titleWidth > orgWidth) {
+    startX = orgX - (titleWidth - orgWidth) / 2;
   }
 
   const lineY = 1 - getConfig().state.textHeight;
@@ -301,7 +299,7 @@ export const drawText = function (elem, textData) {
   textElem.attr('y', textData.y);
   textElem.style('text-anchor', textData.anchor);
   textElem.attr('fill', textData.fill);
-  if (typeof textData.class !== 'undefined') {
+  if (textData.class !== undefined) {
     textElem.attr('class', textData.class);
   }
 
@@ -464,7 +462,7 @@ export const drawEdge = function (elem, path, relation) {
     'url(' + url + '#' + getRelationType(stateDb.relationType.DEPENDENCY) + 'End' + ')'
   );
 
-  if (typeof relation.title !== 'undefined') {
+  if (relation.title !== undefined) {
     const label = elem.append('g').attr('class', 'stateLabel');
 
     const { x, y } = utils.calcLabelPosition(path.points);
diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js
index 19ecbe65f..991aba078 100644
--- a/packages/mermaid/src/diagrams/state/stateDb.js
+++ b/packages/mermaid/src/diagrams/state/stateDb.js
@@ -94,11 +94,9 @@ const docTranslator = (parent, node, first) => {
     docTranslator(parent, node.state1, true);
     docTranslator(parent, node.state2, false);
   } else {
-    if (node.stmt === STMT_STATE) {
-      if (node.id === '[*]') {
-        node.id = first ? parent.id + '_start' : parent.id + '_end';
-        node.start = first;
-      }
+    if (node.stmt === STMT_STATE && node.id === '[*]') {
+      node.id = first ? parent.id + '_start' : parent.id + '_end';
+      node.start = first;
     }
 
     if (node.doc) {
@@ -218,7 +216,7 @@ export const addState = function (
   textStyles = null
 ) {
   // add the state if needed
-  if (typeof currentDocument.states[id] === 'undefined') {
+  if (currentDocument.states[id] === undefined) {
     log.info('Adding state ', id, descr);
     currentDocument.states[id] = {
       id: id,
@@ -457,25 +455,23 @@ const getDividerId = () => {
  */
 export const addStyleClass = function (id, styleAttributes = '') {
   // create a new style class object with this id
-  if (typeof classes[id] === 'undefined') {
+  if (classes[id] === undefined) {
     classes[id] = { id: id, styles: [], textStyles: [] }; // This is a classDef
   }
   const foundClass = classes[id];
-  if (typeof styleAttributes !== 'undefined') {
-    if (styleAttributes !== null) {
-      styleAttributes.split(STYLECLASS_SEP).forEach((attrib) => {
-        // remove any trailing ;
-        const fixedAttrib = attrib.replace(/([^;]*);/, '$1').trim();
+  if (styleAttributes !== undefined && styleAttributes !== null) {
+    styleAttributes.split(STYLECLASS_SEP).forEach((attrib) => {
+      // remove any trailing ;
+      const fixedAttrib = attrib.replace(/([^;]*);/, '$1').trim();
 
-        // replace some style keywords
-        if (attrib.match(COLOR_KEYWORD)) {
-          const newStyle1 = fixedAttrib.replace(FILL_KEYWORD, BG_FILL);
-          const newStyle2 = newStyle1.replace(COLOR_KEYWORD, FILL_KEYWORD);
-          foundClass.textStyles.push(newStyle2);
-        }
-        foundClass.styles.push(fixedAttrib);
-      });
-    }
+      // replace some style keywords
+      if (attrib.match(COLOR_KEYWORD)) {
+        const newStyle1 = fixedAttrib.replace(FILL_KEYWORD, BG_FILL);
+        const newStyle2 = newStyle1.replace(COLOR_KEYWORD, FILL_KEYWORD);
+        foundClass.textStyles.push(newStyle2);
+      }
+      foundClass.styles.push(fixedAttrib);
+    });
   }
 };
 
@@ -498,7 +494,7 @@ export const getClasses = function () {
 export const setCssClass = function (itemIds, cssClassName) {
   itemIds.split(',').forEach(function (id) {
     let foundState = getState(id);
-    if (typeof foundState === 'undefined') {
+    if (foundState === undefined) {
       const trimmedId = id.trim();
       addState(trimmedId);
       foundState = getState(trimmedId);
@@ -519,7 +515,7 @@ export const setCssClass = function (itemIds, cssClassName) {
  */
 export const setStyle = function (itemId, styleText) {
   const item = getState(itemId);
-  if (typeof item !== 'undefined') {
+  if (item !== undefined) {
     item.textStyles.push(styleText);
   }
 };
@@ -532,7 +528,7 @@ export const setStyle = function (itemId, styleText) {
  */
 export const setTextStyle = function (itemId, cssClassName) {
   const item = getState(itemId);
-  if (typeof item !== 'undefined') {
+  if (item !== undefined) {
     item.textStyles.push(cssClassName);
   }
 };
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
index 6fdeb723e..78e38726e 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer-v2.js
@@ -71,8 +71,8 @@ const conf = {};
 
 export const setConf = function (cnf) {
   const keys = Object.keys(cnf);
-  for (let i = 0; i < keys.length; i++) {
-    conf[keys[i]] = cnf[keys[i]];
+  for (const key of keys) {
+    conf[key] = cnf[key];
   }
 };
 
@@ -106,7 +106,7 @@ export const getClasses = function (text, diagramObj) {
  * @returns {string}
  */
 function getClassesFromDbInfo(dbInfoItem) {
-  if (typeof dbInfoItem === 'undefined' || dbInfoItem === null) {
+  if (dbInfoItem === undefined || dbInfoItem === null) {
     return '';
   } else {
     if (dbInfoItem.classes) {
@@ -291,11 +291,9 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) =>
     }
   }
 
-  if (parent) {
-    if (parent.id !== 'root') {
-      log.trace('Setting node ', itemId, ' to be child of its parent ', parent.id);
-      g.setParent(itemId, parent.id);
-    }
+  if (parent && parent.id !== 'root') {
+    log.trace('Setting node ', itemId, ' to be child of its parent ', parent.id);
+    g.setParent(itemId, parent.id);
   }
   if (parsedItem.doc) {
     log.trace('Adding nodes children ');
@@ -386,7 +384,7 @@ export const draw = function (text, id, _version, diag) {
   nodeDb = {};
   // Fetch the default direction, use TD if none was found
   let dir = diag.db.getDirection();
-  if (typeof dir === 'undefined') {
+  if (dir === undefined) {
     dir = DEFAULT_DIAGRAM_DIRECTION;
   }
 
@@ -459,9 +457,7 @@ export const draw = function (text, id, _version, diag) {
   // Add label rects for non html labels
   // if (!evaluate(conf.htmlLabels) || true) {
   const labels = document.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
-  for (let k = 0; k < labels.length; k++) {
-    const label = labels[k];
-
+  for (const label of labels) {
     // Get dimensions of label
     const dim = label.getBBox();
 
diff --git a/packages/mermaid/src/diagrams/state/stateRenderer.js b/packages/mermaid/src/diagrams/state/stateRenderer.js
index 57b1d1665..4eeede12e 100644
--- a/packages/mermaid/src/diagrams/state/stateRenderer.js
+++ b/packages/mermaid/src/diagrams/state/stateRenderer.js
@@ -162,8 +162,8 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) =
 
   let first = true;
 
-  for (let i = 0; i < keys.length; i++) {
-    const stateDef = states[keys[i]];
+  for (const key of keys) {
+    const stateDef = states[key];
 
     if (parentId) {
       stateDef.parentId = parentId;
@@ -245,7 +245,7 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) =
   const svgElem = diagram.node();
 
   graph.nodes().forEach(function (v) {
-    if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') {
+    if (v !== undefined && graph.node(v) !== undefined) {
       log.warn('Node ' + v + ': ' + JSON.stringify(graph.node(v)));
       root
         .select('#' + svgElem.id + ' #' + v)
@@ -287,7 +287,7 @@ const renderDoc = (doc, diagram, parentId, altBkg, root, domDocument, diagObj) =
   let stateBox = svgElem.getBBox();
 
   graph.edges().forEach(function (e) {
-    if (typeof e !== 'undefined' && typeof graph.edge(e) !== 'undefined') {
+    if (e !== undefined && graph.edge(e) !== undefined) {
       log.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));
       drawEdge(diagram, graph.edge(e), graph.edge(e).relation);
     }
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyDb.js b/packages/mermaid/src/diagrams/user-journey/journeyDb.js
index 0707636f5..ce8705094 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyDb.js
+++ b/packages/mermaid/src/diagrams/user-journey/journeyDb.js
@@ -105,10 +105,10 @@ const compileTasks = function () {
   };
 
   let allProcessed = true;
-  for (let i = 0; i < rawTasks.length; i++) {
+  for (const [i, rawTask] of rawTasks.entries()) {
     compileTask(i);
 
-    allProcessed = allProcessed && rawTasks[i].processed;
+    allProcessed = allProcessed && rawTask.processed;
   }
   return allProcessed;
 };
diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
index 3880a243a..b22192101 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
@@ -146,7 +146,7 @@ export const bounds = {
     this.verticalPos = 0;
   },
   updateVal: function (obj, key, val, fun) {
-    if (typeof obj[key] === 'undefined') {
+    if (obj[key] === undefined) {
       obj[key] = val;
     } else {
       obj[key] = fun(val, obj[key]);
@@ -221,8 +221,7 @@ export const drawTasks = function (diagram, tasks, verticalPos) {
   let num = 0;
 
   // Draw the tasks
-  for (let i = 0; i < tasks.length; i++) {
-    const task = tasks[i];
+  for (const [i, task] of tasks.entries()) {
     if (lastSection !== task.section) {
       fill = fills[sectionNumber % fills.length];
       num = sectionNumber % fills.length;
diff --git a/packages/mermaid/src/diagrams/user-journey/svgDraw.js b/packages/mermaid/src/diagrams/user-journey/svgDraw.js
index a8c59a939..74d5d2a02 100644
--- a/packages/mermaid/src/diagrams/user-journey/svgDraw.js
+++ b/packages/mermaid/src/diagrams/user-journey/svgDraw.js
@@ -11,7 +11,7 @@ export const drawRect = function (elem, rectData) {
   rectElem.attr('rx', rectData.rx);
   rectElem.attr('ry', rectData.ry);
 
-  if (typeof rectData.class !== 'undefined') {
+  if (rectData.class !== undefined) {
     rectElem.attr('class', rectData.class);
   }
 
@@ -116,11 +116,11 @@ export const drawCircle = function (element, circleData) {
   circleElement.attr('stroke', circleData.stroke);
   circleElement.attr('r', circleData.r);
 
-  if (typeof circleElement.class !== 'undefined') {
+  if (circleElement.class !== undefined) {
     circleElement.attr('class', circleElement.class);
   }
 
-  if (typeof circleData.title !== 'undefined') {
+  if (circleData.title !== undefined) {
     circleElement.append('title').text(circleData.title);
   }
 
@@ -138,7 +138,7 @@ export const drawText = function (elem, textData) {
 
   textElem.style('text-anchor', textData.anchor);
 
-  if (typeof textData.class !== 'undefined') {
+  if (textData.class !== undefined) {
     textElem.attr('class', textData.class);
   }
 
diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts
index 993f2f944..7a4d744e4 100644
--- a/packages/mermaid/src/mermaid.ts
+++ b/packages/mermaid/src/mermaid.ts
@@ -108,7 +108,7 @@ const initThrowsErrors = function (
   // if last argument is a function this is the callback function
   log.debug(`${!callback ? 'No ' : ''}Callback function found`);
   let nodesToProcess: ArrayLike<HTMLElement>;
-  if (typeof nodes === 'undefined') {
+  if (nodes === undefined) {
     nodesToProcess = document.querySelectorAll('.mermaid');
   } else if (typeof nodes === 'string') {
     nodesToProcess = document.querySelectorAll(nodes);
@@ -121,7 +121,7 @@ const initThrowsErrors = function (
   }
 
   log.debug(`Found ${nodesToProcess.length} diagrams`);
-  if (typeof config?.startOnLoad !== 'undefined') {
+  if (config?.startOnLoad !== undefined) {
     log.debug('Start On Load: ' + config?.startOnLoad);
     mermaidAPI.updateSiteConfig({ startOnLoad: config?.startOnLoad });
   }
@@ -133,6 +133,7 @@ const initThrowsErrors = function (
   const errors: DetailedError[] = [];
 
   // element is the current div with mermaid class
+  // eslint-disable-next-line unicorn/prefer-spread
   for (const element of Array.from(nodesToProcess)) {
     log.info('Rendering diagram: ' + element.id);
     /*! Check if previously processed */
@@ -162,7 +163,7 @@ const initThrowsErrors = function (
         txt,
         (svgCode: string, bindFunctions?: (el: Element) => void) => {
           element.innerHTML = svgCode;
-          if (typeof callback !== 'undefined') {
+          if (callback !== undefined) {
             callback(id);
           }
           if (bindFunctions) {
@@ -249,7 +250,7 @@ const initThrowsErrorsAsync = async function (
   // if last argument is a function this is the callback function
   log.debug(`${!callback ? 'No ' : ''}Callback function found`);
   let nodesToProcess: ArrayLike<HTMLElement>;
-  if (typeof nodes === 'undefined') {
+  if (nodes === undefined) {
     nodesToProcess = document.querySelectorAll('.mermaid');
   } else if (typeof nodes === 'string') {
     nodesToProcess = document.querySelectorAll(nodes);
@@ -262,7 +263,7 @@ const initThrowsErrorsAsync = async function (
   }
 
   log.debug(`Found ${nodesToProcess.length} diagrams`);
-  if (typeof config?.startOnLoad !== 'undefined') {
+  if (config?.startOnLoad !== undefined) {
     log.debug('Start On Load: ' + config?.startOnLoad);
     mermaidAPI.updateSiteConfig({ startOnLoad: config?.startOnLoad });
   }
@@ -274,6 +275,7 @@ const initThrowsErrorsAsync = async function (
   const errors: DetailedError[] = [];
 
   // element is the current div with mermaid class
+  // eslint-disable-next-line unicorn/prefer-spread
   for (const element of Array.from(nodesToProcess)) {
     log.info('Rendering diagram: ' + element.id);
     /*! Check if previously processed */
@@ -303,7 +305,7 @@ const initThrowsErrorsAsync = async function (
         txt,
         (svgCode: string, bindFunctions?: (el: Element) => void) => {
           element.innerHTML = svgCode;
-          if (typeof callback !== 'undefined') {
+          if (callback !== undefined) {
             callback(id);
           }
           if (bindFunctions) {
diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts
index 786b163c4..55d46ae7c 100644
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -257,11 +257,11 @@ describe('mermaidAPI', function () {
     });
     it('gets the fontFamily from the config', () => {
       const styles = createCssStyles(mocked_config_with_htmlLabels, 'graphType', {});
-      expect(styles).toMatch(/(.*)\n:root \{ --mermaid-font-family: serif(.*)/);
+      expect(styles).toMatch(/(.*)\n:root { --mermaid-font-family: serif(.*)/);
     });
     it('gets the alt fontFamily from the config', () => {
       const styles = createCssStyles(mocked_config_with_htmlLabels, 'graphType', undefined);
-      expect(styles).toMatch(/(.*)\n:root \{ --mermaid-alt-font-family: sans-serif(.*)/);
+      expect(styles).toMatch(/(.*)\n:root { --mermaid-alt-font-family: sans-serif(.*)/);
     });
 
     describe('there are some classDefs', () => {
@@ -277,7 +277,7 @@ describe('mermaidAPI', function () {
 
         // prefix any special RegExp characters in the given string with a \ so we can use the literal character in a RegExp
         function escapeForRegexp(str: string) {
-          const strChars = str.split(''); // split into array of every char
+          const strChars = [...str]; // split into array of every char
           const strEscaped = strChars.map((char) => {
             if (REGEXP_SPECIALS.includes(char)) {
               return `\\${char}`;
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 0b2e85cd6..f9b5b259d 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -128,15 +128,9 @@ export const encodeEntities = function (text: string): string {
 export const decodeEntities = function (text: string): string {
   let txt = text;
 
-  txt = txt.replace(/fl°°/g, function () {
-    return '&#';
-  });
-  txt = txt.replace(/fl°/g, function () {
-    return '&';
-  });
-  txt = txt.replace(/¶ß/g, function () {
-    return ';';
-  });
+  txt = txt.replace(/fl°°/g, '&#');
+  txt = txt.replace(/fl°/g, '&');
+  txt = txt.replace(/¶ß/g, ';');
 
   return txt;
 };
@@ -189,28 +183,26 @@ export const createCssStyles = (
   }
 
   // classDefs defined in the diagram text
-  if (!isEmpty(classDefs)) {
-    if (CLASSDEF_DIAGRAMS.includes(graphType)) {
-      const htmlLabels = config.htmlLabels || config.flowchart?.htmlLabels; // TODO why specifically check the Flowchart diagram config?
+  if (!isEmpty(classDefs) && CLASSDEF_DIAGRAMS.includes(graphType)) {
+    const htmlLabels = config.htmlLabels || config.flowchart?.htmlLabels; // TODO why specifically check the Flowchart diagram config?
 
-      const cssHtmlElements = ['> *', 'span']; // TODO make a constant
-      const cssShapeElements = ['rect', 'polygon', 'ellipse', 'circle', 'path']; // TODO make a constant
+    const cssHtmlElements = ['> *', 'span']; // TODO make a constant
+    const cssShapeElements = ['rect', 'polygon', 'ellipse', 'circle', 'path']; // TODO make a constant
 
-      const cssElements = htmlLabels ? cssHtmlElements : cssShapeElements;
+    const cssElements = htmlLabels ? cssHtmlElements : cssShapeElements;
 
-      // create the CSS styles needed for each styleClass definition and css element
-      for (const classId in classDefs) {
-        const styleClassDef = classDefs[classId];
-        // create the css styles for each cssElement and the styles (only if there are styles)
-        if (!isEmpty(styleClassDef.styles)) {
-          cssElements.forEach((cssElement) => {
-            cssStyles += cssImportantStyles(styleClassDef.id, cssElement, styleClassDef.styles);
-          });
-        }
-        // create the css styles for the tspan element and the text styles (only if there are textStyles)
-        if (!isEmpty(styleClassDef.textStyles)) {
-          cssStyles += cssImportantStyles(styleClassDef.id, 'tspan', styleClassDef.textStyles);
-        }
+    // create the CSS styles needed for each styleClass definition and css element
+    for (const classId in classDefs) {
+      const styleClassDef = classDefs[classId];
+      // create the css styles for each cssElement and the styles (only if there are styles)
+      if (!isEmpty(styleClassDef.styles)) {
+        cssElements.forEach((cssElement) => {
+          cssStyles += cssImportantStyles(styleClassDef.id, cssElement, styleClassDef.styles);
+        });
+      }
+      // create the css styles for the tspan element and the text styles (only if there are textStyles)
+      if (!isEmpty(styleClassDef.textStyles)) {
+        cssStyles += cssImportantStyles(styleClassDef.id, 'tspan', styleClassDef.textStyles);
       }
     }
   }
@@ -432,7 +424,7 @@ const render = function (
   // Define the root d3 node
   // In regular execution the svgContainingElement will be the element with a mermaid class
 
-  if (typeof svgContainingElement !== 'undefined') {
+  if (svgContainingElement !== undefined) {
     if (svgContainingElement) {
       svgContainingElement.innerHTML = '';
     }
@@ -545,7 +537,7 @@ const render = function (
 
   // -------------------------------------------------------------------------------
   // Do any callbacks (cb = callback)
-  if (typeof cb !== 'undefined') {
+  if (cb !== undefined) {
     switch (graphType) {
       case 'flowchart':
       case 'flowchart-v2':
@@ -631,7 +623,7 @@ const renderAsync = async function (
   // Define the root d3 node
   // In regular execution the svgContainingElement will be the element with a mermaid class
 
-  if (typeof svgContainingElement !== 'undefined') {
+  if (svgContainingElement !== undefined) {
     if (svgContainingElement) {
       svgContainingElement.innerHTML = '';
     }
@@ -741,7 +733,7 @@ const renderAsync = async function (
 
   // -------------------------------------------------------------------------------
   // Do any callbacks (cb = callback)
-  if (typeof cb !== 'undefined') {
+  if (cb !== undefined) {
     switch (graphType) {
       case 'flowchart':
       case 'flowchart-v2':
@@ -820,7 +812,7 @@ const handleDirective = function (p: any, directive: any, type: string): void {
     case 'init':
     case 'initialize': {
       ['config'].forEach((prop) => {
-        if (typeof directive.args[prop] !== 'undefined') {
+        if (directive.args[prop] !== undefined) {
           if (type === 'flowchart-v2') {
             type = 'flowchart';
           }
@@ -859,10 +851,8 @@ const handleDirective = function (p: any, directive: any, type: string): void {
  */
 function initialize(options: MermaidConfig = {}) {
   // Handle legacy location of font-family configuration
-  if (options?.fontFamily) {
-    if (!options.themeVariables?.fontFamily) {
-      options.themeVariables = { fontFamily: options.fontFamily };
-    }
+  if (options?.fontFamily && !options.themeVariables?.fontFamily) {
+    options.themeVariables = { fontFamily: options.fontFamily };
   }
 
   // Set default options
diff --git a/packages/mermaid/src/tests/MockedD3.ts b/packages/mermaid/src/tests/MockedD3.ts
index d7c16b3a8..9cf01ddad 100644
--- a/packages/mermaid/src/tests/MockedD3.ts
+++ b/packages/mermaid/src/tests/MockedD3.ts
@@ -23,7 +23,7 @@ export class MockedD3 {
   select = vi.fn().mockImplementation(({ select_str = '' }): MockedD3 => {
     // Get the id from an argument string. if it is of the form [id='some-id'], strip off the
     // surrounding id[..]
-    const stripSurroundRegexp = /\[id='(.*)'\]/;
+    const stripSurroundRegexp = /\[id='(.*)']/;
     const matchedSurrounds = select_str.match(stripSurroundRegexp);
     const cleanId = matchedSurrounds ? matchedSurrounds[1] : select_str;
     return new MockedD3(cleanId);
diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index 3689a01a1..16566c3b1 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -37,10 +37,9 @@ const d3CurveTypes = {
   curveStepAfter: curveStepAfter,
   curveStepBefore: curveStepBefore,
 };
-const directive =
-  /[%]{2}[{]\s*(?:(?:(\w+)\s*:|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
+const directive = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
 const directiveWithoutOpen =
-  /\s*(?:(?:(\w+)(?=:):|(\w+))\s*(?:(?:(\w+))|((?:(?![}][%]{2}).|\r?\n)*))?\s*)(?:[}][%]{2})?/gi;
+  /\s*(?:(\w+)(?=:):|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
 
 /**
  * Detects the init config object from the text
@@ -91,7 +90,7 @@ export const detectInit = function (text: string, config?: MermaidConfig): Merma
   if (results) {
     let type = detectType(text, config);
     ['config'].forEach((prop) => {
-      if (typeof results[prop] !== 'undefined') {
+      if (results[prop] !== undefined) {
         if (type === 'flowchart-v2') {
           type = 'flowchart';
         }
@@ -180,8 +179,8 @@ export const detectDirective = function (
  * @returns The array index containing the substring or -1 if not present
  */
 export const isSubstringInArray = function (str: string, arr: string[]): number {
-  for (let i = 0; i < arr.length; i++) {
-    if (arr[i].match(str)) {
+  for (const [i, element] of arr.entries()) {
+    if (element.match(str)) {
       return i;
     }
   }
@@ -460,13 +459,13 @@ export function getStylesFromArray(arr: string[]): { style: string; labelStyle:
   let style = '';
   let labelStyle = '';
 
-  for (let i = 0; i < arr.length; i++) {
-    if (typeof arr[i] !== 'undefined') {
+  for (const element of arr) {
+    if (element !== undefined) {
       // add text properties to label style definition
-      if (arr[i].startsWith('color:') || arr[i].startsWith('text-align:')) {
-        labelStyle = labelStyle + arr[i] + ';';
+      if (element.startsWith('color:') || element.startsWith('text-align:')) {
+        labelStyle = labelStyle + element + ';';
       } else {
-        style = style + arr[i] + ';';
+        style = style + element + ';';
       }
     }
   }
@@ -549,7 +548,7 @@ export const drawSimpleText = function (
   textElem.style('font-size', textData.fontSize);
   textElem.style('font-weight', textData.fontWeight);
   textElem.attr('fill', textData.fill);
-  if (typeof textData.class !== 'undefined') {
+  if (textData.class !== undefined) {
     textElem.attr('class', textData.class);
   }
 
@@ -630,7 +629,7 @@ const breakString: (
       { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 0 },
       config
     );
-    const characters = word.split('');
+    const characters = [...word];
     const lines: string[] = [];
     let currentLine = '';
     characters.forEach((character, index) => {
@@ -822,34 +821,34 @@ export const directiveSanitizer = (args: any) => {
       // This is an object
       Object.keys(args).forEach((key) => {
         log.debug('Checking key', key);
-        if (key.indexOf('__') === 0) {
+        if (key.startsWith('__')) {
           log.debug('sanitize deleting __ option', key);
           delete args[key];
         }
 
-        if (key.indexOf('proto') >= 0) {
+        if (key.includes('proto')) {
           log.debug('sanitize deleting proto option', key);
           delete args[key];
         }
 
-        if (key.indexOf('constr') >= 0) {
+        if (key.includes('constr')) {
           log.debug('sanitize deleting constr option', key);
           delete args[key];
         }
 
-        if (key.indexOf('themeCSS') >= 0) {
+        if (key.includes('themeCSS')) {
           log.debug('sanitizing themeCss option');
           args[key] = sanitizeCss(args[key]);
         }
-        if (key.indexOf('fontFamily') >= 0) {
+        if (key.includes('fontFamily')) {
           log.debug('sanitizing fontFamily option');
           args[key] = sanitizeCss(args[key]);
         }
-        if (key.indexOf('altFontFamily') >= 0) {
+        if (key.includes('altFontFamily')) {
           log.debug('sanitizing altFontFamily option');
           args[key] = sanitizeCss(args[key]);
         }
-        if (configKeys.indexOf(key) < 0) {
+        if (!configKeys.includes(key)) {
           log.debug('sanitize deleting option', key);
           delete args[key];
         } else {
@@ -863,10 +862,9 @@ export const directiveSanitizer = (args: any) => {
   }
   if (args.themeVariables) {
     const kArr = Object.keys(args.themeVariables);
-    for (let i = 0; i < kArr.length; i++) {
-      const k = kArr[i];
+    for (const k of kArr) {
       const val = args.themeVariables[k];
-      if (val && val.match && !val.match(/^[a-zA-Z0-9#,";()%. ]+$/)) {
+      if (val && val.match && !val.match(/^[\d "#%(),.;A-Za-z]+$/)) {
         args.themeVariables[k] = '';
       }
     }
@@ -877,13 +875,13 @@ export const sanitizeCss = (str) => {
   let startCnt = 0;
   let endCnt = 0;
 
-  for (let i = 0; i < str.length; i++) {
+  for (const element of str) {
     if (startCnt < endCnt) {
       return '{ /* ERROR: Unbalanced CSS */ }';
     }
-    if (str[i] === '{') {
+    if (element === '{') {
       startCnt++;
-    } else if (str[i] === '}') {
+    } else if (element === '}') {
       endCnt++;
     }
   }
diff --git a/scripts/jison/lint.mts b/scripts/jison/lint.mts
index e834a8e4f..c410d5999 100644
--- a/scripts/jison/lint.mts
+++ b/scripts/jison/lint.mts
@@ -28,7 +28,7 @@ const lint = async (file: string): Promise<boolean> => {
     dot: true,
   });
   const lintResults = await Promise.all(jisonFiles.map(lint));
-  if (lintResults.some((result) => result === false)) {
+  if (lintResults.includes(false)) {
     process.exit(1);
   }
 })();

From ed6fb15c38967ac713b62dd5759d27836b9480ab Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 23 Nov 2022 13:39:15 +0530
Subject: [PATCH 47/98] Fix: array concat

---
 packages/mermaid/src/diagrams/sequence/sequenceDb.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/diagrams/sequence/sequenceDb.js b/packages/mermaid/src/diagrams/sequence/sequenceDb.js
index e2bc4ecf1..fadd9f391 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceDb.js
+++ b/packages/mermaid/src/diagrams/sequence/sequenceDb.js
@@ -219,7 +219,8 @@ export const addNote = function (actor, placement, message) {
   };
 
   // Coerce actor into a [to, from, ...] array
-  const actors = [actor, actor];
+  // eslint-disable-next-line unicorn/prefer-spread
+  const actors = [].concat(actor, actor);
 
   notes.push(note);
   messages.push({

From 01a24296b67c5d517384dfa9385653542a9328c3 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 23 Nov 2022 15:57:50 +0530
Subject: [PATCH 48/98] Docs

---
 demos/journey.html                               | 2 +-
 packages/mermaid/src/diagrams/er/styles.js       | 2 +-
 packages/mermaid/src/docs/syntax/stateDiagram.md | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/demos/journey.html b/demos/journey.html
index 9ccc8dd3d..dadcfb13c 100644
--- a/demos/journey.html
+++ b/demos/journey.html
@@ -17,7 +17,7 @@
     <h1>Journey diagram demo</h1>
     <pre class="mermaid">
 ---
-title: My working day
+title: My working day 
 ---
      journey
       accTitle: Very simple journey demo
diff --git a/packages/mermaid/src/diagrams/er/styles.js b/packages/mermaid/src/diagrams/er/styles.js
index 7a525e28a..42dbcebde 100644
--- a/packages/mermaid/src/diagrams/er/styles.js
+++ b/packages/mermaid/src/diagrams/er/styles.js
@@ -32,7 +32,7 @@ const getStyles = (options) =>
     text-anchor: middle;
     font-size: 18px;
     fill: ${options.textColor};
-  }
+  }    
 `;
 
 export default getStyles;
diff --git a/packages/mermaid/src/docs/syntax/stateDiagram.md b/packages/mermaid/src/docs/syntax/stateDiagram.md
index ede3a9534..29e355a72 100644
--- a/packages/mermaid/src/docs/syntax/stateDiagram.md
+++ b/packages/mermaid/src/docs/syntax/stateDiagram.md
@@ -396,7 +396,7 @@ Spaces can be added to a state by first defining the state with an id and then r
 
 In the following example there is a state with the id **yswsii** and description **Your state with spaces in it**.
 After it has been defined, **yswsii** is used in the diagram in the first transition (`[*] --> yswsii`)
-and also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).
+and also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).  
 (**yswsii** has been styled so that it is different from the other states.)
 
 ```mermaid-example

From 6faf54cf6f9c401985e68cae493369e830905f99 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 23 Nov 2022 16:04:38 +0530
Subject: [PATCH 49/98] fix lock

---
 pnpm-lock.yaml | 337 +++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 315 insertions(+), 22 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fec02079a..1bc89fbd5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,7 +50,7 @@ importers:
         specifier: ^5.42.1
         version: 5.42.1_rmayb2veg2btbq6mbmnyivgasy
       '@vitest/coverage-c8':
-        specifier: 0.25.1
+        specifier: ^0.25.1
         version: 0.25.1_oullksb5ic6y72oh2wekoaiuii
       '@vitest/ui':
         specifier: ^0.25.1
@@ -157,8 +157,17 @@ importers:
       vite:
         specifier: ^3.2.3
         version: 3.2.3_@types+node@18.11.9
+      vitepress:
+        specifier: ^1.0.0-alpha.28
+        version: 1.0.0-alpha.28_ysryt2e75uhznkanan6iyjk4mi
+      vitepress-plugin-mermaid:
+        specifier: ^2.0.8
+        version: 2.0.8_2q5vfj2vm6nj3r62ddjdsi7aoe
+      vitepress-plugin-search:
+        specifier: ^1.0.4-alpha.15
+        version: 1.0.4-alpha.15_s3edpouswd4dgoi2en7bdlrp54
       vitest:
-        specifier: 0.25.1
+        specifier: ^0.25.1
         version: 0.25.1_oullksb5ic6y72oh2wekoaiuii
 
   packages/mermaid:
@@ -1760,7 +1769,7 @@ packages:
       '@types/node': 18.11.9
       ansi-escapes: 4.3.2
       chalk: 4.1.2
-      ci-info: 3.4.0
+      ci-info: 3.6.2
       exit: 0.1.2
       graceful-fs: 4.2.10
       jest-changed-files: 29.2.0
@@ -2030,6 +2039,14 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
+  /@rollup/pluginutils/4.2.1:
+    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
+    engines: {node: '>= 8.0.0'}
+    dependencies:
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    dev: true
+
   /@sideway/address/4.1.4:
     resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==}
     dependencies:
@@ -2163,6 +2180,12 @@ packages:
     resolution: {integrity: sha512-hC7OMnszpxhZPduX+m+nrx+uFoLkWOMiR4oa/AZF3MuSETYTZmFfJAHqZEM8MVlvfG7BEUcgvtwoCTxBp6hm3g==}
     dev: true
 
+  /@types/concat-stream/1.6.1:
+    resolution: {integrity: sha512-eHE4cQPoj6ngxBZMvVf6Hw7Mh4jMW4U9lpGmS5GBPB9RYxlFg+CHaVN7ErNY4W9XfLIEn20b4VDYaIrbq0q4uA==}
+    dependencies:
+      '@types/node': 18.11.9
+    dev: true
+
   /@types/connect-history-api-fallback/1.3.5:
     resolution: {integrity: sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==}
     dependencies:
@@ -2410,6 +2433,12 @@ packages:
     resolution: {integrity: sha512-HXwADeHEP4exXkCIwy2n1+i0f1ilP1ETQOH5KDOugjkTFZPntWo0Gr8stZOaebkxsdx+k0X/K6obU/+it07ocg==}
     dev: true
 
+  /@types/form-data/0.0.33:
+    resolution: {integrity: sha512-8BSvG1kGm83cyJITQMZSulnl6QV8jqAGreJsc5tPu1Jq0vTSOiY/k24Wx82JRpWwZSqrala6sd5rWi6aNXvqcw==}
+    dependencies:
+      '@types/node': 18.11.9
+    dev: true
+
   /@types/geojson/7946.0.10:
     resolution: {integrity: sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==}
     dev: true
@@ -2518,6 +2547,10 @@ packages:
       form-data: 3.0.1
     dev: true
 
+  /@types/node/10.17.60:
+    resolution: {integrity: sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==}
+    dev: true
+
   /@types/node/14.18.29:
     resolution: {integrity: sha512-LhF+9fbIX4iPzhsRLpK5H7iPdvW8L4IwGciXQIOEcuF62+9nw/VQVsOViAOOGxY3OlOKGLFv0sWwJXdwQeTn6A==}
     dev: true
@@ -2530,6 +2563,10 @@ packages:
     resolution: {integrity: sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==}
     dev: true
 
+  /@types/node/8.10.66:
+    resolution: {integrity: sha512-tktOkFUA4kXx2hhhrB8bIFb5TbwzS4uOhKEmwiD+NoiL0qtP2OQ9mFldbgD4dV1djrlBYP6eBuQZiWjuHUpqFw==}
+    dev: true
+
   /@types/normalize-package-data/2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
     dev: true
@@ -2786,7 +2823,7 @@ packages:
       vite: ^3.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 3.2.3
+      vite: 3.2.3_@types+node@18.11.9
       vue: 3.2.41
     dev: true
 
@@ -3116,6 +3153,33 @@ packages:
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
     dev: true
 
+  /@yankeeinlondon/builder-api/0.4.1_5ao55y6cx6gcsim2wqsdgjcjo4:
+    resolution: {integrity: sha512-O6LS9Zg4xqLVpAgea72mNhZvdy9B2BuIgNdsRvNkmnACG8XvlZtEKryGt2ECI/z+dbQICbHDQFCNtZRBrfSMlA==}
+    peerDependencies:
+      fp-ts: ^2.12.1
+      inferred-types: ^0.22.0
+      markdown-it: ^13.0.1
+      vite-plugin-md: '*'
+    dependencies:
+      '@yankeeinlondon/happy-wrapper': 2.8.0
+      fp-ts: 2.13.1
+      inferred-types: 0.22.8
+      markdown-it: 13.0.1
+      vite-plugin-md: 0.20.4_lwlx3cy6o77hu5i2j7tn23z27y
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
+  /@yankeeinlondon/happy-wrapper/2.8.0:
+    resolution: {integrity: sha512-p7Xj6Hwnuo2XahikUd2oDno84i1dndkiR3emLeRm7Ei2KegE8X9vS3eg/AT4I8kRX0nPkA2yPjkry/Co+3X0xw==}
+    dependencies:
+      fp-ts: 2.13.1
+      happy-dom: 7.7.0
+      native-dash: 1.23.2
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
   /JSONSelect/0.4.0:
     resolution: {integrity: sha512-VRLR3Su35MH+XV2lrvh9O7qWoug/TUyj9tLDjn9rtpUCNnILLrHjgd/tB0KrhugCxUpj3UqoLqfYb3fLJdIQQQ==}
     engines: {node: '>=0.4.7'}
@@ -3413,6 +3477,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /asap/2.0.6:
+    resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
+    dev: true
+
   /asn1/0.2.6:
     resolution: {integrity: sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==}
     dependencies:
@@ -3633,6 +3701,15 @@ packages:
       fill-range: 7.0.1
     dev: true
 
+  /brilliant-errors/0.6.1:
+    resolution: {integrity: sha512-PciFPYWTSNUkDNPEQotMVPEKQ4TbHqzaUEYGJZkGn7MpNdqi8gsP7wb4d5mBZyA5QG7BAzoz4h9RtLNrKS7k7g==}
+    engines: {node: '>=14.0.0'}
+    dependencies:
+      callsites: 4.0.0
+      common-types: 1.33.2
+      inferred-types: 0.33.1
+    dev: true
+
   /browser-process-hrtime/1.0.0:
     resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
     dev: true
@@ -3733,6 +3810,11 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /callsites/4.0.0:
+    resolution: {integrity: sha512-y3jRROutgpKdz5vzEhWM34TidDU8vkJppF8dszITeb1PQmSqV3DTxyV8G/lyO/DNvtE1YTedehmw9MPZsCBHxQ==}
+    engines: {node: '>=12.20'}
+    dev: true
+
   /camelcase-keys/6.2.2:
     resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==}
     engines: {node: '>=8'}
@@ -3859,8 +3941,9 @@ packages:
     engines: {node: '>=6.0'}
     dev: true
 
-  /ci-info/3.4.0:
-    resolution: {integrity: sha512-t5QdPT5jq3o262DOQ8zA6E1tlH2upmUc4Hlvrbx1pGYJuiiHl7O7rvVNI+l8HTVhd/q3Qc9vqimkNk5yiXsAug==}
+  /ci-info/3.6.2:
+    resolution: {integrity: sha512-lVZdhvbEudris15CLytp2u6Y0p5EKfztae9Fqa189MfNmln9F33XuH69v5fvNfiRN5/0eAUz2yJL3mo+nhaRKg==}
+    engines: {node: '>=8'}
     dev: true
 
   /cjs-module-lexer/1.2.2:
@@ -4027,6 +4110,10 @@ packages:
     engines: {node: '>=4.0.0'}
     dev: true
 
+  /common-types/1.33.2:
+    resolution: {integrity: sha512-jlnKm38MLr1Z4lNgyLa/koenixWZwK0hjMobdKmv9Uzpr8AJZ96yPnnrPYfmM7c/iQKw13E++NCb67zIfCR5AA==}
+    dev: true
+
   /compare-func/2.0.0:
     resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
     dependencies:
@@ -4060,6 +4147,16 @@ packages:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
+  /concat-stream/1.6.2:
+    resolution: {integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==}
+    engines: {'0': node >= 0.8}
+    dependencies:
+      buffer-from: 1.1.2
+      inherits: 2.0.4
+      readable-stream: 2.3.7
+      typedarray: 0.0.6
+    dev: true
+
   /concurrently/7.5.0:
     resolution: {integrity: sha512-5E3mwiS+i2JYBzr5BpXkFxOnleZTMsG+WnE/dCG4/P+oiVXrbmrBwJ2ozn4SxwB2EZDrKR568X+puVohxz3/Mg==}
     engines: {node: ^12.20.0 || ^14.13.0 || >=16.0.0}
@@ -4326,6 +4423,10 @@ packages:
       source-map: 0.6.1
     dev: true
 
+  /css.escape/1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+    dev: true
+
   /cssom/0.3.8:
     resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
     dev: true
@@ -5753,6 +5854,13 @@ packages:
       - supports-color
     dev: true
 
+  /extend-shallow/2.0.1:
+    resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extendable: 0.1.1
+    dev: true
+
   /extend/3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
     dev: true
@@ -5913,16 +6021,6 @@ packages:
     resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==}
     dev: true
 
-  /follow-redirects/1.15.2:
-    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-    dev: true
-
   /follow-redirects/1.15.2_debug@4.3.2:
     resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
     engines: {node: '>=4.0'}
@@ -5979,6 +6077,10 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /fp-ts/2.13.1:
+    resolution: {integrity: sha512-0eu5ULPS2c/jsa1lGFneEFFEdTbembJv8e4QKXeVJ3lm/5hyve06dlKZrpxmMwJt6rYen7sxmHHK2CLaXvWuWQ==}
+    dev: true
+
   /fresh/0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -6085,6 +6187,11 @@ packages:
     engines: {node: '>=8.0.0'}
     dev: true
 
+  /get-port/3.2.0:
+    resolution: {integrity: sha512-x5UJKlgeUiNT8nyo/AcnwLnZuZNcSjSw0kogRB+Whd1fjjFq4B1hySFxSFWWSn4mIBzg3sRNUDFYc4g5gjPoLg==}
+    engines: {node: '>=4'}
+    dev: true
+
   /get-stdin/5.0.1:
     resolution: {integrity: sha512-jZV7n6jGE3Gt7fgSTJoz91Ak5MuTLwMwkoYdjxuJ/AmjIsE1UC03y/IWkZCQGEvVNS9qoRNwy5BCqxImv0FVeA==}
     engines: {node: '>=0.12.0'}
@@ -6260,6 +6367,16 @@ packages:
       lodash: 4.17.21
     dev: false
 
+  /gray-matter/4.0.3:
+    resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
+    engines: {node: '>=6.0'}
+    dependencies:
+      js-yaml: 3.14.1
+      kind-of: 6.0.3
+      section-matter: 1.0.0
+      strip-bom-string: 1.0.0
+    dev: true
+
   /handle-thing/2.0.1:
     resolution: {integrity: sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==}
     dev: true
@@ -6277,6 +6394,20 @@ packages:
       uglify-js: 3.17.3
     dev: true
 
+  /happy-dom/7.7.0:
+    resolution: {integrity: sha512-U10JXl5qSaHswXT5kyE7lvSDoyK48GyPGpe74qI9KT29frt1AlS+jnwy77RUJIknx+4b52DK1NllXTgHH8k20w==}
+    dependencies:
+      css.escape: 1.5.1
+      he: 1.2.0
+      node-fetch: 2.6.7
+      sync-request: 6.1.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 2.0.0
+      whatwg-mimetype: 3.0.0
+    transitivePeerDependencies:
+      - encoding
+    dev: true
+
   /har-schema/2.0.0:
     resolution: {integrity: sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==}
     engines: {node: '>=4'}
@@ -6334,6 +6465,11 @@ packages:
       function-bind: 1.1.1
     dev: true
 
+  /he/1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+    dev: true
+
   /heap/0.2.7:
     resolution: {integrity: sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==}
     dev: false
@@ -6382,6 +6518,16 @@ packages:
       entities: 4.4.0
     dev: true
 
+  /http-basic/8.1.3:
+    resolution: {integrity: sha512-/EcDMwJZh3mABI2NhGfHOGOeOZITqfkEO4p/xK+l3NpyncIHUQBoMvCSF/b5GqvKtySC2srL/GGG3+EtlqlmCw==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      caseless: 0.12.0
+      concat-stream: 1.6.2
+      http-response-object: 3.0.2
+      parse-cache-control: 1.0.1
+    dev: true
+
   /http-cache-semantics/4.1.0:
     resolution: {integrity: sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==}
     dev: true
@@ -6461,12 +6607,18 @@ packages:
     engines: {node: '>=8.0.0'}
     dependencies:
       eventemitter3: 4.0.7
-      follow-redirects: 1.15.2
+      follow-redirects: 1.15.2_debug@4.3.2
       requires-port: 1.0.0
     transitivePeerDependencies:
       - debug
     dev: true
 
+  /http-response-object/3.0.2:
+    resolution: {integrity: sha512-bqX0XTF6fnXSQcEJ2Iuyr75yVakyjIDCqroJQ/aHfSdlM743Cwqoi2nDYMzLGWUcuTWGWy8AAvOKXTfiv6q9RA==}
+    dependencies:
+      '@types/node': 10.17.60
+    dev: true
+
   /http-signature/1.2.0:
     resolution: {integrity: sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==}
     engines: {node: '>=0.8', npm: '>=1.3.7'}
@@ -6580,6 +6732,18 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /inferred-types/0.22.8:
+    resolution: {integrity: sha512-gs0zTE04eOBso5tFZPA2UoYiH9qMCqCJCUdH9K6P6cofqNkI1L5bx9QDE0XE0khJgLN7TmH+W0JhwBbnkdjzWQ==}
+    dependencies:
+      brilliant-errors: 0.6.1
+    dev: true
+
+  /inferred-types/0.33.1:
+    resolution: {integrity: sha512-K8tMVDlXKVSsi/xj5DIoll8Cd6hqXpVpVBF4cNEORr7vdIdlTNNEB4Ot/OFv3jw7uQZbukvpxfIrBYzgKT5Nxw==}
+    dependencies:
+      brilliant-errors: 0.6.1
+    dev: true
+
   /inflight/1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     dependencies:
@@ -6663,7 +6827,7 @@ packages:
     resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==}
     hasBin: true
     dependencies:
-      ci-info: 3.4.0
+      ci-info: 3.6.2
     dev: true
 
   /is-core-module/2.10.0:
@@ -6682,6 +6846,11 @@ packages:
     hasBin: true
     dev: true
 
+  /is-extendable/0.1.1:
+    resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /is-extglob/2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -6956,7 +7125,7 @@ packages:
       '@types/node': 18.11.9
       babel-jest: 29.3.1_@babel+core@7.12.3
       chalk: 4.1.2
-      ci-info: 3.4.0
+      ci-info: 3.6.2
       deepmerge: 4.2.2
       glob: 7.2.3
       graceful-fs: 4.2.10
@@ -7242,7 +7411,7 @@ packages:
       '@jest/types': 29.3.1
       '@types/node': 18.11.9
       chalk: 4.1.2
-      ci-info: 3.4.0
+      ci-info: 3.6.2
       graceful-fs: 4.2.10
       picomatch: 2.3.1
     dev: true
@@ -8261,6 +8430,13 @@ packages:
     hasBin: true
     dev: true
 
+  /native-dash/1.23.2:
+    resolution: {integrity: sha512-Ev5OPB5vDZ+HLj4MXfAwZRHJV/LJr2LHjsIr1UN7jZigMS2JRpF7Qy77t66GURhtzp7GSWLNSLeRwXOg1iwJkQ==}
+    dependencies:
+      brilliant-errors: 0.6.1
+      inferred-types: 0.22.8
+    dev: true
+
   /natural-compare-lite/1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
     dev: true
@@ -8573,6 +8749,10 @@ packages:
       callsites: 3.1.0
     dev: true
 
+  /parse-cache-control/1.0.1:
+    resolution: {integrity: sha512-60zvsJReQPX5/QP0Kzfd/VrpjScIQ7SHBW6bFCYfEP+fp0Eppr1SHhIO5nd1PjZtvclzSzES9D/p5nFJurwfWg==}
+    dev: true
+
   /parse-entities/2.0.0:
     resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
     dependencies:
@@ -8813,6 +8993,12 @@ packages:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
     dev: true
 
+  /promise/8.3.0:
+    resolution: {integrity: sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==}
+    dependencies:
+      asap: 2.0.6
+    dev: true
+
   /prompts/2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
@@ -9280,6 +9466,14 @@ packages:
       ajv-keywords: 5.1.0_ajv@8.11.0
     dev: true
 
+  /section-matter/1.0.0:
+    resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
+    engines: {node: '>=4'}
+    dependencies:
+      extend-shallow: 2.0.1
+      kind-of: 6.0.3
+    dev: true
+
   /select-hose/2.0.0:
     resolution: {integrity: sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==}
     dev: true
@@ -9757,6 +9951,11 @@ packages:
       ansi-regex: 6.0.1
     dev: true
 
+  /strip-bom-string/1.0.0:
+    resolution: {integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /strip-bom/4.0.0:
     resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
     engines: {node: '>=8'}
@@ -9834,6 +10033,21 @@ packages:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
     dev: true
 
+  /sync-request/6.1.0:
+    resolution: {integrity: sha512-8fjNkrNlNCrVc/av+Jn+xxqfCjYaBoHqCsDz6mt030UMxJGr+GSfCV1dQt2gRtlL63+VPidwDVLr7V2OcTSdRw==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      http-response-object: 3.0.2
+      sync-rpc: 1.3.6
+      then-request: 6.0.2
+    dev: true
+
+  /sync-rpc/1.3.6:
+    resolution: {integrity: sha512-J8jTXuZzRlvU7HemDgHi3pGnh/rkoqR/OZSjhTyyZrEkkYQbk7Z33AXp37mkPfPpfdOuj7Ex3H/TJM1z48uPQw==}
+    dependencies:
+      get-port: 3.2.0
+    dev: true
+
   /tapable/2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -9900,6 +10114,23 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
+  /then-request/6.0.2:
+    resolution: {integrity: sha512-3ZBiG7JvP3wbDzA9iNY5zJQcHL4jn/0BWtXIkagfz7QgOL/LqjCEOBQuJNZfu0XYnv5JhKh+cDxCPM4ILrqruA==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@types/concat-stream': 1.6.1
+      '@types/form-data': 0.0.33
+      '@types/node': 8.10.66
+      '@types/qs': 6.9.7
+      caseless: 0.12.0
+      concat-stream: 1.6.2
+      form-data: 2.3.3
+      http-basic: 8.1.3
+      http-response-object: 3.0.2
+      promise: 8.3.0
+      qs: 6.11.0
+    dev: true
+
   /throat/6.0.1:
     resolution: {integrity: sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==}
     dev: true
@@ -10160,6 +10391,10 @@ packages:
       is-typedarray: 1.0.0
     dev: true
 
+  /typedarray/0.0.6:
+    resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
+    dev: true
+
   /typedoc-plugin-markdown/3.13.6_typedoc@0.23.18:
     resolution: {integrity: sha512-ISSc9v3BK7HkokxSBuJPttXox4tJ6hP0N9wfSIk0fmLN67+eqtAxbk97gs2nDiuha+RTO5eW9gdeAb+RPP0mgg==}
     peerDependencies:
@@ -10394,6 +10629,25 @@ packages:
       vfile-message: 3.1.2
     dev: true
 
+  /vite-plugin-md/0.20.4_lwlx3cy6o77hu5i2j7tn23z27y:
+    resolution: {integrity: sha512-W3Z59/ROS2X6OIwPwV2PjE+QkfW0UVGxyf3Z2JR0OLqGJ+Iy2SGA503m/vmATJv+C3DjeU8Oy8diQx1R+IyRwQ==}
+    peerDependencies:
+      '@rollup/pluginutils': ^4.2.1
+      rollup: ^2.77.0
+    dependencies:
+      '@rollup/pluginutils': 4.2.1
+      '@yankeeinlondon/builder-api': 0.4.1_5ao55y6cx6gcsim2wqsdgjcjo4
+      '@yankeeinlondon/happy-wrapper': 2.8.0
+      gray-matter: 4.0.3
+      markdown-it: 13.0.1
+      rollup: 2.79.1
+      source-map-js: 1.0.2
+    transitivePeerDependencies:
+      - encoding
+      - fp-ts
+      - inferred-types
+    dev: true
+
   /vite/3.2.3:
     resolution: {integrity: sha512-h8jl1TZ76eGs3o2dIBSsvXDLb1m/Ec1iej8ZMdz+PsaFUsftZeWe2CZOI3qogEsMNaywc17gu0q6cQDzh/weCQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -10461,6 +10715,18 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /vitepress-plugin-mermaid/2.0.8_2q5vfj2vm6nj3r62ddjdsi7aoe:
+    resolution: {integrity: sha512-ywWxTeg9kMv7ZPf/igCBF4ZHhWZAyRtbPnA12ICQuNK2AMp7r5IHOfnuX1EJQf8gNdsh8bcvvSvm8Ll92fdOTw==}
+    peerDependencies:
+      mermaid: ^8.0.0 || ^9.0.0
+      vite-plugin-md: ^0.20.4
+      vitepress: ^0.21.6 || ^1.0.0 || ^1.0.0-alpha
+    dependencies:
+      mermaid: link:packages/mermaid
+      vite-plugin-md: 0.20.4_lwlx3cy6o77hu5i2j7tn23z27y
+      vitepress: 1.0.0-alpha.28_ysryt2e75uhznkanan6iyjk4mi
+    dev: true
+
   /vitepress-plugin-search/1.0.4-alpha.15_s3edpouswd4dgoi2en7bdlrp54:
     resolution: {integrity: sha512-Ef/VkhTVYlECVI0H9Ck6745UNPfYFppAqnlxVSMJXdxP2vjOZ5TYNczlTTQ2p9dh16MFw/IurbL1/GrG4nXdNw==}
     engines: {node: ^14.13.1 || ^16.7.0 || >=18}
@@ -10474,8 +10740,8 @@ packages:
       '@types/markdown-it': 12.2.3
       flexsearch: 0.7.31
       markdown-it: 13.0.1
-      vite: 3.2.3
-      vitepress: 1.0.0-alpha.28_tbpndr44ulefs3hehwpi2mkf2y
+      vite: 3.2.3_@types+node@18.11.9
+      vitepress: 1.0.0-alpha.28_ysryt2e75uhznkanan6iyjk4mi
       vue: 3.2.41
     dev: true
 
@@ -10506,6 +10772,33 @@ packages:
       - terser
     dev: true
 
+  /vitepress/1.0.0-alpha.28_ysryt2e75uhznkanan6iyjk4mi:
+    resolution: {integrity: sha512-pvbLssDMgLUN1terajmPlFBxHSDGO4DqwexKbjFyr7LeELerVuwGrG6F2J1hxmwOlbpLd1kHXEDqGm9JX/kTDQ==}
+    hasBin: true
+    dependencies:
+      '@docsearch/css': 3.3.0
+      '@docsearch/js': 3.3.0_tbpndr44ulefs3hehwpi2mkf2y
+      '@vitejs/plugin-vue': 3.2.0_vite@3.2.3+vue@3.2.41
+      '@vue/devtools-api': 6.4.5
+      '@vueuse/core': 9.4.0_vue@3.2.41
+      body-scroll-lock: 4.0.0-beta.0
+      shiki: 0.11.1
+      vite: 3.2.3_@types+node@18.11.9
+      vue: 3.2.41
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - '@types/node'
+      - '@types/react'
+      - '@vue/composition-api'
+      - less
+      - react
+      - react-dom
+      - sass
+      - stylus
+      - sugarss
+      - terser
+    dev: true
+
   /vitest/0.25.1_oullksb5ic6y72oh2wekoaiuii:
     resolution: {integrity: sha512-eH74h6MkuEgsqR4mAQZeMK9O0PROiKY+i+1GMz/fBi5A3L2ml5U7JQs7LfPU7+uWUziZyLHagl+rkyfR8SLhlA==}
     engines: {node: '>=v14.16.0'}

From f8b05f7d7557516b43a82500f3f0240e6964a326 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 23 Nov 2022 16:07:58 +0530
Subject: [PATCH 50/98] chore: Cleanup package.json

---
 package.json                  | 6 +-----
 packages/mermaid/package.json | 1 -
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 31d89a63e..3c58d8755 100644
--- a/package.json
+++ b/package.json
@@ -89,7 +89,6 @@
     "express": "^4.18.2",
     "globby": "^13.1.2",
     "husky": "^8.0.2",
-    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.3.1",
     "jison": "^0.4.18",
     "jsdom": "^20.0.2",
@@ -105,9 +104,6 @@
     "ts-node": "^10.9.1",
     "typescript": "^4.8.4",
     "vite": "^3.2.3",
-    "vitepress": "^1.0.0-alpha.28",
-    "vitepress-plugin-mermaid": "^2.0.8",
-    "vitepress-plugin-search": "^1.0.4-alpha.15",
     "vitest": "^0.25.1"
   },
   "sideEffects": [
@@ -117,4 +113,4 @@
   "volta": {
     "node": "18.12.1"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 5e6ce9992..e9f00b26b 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -79,7 +79,6 @@
     "concurrently": "^7.5.0",
     "coveralls": "^3.1.1",
     "globby": "^13.1.2",
-    "identity-obj-proxy": "^3.0.0",
     "jison": "^0.4.18",
     "js-base64": "^3.7.2",
     "jsdom": "^20.0.2",

From cc1c98325c135ff14fbf3dc8b373c787077db859 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 23 Nov 2022 16:08:41 +0530
Subject: [PATCH 51/98] chore: Cleanup package.json

---
 packages/mermaid/package.json                               | 2 +-
 .../mermaid/src/docs/.vitepress/mermaid-markdown-all.ts     | 6 +++---
 packages/mermaid/src/docs/.vitepress/theme/index.ts         | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index e9f00b26b..dbb5e5aaf 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -104,4 +104,4 @@
     "**/*.css",
     "**/*.scss"
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
index 9c3b35a68..c157cf679 100644
--- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
+++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
@@ -27,9 +27,9 @@ const MermaidExample = async (md: MarkdownRenderer) => {
         <button class="copy"></button>
         <span class="lang">mermaid</span>
         ${
-        // html is pre-escaped by the highlight function
-        // (it also adds `v-pre` to ignore Vue template syntax)
-        md.options.highlight(token.content, 'mermaid', langAttrs)
+          // html is pre-escaped by the highlight function
+          // (it also adds `v-pre` to ignore Vue template syntax)
+          md.options.highlight(token.content, 'mermaid', langAttrs)
         }
       </div>`;
     } else if (token.info.trim() === 'mermaid') {
diff --git a/packages/mermaid/src/docs/.vitepress/theme/index.ts b/packages/mermaid/src/docs/.vitepress/theme/index.ts
index a56a7bade..efb065fea 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/index.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/index.ts
@@ -20,7 +20,7 @@ export default {
           // router.go isn't loading the ID properly.
           window.location.href = `/mermaid/${newPath}`;
         }
-      } catch (e) { }
+      } catch (e) {}
     };
   },
 } as typeof DefaultTheme;

From 7201c014e3c8284cec5964e58eb7e432006a7f3f Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 23 Nov 2022 16:10:36 +0530
Subject: [PATCH 52/98] chore: Cleanup package.json

---
 pnpm-lock.yaml | 330 +------------------------------------------------
 1 file changed, 5 insertions(+), 325 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1bc89fbd5..ad1266380 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -109,9 +109,6 @@ importers:
       husky:
         specifier: ^8.0.2
         version: 8.0.2
-      identity-obj-proxy:
-        specifier: ^3.0.0
-        version: 3.0.0
       jest:
         specifier: ^29.3.1
         version: 29.3.1_odkjkoia5xunhxkdrka32ib6vi
@@ -144,7 +141,7 @@ importers:
         version: 3.0.2
       rollup-plugin-visualizer:
         specifier: ^5.8.3
-        version: 5.8.3_rollup@2.79.1
+        version: 5.8.3
       start-server-and-test:
         specifier: ^1.14.0
         version: 1.14.0
@@ -157,15 +154,6 @@ importers:
       vite:
         specifier: ^3.2.3
         version: 3.2.3_@types+node@18.11.9
-      vitepress:
-        specifier: ^1.0.0-alpha.28
-        version: 1.0.0-alpha.28_ysryt2e75uhznkanan6iyjk4mi
-      vitepress-plugin-mermaid:
-        specifier: ^2.0.8
-        version: 2.0.8_2q5vfj2vm6nj3r62ddjdsi7aoe
-      vitepress-plugin-search:
-        specifier: ^1.0.4-alpha.15
-        version: 1.0.4-alpha.15_s3edpouswd4dgoi2en7bdlrp54
       vitest:
         specifier: ^0.25.1
         version: 0.25.1_oullksb5ic6y72oh2wekoaiuii
@@ -248,9 +236,6 @@ importers:
       globby:
         specifier: ^13.1.2
         version: 13.1.2
-      identity-obj-proxy:
-        specifier: ^3.0.0
-        version: 3.0.0
       jison:
         specifier: ^0.4.18
         version: 0.4.18
@@ -2039,14 +2024,6 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
-  /@rollup/pluginutils/4.2.1:
-    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
-    engines: {node: '>= 8.0.0'}
-    dependencies:
-      estree-walker: 2.0.2
-      picomatch: 2.3.1
-    dev: true
-
   /@sideway/address/4.1.4:
     resolution: {integrity: sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==}
     dependencies:
@@ -2180,12 +2157,6 @@ packages:
     resolution: {integrity: sha512-hC7OMnszpxhZPduX+m+nrx+uFoLkWOMiR4oa/AZF3MuSETYTZmFfJAHqZEM8MVlvfG7BEUcgvtwoCTxBp6hm3g==}
     dev: true
 
-  /@types/concat-stream/1.6.1:
-    resolution: {integrity: sha512-eHE4cQPoj6ngxBZMvVf6Hw7Mh4jMW4U9lpGmS5GBPB9RYxlFg+CHaVN7ErNY4W9XfLIEn20b4VDYaIrbq0q4uA==}
-    dependencies:
-      '@types/node': 18.11.9
-    dev: true
-
   /@types/connect-history-api-fallback/1.3.5:
     resolution: {integrity: sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==}
     dependencies:
@@ -2433,12 +2404,6 @@ packages:
     resolution: {integrity: sha512-HXwADeHEP4exXkCIwy2n1+i0f1ilP1ETQOH5KDOugjkTFZPntWo0Gr8stZOaebkxsdx+k0X/K6obU/+it07ocg==}
     dev: true
 
-  /@types/form-data/0.0.33:
-    resolution: {integrity: sha512-8BSvG1kGm83cyJITQMZSulnl6QV8jqAGreJsc5tPu1Jq0vTSOiY/k24Wx82JRpWwZSqrala6sd5rWi6aNXvqcw==}
-    dependencies:
-      '@types/node': 18.11.9
-    dev: true
-
   /@types/geojson/7946.0.10:
     resolution: {integrity: sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==}
     dev: true
@@ -2547,10 +2512,6 @@ packages:
       form-data: 3.0.1
     dev: true
 
-  /@types/node/10.17.60:
-    resolution: {integrity: sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==}
-    dev: true
-
   /@types/node/14.18.29:
     resolution: {integrity: sha512-LhF+9fbIX4iPzhsRLpK5H7iPdvW8L4IwGciXQIOEcuF62+9nw/VQVsOViAOOGxY3OlOKGLFv0sWwJXdwQeTn6A==}
     dev: true
@@ -2563,10 +2524,6 @@ packages:
     resolution: {integrity: sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==}
     dev: true
 
-  /@types/node/8.10.66:
-    resolution: {integrity: sha512-tktOkFUA4kXx2hhhrB8bIFb5TbwzS4uOhKEmwiD+NoiL0qtP2OQ9mFldbgD4dV1djrlBYP6eBuQZiWjuHUpqFw==}
-    dev: true
-
   /@types/normalize-package-data/2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
     dev: true
@@ -2823,7 +2780,7 @@ packages:
       vite: ^3.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 3.2.3_@types+node@18.11.9
+      vite: 3.2.3
       vue: 3.2.41
     dev: true
 
@@ -3153,33 +3110,6 @@ packages:
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
     dev: true
 
-  /@yankeeinlondon/builder-api/0.4.1_5ao55y6cx6gcsim2wqsdgjcjo4:
-    resolution: {integrity: sha512-O6LS9Zg4xqLVpAgea72mNhZvdy9B2BuIgNdsRvNkmnACG8XvlZtEKryGt2ECI/z+dbQICbHDQFCNtZRBrfSMlA==}
-    peerDependencies:
-      fp-ts: ^2.12.1
-      inferred-types: ^0.22.0
-      markdown-it: ^13.0.1
-      vite-plugin-md: '*'
-    dependencies:
-      '@yankeeinlondon/happy-wrapper': 2.8.0
-      fp-ts: 2.13.1
-      inferred-types: 0.22.8
-      markdown-it: 13.0.1
-      vite-plugin-md: 0.20.4_lwlx3cy6o77hu5i2j7tn23z27y
-    transitivePeerDependencies:
-      - encoding
-    dev: true
-
-  /@yankeeinlondon/happy-wrapper/2.8.0:
-    resolution: {integrity: sha512-p7Xj6Hwnuo2XahikUd2oDno84i1dndkiR3emLeRm7Ei2KegE8X9vS3eg/AT4I8kRX0nPkA2yPjkry/Co+3X0xw==}
-    dependencies:
-      fp-ts: 2.13.1
-      happy-dom: 7.7.0
-      native-dash: 1.23.2
-    transitivePeerDependencies:
-      - encoding
-    dev: true
-
   /JSONSelect/0.4.0:
     resolution: {integrity: sha512-VRLR3Su35MH+XV2lrvh9O7qWoug/TUyj9tLDjn9rtpUCNnILLrHjgd/tB0KrhugCxUpj3UqoLqfYb3fLJdIQQQ==}
     engines: {node: '>=0.4.7'}
@@ -3477,10 +3407,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /asap/2.0.6:
-    resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
-    dev: true
-
   /asn1/0.2.6:
     resolution: {integrity: sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==}
     dependencies:
@@ -3701,15 +3627,6 @@ packages:
       fill-range: 7.0.1
     dev: true
 
-  /brilliant-errors/0.6.1:
-    resolution: {integrity: sha512-PciFPYWTSNUkDNPEQotMVPEKQ4TbHqzaUEYGJZkGn7MpNdqi8gsP7wb4d5mBZyA5QG7BAzoz4h9RtLNrKS7k7g==}
-    engines: {node: '>=14.0.0'}
-    dependencies:
-      callsites: 4.0.0
-      common-types: 1.33.2
-      inferred-types: 0.33.1
-    dev: true
-
   /browser-process-hrtime/1.0.0:
     resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
     dev: true
@@ -3810,11 +3727,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /callsites/4.0.0:
-    resolution: {integrity: sha512-y3jRROutgpKdz5vzEhWM34TidDU8vkJppF8dszITeb1PQmSqV3DTxyV8G/lyO/DNvtE1YTedehmw9MPZsCBHxQ==}
-    engines: {node: '>=12.20'}
-    dev: true
-
   /camelcase-keys/6.2.2:
     resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==}
     engines: {node: '>=8'}
@@ -4110,10 +4022,6 @@ packages:
     engines: {node: '>=4.0.0'}
     dev: true
 
-  /common-types/1.33.2:
-    resolution: {integrity: sha512-jlnKm38MLr1Z4lNgyLa/koenixWZwK0hjMobdKmv9Uzpr8AJZ96yPnnrPYfmM7c/iQKw13E++NCb67zIfCR5AA==}
-    dev: true
-
   /compare-func/2.0.0:
     resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
     dependencies:
@@ -4147,16 +4055,6 @@ packages:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
-  /concat-stream/1.6.2:
-    resolution: {integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==}
-    engines: {'0': node >= 0.8}
-    dependencies:
-      buffer-from: 1.1.2
-      inherits: 2.0.4
-      readable-stream: 2.3.7
-      typedarray: 0.0.6
-    dev: true
-
   /concurrently/7.5.0:
     resolution: {integrity: sha512-5E3mwiS+i2JYBzr5BpXkFxOnleZTMsG+WnE/dCG4/P+oiVXrbmrBwJ2ozn4SxwB2EZDrKR568X+puVohxz3/Mg==}
     engines: {node: ^12.20.0 || ^14.13.0 || >=16.0.0}
@@ -4423,10 +4321,6 @@ packages:
       source-map: 0.6.1
     dev: true
 
-  /css.escape/1.5.1:
-    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
-    dev: true
-
   /cssom/0.3.8:
     resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
     dev: true
@@ -5854,13 +5748,6 @@ packages:
       - supports-color
     dev: true
 
-  /extend-shallow/2.0.1:
-    resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      is-extendable: 0.1.1
-    dev: true
-
   /extend/3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
     dev: true
@@ -6077,10 +5964,6 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
-  /fp-ts/2.13.1:
-    resolution: {integrity: sha512-0eu5ULPS2c/jsa1lGFneEFFEdTbembJv8e4QKXeVJ3lm/5hyve06dlKZrpxmMwJt6rYen7sxmHHK2CLaXvWuWQ==}
-    dev: true
-
   /fresh/0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -6187,11 +6070,6 @@ packages:
     engines: {node: '>=8.0.0'}
     dev: true
 
-  /get-port/3.2.0:
-    resolution: {integrity: sha512-x5UJKlgeUiNT8nyo/AcnwLnZuZNcSjSw0kogRB+Whd1fjjFq4B1hySFxSFWWSn4mIBzg3sRNUDFYc4g5gjPoLg==}
-    engines: {node: '>=4'}
-    dev: true
-
   /get-stdin/5.0.1:
     resolution: {integrity: sha512-jZV7n6jGE3Gt7fgSTJoz91Ak5MuTLwMwkoYdjxuJ/AmjIsE1UC03y/IWkZCQGEvVNS9qoRNwy5BCqxImv0FVeA==}
     engines: {node: '>=0.12.0'}
@@ -6367,16 +6245,6 @@ packages:
       lodash: 4.17.21
     dev: false
 
-  /gray-matter/4.0.3:
-    resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
-    engines: {node: '>=6.0'}
-    dependencies:
-      js-yaml: 3.14.1
-      kind-of: 6.0.3
-      section-matter: 1.0.0
-      strip-bom-string: 1.0.0
-    dev: true
-
   /handle-thing/2.0.1:
     resolution: {integrity: sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==}
     dev: true
@@ -6394,20 +6262,6 @@ packages:
       uglify-js: 3.17.3
     dev: true
 
-  /happy-dom/7.7.0:
-    resolution: {integrity: sha512-U10JXl5qSaHswXT5kyE7lvSDoyK48GyPGpe74qI9KT29frt1AlS+jnwy77RUJIknx+4b52DK1NllXTgHH8k20w==}
-    dependencies:
-      css.escape: 1.5.1
-      he: 1.2.0
-      node-fetch: 2.6.7
-      sync-request: 6.1.0
-      webidl-conversions: 7.0.0
-      whatwg-encoding: 2.0.0
-      whatwg-mimetype: 3.0.0
-    transitivePeerDependencies:
-      - encoding
-    dev: true
-
   /har-schema/2.0.0:
     resolution: {integrity: sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==}
     engines: {node: '>=4'}
@@ -6427,10 +6281,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /harmony-reflect/1.6.2:
-    resolution: {integrity: sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==}
-    dev: true
-
   /has-ansi/2.0.0:
     resolution: {integrity: sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==}
     engines: {node: '>=0.10.0'}
@@ -6465,11 +6315,6 @@ packages:
       function-bind: 1.1.1
     dev: true
 
-  /he/1.2.0:
-    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
-    hasBin: true
-    dev: true
-
   /heap/0.2.7:
     resolution: {integrity: sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==}
     dev: false
@@ -6518,16 +6363,6 @@ packages:
       entities: 4.4.0
     dev: true
 
-  /http-basic/8.1.3:
-    resolution: {integrity: sha512-/EcDMwJZh3mABI2NhGfHOGOeOZITqfkEO4p/xK+l3NpyncIHUQBoMvCSF/b5GqvKtySC2srL/GGG3+EtlqlmCw==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      caseless: 0.12.0
-      concat-stream: 1.6.2
-      http-response-object: 3.0.2
-      parse-cache-control: 1.0.1
-    dev: true
-
   /http-cache-semantics/4.1.0:
     resolution: {integrity: sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==}
     dev: true
@@ -6613,12 +6448,6 @@ packages:
       - debug
     dev: true
 
-  /http-response-object/3.0.2:
-    resolution: {integrity: sha512-bqX0XTF6fnXSQcEJ2Iuyr75yVakyjIDCqroJQ/aHfSdlM743Cwqoi2nDYMzLGWUcuTWGWy8AAvOKXTfiv6q9RA==}
-    dependencies:
-      '@types/node': 10.17.60
-    dev: true
-
   /http-signature/1.2.0:
     resolution: {integrity: sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==}
     engines: {node: '>=0.8', npm: '>=1.3.7'}
@@ -6689,13 +6518,6 @@ packages:
     dependencies:
       safer-buffer: 2.1.2
 
-  /identity-obj-proxy/3.0.0:
-    resolution: {integrity: sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==}
-    engines: {node: '>=4'}
-    dependencies:
-      harmony-reflect: 1.6.2
-    dev: true
-
   /ieee754/1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: true
@@ -6732,18 +6554,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /inferred-types/0.22.8:
-    resolution: {integrity: sha512-gs0zTE04eOBso5tFZPA2UoYiH9qMCqCJCUdH9K6P6cofqNkI1L5bx9QDE0XE0khJgLN7TmH+W0JhwBbnkdjzWQ==}
-    dependencies:
-      brilliant-errors: 0.6.1
-    dev: true
-
-  /inferred-types/0.33.1:
-    resolution: {integrity: sha512-K8tMVDlXKVSsi/xj5DIoll8Cd6hqXpVpVBF4cNEORr7vdIdlTNNEB4Ot/OFv3jw7uQZbukvpxfIrBYzgKT5Nxw==}
-    dependencies:
-      brilliant-errors: 0.6.1
-    dev: true
-
   /inflight/1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     dependencies:
@@ -6846,11 +6656,6 @@ packages:
     hasBin: true
     dev: true
 
-  /is-extendable/0.1.1:
-    resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /is-extglob/2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -8430,13 +8235,6 @@ packages:
     hasBin: true
     dev: true
 
-  /native-dash/1.23.2:
-    resolution: {integrity: sha512-Ev5OPB5vDZ+HLj4MXfAwZRHJV/LJr2LHjsIr1UN7jZigMS2JRpF7Qy77t66GURhtzp7GSWLNSLeRwXOg1iwJkQ==}
-    dependencies:
-      brilliant-errors: 0.6.1
-      inferred-types: 0.22.8
-    dev: true
-
   /natural-compare-lite/1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
     dev: true
@@ -8749,10 +8547,6 @@ packages:
       callsites: 3.1.0
     dev: true
 
-  /parse-cache-control/1.0.1:
-    resolution: {integrity: sha512-60zvsJReQPX5/QP0Kzfd/VrpjScIQ7SHBW6bFCYfEP+fp0Eppr1SHhIO5nd1PjZtvclzSzES9D/p5nFJurwfWg==}
-    dev: true
-
   /parse-entities/2.0.0:
     resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
     dependencies:
@@ -8993,12 +8787,6 @@ packages:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
     dev: true
 
-  /promise/8.3.0:
-    resolution: {integrity: sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg==}
-    dependencies:
-      asap: 2.0.6
-    dev: true
-
   /prompts/2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
@@ -9375,7 +9163,7 @@ packages:
     resolution: {integrity: sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==}
     dev: false
 
-  /rollup-plugin-visualizer/5.8.3_rollup@2.79.1:
+  /rollup-plugin-visualizer/5.8.3:
     resolution: {integrity: sha512-QGJk4Bqe4AOat5AjipOh8esZH1nck5X2KFpf4VytUdSUuuuSwvIQZjMGgjcxe/zXexltqaXp5Vx1V3LmnQH15Q==}
     engines: {node: '>=14'}
     hasBin: true
@@ -9386,7 +9174,6 @@ packages:
         optional: true
     dependencies:
       open: 8.4.0
-      rollup: 2.79.1
       source-map: 0.7.4
       yargs: 17.5.1
     dev: true
@@ -9466,14 +9253,6 @@ packages:
       ajv-keywords: 5.1.0_ajv@8.11.0
     dev: true
 
-  /section-matter/1.0.0:
-    resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
-    engines: {node: '>=4'}
-    dependencies:
-      extend-shallow: 2.0.1
-      kind-of: 6.0.3
-    dev: true
-
   /select-hose/2.0.0:
     resolution: {integrity: sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==}
     dev: true
@@ -9951,11 +9730,6 @@ packages:
       ansi-regex: 6.0.1
     dev: true
 
-  /strip-bom-string/1.0.0:
-    resolution: {integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /strip-bom/4.0.0:
     resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
     engines: {node: '>=8'}
@@ -10033,21 +9807,6 @@ packages:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
     dev: true
 
-  /sync-request/6.1.0:
-    resolution: {integrity: sha512-8fjNkrNlNCrVc/av+Jn+xxqfCjYaBoHqCsDz6mt030UMxJGr+GSfCV1dQt2gRtlL63+VPidwDVLr7V2OcTSdRw==}
-    engines: {node: '>=8.0.0'}
-    dependencies:
-      http-response-object: 3.0.2
-      sync-rpc: 1.3.6
-      then-request: 6.0.2
-    dev: true
-
-  /sync-rpc/1.3.6:
-    resolution: {integrity: sha512-J8jTXuZzRlvU7HemDgHi3pGnh/rkoqR/OZSjhTyyZrEkkYQbk7Z33AXp37mkPfPpfdOuj7Ex3H/TJM1z48uPQw==}
-    dependencies:
-      get-port: 3.2.0
-    dev: true
-
   /tapable/2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -10114,23 +9873,6 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
-  /then-request/6.0.2:
-    resolution: {integrity: sha512-3ZBiG7JvP3wbDzA9iNY5zJQcHL4jn/0BWtXIkagfz7QgOL/LqjCEOBQuJNZfu0XYnv5JhKh+cDxCPM4ILrqruA==}
-    engines: {node: '>=6.0.0'}
-    dependencies:
-      '@types/concat-stream': 1.6.1
-      '@types/form-data': 0.0.33
-      '@types/node': 8.10.66
-      '@types/qs': 6.9.7
-      caseless: 0.12.0
-      concat-stream: 1.6.2
-      form-data: 2.3.3
-      http-basic: 8.1.3
-      http-response-object: 3.0.2
-      promise: 8.3.0
-      qs: 6.11.0
-    dev: true
-
   /throat/6.0.1:
     resolution: {integrity: sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==}
     dev: true
@@ -10391,10 +10133,6 @@ packages:
       is-typedarray: 1.0.0
     dev: true
 
-  /typedarray/0.0.6:
-    resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
-    dev: true
-
   /typedoc-plugin-markdown/3.13.6_typedoc@0.23.18:
     resolution: {integrity: sha512-ISSc9v3BK7HkokxSBuJPttXox4tJ6hP0N9wfSIk0fmLN67+eqtAxbk97gs2nDiuha+RTO5eW9gdeAb+RPP0mgg==}
     peerDependencies:
@@ -10629,25 +10367,6 @@ packages:
       vfile-message: 3.1.2
     dev: true
 
-  /vite-plugin-md/0.20.4_lwlx3cy6o77hu5i2j7tn23z27y:
-    resolution: {integrity: sha512-W3Z59/ROS2X6OIwPwV2PjE+QkfW0UVGxyf3Z2JR0OLqGJ+Iy2SGA503m/vmATJv+C3DjeU8Oy8diQx1R+IyRwQ==}
-    peerDependencies:
-      '@rollup/pluginutils': ^4.2.1
-      rollup: ^2.77.0
-    dependencies:
-      '@rollup/pluginutils': 4.2.1
-      '@yankeeinlondon/builder-api': 0.4.1_5ao55y6cx6gcsim2wqsdgjcjo4
-      '@yankeeinlondon/happy-wrapper': 2.8.0
-      gray-matter: 4.0.3
-      markdown-it: 13.0.1
-      rollup: 2.79.1
-      source-map-js: 1.0.2
-    transitivePeerDependencies:
-      - encoding
-      - fp-ts
-      - inferred-types
-    dev: true
-
   /vite/3.2.3:
     resolution: {integrity: sha512-h8jl1TZ76eGs3o2dIBSsvXDLb1m/Ec1iej8ZMdz+PsaFUsftZeWe2CZOI3qogEsMNaywc17gu0q6cQDzh/weCQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -10715,18 +10434,6 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vitepress-plugin-mermaid/2.0.8_2q5vfj2vm6nj3r62ddjdsi7aoe:
-    resolution: {integrity: sha512-ywWxTeg9kMv7ZPf/igCBF4ZHhWZAyRtbPnA12ICQuNK2AMp7r5IHOfnuX1EJQf8gNdsh8bcvvSvm8Ll92fdOTw==}
-    peerDependencies:
-      mermaid: ^8.0.0 || ^9.0.0
-      vite-plugin-md: ^0.20.4
-      vitepress: ^0.21.6 || ^1.0.0 || ^1.0.0-alpha
-    dependencies:
-      mermaid: link:packages/mermaid
-      vite-plugin-md: 0.20.4_lwlx3cy6o77hu5i2j7tn23z27y
-      vitepress: 1.0.0-alpha.28_ysryt2e75uhznkanan6iyjk4mi
-    dev: true
-
   /vitepress-plugin-search/1.0.4-alpha.15_s3edpouswd4dgoi2en7bdlrp54:
     resolution: {integrity: sha512-Ef/VkhTVYlECVI0H9Ck6745UNPfYFppAqnlxVSMJXdxP2vjOZ5TYNczlTTQ2p9dh16MFw/IurbL1/GrG4nXdNw==}
     engines: {node: ^14.13.1 || ^16.7.0 || >=18}
@@ -10740,8 +10447,8 @@ packages:
       '@types/markdown-it': 12.2.3
       flexsearch: 0.7.31
       markdown-it: 13.0.1
-      vite: 3.2.3_@types+node@18.11.9
-      vitepress: 1.0.0-alpha.28_ysryt2e75uhznkanan6iyjk4mi
+      vite: 3.2.3
+      vitepress: 1.0.0-alpha.28_tbpndr44ulefs3hehwpi2mkf2y
       vue: 3.2.41
     dev: true
 
@@ -10772,33 +10479,6 @@ packages:
       - terser
     dev: true
 
-  /vitepress/1.0.0-alpha.28_ysryt2e75uhznkanan6iyjk4mi:
-    resolution: {integrity: sha512-pvbLssDMgLUN1terajmPlFBxHSDGO4DqwexKbjFyr7LeELerVuwGrG6F2J1hxmwOlbpLd1kHXEDqGm9JX/kTDQ==}
-    hasBin: true
-    dependencies:
-      '@docsearch/css': 3.3.0
-      '@docsearch/js': 3.3.0_tbpndr44ulefs3hehwpi2mkf2y
-      '@vitejs/plugin-vue': 3.2.0_vite@3.2.3+vue@3.2.41
-      '@vue/devtools-api': 6.4.5
-      '@vueuse/core': 9.4.0_vue@3.2.41
-      body-scroll-lock: 4.0.0-beta.0
-      shiki: 0.11.1
-      vite: 3.2.3_@types+node@18.11.9
-      vue: 3.2.41
-    transitivePeerDependencies:
-      - '@algolia/client-search'
-      - '@types/node'
-      - '@types/react'
-      - '@vue/composition-api'
-      - less
-      - react
-      - react-dom
-      - sass
-      - stylus
-      - sugarss
-      - terser
-    dev: true
-
   /vitest/0.25.1_oullksb5ic6y72oh2wekoaiuii:
     resolution: {integrity: sha512-eH74h6MkuEgsqR4mAQZeMK9O0PROiKY+i+1GMz/fBi5A3L2ml5U7JQs7LfPU7+uWUziZyLHagl+rkyfR8SLhlA==}
     engines: {node: '>=v14.16.0'}

From ecf1273c822a56fab606f5abe0024931b846c448 Mon Sep 17 00:00:00 2001
From: "C.D. MacEachern" <craig.daniel.maceachern@gmail.com>
Date: Wed, 23 Nov 2022 15:25:06 -0500
Subject: [PATCH 53/98] Add official vim plugin to list in integrations

https://github.com/vim/vim/commit/364438d1e817d1d76003695f9ab533df35f8948a added recognition of Mermaid files to Vim. Link here is to the upstream source from which it comes.
---
 packages/mermaid/src/docs/misc/integrations.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mermaid/src/docs/misc/integrations.md b/packages/mermaid/src/docs/misc/integrations.md
index 31f2d09d0..9fd4415ad 100644
--- a/packages/mermaid/src/docs/misc/integrations.md
+++ b/packages/mermaid/src/docs/misc/integrations.md
@@ -116,6 +116,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
 - [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
 - [Vim](https://www.vim.org)
+  - [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid) 
   - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
 - [GNU Emacs](https://www.gnu.org/software/emacs/)
   - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)

From 5e330a6d780c6c4869ccf55f7b03d1ced4fcafe0 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 24 Nov 2022 16:33:42 +0530
Subject: [PATCH 54/98] test: Update vitest

---
 package.json                                  |  6 +--
 .../{ => .vitepress/theme}/redirect.spec.ts   |  2 +-
 pnpm-lock.yaml                                | 52 ++++++++++++++++++-
 3 files changed, 52 insertions(+), 8 deletions(-)
 rename packages/mermaid/src/docs/{ => .vitepress/theme}/redirect.spec.ts (96%)

diff --git a/package.json b/package.json
index 628fcecd2..aec72da87 100644
--- a/package.json
+++ b/package.json
@@ -110,12 +110,8 @@
     "vitepress": "^1.0.0-alpha.28",
     "vitepress-plugin-mermaid": "^2.0.8",
     "vitepress-plugin-search": "^1.0.4-alpha.15",
-    "vitest": "^0.25.1"
+    "vitest": "^0.25.3"
   },
-  "sideEffects": [
-    "**/*.css",
-    "**/*.scss"
-  ],
   "volta": {
     "node": "18.12.1"
   }
diff --git a/packages/mermaid/src/docs/redirect.spec.ts b/packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts
similarity index 96%
rename from packages/mermaid/src/docs/redirect.spec.ts
rename to packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts
index 6bf25c03b..c26364108 100644
--- a/packages/mermaid/src/docs/redirect.spec.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/redirect.spec.ts
@@ -2,7 +2,7 @@
 // Update https://github.com/mermaid-js/mermaid/blob/18c27c6f1d0537a738cbd95898df301b83c38ffc/packages/mermaid/src/docs.mts#L246 once fixed
 
 import { expect, test } from 'vitest';
-import { getRedirect } from './.vitepress/theme/redirect';
+import { getRedirect } from './redirect';
 
 test.each([
   ['http://localhost:1234/mermaid/#/flowchart.md', 'syntax/flowchart.html'],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5de78bdb1..ebb71f65e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -173,8 +173,8 @@ importers:
         specifier: ^1.0.4-alpha.15
         version: 1.0.4-alpha.15_s3edpouswd4dgoi2en7bdlrp54
       vitest:
-        specifier: ^0.25.1
-        version: 0.25.1_iyb77cyw3lw7duusvxyjdsflhu
+        specifier: ^0.25.3
+        version: 0.25.3_iyb77cyw3lw7duusvxyjdsflhu
 
   packages/mermaid:
     dependencies:
@@ -11214,6 +11214,54 @@ packages:
       - terser
     dev: true
 
+  /vitest/0.25.3_iyb77cyw3lw7duusvxyjdsflhu:
+    resolution: {integrity: sha512-/UzHfXIKsELZhL7OaM2xFlRF8HRZgAHtPctacvNK8H4vOcbJJAMEgbWNGSAK7Y9b1NBe5SeM7VTuz2RsTHFJJA==}
+    engines: {node: '>=v14.16.0'}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@vitest/browser': '*'
+      '@vitest/ui': '*'
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+    dependencies:
+      '@types/chai': 4.3.3
+      '@types/chai-subset': 1.3.3
+      '@types/node': 18.11.9
+      '@vitest/ui': 0.25.1
+      acorn: 8.8.0
+      acorn-walk: 8.2.0
+      chai: 4.3.6
+      debug: 4.3.4
+      happy-dom: 6.0.4
+      jsdom: 20.0.2
+      local-pkg: 0.4.2
+      source-map: 0.6.1
+      strip-literal: 0.4.2
+      tinybench: 2.3.1
+      tinypool: 0.3.0
+      tinyspy: 1.0.2
+      vite: 3.2.3_@types+node@18.11.9
+    transitivePeerDependencies:
+      - less
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
   /vm2/3.9.11:
     resolution: {integrity: sha512-PFG8iJRSjvvBdisowQ7iVF580DXb1uCIiGaXgm7tynMR1uTBlv7UJlB1zdv5KJ+Tmq1f0Upnj3fayoEOPpCBKg==}
     engines: {node: '>=6.0'}

From 4a4eff55c16205c90321a8cf9618460f7688dafd Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 25 Nov 2022 12:00:31 +0530
Subject: [PATCH 55/98] chore: Fix lint

---
 cSpell.json                                    | 1 +
 docs/misc/integrations.md                      | 1 +
 packages/mermaid/src/docs/misc/integrations.md | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/cSpell.json b/cSpell.json
index 428003cef..b18111c16 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -31,6 +31,7 @@
     "edgechromium",
     "faber",
     "flatmap",
+    "ftplugin",
     "gantt",
     "gitea",
     "gitgraph",
diff --git a/docs/misc/integrations.md b/docs/misc/integrations.md
index a4c9e31a5..007b9e778 100644
--- a/docs/misc/integrations.md
+++ b/docs/misc/integrations.md
@@ -122,6 +122,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
 - [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
 - [Vim](https://www.vim.org)
+  - [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid)
   - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
 - [GNU Emacs](https://www.gnu.org/software/emacs/)
   - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
diff --git a/packages/mermaid/src/docs/misc/integrations.md b/packages/mermaid/src/docs/misc/integrations.md
index 9fd4415ad..06d09634f 100644
--- a/packages/mermaid/src/docs/misc/integrations.md
+++ b/packages/mermaid/src/docs/misc/integrations.md
@@ -116,7 +116,7 @@ They also serve as proof of concept, for the variety of things that can be built
 - [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
 - [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
 - [Vim](https://www.vim.org)
-  - [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid) 
+  - [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid)
   - [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
 - [GNU Emacs](https://www.gnu.org/software/emacs/)
   - [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)

From 7508cd796d8e6b50e64503d429031e0601c9659e Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Sun, 27 Nov 2022 10:13:32 -0800
Subject: [PATCH 56/98] (minor) fix comment, comment typo

---
 packages/mermaid/src/tests/MockedD3.ts | 2 +-
 packages/mermaid/src/utils.ts          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/tests/MockedD3.ts b/packages/mermaid/src/tests/MockedD3.ts
index 24cb9043f..56787448a 100644
--- a/packages/mermaid/src/tests/MockedD3.ts
+++ b/packages/mermaid/src/tests/MockedD3.ts
@@ -99,7 +99,7 @@ export class MockedD3 {
     return this;
   }
 
-  // NOTE: Returns a HTML ELement with tag 'svg' that has _another_ 'svg' element child.
+  // NOTE: Returns a HTML Element with tag 'svg' that has _another_ 'svg' element child.
   // This allows different tests to succeed -- some need a top level 'svg' and some need a 'svg' element to be the firstChild
   // Real implementation returns an HTML Element
   public node = vi.fn().mockImplementation(() => {
diff --git a/packages/mermaid/src/utils.ts b/packages/mermaid/src/utils.ts
index 3689a01a1..19ed228f9 100644
--- a/packages/mermaid/src/utils.ts
+++ b/packages/mermaid/src/utils.ts
@@ -915,7 +915,7 @@ export function getErrorMessage(error: unknown): string {
 }
 
 /**
- * Appends <text> element with the given title, centered.
+ * Appends <text> element with the given title and css class.
  *
  * @param parent - d3 svg object to append title to
  * @param cssClass - CSS class for the <text> element containing the title

From f1bc2deafd1f8ec30ccea37d853fb944480fbed6 Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Sun, 27 Nov 2022 10:14:11 -0800
Subject: [PATCH 57/98] use MockedD3, spies in util insertTitle spec (remove
 MockD3)

---
 packages/mermaid/src/utils.spec.js | 60 +++++++++++++++++++++++-------
 1 file changed, 46 insertions(+), 14 deletions(-)

diff --git a/packages/mermaid/src/utils.spec.js b/packages/mermaid/src/utils.spec.js
index 54262f10e..769a0d0cc 100644
--- a/packages/mermaid/src/utils.spec.js
+++ b/packages/mermaid/src/utils.spec.js
@@ -4,7 +4,8 @@ import assignWithDepth from './assignWithDepth';
 import { detectType } from './diagram-api/detectType';
 import { addDiagrams } from './diagram-api/diagram-orchestration';
 import memoize from 'lodash-es/memoize';
-import { MockD3 } from 'd3';
+import { MockedD3 } from './tests/MockedD3';
+
 addDiagrams();
 
 describe('when assignWithDepth: should merge objects within objects', function () {
@@ -352,21 +353,52 @@ describe('when initializing the id generator', function () {
 });
 
 describe('when inserting titles', function () {
-  it('should do nothing when title is empty', function () {
-    const svg = MockD3('svg');
-    utils.insertTitle(svg, 'testClass', 0, '');
-    expect(svg.__children.length).toBe(0);
+  const svg = new MockedD3('svg');
+  const mockedElement = {
+    getBBox: vi.fn().mockReturnValue({ x: 10, y: 11, width: 100, height: 200 }),
+  };
+  const fauxTitle = new MockedD3('title');
+
+  beforeEach(() => {
+    svg.node = vi.fn().mockReturnValue(mockedElement);
   });
 
-  it('should insert title centered', function () {
-    const svg = MockD3('svg');
+  it('does nothing if the title is empty', function () {
+    const svg_append_spy = vi.spyOn(svg, 'append');
+    utils.insertTitle(svg, 'testClass', 0, '');
+    expect(svg_append_spy).not.toHaveBeenCalled();
+  });
+
+  it('appends the title as a text item with the given title text', function () {
+    const svg_append_spy = vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
+    const title_text_spy = vi.spyOn(fauxTitle, 'text');
+
     utils.insertTitle(svg, 'testClass', 5, 'test title');
-    expect(svg.__children.length).toBe(1);
-    const text = svg.__children[0];
-    expect(text.__name).toBe('text');
-    expect(text.text).toHaveBeenCalledWith('test title');
-    expect(text.attr).toHaveBeenCalledWith('x', 15);
-    expect(text.attr).toHaveBeenCalledWith('y', -5);
-    expect(text.attr).toHaveBeenCalledWith('class', 'testClass');
+    expect(svg_append_spy).toHaveBeenCalled();
+    expect(title_text_spy).toHaveBeenCalledWith('test title');
+  });
+
+  it('x value is the bounds x position + half of the bounds width', () => {
+    vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
+    const title_attr_spy = vi.spyOn(fauxTitle, 'attr');
+
+    utils.insertTitle(svg, 'testClass', 5, 'test title');
+    expect(title_attr_spy).toHaveBeenCalledWith('x', 10 + 100 / 2);
+  });
+
+  it('y value is - given title top margin', () => {
+    vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
+    const title_attr_spy = vi.spyOn(fauxTitle, 'attr');
+
+    utils.insertTitle(svg, 'testClass', 5, 'test title');
+    expect(title_attr_spy).toHaveBeenCalledWith('y', -5);
+  });
+
+  it('class is the given css class', () => {
+    vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
+    const title_attr_spy = vi.spyOn(fauxTitle, 'attr');
+
+    utils.insertTitle(svg, 'testClass', 5, 'test title');
+    expect(title_attr_spy).toHaveBeenCalledWith('class', 'testClass');
   });
 });

From 6e486d3c49fe3aa8a8480cf486f07a53838673ed Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Sun, 27 Nov 2022 10:32:25 -0800
Subject: [PATCH 58/98] add test for multi-line accDescr

---
 .../src/diagrams/er/parser/erDiagram.spec.js  | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
index 6131f7697..43bc13e6d 100644
--- a/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
+++ b/packages/mermaid/src/diagrams/er/parser/erDiagram.spec.js
@@ -323,18 +323,34 @@ describe('when parsing ER diagram it...', function () {
     expect(Object.keys(erDb.getEntities()).length).toBe(1);
   });
 
-  it('should allow for a accessibility title and description (accDescr)', function () {
+  describe('accessible title and description', () => {
     const teacherRole = 'is teacher of';
     const line1 = `TEACHER }o--o{ STUDENT : "${teacherRole}"`;
 
-    erDiagram.parser.parse(
-      `erDiagram
+    it('should allow for a accessibility title and description (accDescr)', function () {
+      erDiagram.parser.parse(
+        `erDiagram
       accTitle: graph title
       accDescr: this graph is about stuff
       ${line1}`
-    );
-    expect(erDb.getAccTitle()).toBe('graph title');
-    expect(erDb.getAccDescription()).toBe('this graph is about stuff');
+      );
+      expect(erDb.getAccTitle()).toBe('graph title');
+      expect(erDb.getAccDescription()).toBe('this graph is about stuff');
+    });
+
+    it('parses a multi line description (accDescr)', function () {
+      erDiagram.parser.parse(
+        `erDiagram
+      accTitle: graph title
+      accDescr { this graph is
+        about
+        stuff
+        }\n
+      ${line1}`
+      );
+      expect(erDb.getAccTitle()).toEqual('graph title');
+      expect(erDb.getAccDescription()).toEqual('this graph is\nabout\nstuff');
+    });
   });
 
   it('should allow more than one relationship between the same two entities', function () {

From 2030885fd3307829cee44a1c3187311e2dd5cae1 Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Sun, 27 Nov 2022 10:46:43 -0800
Subject: [PATCH 59/98] update /docs

---
 docs/config/setup/modules/mermaidAPI.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index ef8a08b91..e236538e0 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -20,7 +20,7 @@ Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
 
 #### Defined in
 
-[mermaidAPI.ts:73](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L73)
+[mermaidAPI.ts:72](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L72)
 
 ## Variables
 
@@ -90,7 +90,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:960](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L960)
+[mermaidAPI.ts:959](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L959)
 
 ## Functions
 
@@ -121,7 +121,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:294](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L294)
+[mermaidAPI.ts:293](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L293)
 
 ---
 
@@ -147,7 +147,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:244](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L244)
 
 ---
 
@@ -173,7 +173,7 @@ the string with all the user styles
 
 #### Defined in
 
-[mermaidAPI.ts:172](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L172)
+[mermaidAPI.ts:171](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L171)
 
 ---
 
@@ -196,7 +196,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:221](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L221)
 
 ---
 
@@ -223,7 +223,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:156](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L156)
+[mermaidAPI.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L155)
 
 ---
 
@@ -243,7 +243,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L130)
+[mermaidAPI.ts:129](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L129)
 
 ---
 
@@ -263,7 +263,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
 
 #### Defined in
 
-[mermaidAPI.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L101)
+[mermaidAPI.ts:100](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L100)
 
 ---
 
@@ -289,7 +289,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:273](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L273)
+[mermaidAPI.ts:272](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L272)
 
 ---
 
@@ -315,4 +315,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:345](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L345)
+[mermaidAPI.ts:344](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L344)

From 51119f22dffe873ef286438cadea256f75d84c66 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Sun, 27 Nov 2022 18:54:41 +0000
Subject: [PATCH 60/98] test(e2e): make gitgraph snapshots consistent

Add a commit id to 'should render a simple gitgraph with a title',
as otherwise the gitgraph renderer picks a random commit ID, and so
image snapshots will be different.
---
 cypress/integration/rendering/gitGraph.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index 0b5048b44..43f91a983 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -328,7 +328,7 @@ describe('Git Graph diagram', () => {
 title: simple gitGraph
 ---
 gitGraph
-  commit
+  commit id: "1-abcdefg"
 `,
       {}
     );

From 05b25db5ebb98b8bb8854f2e7d153c1bb3e96203 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Sun, 27 Nov 2022 19:13:53 +0000
Subject: [PATCH 61/98] chore(deps): remove dependency on `graphlib`

`graphlib` has recently been replaced with the ESM version of
graphlib bundled with
[`dagre-d3-es`](https://www.npmjs.com/package/dagre-d3-es), in commit
f687abb1 (chore: Use `graphlib` from `dagre-d3-es`, 2022-11-20)

This means we can safely remove it from our dependencies list.

Fixes: f687abb165795dfe959e87216bb111ebc7bc71cc
---
 packages/mermaid/package.json |  1 -
 pnpm-lock.yaml                | 17 +++--------------
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index 4b24fb661..4479b8d45 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -58,7 +58,6 @@
     "dagre-d3-es": "7.0.4",
     "dompurify": "2.4.1",
     "fast-clone": "^1.5.13",
-    "graphlib": "^2.1.8",
     "khroma": "^2.0.0",
     "lodash-es": "^4.17.21",
     "moment-mini": "^2.24.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ebb71f65e..3d090b7a5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -193,9 +193,6 @@ importers:
       fast-clone:
         specifier: ^1.5.13
         version: 1.5.13
-      graphlib:
-        specifier: ^2.1.8
-        version: 2.1.8
       khroma:
         specifier: ^2.0.0
         version: 2.0.0
@@ -3634,7 +3631,7 @@ packages:
   /axios/0.21.4_debug@4.3.2:
     resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
     dependencies:
-      follow-redirects: 1.15.2_debug@4.3.2
+      follow-redirects: 1.15.2
     transitivePeerDependencies:
       - debug
     dev: true
@@ -6309,7 +6306,7 @@ packages:
     resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==}
     dev: true
 
-  /follow-redirects/1.15.2_debug@4.3.2:
+  /follow-redirects/1.15.2:
     resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
     engines: {node: '>=4.0'}
     peerDependencies:
@@ -6317,8 +6314,6 @@ packages:
     peerDependenciesMeta:
       debug:
         optional: true
-    dependencies:
-      debug: 4.3.2
     dev: true
 
   /foreground-child/2.0.0:
@@ -6665,12 +6660,6 @@ packages:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
     dev: true
 
-  /graphlib/2.1.8:
-    resolution: {integrity: sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==}
-    dependencies:
-      lodash: 4.17.21
-    dev: false
-
   /gray-matter/4.0.3:
     resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
     engines: {node: '>=6.0'}
@@ -6911,7 +6900,7 @@ packages:
     engines: {node: '>=8.0.0'}
     dependencies:
       eventemitter3: 4.0.7
-      follow-redirects: 1.15.2_debug@4.3.2
+      follow-redirects: 1.15.2
       requires-port: 1.0.0
     transitivePeerDependencies:
       - debug

From 6044e9e9e820e1412515241b81e267091d43289c Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Sun, 27 Nov 2022 19:17:17 -0800
Subject: [PATCH 62/98] make test title clearer

---
 packages/mermaid/src/utils.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/utils.spec.js b/packages/mermaid/src/utils.spec.js
index 769a0d0cc..1c40cd6cc 100644
--- a/packages/mermaid/src/utils.spec.js
+++ b/packages/mermaid/src/utils.spec.js
@@ -386,7 +386,7 @@ describe('when inserting titles', function () {
     expect(title_attr_spy).toHaveBeenCalledWith('x', 10 + 100 / 2);
   });
 
-  it('y value is - given title top margin', () => {
+  it('y value is the negative of given title top margin', () => {
     vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
     const title_attr_spy = vi.spyOn(fauxTitle, 'attr');
 

From 2bf753a769ed816dab2a2ea81860ff1d02934134 Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Sun, 27 Nov 2022 19:17:37 -0800
Subject: [PATCH 63/98] use camelCase

---
 packages/mermaid/src/accessibility.spec.ts | 74 +++++++++++-----------
 packages/mermaid/src/utils.spec.js         | 24 +++----
 2 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/packages/mermaid/src/accessibility.spec.ts b/packages/mermaid/src/accessibility.spec.ts
index 57d5e8933..c633d0e15 100644
--- a/packages/mermaid/src/accessibility.spec.ts
+++ b/packages/mermaid/src/accessibility.spec.ts
@@ -8,16 +8,16 @@ describe('accessibility', () => {
   describe('setA11yDiagramInfo', () => {
     it('sets the aria-roledescription to the diagram type', () => {
       // @ts-ignore  Required to easily handle the d3 select types
-      const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+      const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
       setA11yDiagramInfo(fauxSvgNode, 'flowchart');
-      expect(svg_attr_spy).toHaveBeenCalledWith('aria-roledescription', 'flowchart');
+      expect(svgAttrSpy).toHaveBeenCalledWith('aria-roledescription', 'flowchart');
     });
 
     it('does nothing if the diagram type is empty', () => {
       // @ts-ignore  Required to easily handle the d3 select types
-      const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+      const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
       setA11yDiagramInfo(fauxSvgNode, '');
-      expect(svg_attr_spy).not.toHaveBeenCalled();
+      expect(svgAttrSpy).not.toHaveBeenCalled();
     });
   });
 
@@ -29,9 +29,9 @@ describe('accessibility', () => {
         const noInsertSvg = {
           attr: vi.fn(),
         };
-        const noInsert_attr_spy = vi.spyOn(noInsertSvg, 'attr').mockReturnValue(noInsertSvg);
+        const noInsertAttrSpy = vi.spyOn(noInsertSvg, 'attr').mockReturnValue(noInsertSvg);
         addSVGa11yTitleDescription(noInsertSvg, 'some title', 'some desc', givenId);
-        expect(noInsert_attr_spy).not.toHaveBeenCalled();
+        expect(noInsertAttrSpy).not.toHaveBeenCalled();
       });
 
       // ----------------
@@ -44,9 +44,9 @@ describe('accessibility', () => {
         givenId: string
       ) {
         // @ts-ignore Required to easily handle the d3 select types
-        const svg_attr_spy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
+        const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
         addSVGa11yTitleDescription(svgD3Node, title, desc, givenId);
-        expect(svg_attr_spy).toHaveBeenCalledWith('aria-labelledby', `chart-title-${givenId}`);
+        expect(svgAttrSpy).toHaveBeenCalledWith('aria-labelledby', `chart-title-${givenId}`);
       }
 
       function expectAriaDescribedByIsDescId(
@@ -56,9 +56,9 @@ describe('accessibility', () => {
         givenId: string
       ) {
         // @ts-ignore Required to easily handle the d3 select types
-        const svg_attr_spy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
+        const svgAttrSpy = vi.spyOn(svgD3Node, 'attr').mockReturnValue(svgD3Node);
         addSVGa11yTitleDescription(svgD3Node, title, desc, givenId);
-        expect(svg_attr_spy).toHaveBeenCalledWith('aria-describedby', `chart-desc-${givenId}`);
+        expect(svgAttrSpy).toHaveBeenCalledWith('aria-describedby', `chart-desc-${givenId}`);
       }
 
       function a11yTitleTagInserted(
@@ -90,16 +90,16 @@ describe('accessibility', () => {
         expectedPrefix: string,
         expectedText: string | null | undefined
       ) {
-        const faux_insertedD3 = new MockedD3();
-        const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_insertedD3);
+        const fauxInsertedD3 = new MockedD3();
+        const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxInsertedD3);
         // @ts-ignore  Required to easily handle the d3 select types
-        const title_attr_spy = vi.spyOn(faux_insertedD3, 'attr').mockReturnValue(faux_insertedD3);
-        const title_text_spy = vi.spyOn(faux_insertedD3, 'text');
+        const titleAttrSpy = vi.spyOn(fauxInsertedD3, 'attr').mockReturnValue(fauxInsertedD3);
+        const titleTextSpy = vi.spyOn(fauxInsertedD3, 'text');
 
         addSVGa11yTitleDescription(fauxSvgNode, title, desc, givenId);
-        expect(svg_insert_spy).toHaveBeenCalledWith(expectedPrefix, ':first-child');
-        expect(title_attr_spy).toHaveBeenCalledWith('id', `chart-${expectedPrefix}-${givenId}`);
-        expect(title_text_spy).toHaveBeenNthCalledWith(callNumber, expectedText);
+        expect(svgInsertSpy).toHaveBeenCalledWith(expectedPrefix, ':first-child');
+        expect(titleAttrSpy).toHaveBeenCalledWith('id', `chart-${expectedPrefix}-${givenId}`);
+        expect(titleTextSpy).toHaveBeenNthCalledWith(callNumber, expectedText);
       }
       // ----------------
 
@@ -135,9 +135,9 @@ describe('accessibility', () => {
 
           it('no aria-describedby is set', () => {
             // @ts-ignore Required to easily handle the d3 select types
-            const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svg_attr_spy).not.toHaveBeenCalledWith('aria-describedby', expect.anything());
+            expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-describedby', expect.anything());
           });
 
           it('inserts a title tag as the first child with the text set to the accTitle given', () => {
@@ -145,10 +145,10 @@ describe('accessibility', () => {
           });
 
           it('no description tag is inserted', () => {
-            const faux_title = new MockedD3();
-            const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_title);
+            const fauxTitle = new MockedD3();
+            const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svg_insert_spy).not.toHaveBeenCalledWith('desc', ':first-child');
+            expect(svgInsertSpy).not.toHaveBeenCalledWith('desc', ':first-child');
           });
         });
       });
@@ -161,16 +161,16 @@ describe('accessibility', () => {
 
           it('no aria-labelledby is set', () => {
             // @ts-ignore Required to easily handle the d3 select types
-            const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svg_attr_spy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything());
+            expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything());
           });
 
           it('no title tag inserted', () => {
-            const faux_title = new MockedD3();
-            const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_title);
+            const fauxTitle = new MockedD3();
+            const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svg_insert_spy).not.toHaveBeenCalledWith('title', ':first-child');
+            expect(svgInsertSpy).not.toHaveBeenCalledWith('title', ':first-child');
           });
 
           it('sets aria-describedby to the description id inserted as a child', () => {
@@ -187,30 +187,30 @@ describe('accessibility', () => {
 
           it('no aria-labelledby is set', () => {
             // @ts-ignore Required to easily handle the d3 select types
-            const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svg_attr_spy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything());
+            expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-labelledby', expect.anything());
           });
 
           it('no aria-describedby is set', () => {
             // @ts-ignore Required to easily handle the d3 select types
-            const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
+            const svgAttrSpy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svg_attr_spy).not.toHaveBeenCalledWith('aria-describedby', expect.anything());
+            expect(svgAttrSpy).not.toHaveBeenCalledWith('aria-describedby', expect.anything());
           });
 
           it('no title tag inserted', () => {
-            const faux_title = new MockedD3();
-            const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_title);
+            const fauxTitle = new MockedD3();
+            const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxTitle);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svg_insert_spy).not.toHaveBeenCalledWith('title', ':first-child');
+            expect(svgInsertSpy).not.toHaveBeenCalledWith('title', ':first-child');
           });
 
           it('no description tag inserted', () => {
-            const faux_desc = new MockedD3();
-            const svg_insert_spy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(faux_desc);
+            const fauxDesc = new MockedD3();
+            const svgInsertSpy = vi.spyOn(fauxSvgNode, 'insert').mockReturnValue(fauxDesc);
             addSVGa11yTitleDescription(fauxSvgNode, a11yTitle, a11yDesc, givenId);
-            expect(svg_insert_spy).not.toHaveBeenCalledWith('desc', ':first-child');
+            expect(svgInsertSpy).not.toHaveBeenCalledWith('desc', ':first-child');
           });
         });
       });
diff --git a/packages/mermaid/src/utils.spec.js b/packages/mermaid/src/utils.spec.js
index 1c40cd6cc..e983d21c8 100644
--- a/packages/mermaid/src/utils.spec.js
+++ b/packages/mermaid/src/utils.spec.js
@@ -364,41 +364,41 @@ describe('when inserting titles', function () {
   });
 
   it('does nothing if the title is empty', function () {
-    const svg_append_spy = vi.spyOn(svg, 'append');
+    const svgAppendSpy = vi.spyOn(svg, 'append');
     utils.insertTitle(svg, 'testClass', 0, '');
-    expect(svg_append_spy).not.toHaveBeenCalled();
+    expect(svgAppendSpy).not.toHaveBeenCalled();
   });
 
   it('appends the title as a text item with the given title text', function () {
-    const svg_append_spy = vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
-    const title_text_spy = vi.spyOn(fauxTitle, 'text');
+    const svgAppendSpy = vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
+    const titleTextSpy = vi.spyOn(fauxTitle, 'text');
 
     utils.insertTitle(svg, 'testClass', 5, 'test title');
-    expect(svg_append_spy).toHaveBeenCalled();
-    expect(title_text_spy).toHaveBeenCalledWith('test title');
+    expect(svgAppendSpy).toHaveBeenCalled();
+    expect(titleTextSpy).toHaveBeenCalledWith('test title');
   });
 
   it('x value is the bounds x position + half of the bounds width', () => {
     vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
-    const title_attr_spy = vi.spyOn(fauxTitle, 'attr');
+    const titleAttrSpy = vi.spyOn(fauxTitle, 'attr');
 
     utils.insertTitle(svg, 'testClass', 5, 'test title');
-    expect(title_attr_spy).toHaveBeenCalledWith('x', 10 + 100 / 2);
+    expect(titleAttrSpy).toHaveBeenCalledWith('x', 10 + 100 / 2);
   });
 
   it('y value is the negative of given title top margin', () => {
     vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
-    const title_attr_spy = vi.spyOn(fauxTitle, 'attr');
+    const titleAttrSpy = vi.spyOn(fauxTitle, 'attr');
 
     utils.insertTitle(svg, 'testClass', 5, 'test title');
-    expect(title_attr_spy).toHaveBeenCalledWith('y', -5);
+    expect(titleAttrSpy).toHaveBeenCalledWith('y', -5);
   });
 
   it('class is the given css class', () => {
     vi.spyOn(svg, 'append').mockReturnValue(fauxTitle);
-    const title_attr_spy = vi.spyOn(fauxTitle, 'attr');
+    const titleAttrSpy = vi.spyOn(fauxTitle, 'attr');
 
     utils.insertTitle(svg, 'testClass', 5, 'test title');
-    expect(title_attr_spy).toHaveBeenCalledWith('class', 'testClass');
+    expect(titleAttrSpy).toHaveBeenCalledWith('class', 'testClass');
   });
 });

From 2984e4fc574fe579209c3696786e85734025426e Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 28 Nov 2022 04:53:07 +0000
Subject: [PATCH 64/98] chore(deps): update pnpm to v7.17.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index aec72da87..3d01db5d7 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "9.2.2",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@7.17.0",
+  "packageManager": "pnpm@7.17.1",
   "keywords": [
     "diagram",
     "markdown",

From 527a3df083079acfed49327577a193bc1556d6a1 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 28 Nov 2022 15:44:19 +0530
Subject: [PATCH 65/98] Revert "sync"

This reverts commit a88a467d4569837f491e67a97f1a70ca570e087b.
---
 docs/syntax/classDiagram.md                   | 36 +++++++++----------
 .../docs/.vitepress/mermaid-markdown-all.ts   | 13 +++++--
 .../src/docs/.vitepress/theme/Mermaid.vue     | 10 ++++--
 3 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
index 5870d0743..62ce5125e 100644
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -267,16 +267,16 @@ A relationship is a general term covering the specific types of logical connecti
 
 There are eight different types of relations defined for classes under UML which are currently supported:
 
-| Type    | Description   |
-| ------- | ------------- |
-| `<\|--` | Inheritance   |
-| `\*--`  | Composition   |
-| `o--`   | Aggregation   |
-| `-->`   | Association   |
-| `--`    | Link (Solid)  |
-| `..>`   | Dependency    |
-| `..\|>` | Realization   |
-| `..`    | Link (Dashed) |
+| Type | Description   |
+| ---- | ------------- | ----------- |
+| <    | --            | Inheritance |
+| \*-- | Composition   |
+| o--  | Aggregation   |
+| -->  | Association   |
+| --   | Link (Solid)  |
+| ..>  | Dependency    |
+| ..   | >             | Realization |
+| ..   | Link (Dashed) |
 
 ```mermaid-example
 classDiagram
@@ -372,14 +372,14 @@ Here is the syntax:
 
 Where `Relation Type` can be one of:
 
-| Type  | Description |
-| ----- | ----------- |
-| `<\|` | Inheritance |
-| `\*`  | Composition |
-| `o`   | Aggregation |
-| `>`   | Association |
-| `<`   | Association |
-| `\|>` | Realization |
+| Type | Description |
+| ---- | ----------- | ----------- |
+| <    |             | Inheritance |
+| \*   | Composition |
+| o    | Aggregation |
+| >    | Association |
+| <    | Association |
+|      | >           | Realization |
 
 And `Link` can be one of:
 
diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
index c157cf679..5dff951e9 100644
--- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
+++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
@@ -34,10 +34,17 @@ const MermaidExample = async (md: MarkdownRenderer) => {
       </div>`;
     } else if (token.info.trim() === 'mermaid') {
       const key = index;
-      return `
-      ${key}
+      return ` ${key}
+      <Suspense> 
+      <template #default>
       <Mermaid id="mermaid-${key}"  graph="${encodeURIComponent(token.content)}"></Mermaid>
-      `;
+      </template>
+        <!-- loading state via #fallback slot -->
+        <template #fallback>
+          Loading...
+        </template>
+      </Suspense>
+`;
     }
     if (token.info.trim() === 'warning') {
       return `<div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>${token.content}}</p></div>`;
diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
index 90ece11a6..fe2510efd 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
+++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
@@ -5,7 +5,11 @@
 <script setup>
 import { onMounted, onUnmounted, ref, toRaw } from 'vue';
 import mermaid from 'mermaid';
+import mindmap from '@mermaid-js/mermaid-mindmap';
 import { useData } from 'vitepress';
+try {
+  await mermaid.registerExternalDiagrams([mindmap]);
+} catch (e) {}
 
 const props = defineProps({
   graph: {
@@ -32,7 +36,7 @@ let mermaidConfig = {
 onMounted(async () => {
   mut = new MutationObserver(() => renderChart());
   mut.observe(document.documentElement, { attributes: true });
-  renderChart();
+  await renderChart();
 
   //refresh images on first render
   const hasImages = /<img([\w\W]+?)>/.exec(decodeURIComponent(props.graph))?.length > 0;
@@ -59,7 +63,7 @@ onMounted(async () => {
 
 onUnmounted(() => mut.disconnect());
 
-const renderChart = () => {
+const renderChart = async () => {
   console.log('rendering chart' + props.id + props.graph);
   let hasDarkClass = document.documentElement.classList.contains('dark');
   mermaidConfig.theme = mermaidPageTheme || mermaidConfig.theme;
@@ -69,6 +73,6 @@ const renderChart = () => {
     ...mermaidConfig,
     theme: hasDarkClass ? 'dark' : mermaidPageTheme,
   });
-  svg.value = mermaid.render(props.id, decodeURIComponent(props.graph));
+  svg.value = await mermaid.renderAsync(props.id, decodeURIComponent(props.graph));
 };
 </script>

From e302ee383a41443183cb8dde0eb890c514123628 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 28 Nov 2022 16:11:24 +0530
Subject: [PATCH 66/98] fix Async rendering

---
 docs/config/setup/modules/config.md           | 16 ++++-----
 docs/syntax/classDiagram.md                   | 36 +++++++++----------
 .../docs/.vitepress/mermaid-markdown-all.ts   |  2 +-
 .../src/docs/.vitepress/theme/Mermaid.vue     | 26 ++++----------
 .../src/docs/.vitepress/theme/mermaid.ts      | 16 +++++++++
 5 files changed, 50 insertions(+), 46 deletions(-)
 create mode 100644 packages/mermaid/src/docs/.vitepress/theme/mermaid.ts

diff --git a/docs/config/setup/modules/config.md b/docs/config/setup/modules/config.md
index 993a7627b..afa903055 100644
--- a/docs/config/setup/modules/config.md
+++ b/docs/config/setup/modules/config.md
@@ -36,7 +36,7 @@ Pushes in a directive to the configuration
 
 #### Defined in
 
-[config.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L193)
+[config.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L194)
 
 ---
 
@@ -60,7 +60,7 @@ The currentConfig
 
 #### Defined in
 
-[config.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L138)
+[config.ts:139](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L139)
 
 ---
 
@@ -84,7 +84,7 @@ The siteConfig
 
 #### Defined in
 
-[config.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L97)
+[config.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L98)
 
 ---
 
@@ -118,7 +118,7 @@ The siteConfig
 
 #### Defined in
 
-[config.ts:225](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L225)
+[config.ts:226](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L226)
 
 ---
 
@@ -147,7 +147,7 @@ options in-place
 
 #### Defined in
 
-[config.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L153)
+[config.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L154)
 
 ---
 
@@ -167,7 +167,7 @@ options in-place
 
 #### Defined in
 
-[config.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L76)
+[config.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L77)
 
 ---
 
@@ -199,7 +199,7 @@ The currentConfig merged with the sanitized conf
 
 #### Defined in
 
-[config.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L114)
+[config.ts:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L115)
 
 ---
 
@@ -273,4 +273,4 @@ The new siteConfig
 
 #### Defined in
 
-[config.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L80)
+[config.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L81)
diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
index 62ce5125e..5870d0743 100644
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -267,16 +267,16 @@ A relationship is a general term covering the specific types of logical connecti
 
 There are eight different types of relations defined for classes under UML which are currently supported:
 
-| Type | Description   |
-| ---- | ------------- | ----------- |
-| <    | --            | Inheritance |
-| \*-- | Composition   |
-| o--  | Aggregation   |
-| -->  | Association   |
-| --   | Link (Solid)  |
-| ..>  | Dependency    |
-| ..   | >             | Realization |
-| ..   | Link (Dashed) |
+| Type    | Description   |
+| ------- | ------------- |
+| `<\|--` | Inheritance   |
+| `\*--`  | Composition   |
+| `o--`   | Aggregation   |
+| `-->`   | Association   |
+| `--`    | Link (Solid)  |
+| `..>`   | Dependency    |
+| `..\|>` | Realization   |
+| `..`    | Link (Dashed) |
 
 ```mermaid-example
 classDiagram
@@ -372,14 +372,14 @@ Here is the syntax:
 
 Where `Relation Type` can be one of:
 
-| Type | Description |
-| ---- | ----------- | ----------- |
-| <    |             | Inheritance |
-| \*   | Composition |
-| o    | Aggregation |
-| >    | Association |
-| <    | Association |
-|      | >           | Realization |
+| Type  | Description |
+| ----- | ----------- |
+| `<\|` | Inheritance |
+| `\*`  | Composition |
+| `o`   | Aggregation |
+| `>`   | Association |
+| `<`   | Association |
+| `\|>` | Realization |
 
 And `Link` can be one of:
 
diff --git a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
index 5dff951e9..14340462c 100644
--- a/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
+++ b/packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts
@@ -34,7 +34,7 @@ const MermaidExample = async (md: MarkdownRenderer) => {
       </div>`;
     } else if (token.info.trim() === 'mermaid') {
       const key = index;
-      return ` ${key}
+      return `
       <Suspense> 
       <template #default>
       <Mermaid id="mermaid-${key}"  graph="${encodeURIComponent(token.content)}"></Mermaid>
diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
index fe2510efd..9ae9c9f3b 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
+++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
@@ -3,13 +3,8 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref, toRaw } from 'vue';
-import mermaid from 'mermaid';
-import mindmap from '@mermaid-js/mermaid-mindmap';
-import { useData } from 'vitepress';
-try {
-  await mermaid.registerExternalDiagrams([mindmap]);
-} catch (e) {}
+import { onMounted, onUnmounted, ref } from 'vue';
+import { render } from './mermaid';
 
 const props = defineProps({
   graph: {
@@ -25,10 +20,7 @@ const props = defineProps({
 const svg = ref(null);
 let mut = null;
 
-const { page } = useData();
-const { frontmatter } = toRaw(page.value);
-const mermaidPageTheme = frontmatter.mermaidTheme || '';
-let mermaidConfig = {
+const mermaidConfig = {
   securityLevel: 'loose',
   startOnLoad: false,
 };
@@ -65,14 +57,10 @@ onUnmounted(() => mut.disconnect());
 
 const renderChart = async () => {
   console.log('rendering chart' + props.id + props.graph);
-  let hasDarkClass = document.documentElement.classList.contains('dark');
-  mermaidConfig.theme = mermaidPageTheme || mermaidConfig.theme;
-  if (hasDarkClass) mermaidConfig.theme = 'dark';
+  const hasDarkClass = document.documentElement.classList.contains('dark');
+  mermaidConfig.theme = hasDarkClass ? 'dark' : 'default';
 
-  mermaid.initialize({
-    ...mermaidConfig,
-    theme: hasDarkClass ? 'dark' : mermaidPageTheme,
-  });
-  svg.value = await mermaid.renderAsync(props.id, decodeURIComponent(props.graph));
+  console.log({ mermaidConfig });
+  svg.value = await render(props.id, decodeURIComponent(props.graph), mermaidConfig);
 };
 </script>
diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
new file mode 100644
index 000000000..a1a69e9cd
--- /dev/null
+++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
@@ -0,0 +1,16 @@
+import mermaid, { type MermaidConfig } from 'mermaid';
+import mindmap from '@mermaid-js/mermaid-mindmap';
+
+try {
+  await mermaid.registerExternalDiagrams([mindmap]);
+} catch (e) {
+  console.error(e);
+}
+
+export const render = async (id: string, code: string, config: MermaidConfig): Promise<string> => {
+  mermaid.initialize(config);
+  // console.log('rendering', id, code);
+  const svg = await mermaid.renderAsync(id, code);
+  // console.log('rendered', id, code);
+  return svg;
+};

From bfbb7996e9a77ea18162858feef72c546f2f1a21 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 28 Nov 2022 16:21:05 +0530
Subject: [PATCH 67/98] fix lines

---
 docs/config/setup/modules/config.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/config/setup/modules/config.md b/docs/config/setup/modules/config.md
index afa903055..993a7627b 100644
--- a/docs/config/setup/modules/config.md
+++ b/docs/config/setup/modules/config.md
@@ -36,7 +36,7 @@ Pushes in a directive to the configuration
 
 #### Defined in
 
-[config.ts:194](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L194)
+[config.ts:193](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L193)
 
 ---
 
@@ -60,7 +60,7 @@ The currentConfig
 
 #### Defined in
 
-[config.ts:139](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L139)
+[config.ts:138](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L138)
 
 ---
 
@@ -84,7 +84,7 @@ The siteConfig
 
 #### Defined in
 
-[config.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L98)
+[config.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L97)
 
 ---
 
@@ -118,7 +118,7 @@ The siteConfig
 
 #### Defined in
 
-[config.ts:226](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L226)
+[config.ts:225](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L225)
 
 ---
 
@@ -147,7 +147,7 @@ options in-place
 
 #### Defined in
 
-[config.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L154)
+[config.ts:153](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L153)
 
 ---
 
@@ -167,7 +167,7 @@ options in-place
 
 #### Defined in
 
-[config.ts:77](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L77)
+[config.ts:76](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L76)
 
 ---
 
@@ -199,7 +199,7 @@ The currentConfig merged with the sanitized conf
 
 #### Defined in
 
-[config.ts:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L115)
+[config.ts:114](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L114)
 
 ---
 
@@ -273,4 +273,4 @@ The new siteConfig
 
 #### Defined in
 
-[config.ts:81](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L81)
+[config.ts:80](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.ts#L80)

From 3a6dd61f6595c4a751780f75dddebd15a50974ce Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 28 Nov 2022 16:26:10 +0530
Subject: [PATCH 68/98] cleanup

---
 packages/mermaid/src/docs/.vitepress/theme/mermaid.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
index a1a69e9cd..b287346f9 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
@@ -9,8 +9,6 @@ try {
 
 export const render = async (id: string, code: string, config: MermaidConfig): Promise<string> => {
   mermaid.initialize(config);
-  // console.log('rendering', id, code);
   const svg = await mermaid.renderAsync(id, code);
-  // console.log('rendered', id, code);
   return svg;
 };

From e8703a59ec719e44aa26067420c8412b9c409f5a Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 29 Nov 2022 00:34:29 +0530
Subject: [PATCH 69/98] feat: Add @include support to docs

---
 docs/index.html.todo                      | 179 ----------------------
 packages/mermaid/src/docs.mts             |  26 +++-
 packages/mermaid/src/docs/index.html.todo | 179 ----------------------
 3 files changed, 23 insertions(+), 361 deletions(-)
 delete mode 100644 docs/index.html.todo
 delete mode 100644 packages/mermaid/src/docs/index.html.todo

diff --git a/docs/index.html.todo b/docs/index.html.todo
deleted file mode 100644
index 8728338f9..000000000
--- a/docs/index.html.todo
+++ /dev/null
@@ -1,179 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>
-      mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams,
-      gantt charts and git graphs.
-    </title>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta
-      name="description"
-      content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs."
-    />
-    <meta
-      name="viewport"
-      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
-    />
-    <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
-    <link rel="stylesheet" href="theme.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
-    />
-    <script
-      defer
-      data-domain="mermaid-js.github.io"
-      src="https://plausible.io/js/plausible.js"
-    ></script>
-    <script>
-      const require = {
-        paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
-      };
-    </script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/loader.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.nls.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.js"></script>
-    <script>
-      exports = {};
-    </script>
-    <script src="https://unpkg.com/monaco-mermaid/browser.js"></script>
-
-    <style>
-      .markdown-section {
-        max-width: 1200px;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div id="app"></div>
-    <script type="module">
-      import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
-      import mindmap from 'https://unpkg.com/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap.esm.min.mjs';
-      await mermaid.registerExternalDiagrams([mindmap]);
-
-      window.mermaid = mermaid;
-      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-      const conf = {
-        logLevel: 4,
-        startOnLoad: true,
-        themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
-      };
-      if (isDarkMode) conf.theme = 'dark';
-
-      async function loadMermaid() {
-        mermaid.parseError = (e) => {
-          console.log('parse error', e); // eslint-disable-line
-        };
-        await mermaid.registerExternalDiagrams([mindmap]);
-        mermaid.initialize(conf);
-        console.log('mermaid initialized'); // eslint-disable-line
-      }
-
-      await loadMermaid();
-    </script>
-    <script>
-      let initEditor = exports.default;
-      let parser = new DOMParser();
-      let currentCodeExample = 0;
-      let colorize = [];
-      let num = 0;
-
-      function colorizeEverything(html) {
-        initEditor(monaco);
-        return new Promise((resolve, reject) => {
-          monaco.editor.setTheme('mermaid');
-          const parsed = parser.parseFromString(html, 'text/html').body;
-          Promise.all(
-            [...parsed.querySelectorAll('pre[id*="code"]')].map((codeBlock) =>
-              monaco.editor.colorize(codeBlock.innerText, 'mermaid')
-            )
-          ).then((result) => {
-            parsed
-              .querySelectorAll('pre[id*="code"]')
-              .forEach((codeBlock, index) => (codeBlock.innerHTML = result[index]));
-            resolve(parsed.innerHTML);
-          });
-        });
-      }
-
-      function escapeHTML(html) {
-        return html
-          .replaceAll('&', '&amp;')
-          .replaceAll('<', '&lt;')
-          .replaceAll('>', '&gt;')
-          .replaceAll('"', '&quot;')
-          .replaceAll("'", '&apos;');
-      }
-
-      window.$docsify = {
-        search: 'auto',
-        name: 'mermaid',
-        repo: 'https://github.com/mermaid-js/mermaid',
-        loadSidebar: true,
-        mergeNavbar: true,
-        maxLevel: 4,
-        subMaxLevel: 2,
-        markdown: {
-          renderer: {
-            code: function (code, lang) {
-              if (lang === 'mermaid-example') {
-                console.log('An example'); // eslint-disable-line
-                currentCodeExample++;
-                colorize.push(currentCodeExample);
-                return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
-              } else if (lang === 'mermaid') {
-                return '<pre class="mermaid">' + code + '</pre>';
-              }
-              return this.origin.code.apply(this, arguments);
-            },
-            heading: function (text) {
-              if (text.includes('THIS IS AN AUTOGENERATED FILE. DO NOT EDIT')) {
-                return '';
-              }
-              return this.origin.heading.apply(this, arguments);
-            },
-          },
-        },
-        plugins: [
-          function (hook, vm) {
-            hook.beforeEach(function (html) {
-              url = 'https://github.com/mermaid-js/mermaid/blob/develop/src/docs/' + vm.route.file;
-              const editHtml = '[:memo: Edit this Page](' + url + ')\n';
-              return editHtml + html;
-            });
-            // Invoked on each page load after new HTML has been appended to the DOM
-            hook.doneEach(async function () {
-              await mermaid.init();
-            });
-
-            hook.afterEach(function (html, next) {
-              next(html);
-              (async () => {
-                while (!window.hasOwnProperty('monaco'))
-                  await new Promise((resolve) => setTimeout(resolve, 1000));
-                colorizeEverything(html).then(
-                  (newHTML) =>
-                    (document.querySelector('article.markdown-section').innerHTML = newHTML)
-                );
-              })();
-            });
-          },
-        ],
-      };
-    </script>
-    <script>
-      window.onhashchange = function (a) {
-        // if (location && ga) {
-        //   ga('send', 'pageview', location.hash);
-        // }
-      };
-    </script>
-    <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
-    <!-- <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script> -->
-    <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-coffeescript.min.js"></script>
-  </body>
-</html>
diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index aa57a3c01..364ba09fc 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -35,7 +35,7 @@ import { exec } from 'child_process';
 import { globby } from 'globby';
 import { JSDOM } from 'jsdom';
 import type { Code, Root } from 'mdast';
-import { posix, dirname, relative } from 'path';
+import { posix, dirname, relative, join } from 'path';
 import prettier from 'prettier';
 import { remark } from 'remark';
 import chokidar from 'chokidar';
@@ -66,6 +66,9 @@ const LOGMSG_COPIED = `, and copied to ${FINAL_DOCS_DIR}`;
 const WARN_DOCSDIR_DOESNT_MATCH = `Changed files were transformed in ${SOURCE_DOCS_DIR} but do not match the files in ${FINAL_DOCS_DIR}. Please run 'pnpm --filter mermaid run docs:build' after making changes to ${SOURCE_DOCS_DIR} to update the ${FINAL_DOCS_DIR} directory with the transformed files.`;
 
 const prettierConfig = prettier.resolveConfig.sync('.') ?? {};
+// From https://github.com/vuejs/vitepress/blob/428eec3750d6b5648a77ac52d88128df0554d4d1/src/node/markdownToVue.ts#L20-L21
+const includesRE = /<!--\s*@include:\s*(.*?)\s*-->/g;
+const includedFiles: Set<string> = new Set();
 
 let filesWereTransformed = false;
 
@@ -151,6 +154,19 @@ const transformToBlockQuote = (content: string, type: string) => {
 const injectPlaceholders = (text: string): string =>
   text.replace(/<MERMAID_VERSION>/g, MERMAID_MAJOR_VERSION).replace(/<CDN_URL>/g, CDN_URL);
 
+const transformIncludeStatements = (file: string, text: string): string => {
+  // resolve includes - src https://github.com/vuejs/vitepress/blob/428eec3750d6b5648a77ac52d88128df0554d4d1/src/node/markdownToVue.ts#L65-L76
+  return text.replace(includesRE, (m, m1) => {
+    try {
+      const includePath = join(dirname(file), m1);
+      const content = readSyncedUTF8file(includePath);
+      includedFiles.add(changeToFinalDocDir(includePath));
+      return content;
+    } catch (error) {
+      throw new Error(`Failed to resolve include "${m1}" in "${file}": ${error}`);
+    }
+  });
+};
 /**
  * Transform a markdown file and write the transformed file to the directory for published
  * documentation
@@ -164,8 +180,7 @@ const injectPlaceholders = (text: string): string =>
  * @param file {string} name of the file that will be verified
  */
 const transformMarkdown = (file: string) => {
-  const doc = injectPlaceholders(readSyncedUTF8file(file));
-
+  const doc = injectPlaceholders(transformIncludeStatements(file, readSyncedUTF8file(file)));
   const ast: Root = remark.parse(doc);
   const out = flatmap(ast, (c: Code) => {
     if (c.type !== 'code' || !c.lang) {
@@ -270,6 +285,11 @@ const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
   console.log(`${action} ${mdFiles.length} markdown files...`);
   mdFiles.forEach(transformMarkdown);
 
+  for (const includedFile of includedFiles) {
+    rmSync(includedFile);
+    console.log(`Removed ${includedFile} as it was used inside an @include block.`);
+  }
+
   const htmlFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.html')]);
   const htmlFiles = await getFilesFromGlobs(htmlFileGlobs);
   console.log(`${action} ${htmlFiles.length} html files...`);
diff --git a/packages/mermaid/src/docs/index.html.todo b/packages/mermaid/src/docs/index.html.todo
deleted file mode 100644
index 8728338f9..000000000
--- a/packages/mermaid/src/docs/index.html.todo
+++ /dev/null
@@ -1,179 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>
-      mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams,
-      gantt charts and git graphs.
-    </title>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <meta
-      name="description"
-      content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs."
-    />
-    <meta
-      name="viewport"
-      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
-    />
-    <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
-    <link rel="stylesheet" href="theme.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
-    />
-    <script
-      defer
-      data-domain="mermaid-js.github.io"
-      src="https://plausible.io/js/plausible.js"
-    ></script>
-    <script>
-      const require = {
-        paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs' },
-      };
-    </script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/loader.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.nls.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/editor/editor.main.js"></script>
-    <script>
-      exports = {};
-    </script>
-    <script src="https://unpkg.com/monaco-mermaid/browser.js"></script>
-
-    <style>
-      .markdown-section {
-        max-width: 1200px;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div id="app"></div>
-    <script type="module">
-      import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
-      import mindmap from 'https://unpkg.com/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap.esm.min.mjs';
-      await mermaid.registerExternalDiagrams([mindmap]);
-
-      window.mermaid = mermaid;
-      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-      const conf = {
-        logLevel: 4,
-        startOnLoad: true,
-        themeCSS: '.label { font-family: Source Sans Pro,Helvetica Neue,Arial,sans-serif; }',
-      };
-      if (isDarkMode) conf.theme = 'dark';
-
-      async function loadMermaid() {
-        mermaid.parseError = (e) => {
-          console.log('parse error', e); // eslint-disable-line
-        };
-        await mermaid.registerExternalDiagrams([mindmap]);
-        mermaid.initialize(conf);
-        console.log('mermaid initialized'); // eslint-disable-line
-      }
-
-      await loadMermaid();
-    </script>
-    <script>
-      let initEditor = exports.default;
-      let parser = new DOMParser();
-      let currentCodeExample = 0;
-      let colorize = [];
-      let num = 0;
-
-      function colorizeEverything(html) {
-        initEditor(monaco);
-        return new Promise((resolve, reject) => {
-          monaco.editor.setTheme('mermaid');
-          const parsed = parser.parseFromString(html, 'text/html').body;
-          Promise.all(
-            [...parsed.querySelectorAll('pre[id*="code"]')].map((codeBlock) =>
-              monaco.editor.colorize(codeBlock.innerText, 'mermaid')
-            )
-          ).then((result) => {
-            parsed
-              .querySelectorAll('pre[id*="code"]')
-              .forEach((codeBlock, index) => (codeBlock.innerHTML = result[index]));
-            resolve(parsed.innerHTML);
-          });
-        });
-      }
-
-      function escapeHTML(html) {
-        return html
-          .replaceAll('&', '&amp;')
-          .replaceAll('<', '&lt;')
-          .replaceAll('>', '&gt;')
-          .replaceAll('"', '&quot;')
-          .replaceAll("'", '&apos;');
-      }
-
-      window.$docsify = {
-        search: 'auto',
-        name: 'mermaid',
-        repo: 'https://github.com/mermaid-js/mermaid',
-        loadSidebar: true,
-        mergeNavbar: true,
-        maxLevel: 4,
-        subMaxLevel: 2,
-        markdown: {
-          renderer: {
-            code: function (code, lang) {
-              if (lang === 'mermaid-example') {
-                console.log('An example'); // eslint-disable-line
-                currentCodeExample++;
-                colorize.push(currentCodeExample);
-                return '<pre id="code' + currentCodeExample + '">' + escapeHTML(code) + '</pre>';
-              } else if (lang === 'mermaid') {
-                return '<pre class="mermaid">' + code + '</pre>';
-              }
-              return this.origin.code.apply(this, arguments);
-            },
-            heading: function (text) {
-              if (text.includes('THIS IS AN AUTOGENERATED FILE. DO NOT EDIT')) {
-                return '';
-              }
-              return this.origin.heading.apply(this, arguments);
-            },
-          },
-        },
-        plugins: [
-          function (hook, vm) {
-            hook.beforeEach(function (html) {
-              url = 'https://github.com/mermaid-js/mermaid/blob/develop/src/docs/' + vm.route.file;
-              const editHtml = '[:memo: Edit this Page](' + url + ')\n';
-              return editHtml + html;
-            });
-            // Invoked on each page load after new HTML has been appended to the DOM
-            hook.doneEach(async function () {
-              await mermaid.init();
-            });
-
-            hook.afterEach(function (html, next) {
-              next(html);
-              (async () => {
-                while (!window.hasOwnProperty('monaco'))
-                  await new Promise((resolve) => setTimeout(resolve, 1000));
-                colorizeEverything(html).then(
-                  (newHTML) =>
-                    (document.querySelector('article.markdown-section').innerHTML = newHTML)
-                );
-              })();
-            });
-          },
-        ],
-      };
-    </script>
-    <script>
-      window.onhashchange = function (a) {
-        // if (location && ga) {
-        //   ga('send', 'pageview', location.hash);
-        // }
-      };
-    </script>
-    <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
-    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
-    <!-- <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script> -->
-    <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-coffeescript.min.js"></script>
-  </body>
-</html>

From 2a5c2b58deae60dd9c4a5fb1c1228bf86e4f1894 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 29 Nov 2022 00:34:57 +0530
Subject: [PATCH 70/98] feat: Add @include example to docs

---
 packages/mermaid/src/docs/intro/examples.md | 100 +++++++++++++++++++
 packages/mermaid/src/docs/intro/index.md    | 101 +-------------------
 2 files changed, 101 insertions(+), 100 deletions(-)
 create mode 100644 packages/mermaid/src/docs/intro/examples.md

diff --git a/packages/mermaid/src/docs/intro/examples.md b/packages/mermaid/src/docs/intro/examples.md
new file mode 100644
index 000000000..f4cb3b929
--- /dev/null
+++ b/packages/mermaid/src/docs/intro/examples.md
@@ -0,0 +1,100 @@
+## Diagram Types
+
+### [Flowchart](../syntax/flowchart.md?id=flowcharts-basic-syntax)
+
+```mermaid-example
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+### [Sequence diagram](../syntax/sequenceDiagram.md)
+
+```mermaid-example
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+
+### [Gantt diagram](../syntax/gantt.md)
+
+```mermaid-example
+gantt
+dateFormat  YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+section A section
+Completed task            :done,    des1, 2014-01-06,2014-01-08
+Active task               :active,  des2, 2014-01-09, 3d
+Future task               :         des3, after des2, 5d
+Future task2               :         des4, after des3, 5d
+```
+
+### [Class diagram](../syntax/classDiagram.md)
+
+```mermaid-example
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+Class03 *-- Class04
+Class05 o-- Class06
+Class07 .. Class08
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class08 <--> C2: Cool label
+```
+
+### [Git graph](../syntax/gitgraph.md)
+
+```mermaid-example
+    gitGraph
+       commit
+       commit
+       branch develop
+       commit
+       commit
+       commit
+       checkout main
+       commit
+       commit
+```
+
+### [Entity Relationship Diagram - :exclamation: experimental](../syntax/entityRelationshipDiagram.md)
+
+```mermaid-example
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+
+```
+
+### [User Journey Diagram](../syntax/userJourney.md)
+
+```mermaid-example
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+```
diff --git a/packages/mermaid/src/docs/intro/index.md b/packages/mermaid/src/docs/intro/index.md
index b58321e75..df1aa3b62 100644
--- a/packages/mermaid/src/docs/intro/index.md
+++ b/packages/mermaid/src/docs/intro/index.md
@@ -44,106 +44,7 @@ In our release process we rely heavily on visual regression tests using [applito
 <svg width="170" height="32" viewBox="0 0 170 32" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" maskUnits="userSpaceOnUse" x="27" y="0" width="143" height="32"><path fill-rule="evenodd" clip-rule="evenodd" d="M27.732.227h141.391v31.19H27.733V.227z" fill="#fff"></path></mask><g mask="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M153.851 22.562l1.971-3.298c1.291 1.219 3.837 2.402 5.988 2.402 1.971 0 2.903-.753 2.903-1.829 0-2.832-10.253-.502-10.253-7.313 0-2.904 2.51-5.45 7.099-5.45 2.904 0 5.234 1.004 6.955 2.367l-1.829 3.226c-1.039-1.075-3.011-2.008-5.126-2.008-1.65 0-2.725.717-2.725 1.685 0 2.546 10.289.395 10.289 7.386 0 3.19-2.724 5.52-7.528 5.52-3.012 0-5.916-1.003-7.744-2.688zm-5.7 2.259h4.553V.908h-4.553v23.913zm-6.273-8.676c0-2.689-1.578-5.02-4.446-5.02-2.832 0-4.409 2.331-4.409 5.02 0 2.724 1.577 5.055 4.409 5.055 2.868 0 4.446-2.33 4.446-5.055zm-13.588 0c0-4.912 3.442-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.7 0-9.142-4.195-9.142-9.106zm-5.628 0c0-2.689-1.577-5.02-4.445-5.02-2.832 0-4.41 2.331-4.41 5.02 0 2.724 1.578 5.055 4.41 5.055 2.868 0 4.445-2.33 4.445-5.055zm-13.587 0c0-4.912 3.441-9.07 9.142-9.07 5.736 0 9.178 4.158 9.178 9.07 0 4.911-3.442 9.106-9.178 9.106-5.701 0-9.142-4.195-9.142-9.106zm-8.425 4.338v-8.999h-2.868v-3.98h2.868V2.773h4.553v4.733h3.514v3.979h-3.514v7.78c0 1.111.574 1.936 1.578 1.936.681 0 1.326-.251 1.577-.538l.968 3.478c-.681.609-1.9 1.11-3.8 1.11-3.191 0-4.876-1.648-4.876-4.767zm-8.962 4.338h4.553V7.505h-4.553V24.82zm-.43-21.905a2.685 2.685 0 012.688-2.69c1.506 0 2.725 1.184 2.725 2.69a2.724 2.724 0 01-2.725 2.724c-1.47 0-2.688-1.219-2.688-2.724zM84.482 24.82h4.553V.908h-4.553v23.913zm-6.165-8.676c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82h-4.553V7.504H70v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.907-.86-5.342-2.653zm-10.718-6.453c0-2.976-1.793-5.02-4.41-5.02-1.47 0-3.119.825-3.908 1.973v6.094c.753 1.111 2.438 2.008 3.908 2.008 2.617 0 4.41-2.044 4.41-5.055zm-8.318 6.453v8.82H46.41V7.504h4.553v2.187c1.327-1.685 3.227-2.618 5.342-2.618 4.446 0 7.672 3.299 7.672 9.07 0 5.773-3.226 9.107-7.672 9.107-2.043 0-3.908-.86-5.342-2.653zm-11.758-1.936V18.51c-.753-1.004-2.187-1.542-3.657-1.542-1.793 0-3.263.968-3.263 2.617 0 1.65 1.47 2.582 3.263 2.582 1.47 0 2.904-.502 3.657-1.506zm0 4.159v-1.829c-1.183 1.434-3.227 2.259-5.485 2.259-2.761 0-5.988-1.864-5.988-5.736 0-4.087 3.227-5.593 5.988-5.593 2.33 0 4.337.753 5.485 2.115V13.85c0-1.756-1.506-2.904-3.8-2.904-1.829 0-3.55.717-4.984 2.044L28.63 9.8c2.115-1.901 4.84-2.726 7.564-2.726 3.98 0 7.6 1.578 7.6 6.561v11.186h-4.588z" fill="#00A298"></path></g><path fill-rule="evenodd" clip-rule="evenodd" d="M14.934 16.177c0 1.287-.136 2.541-.391 3.752-1.666-1.039-3.87-2.288-6.777-3.752 2.907-1.465 5.11-2.714 6.777-3.753.255 1.211.39 2.466.39 3.753m4.6-7.666V4.486a78.064 78.064 0 01-4.336 3.567c-1.551-2.367-3.533-4.038-6.14-5.207C11.1 4.658 12.504 6.7 13.564 9.262 5.35 15.155 0 16.177 0 16.177s5.35 1.021 13.564 6.915c-1.06 2.563-2.463 4.603-4.507 6.415 2.607-1.169 4.589-2.84 6.14-5.207a77.978 77.978 0 014.336 3.568v-4.025s-.492-.82-2.846-2.492c.6-1.611.93-3.354.93-5.174a14.8 14.8 0 00-.93-5.174c2.354-1.673 2.846-2.492 2.846-2.492" fill="#00A298"></path></svg>
 </a>
 
-## Diagram Types
-
-### [Flowchart](../syntax/flowchart.md?id=flowcharts-basic-syntax)
-
-```mermaid-example
-graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;
-```
-
-### [Sequence diagram](../syntax/sequenceDiagram.md)
-
-```mermaid-example
-sequenceDiagram
-    participant Alice
-    participant Bob
-    Alice->>John: Hello John, how are you?
-    loop Healthcheck
-        John->>John: Fight against hypochondria
-    end
-    Note right of John: Rational thoughts <br/>prevail!
-    John-->>Alice: Great!
-    John->>Bob: How about you?
-    Bob-->>John: Jolly good!
-```
-
-### [Gantt diagram](../syntax/gantt.md)
-
-```mermaid-example
-gantt
-dateFormat  YYYY-MM-DD
-title Adding GANTT diagram to mermaid
-excludes weekdays 2014-01-10
-
-section A section
-Completed task            :done,    des1, 2014-01-06,2014-01-08
-Active task               :active,  des2, 2014-01-09, 3d
-Future task               :         des3, after des2, 5d
-Future task2               :         des4, after des3, 5d
-```
-
-### [Class diagram](../syntax/classDiagram.md)
-
-```mermaid-example
-classDiagram
-Class01 <|-- AveryLongClass : Cool
-Class03 *-- Class04
-Class05 o-- Class06
-Class07 .. Class08
-Class09 --> C2 : Where am i?
-Class09 --* C3
-Class09 --|> Class07
-Class07 : equals()
-Class07 : Object[] elementData
-Class01 : size()
-Class01 : int chimp
-Class01 : int gorilla
-Class08 <--> C2: Cool label
-```
-
-### [Git graph](../syntax/gitgraph.md)
-
-```mermaid-example
-    gitGraph
-       commit
-       commit
-       branch develop
-       commit
-       commit
-       commit
-       checkout main
-       commit
-       commit
-```
-
-### [Entity Relationship Diagram - :exclamation: experimental](../syntax/entityRelationshipDiagram.md)
-
-```mermaid-example
-erDiagram
-    CUSTOMER ||--o{ ORDER : places
-    ORDER ||--|{ LINE-ITEM : contains
-    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
-
-```
-
-### [User Journey Diagram](../syntax/userJourney.md)
-
-```mermaid-example
-journey
-    title My working day
-    section Go to work
-      Make tea: 5: Me
-      Go upstairs: 3: Me
-      Do work: 1: Me, Cat
-    section Go home
-      Go downstairs: 5: Me
-      Sit down: 5: Me
-```
+<!--@include: ./examples.md -->
 
 ## Installation
 

From 316f612bde157be60c5b75701c8827379c0770fa Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 29 Nov 2022 00:54:01 +0530
Subject: [PATCH 71/98] feat: Add @include support to docs

---
 packages/mermaid/src/docs.mts | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index 364ba09fc..846e92212 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -70,7 +70,7 @@ const prettierConfig = prettier.resolveConfig.sync('.') ?? {};
 const includesRE = /<!--\s*@include:\s*(.*?)\s*-->/g;
 const includedFiles: Set<string> = new Set();
 
-let filesWereTransformed = false;
+const filesTransformed: Set<string> = new Set();
 
 const generateHeader = (file: string): string => {
   // path from file in docs/* to repo root, e.g ../ or ../../ */
@@ -120,10 +120,10 @@ const logWasOrShouldBeTransformed = (filename: string, wasCopied: boolean) => {
  * transformed contents to the final documentation directory if the doCopy flag is true. Log
  * messages to the console.
  *
- * @param {string} filename Name of the file that will be verified
- * @param {boolean} [doCopy=false] Whether we should copy that transformedContents to the final
+ * @param filename Name of the file that will be verified
+ * @param doCopy?=false Whether we should copy that transformedContents to the final
  *   documentation directory. Default is `false`
- * @param {string} [transformedContent] New contents for the file
+ * @param transformedContent? New contents for the file
  */
 const copyTransformedContents = (filename: string, doCopy = false, transformedContent?: string) => {
   const fileInFinalDocDir = changeToFinalDocDir(filename);
@@ -135,7 +135,7 @@ const copyTransformedContents = (filename: string, doCopy = false, transformedCo
     return; // Files are same, skip.
   }
 
-  filesWereTransformed = true;
+  filesTransformed.add(fileInFinalDocDir);
   if (doCopy) {
     writeFileSync(fileInFinalDocDir, newBuffer);
   }
@@ -286,7 +286,8 @@ const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
   mdFiles.forEach(transformMarkdown);
 
   for (const includedFile of includedFiles) {
-    rmSync(includedFile);
+    rmSync(includedFile, { force: true });
+    filesTransformed.delete(includedFile);
     console.log(`Removed ${includedFile} as it was used inside an @include block.`);
   }
 
@@ -302,7 +303,7 @@ const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
     copyTransformedContents(file, !verifyOnly); // no transformation
   });
 
-  if (filesWereTransformed) {
+  if (filesTransformed.size > 0) {
     if (verifyOnly) {
       console.log(WARN_DOCSDIR_DOESNT_MATCH);
       process.exit(1);

From 931d56947a39ea80e48650f98a9afa0e7605fb1c Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Wed, 30 Nov 2022 11:27:13 +0100
Subject: [PATCH 72/98] Minor change

---
 cypress/platform/knsv2.html | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index 084b8151e..ba7f41601 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -56,10 +56,11 @@
   <body>
     <div>Security check</div>
     <pre id="diagram" class="mermaid">
-flowchart TD
-    A --> B
-    B --> C
-    A --> C
+graph LR
+    subgraph external
+        inside
+    end
+    outside --> external
     </pre>
     <pre id="diagram" class="mermaid">
 mindmap
@@ -91,9 +92,13 @@ mindmap
     <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
     <!-- <script src="./mermaid-example-diagram-detector.js"></script>    -->
     <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.7/dist/mermaid.min.js"></script> -->
-    <script src="./mermaid.js"></script>
+    <!-- <script src="./mermaid.js"></script> -->
 
-    <script>
+    <script type="module">
+      import mindmap from '../../packages/mermaid-mindmap/src/detector';
+      // import example from '../../packages/mermaid-example-diagram/src/detector';
+      import mermaid from '../../packages/mermaid/src/mermaid';
+      await mermaid.registerExternalDiagrams([mindmap]);
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
       };

From 6f2b0c43cb91b97431667c209dfc2e267da8e23c Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Wed, 30 Nov 2022 12:43:27 -0800
Subject: [PATCH 73/98] delete functions not used in diagrams/c4 code (dead
 code)

---
 packages/mermaid/src/diagrams/c4/svgDraw.js | 200 +-------------------
 1 file changed, 1 insertion(+), 199 deletions(-)

diff --git a/packages/mermaid/src/diagrams/c4/svgDraw.js b/packages/mermaid/src/diagrams/c4/svgDraw.js
index d9727f074..d3d66a80d 100644
--- a/packages/mermaid/src/diagrams/c4/svgDraw.js
+++ b/packages/mermaid/src/diagrams/c4/svgDraw.js
@@ -35,183 +35,6 @@ export const drawImage = function (elem, width, height, x, y, link) {
   imageElem.attr('xlink:href', sanitizedLink);
 };
 
-export const drawEmbeddedImage = function (elem, x, y, link) {
-  const imageElem = elem.append('use');
-  imageElem.attr('x', x);
-  imageElem.attr('y', y);
-  var sanitizedLink = sanitizeUrl(link);
-  imageElem.attr('xlink:href', '#' + sanitizedLink);
-};
-
-export const drawText = function (elem, textData) {
-  let prevTextHeight = 0,
-    textHeight = 0;
-  const lines = textData.text.split(common.lineBreakRegex);
-
-  let textElems = [];
-  let dy = 0;
-  let yfunc = () => textData.y;
-  if (
-    textData.valign !== undefined &&
-    textData.textMargin !== undefined &&
-    textData.textMargin > 0
-  ) {
-    switch (textData.valign) {
-      case 'top':
-      case 'start':
-        yfunc = () => Math.round(textData.y + textData.textMargin);
-        break;
-      case 'middle':
-      case 'center':
-        yfunc = () =>
-          Math.round(textData.y + (prevTextHeight + textHeight + textData.textMargin) / 2);
-        break;
-      case 'bottom':
-      case 'end':
-        yfunc = () =>
-          Math.round(
-            textData.y +
-              (prevTextHeight + textHeight + 2 * textData.textMargin) -
-              textData.textMargin
-          );
-        break;
-    }
-  }
-  if (
-    textData.anchor !== undefined &&
-    textData.textMargin !== undefined &&
-    textData.width !== undefined
-  ) {
-    switch (textData.anchor) {
-      case 'left':
-      case 'start':
-        textData.x = Math.round(textData.x + textData.textMargin);
-        textData.anchor = 'start';
-        textData.dominantBaseline = 'text-after-edge';
-        textData.alignmentBaseline = 'middle';
-        break;
-      case 'middle':
-      case 'center':
-        textData.x = Math.round(textData.x + textData.width / 2);
-        textData.anchor = 'middle';
-        textData.dominantBaseline = 'middle';
-        textData.alignmentBaseline = 'middle';
-        break;
-      case 'right':
-      case 'end':
-        textData.x = Math.round(textData.x + textData.width - textData.textMargin);
-        textData.anchor = 'end';
-        textData.dominantBaseline = 'text-before-edge';
-        textData.alignmentBaseline = 'middle';
-        break;
-    }
-  }
-  for (let [i, line] of lines.entries()) {
-    if (
-      textData.textMargin !== undefined &&
-      textData.textMargin === 0 &&
-      textData.fontSize !== undefined
-    ) {
-      dy = i * textData.fontSize;
-    }
-
-    const textElem = elem.append('text');
-    textElem.attr('x', textData.x);
-    textElem.attr('y', yfunc());
-    if (textData.anchor !== undefined) {
-      textElem
-        .attr('text-anchor', textData.anchor)
-        .attr('dominant-baseline', textData.dominantBaseline)
-        .attr('alignment-baseline', textData.alignmentBaseline);
-    }
-    if (textData.fontFamily !== undefined) {
-      textElem.style('font-family', textData.fontFamily);
-    }
-    if (textData.fontSize !== undefined) {
-      textElem.style('font-size', textData.fontSize);
-    }
-    if (textData.fontWeight !== undefined) {
-      textElem.style('font-weight', textData.fontWeight);
-    }
-    if (textData.fill !== undefined) {
-      textElem.attr('fill', textData.fill);
-    }
-    if (textData.class !== undefined) {
-      textElem.attr('class', textData.class);
-    }
-    if (textData.dy !== undefined) {
-      textElem.attr('dy', textData.dy);
-    } else if (dy !== 0) {
-      textElem.attr('dy', dy);
-    }
-
-    if (textData.tspan) {
-      const span = textElem.append('tspan');
-      span.attr('x', textData.x);
-      if (textData.fill !== undefined) {
-        span.attr('fill', textData.fill);
-      }
-      span.text(line);
-    } else {
-      textElem.text(line);
-    }
-    if (
-      textData.valign !== undefined &&
-      textData.textMargin !== undefined &&
-      textData.textMargin > 0
-    ) {
-      textHeight += (textElem._groups || textElem)[0][0].getBBox().height;
-      prevTextHeight = textHeight;
-    }
-
-    textElems.push(textElem);
-  }
-
-  return textElems;
-};
-
-export const drawLabel = function (elem, txtObject) {
-  /**
-   * @param {any} x
-   * @param {any} y
-   * @param {any} width
-   * @param {any} height
-   * @param {any} cut
-   * @returns {any}
-   */
-  function genPoints(x, y, width, height, cut) {
-    return (
-      x +
-      ',' +
-      y +
-      ' ' +
-      (x + width) +
-      ',' +
-      y +
-      ' ' +
-      (x + width) +
-      ',' +
-      (y + height - cut) +
-      ' ' +
-      (x + width - cut * 1.2) +
-      ',' +
-      (y + height) +
-      ' ' +
-      x +
-      ',' +
-      (y + height)
-    );
-  }
-  const polygon = elem.append('polygon');
-  polygon.attr('points', genPoints(txtObject.x, txtObject.y, txtObject.width, txtObject.height, 7));
-  polygon.attr('class', 'labelBox');
-
-  txtObject.y = txtObject.y + txtObject.height / 2;
-
-  drawText(elem, txtObject);
-  return polygon;
-};
-
 export const drawRels = (elem, rels, conf) => {
   const relsElem = elem.append('g');
   let i = 0;
@@ -744,23 +567,6 @@ export const insertArrowCrossHead = function (elem) {
   // this is actual shape for arrowhead
 };
 
-export const getTextObj = function () {
-  return {
-    x: 0,
-    y: 0,
-    fill: undefined,
-    anchor: undefined,
-    style: '#666',
-    width: undefined,
-    height: undefined,
-    textMargin: 0,
-    rx: 0,
-    ry: 0,
-    tspan: true,
-    valign: undefined,
-  };
-};
-
 export const getNoteRect = function () {
   return {
     x: 0,
@@ -895,13 +701,10 @@ const _drawTextCandidateFunc = (function () {
 
 export default {
   drawRect,
-  drawText,
-  drawLabel,
   drawBoundary,
   drawC4Shape,
   drawRels,
   drawImage,
-  drawEmbeddedImage,
   insertArrowHead,
   insertArrowEnd,
   insertArrowFilledHead,
@@ -910,7 +713,6 @@ export default {
   insertDatabaseIcon,
   insertComputerIcon,
   insertClockIcon,
-  getTextObj,
   getNoteRect,
-  sanitizeUrl,
+  sanitizeUrl, // TODO why is this exported?
 };

From cd0eae28079658a5ff30e8a8bb6e99b8ae568334 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 1 Dec 2022 11:23:50 +0530
Subject: [PATCH 74/98] chore: Switch back from unpkg to jsdelivr

---
 docs/config/usage.md              | 4 ++--
 docs/intro/index.md               | 2 +-
 docs/intro/n00b-gettingStarted.md | 4 ++--
 docs/syntax/mindmap.md            | 4 ++--
 packages/mermaid/src/docs.mts     | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/config/usage.md b/docs/config/usage.md
index 29273e9b5..476806d8f 100644
--- a/docs/config/usage.md
+++ b/docs/config/usage.md
@@ -62,7 +62,7 @@ Example:
 
 ```html
 <script type="module">
-  import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
   mermaid.initialize({ startOnLoad: true });
 </script>
 ```
@@ -85,7 +85,7 @@ Example:
       B-->D(fa:fa-spinner);
     </pre>
     <script type="module">
-      import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
       mermaid.initialize({ startOnLoad: true });
     </script>
   </body>
diff --git a/docs/intro/index.md b/docs/intro/index.md
index b8a27acff..5aa068e27 100644
--- a/docs/intro/index.md
+++ b/docs/intro/index.md
@@ -267,7 +267,7 @@ To Deploy Mermaid:
 
 ```html
 <script type="module">
-  import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
   mermaid.initialize({ startOnLoad: true });
 </script>
 ```
diff --git a/docs/intro/n00b-gettingStarted.md b/docs/intro/n00b-gettingStarted.md
index 2f422758e..7354f0181 100644
--- a/docs/intro/n00b-gettingStarted.md
+++ b/docs/intro/n00b-gettingStarted.md
@@ -128,7 +128,7 @@ b. The importing of mermaid library through the `mermaid.esm.js` or `mermaid.esm
 ```html
 <body>
   <script type="module">
-    import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
     mermaid.initialize({ startOnLoad: true });
   </script>
 </body>
@@ -172,7 +172,7 @@ Please refer to the [Mindmap](./mindmap.md?id=integrating-with-your-librarywebsi
     </pre>
 
     <script type="module">
-      import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
       mermaid.initialize({ startOnLoad: true });
     </script>
   </body>
diff --git a/docs/syntax/mindmap.md b/docs/syntax/mindmap.md
index e789646bc..0214a5512 100644
--- a/docs/syntax/mindmap.md
+++ b/docs/syntax/mindmap.md
@@ -260,8 +260,8 @@ Mindmap uses the experimental lazy loading & async rendering features which coul
 
 ```html
 <script type="module">
-  import mermaid from 'https://unpkg.com/mermaid@9/dist/mermaid.esm.min.mjs';
-  import mindmap from 'https://unpkg.com/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap.esm.min.mjs';
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
+  import mindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-mindmap@9/dist/mermaid-mindmap.esm.min.mjs';
   await mermaid.registerExternalDiagrams([mindmap]);
 </script>
 ```
diff --git a/packages/mermaid/src/docs.mts b/packages/mermaid/src/docs.mts
index 846e92212..313d1f2de 100644
--- a/packages/mermaid/src/docs.mts
+++ b/packages/mermaid/src/docs.mts
@@ -46,7 +46,7 @@ import flatmap from 'unist-util-flatmap';
 const MERMAID_MAJOR_VERSION = (
   JSON.parse(readFileSync('../mermaid/package.json', 'utf8')).version as string
 ).split('.')[0];
-const CDN_URL = 'https://unpkg.com'; // https://cdn.jsdelivr.net/npm
+const CDN_URL = 'https://cdn.jsdelivr.net/npm'; // 'https://unpkg.com';
 
 const verifyOnly: boolean = process.argv.includes('--verify');
 const git: boolean = process.argv.includes('--git');

From 1e30e33ad321826f55f2ebdf19db52b7f747cf19 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Thu, 1 Dec 2022 13:51:50 +0530
Subject: [PATCH 75/98] chore: Fix mindmap link

---
 docs/intro/n00b-gettingStarted.md                      | 2 +-
 packages/mermaid/src/docs/intro/n00b-gettingStarted.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/intro/n00b-gettingStarted.md b/docs/intro/n00b-gettingStarted.md
index 7354f0181..2a05a1fdd 100644
--- a/docs/intro/n00b-gettingStarted.md
+++ b/docs/intro/n00b-gettingStarted.md
@@ -145,7 +145,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 
 ### Adding external diagrams to mermaid
 
-Please refer to the [Mindmap](./mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
+Please refer to the [Mindmap](../syntax/mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
 
 ### Working Examples
 
diff --git a/packages/mermaid/src/docs/intro/n00b-gettingStarted.md b/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
index e17bbffb9..a4dd7662f 100644
--- a/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
+++ b/packages/mermaid/src/docs/intro/n00b-gettingStarted.md
@@ -128,7 +128,7 @@ Rendering in Mermaid is initialized by `mermaid.initialize()` call. You can plac
 
 ### Adding external diagrams to mermaid
 
-Please refer to the [Mindmap](./mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
+Please refer to the [Mindmap](../syntax/mindmap.md?id=integrating-with-your-librarywebsite) section for more information.
 
 ### Working Examples
 

From bfe3f309d26f632eee2ed7f2a7543f7258c832d3 Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Thu, 1 Dec 2022 10:09:43 -0800
Subject: [PATCH 76/98] remove typeof

---
 packages/mermaid/src/accessibility.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/accessibility.ts b/packages/mermaid/src/accessibility.ts
index d70ad00d3..b9e088e0b 100644
--- a/packages/mermaid/src/accessibility.ts
+++ b/packages/mermaid/src/accessibility.ts
@@ -34,7 +34,7 @@ export function addSVGa11yTitleDescription(
   a11yDesc: string | null | undefined,
   baseId: string
 ) {
-  if (typeof svg.insert === 'undefined') {
+  if (svg.insert === undefined) {
     return;
   }
 

From c7471f17558856c8f91dec7b8e4908f84c4df350 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 3 Dec 2022 19:10:05 +1100
Subject: [PATCH 77/98] Fixed the issue that theme-switch does not work on
 docs.

---
 packages/mermaid/src/docs/.vitepress/theme/mermaid.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
index b287346f9..fef090ea9 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
@@ -8,7 +8,9 @@ try {
 }
 
 export const render = async (id: string, code: string, config: MermaidConfig): Promise<string> => {
-  mermaid.initialize(config);
+  // make a clone of config, so we don't mutate the original
+  const mermaidConfig = { ...config };
+  mermaid.initialize(mermaidConfig);
   const svg = await mermaid.renderAsync(id, code);
   return svg;
 };

From a1e4ffb3f08e38bb02945e33f02b7992c3f99a2c Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Sat, 3 Dec 2022 19:30:09 +1100
Subject: [PATCH 78/98] Fixed an issue that diagrams disappear from docs pages
 when switching themes or reloading pages

---
 packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
index 9ae9c9f3b..c99141601 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
+++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
@@ -61,6 +61,13 @@ const renderChart = async () => {
   mermaidConfig.theme = hasDarkClass ? 'dark' : 'default';
 
   console.log({ mermaidConfig });
-  svg.value = await render(props.id, decodeURIComponent(props.graph), mermaidConfig);
+  let svgCode = await render(props.id, decodeURIComponent(props.graph), mermaidConfig);
+  // This is a hack to force v-html to re-render, otherwise the diagram disappears
+  // when **switching themes** or **reloading the page**.
+  // The cause is that the diagram is deleted during rendering (out of Vue's knowledge).
+  // Because svgCode does NOT change, v-html does not re-render.
+  // This is not required for all diagrams, but it is required for c4c, mindmap and zenuml.
+  const salt = Math.random().toString(36).substring(7);
+  svg.value = `${svgCode} <span style="display: none">${salt}</span>`;
 };
 </script>

From b68fee7e65274f6f8a52cc26cb9e3094c3bb88a1 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Sat, 3 Dec 2022 11:41:29 +0100
Subject: [PATCH 79/98] Small fix for issue #3881

---
 cypress/platform/knsv2.html                   | 39 +++++++------------
 .../mermaid/src/dagre-wrapper/clusters.js     |  8 ++--
 2 files changed, 18 insertions(+), 29 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index ba7f41601..fb2fe7f9b 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -56,29 +56,24 @@
   <body>
     <div>Security check</div>
     <pre id="diagram" class="mermaid">
-graph LR
+flowchart LR
     subgraph external
-        inside
+      subgraph internal
+          inside
+      end
     end
-    outside --> external
+    outside --> inside
     </pre>
     <pre id="diagram" class="mermaid">
-mindmap
-  root
-    child1((Circle))
-        grandchild 1
-        grandchild 2
-    child2(Round rectangle)
-        grandchild 3
-        grandchild 4
-    child3[Square]
-        grandchild 5
-        ::icon(mdi mdi-fire)
-        gc6((grand<br/>child 6))
-        ::icon(mdi mdi-fire)
-          gc7((grand<br/>grand<br/>child 8))
-        </pre>
-    <pre id="diagram" class="mermaid">
+flowchart LR
+    subgraph parent
+      subgraph childB
+        grandchild
+      end
+    end
+    foo --> childA        </pre
+    >
+    <pre id="diagram" class="mermaid2">
       gantt
         title Style today marker (vertical line should be 5px wide and half-transparent blue)
         dateFormat YYYY-MM-DD
@@ -103,7 +98,7 @@ mindmap
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'base',
+        theme: 'default',
         startOnLoad: true,
         logLevel: 0,
         flowchart: {
@@ -114,10 +109,6 @@ mindmap
           useMaxWidth: false,
         },
         useMaxWidth: false,
-        lazyLoadedDiagrams: [
-          './mermaid-mindmap-detector.esm.mjs',
-          './mermaid-example-diagram-detector.esm.mjs',
-        ],
       });
       function callback() {
         alert('It worked');
diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js
index 40729dead..57c3ff513 100644
--- a/packages/mermaid/src/dagre-wrapper/clusters.js
+++ b/packages/mermaid/src/dagre-wrapper/clusters.js
@@ -59,11 +59,9 @@ const rect = (parent, node) => {
   // Center the label
   label.attr(
     'transform',
-    'translate(' +
-      (node.x - bbox.width / 2) +
-      ', ' +
-      (node.y - node.height / 2 + node.padding / 3) +
-      ')'
+    // This puts the labal on top of the box instead of inside it
+    // 'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2 - bbox.height) + ')'
+    'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
   );
 
   const rectBox = rect.node().getBBox();

From 4124d186d0b3b270c281db26d6c6d233626c6333 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Sat, 3 Dec 2022 13:21:10 +0100
Subject: [PATCH 80/98] Fix for issue #3882 moving the label when the path has
 been modified

---
 cypress/platform/knsv2.html                 | 32 ++++++++++++---------
 packages/mermaid/src/dagre-wrapper/edges.js | 20 ++++++++++---
 2 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index fb2fe7f9b..83472039d 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -57,22 +57,28 @@
     <div>Security check</div>
     <pre id="diagram" class="mermaid">
 flowchart LR
-    subgraph external
-      subgraph internal
-          inside
-      end
+    %% Actors
+    A
+    subgraph Sub
+        B --> C
     end
-    outside --> inside
+
+    %% Accusations
+    A --L --> Sub
+
+    %% Offense
+    B --> A
+
     </pre>
     <pre id="diagram" class="mermaid">
-flowchart LR
-    subgraph parent
-      subgraph childB
-        grandchild
-      end
-    end
-    foo --> childA        </pre
-    >
+      stateDiagram-v2
+
+      [*] --> S1
+      S1 --> S2: long line using<br/>should work
+      S1 --> S3: long line using <br>should work
+      S1 --> S4: long line using \\nshould work
+
+    </pre>
     <pre id="diagram" class="mermaid2">
       gantt
         title Style today marker (vertical line should be 5px wide and half-transparent blue)
diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
index 5213d0684..bb22cee83 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -130,9 +130,21 @@ export const positionEdgeLabel = (edge, paths) => {
     if (path) {
       //   // debugger;
       const pos = utils.calcLabelPosition(path);
-      log.info('Moving label from (', x, ',', y, ') to (', pos.x, ',', pos.y, ') abc78');
-      // x = pos.x;
-      // y = pos.y;
+      log.info(
+        'Moving label ' + edge.label + ' from (',
+        x,
+        ',',
+        y,
+        ') to (',
+        pos.x,
+        ',',
+        pos.y,
+        ') abc78'
+      );
+      if (paths.updatedPath) {
+        x = pos.x;
+        y = pos.y;
+      }
     }
     el.attr('transform', 'translate(' + x + ', ' + y + ')');
   }
@@ -463,7 +475,7 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
     .attr('style', edge.style);
 
   // DEBUG code, adds a red circle at each edge coordinate
-  // edge.points.forEach(point => {
+  // edge.points.forEach((point) => {
   //   elem
   //     .append('circle')
   //     .style('stroke', 'red')

From d451a0c508b4ffd7ffd5cd82de8a3088fea308f0 Mon Sep 17 00:00:00 2001
From: steph <steph@huynhicode.dev>
Date: Sun, 4 Dec 2022 21:20:09 -0800
Subject: [PATCH 81/98] refactor theming doc

---
 docs/config/theming.md                      | 814 ++++----------------
 packages/mermaid/src/docs/config/theming.md | 551 ++++---------
 2 files changed, 276 insertions(+), 1089 deletions(-)

diff --git a/docs/config/theming.md b/docs/config/theming.md
index cfd86caa0..6c12ee75f 100644
--- a/docs/config/theming.md
+++ b/docs/config/theming.md
@@ -6,31 +6,27 @@
 
 # Theme Configuration
 
-With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of themes. The intent is to increase the customizability and ease of styling for mermaid diagrams.
+Dynamic and integrated theme configuration was introduced in Mermaid version 8.7.0.
 
-The theme can be altered by changing the root level variable `theme` variable in the configuration. To change it for the whole site you must use the `initialize` call. To do it for just for a single diagram you can use the `%%init%%` directive
+Themes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the `initialize` call is used. For diagram specific customization, the `init` directive is used.
 
-Themes follow and build upon the Levels of Configuration, and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](./8.6.0_docs.md).
+## Available Themes
 
-## Deployable Themes
+1.  **default** - This is the default theme for all diagrams.
 
-The following are a list of **Deployable themes**, sample `%%init%%` directives and `initialize` calls.
+2.  **neutral** - This theme is great for black and white documents that will be printed.
 
-1.  **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes.
+3.  **dark** - This theme goes well with dark-colored elements or dark-mode.
 
-2.  **forest**- A theme full of light greens that is easy on the eyes.
+4.  **forest** - This theme contains shades of green.
 
-3.  **dark**- A theme that would go well with other dark-colored elements.
+5.  **base** - This is the only theme that can be modified. Use this theme as the base for customizations.
 
-4.  **default**- The default theme for all diagrams.
+## Site-wide Theme
 
-5.  **neutral**- The theme to be used for black and white printing.
+To customize themes site-wide, call the `initialize` method on the `mermaidAPI`.
 
-## Site-wide Themes
-
-Site-wide themes are declared via `initialize` by site owners.
-
-Example of `Initialize` call setting `theme` to `base`:
+Example of `initialize` call setting `theme` to `base`:
 
 ```javascript
 mermaidAPI.initialize({
@@ -39,28 +35,52 @@ mermaidAPI.initialize({
 });
 ```
 
-**Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams.
+## Diagram-specific Themes
 
-## Themes at the Local or Current Level
+To customize the theme of an individual diagram, use the `init` directive.
 
-When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
+Example of `init` directive setting the `theme` to `forest`:
 
 ```mermaid-example
-%%{init: {'theme':'base'}}%%
+%%{init: {'theme':'forest'}}%%
   graph TD
     a --> b
 ```
 
 ```mermaid
-%%{init: {'theme':'base'}}%%
+%%{init: {'theme':'forest'}}%%
   graph TD
     a --> b
 ```
 
-Here is an example of how `%%init%%` can set the theme to 'base', this assumes that `themeVariables` are set to default:
+> **Reminder**: the only theme that can be customed is the `base` theme. The following section covers how to use `themeVariables` for customizations.
+
+## Customizing Themes with `themeVariables`
+
+To make a custom theme, modify `themeVariables` via `init`.
+
+You will need to use the [base](#available-themes) theme as it is the only modifiable theme.
+
+| Parameter      | Description                          | Type   | Properties                                                                                          |
+| -------------- | ------------------------------------ | ------ | --------------------------------------------------------------------------------------------------- |
+| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables-reference-table)) |
+
+Example of modifying `themeVariables` using the `init` directive:
 
 ```mermaid-example
-%%{init: {'theme':'base'}}%%
+%%{
+  init: {
+    'theme': 'base',
+    'themeVariables': {
+      'primaryColor': '#BB2528',
+      'primaryTextColor': '#fff',
+      'primaryBorderColor': '#7C0000',
+      'lineColor': '#F8B229',
+      'secondaryColor': '#006100',
+      'tertiaryColor': '#fff'
+    }
+  }
+}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
           B --> C{Let me think}
@@ -78,7 +98,19 @@ Here is an example of how `%%init%%` can set the theme to 'base', this assumes t
 ```
 
 ```mermaid
-%%{init: {'theme':'base'}}%%
+%%{
+  init: {
+    'theme': 'base',
+    'themeVariables': {
+      'primaryColor': '#BB2528',
+      'primaryTextColor': '#fff',
+      'primaryBorderColor': '#7C0000',
+      'lineColor': '#F8B229',
+      'secondaryColor': '#006100',
+      'tertiaryColor': '#fff'
+    }
+  }
+}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
           B --> C{Let me think}
@@ -95,649 +127,93 @@ Here is an example of how `%%init%%` can set the theme to 'base', this assumes t
           end
 ```
 
-# List of Themes
-
-# Customizing Themes with `themeVariables`
-
-The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`.
-
-| Parameter      | Description                                                        | Type  | Required | Objects contained                  |
-| -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- |
-| themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor |
-
-**Here is an example of overriding `primaryColor` through `themeVariables` and giving everything a different look, using `%%init%%`.**
-
-```mermaid-example
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-```mermaid
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-**Notes:**
-Leaving it empty will set all variable values to default.
-
-## Color and Color Calculation:
-
-Color definitions have certain interactions in mermaid, this is in order to ensure visibility for diagrams. Mermaid will adjust some variables automatically, when colors are changed in order to compensate and maintain readability.
-
-**The Default Value Column** to the right of the Variable column will denote the Variable paired/associated with the Variable on the left and the nature of this pairing or association. If it for instance says primaryColor it means that it gets primaryColor as default value. If it says "based on primaryColor" it means that it is calculated/ derived from primaryColor. This calculation can be primary color inversion, a change of hue, darkening or lightening by 10%, etc.
-
-You can create your own themes, by changing any of the given variables below. If you are using a dark background, set dark mode to true to adjust the colors. It is possible to override the calculations using the variable names below, with `%%init%%` if you wish to style it differently.
-
-## Theme Variables Reference Table
-
-> **Note**
-> Variables that are unique to some diagrams can be affected by changes in Theme Variables
-
-| Variable             | Default/Base/Factor value      | Calc | Description                                                                                                                      |
-| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
-| darkMode             | false                          |      | Boolean Value that dictates how to calculate colors. "true" will activate darkmode.                                              |
-| background           | #f4f4f4                        |      | Used to calculate color for items that should either be background colored or contrasting to the background.                     |
-| fontFamily           | "trebuchet ms", verdana, arial |      |                                                                                                                                  |
-| fontSize             | 16px                           |      | Font Size, in pixels                                                                                                             |
-| primaryColor         | #fff4dd                        |      | Color to be used as background in nodes, other colors will be derived from this                                                  |
-| primaryBorderColor   | based on primaryColor          | \*   | Color to be used as border in nodes using primaryColor                                                                           |
-| primaryTextColor     | based on darkMode #ddd/#333    | \*   | Color to be used as text color in nodes using primaryColor                                                                       |
-| secondaryColor       | based on primaryColor          | \*   |                                                                                                                                  |
-| secondaryBorderColor | based on secondaryColor        | \*   | Color to be used as border in nodes using secondaryColor                                                                         |
-| secondaryTextColor   | based on secondaryColor        | \*   | Color to be used as text color in nodes using secondaryColor                                                                     |
-| tertiaryColor        | based on primaryColor          | \*   |                                                                                                                                  |
-| tertiaryBorderColor  | based on tertiaryColor         | \*   | Color to be used as border in nodes using tertiaryColor                                                                          |
-| tertiaryTextColor    | based on tertiaryColor         | \*   | Color to be used as text color in nodes using tertiaryColor                                                                      |
-| noteBkgColor         | #fff5ad                        |      | Color used as background in notes                                                                                                |
-| noteTextColor        | #333                           |      | Text color in note rectangles.                                                                                                   |
-| noteBorderColor      | based on noteBkgColor          | \*   | Border color in note rectangles.                                                                                                 |
-| lineColor            | based on background            | \*   |                                                                                                                                  |
-| textColor            | based on primaryTextColor      | \*   | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
-| mainBkg              | based on primaryColor          | \*   | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc                                  |
-| errorBkgColor        | tertiaryColor                  | \*   | Color for syntax error message                                                                                                   |
-| errorTextColor       | tertiaryTextColor              | \*   | Color for syntax error message                                                                                                   |
-
-# What follows are Variables, specific to different diagrams and charts.
-
-## Some Theme Variables serve as, or affect the Default Values for Specific Diagram Variables, unless changed using `%%init%%` .
-
-## Flowchart
-
-| Variable            | Default/ Associated Value | Calc | Description                  |
-| ------------------- | ------------------------- | ---- | ---------------------------- |
-| nodeBorder          | primaryBorderColor        | \*   | Node Border Color            |
-| clusterBkg          | tertiaryColor             | \*   | Background in subgraphs      |
-| clusterBorder       | tertiaryBorderColor       | \*   | Cluster Border Color         |
-| defaultLinkColor    | lineColor                 | \*   | Link Color                   |
-| titleColor          | tertiaryTextColor         | \*   | Title Color                  |
-| edgeLabelBackground | based on secondaryColor   | \*   |                              |
-| nodeTextColor       | primaryTextColor          | \*   | Color for text inside Nodes. |
-
-# sequence diagram
-
-| name                  | Default value           | Calc | Description                 |
-| --------------------- | ----------------------- | ---- | --------------------------- |
-| actorBorder           | primaryBorderColor      | \*   | Actor Border Color          |
-| actorBkg              | mainBkg                 | \*   | Actor Background Color      |
-| actorTextColor        | primaryTextColor        | \*   | Actor Text Color            |
-| actorLineColor        | grey                    | \*   | Actor Line Color            |
-| signalColor           | textColor               | \*   | Signal Color                |
-| signalTextColor       | textColor               | \*   | Signal Text Color           |
-| labelBoxBkgColor      | actorBkg                | \*   | Label Box Background Color  |
-| labelBoxBorderColor   | actorBorder             | \*   | Label Box Border Color      |
-| labelTextColor        | actorTextColor          | \*   | Label Text Color            |
-| loopTextColor         | actorTextColor          | \*   | Loop ext Color              |
-| activationBorderColor | based on secondaryColor | \*   | Activation Border Color     |
-| activationBkgColor    | secondaryColor          | \*   | Activation Background Color |
-| sequenceNumberColor   | based on lineColor      | \*   | Sequence Number Color       |
-
-# state colors
-
-| name          | Default value    | Calc | Description                                  |
-| ------------- | ---------------- | ---- | -------------------------------------------- |
-| labelColor    | primaryTextColor | \*   |                                              |
-| altBackground | tertiaryColor    | \*   | Used for background in deep composite states |
-
-# class colors
-
-| name      | Default value | Calc | Description                     |
-| --------- | ------------- | ---- | ------------------------------- |
-| classText | textColor     | \*   | Color of Text in class diagrams |
-
-# User journey colors
-
-| name      | Default value           | Calc | Description                             |
-| --------- | ----------------------- | ---- | --------------------------------------- |
-| fillType0 | primaryColor            | \*   | Fill for 1st section in journey diagram |
-| fillType1 | secondaryColor          | \*   | Fill for 2nd section in journey diagram |
-| fillType2 | based on primaryColor   | \*   | Fill for 3rd section in journey diagram |
-| fillType3 | based on secondaryColor | \*   | Fill for 4th section in journey diagram |
-| fillType4 | based on primaryColor   | \*   | Fill for 5th section in journey diagram |
-| fillType5 | based on secondaryColor | \*   | Fill for 6th section in journey diagram |
-| fillType6 | based on primaryColor   | \*   | Fill for 7th section in journey diagram |
-| fillType7 | based on secondaryColor | \*   | Fill for 8th section in journey diagram |
-
-\*\*Notes: Values are meant to create an alternating look.
-
-# Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
-
-```mermaid-example
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-```mermaid
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-\*\*This got a bit too dark and bit too colorful. With some easy steps this can be fixed:
-
-- Make the primary color a little lighter
-- set the tertiary color to a reddish shade as well
-- make the edge label background differ from the subgraph by setting the edgeLabelBackground
-
-```mermaid-example
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-```mermaid
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-The Theming Engine does not admit color codes and will only accept proper color values. Color Names is not supported so for instance, the color value 'red' will not work, but '#ff0000' will work.
-
-# Common theming activities
-
-## How to change the color of the arrows
-
-# Examples:
-
-When adjusting a theme it might be helpful to look at how your preferred theme goes with the diagrams, to evaluate whether everything is visible and looks good.
-In the following examples, the directive `init` is used, with the `theme` being declared as `base`. For more information on using directives, read the documentation for [Version 8.6.0](/8.6.0_docs.md)
-
-### Flowchart
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-```mermaid
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-### Flowchart (beta)
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        flowchart TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[Another]
-          C ==>|One| D[Laptop]
-          C x--x|Two| E[iPhone]
-          C o--o|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-```mermaid
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        flowchart TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[Another]
-          C ==>|One| D[Laptop]
-          C x--x|Two| E[iPhone]
-          C o--o|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-### Sequence diagram
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        sequenceDiagram
-          autonumber
-          par Action 1
-            Alice->>John: Hello John, how are you?
-          and Action 2
-            Alice->>Bob: Hello Bob, how are you?
-          end
-          Alice->>+John: Hello John, how are you?
-          Alice->>+John: John, can you hear me?
-          John-->>-Alice: Hi Alice, I can hear you!
-          Note right of John: John is perceptive
-          John-->>-Alice: I feel great!
-              loop Every minute
-                John-->Alice: Great!
-            end
-```
-
-```mermaid
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        sequenceDiagram
-          autonumber
-          par Action 1
-            Alice->>John: Hello John, how are you?
-          and Action 2
-            Alice->>Bob: Hello Bob, how are you?
-          end
-          Alice->>+John: Hello John, how are you?
-          Alice->>+John: John, can you hear me?
-          John-->>-Alice: Hi Alice, I can hear you!
-          Note right of John: John is perceptive
-          John-->>-Alice: I feel great!
-              loop Every minute
-                John-->Alice: Great!
-            end
-```
-
-### Class diagram
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-
-classDiagram
-	Animal "1" <|-- Duck
-	Animal <|-- Fish
-	Animal <--o Zebra
-	Animal : +int age
-	Animal : +String gender
-	Animal: +isMammal()
-	Animal: +mate()
-	class Duck{
-		+String beakColor
-		+swim()
-		+quack()
-	}
-	class Fish{
-		-int sizeInFeet
-		-canEat()
-	}
-	class Zebra{
-		+bool is_wild
-		+run()
-	}
-```
-
-```mermaid
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-
-classDiagram
-	Animal "1" <|-- Duck
-	Animal <|-- Fish
-	Animal <--o Zebra
-	Animal : +int age
-	Animal : +String gender
-	Animal: +isMammal()
-	Animal: +mate()
-	class Duck{
-		+String beakColor
-		+swim()
-		+quack()
-	}
-	class Fish{
-		-int sizeInFeet
-		-canEat()
-	}
-	class Zebra{
-		+bool is_wild
-		+run()
-	}
-```
-
-### Gantt
-
-```mermaid-example
-gantt
-       dateFormat                YYYY-MM-DD
-       title                     Adding GANTT diagram functionality to mermaid
-       excludes                  :excludes the named dates/days from being included in a charted task..
-       section A section
-       Completed task            :done,    des1, 2014-01-06,2014-01-08
-       Active task               :active,  des2, 2014-01-09, 3d
-       Future task               :         des3, after des2, 5d
-       Future task2              :         des4, after des3, 5d
-
-       section Critical tasks
-       Completed task in the critical line :crit, done, 2014-01-06,24h
-       Implement parser and jison          :crit, done, after des1, 2d
-       Create tests for parser             :crit, active, 3d
-       Future task in critical line        :crit, 5d
-       Create tests for renderer           :2d
-       Add to mermaid                      :1d
-
-       section Documentation
-       Describe gantt syntax               :active, a1, after des1, 3d
-       Add gantt diagram to demo page      :after a1  , 20h
-       Add another diagram to demo page    :doc1, after a1  , 48h
-
-       section Last section
-       Describe gantt syntax               :after doc1, 3d
-       Add gantt diagram to demo page      :20h
-       Add another diagram to demo page    :48h
-```
-
-```mermaid
-gantt
-       dateFormat                YYYY-MM-DD
-       title                     Adding GANTT diagram functionality to mermaid
-       excludes                  :excludes the named dates/days from being included in a charted task..
-       section A section
-       Completed task            :done,    des1, 2014-01-06,2014-01-08
-       Active task               :active,  des2, 2014-01-09, 3d
-       Future task               :         des3, after des2, 5d
-       Future task2              :         des4, after des3, 5d
-
-       section Critical tasks
-       Completed task in the critical line :crit, done, 2014-01-06,24h
-       Implement parser and jison          :crit, done, after des1, 2d
-       Create tests for parser             :crit, active, 3d
-       Future task in critical line        :crit, 5d
-       Create tests for renderer           :2d
-       Add to mermaid                      :1d
-
-       section Documentation
-       Describe gantt syntax               :active, a1, after des1, 3d
-       Add gantt diagram to demo page      :after a1  , 20h
-       Add another diagram to demo page    :doc1, after a1  , 48h
-
-       section Last section
-       Describe gantt syntax               :after doc1, 3d
-       Add gantt diagram to demo page      :20h
-       Add another diagram to demo page    :48h
-```
-
-### State diagram
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-      stateDiagram
-        [*] --> Active
-
-        state Active {
-            [*] --> NumLockOff
-            NumLockOff --> NumLockOn : EvNumLockPressed
-            NumLockOn --> NumLockOff : EvNumLockPressed
-            --
-            [*] --> CapsLockOff
-            CapsLockOff --> CapsLockOn : EvCapsLockPressed
-            CapsLockOn --> CapsLockOff : EvCapsLockPressed
-            --
-            [*] --> ScrollLockOff
-            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
-        }
-        state SomethingElse {
-          A --> B
-          B --> A
-        }
-
-        Active --> SomethingElse
-        note right of SomethingElse : This is the note to the right.
-
-        SomethingElse --> [*]
-
-```
-
-```mermaid
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-      stateDiagram
-        [*] --> Active
-
-        state Active {
-            [*] --> NumLockOff
-            NumLockOff --> NumLockOn : EvNumLockPressed
-            NumLockOn --> NumLockOff : EvNumLockPressed
-            --
-            [*] --> CapsLockOff
-            CapsLockOff --> CapsLockOn : EvCapsLockPressed
-            CapsLockOn --> CapsLockOff : EvCapsLockPressed
-            --
-            [*] --> ScrollLockOff
-            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
-        }
-        state SomethingElse {
-          A --> B
-          B --> A
-        }
-
-        Active --> SomethingElse
-        note right of SomethingElse : This is the note to the right.
-
-        SomethingElse --> [*]
-
-```
-
-### State diagram (beta)
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-stateDiagram-v2
-        [*] --> Active
-
-        state Active {
-            [*] --> NumLockOff
-            NumLockOff --> NumLockOn : EvNumLockPressed
-            NumLockOn --> NumLockOff : EvNumLockPressed
-            --
-            [*] --> CapsLockOff
-            CapsLockOff --> CapsLockOn : EvCapsLockPressed
-            CapsLockOn --> CapsLockOff : EvCapsLockPressed
-            --
-            [*] --> ScrollLockOff
-            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
-        }
-        state SomethingElse {
-          A --> B
-          B --> A
-        }
-
-        Active --> SomethingElse2
-        note right of SomethingElse2 : This is the note to the right.
-
-        SomethingElse2 --> [*]
-```
-
-```mermaid
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-stateDiagram-v2
-        [*] --> Active
-
-        state Active {
-            [*] --> NumLockOff
-            NumLockOff --> NumLockOn : EvNumLockPressed
-            NumLockOn --> NumLockOff : EvNumLockPressed
-            --
-            [*] --> CapsLockOff
-            CapsLockOff --> CapsLockOn : EvCapsLockPressed
-            CapsLockOn --> CapsLockOff : EvCapsLockPressed
-            --
-            [*] --> ScrollLockOff
-            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
-        }
-        state SomethingElse {
-          A --> B
-          B --> A
-        }
-
-        Active --> SomethingElse2
-        note right of SomethingElse2 : This is the note to the right.
-
-        SomethingElse2 --> [*]
-```
-
-### Entity Relations diagram
-
-```mermaid-example
-      erDiagram
-        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-        CUSTOMER ||--o{ ORDER : places
-        CUSTOMER ||--o{ INVOICE : "liable for"
-        DELIVERY-ADDRESS ||--o{ ORDER : receives
-        INVOICE ||--|{ ORDER : covers
-        ORDER ||--|{ ORDER-ITEM : includes
-        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-        PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-```
-
-```mermaid
-      erDiagram
-        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-        CUSTOMER ||--o{ ORDER : places
-        CUSTOMER ||--o{ INVOICE : "liable for"
-        DELIVERY-ADDRESS ||--o{ ORDER : receives
-        INVOICE ||--|{ ORDER : covers
-        ORDER ||--|{ ORDER-ITEM : includes
-        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-        PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-```
-
-### User journey diagram
-
-```mermaid-example
-journey
-            title My working day
-            section Go to work
-              Make tea: 5: Me
-              Go upstairs: 3: Me
-              Do work: 1: Me, Cat
-            section Go home
-              Go downstairs: 5: Me
-              Sit down: 5: Me
-```
-
-```mermaid
-journey
-            title My working day
-            section Go to work
-              Make tea: 5: Me
-              Go upstairs: 3: Me
-              Do work: 1: Me, Cat
-            section Go home
-              Go downstairs: 5: Me
-              Sit down: 5: Me
-```
+## Color and Color Calculation
+
+To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc.
+
+The theming engine will only recognize hex colors and not color names. So, the value `#ff0000` will work, but `red` will not.
+
+## Theme Variables
+
+| Variable             | Default value                      | Description                                                                                                                      |
+| -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| darkMode             | false                              | Affects how derived colors are calculated. Set value to `true` for darkmode.                                                     |
+| background           | #f4f4f4                            | Used to calculate color for items that should either be background colored or contrasting to the background                      |
+| fontFamily           | trebuchet ms, verdana, arial       |                                                                                                                                  |
+| fontSize             | 16px                               | Font size in pixels                                                                                                              |
+| primaryColor         | #fff4dd                            | Color to be used as background in nodes, other colors will be derived from this                                                  |
+| primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |
+| primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |
+| primaryTextColor     | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor`                                                                     |
+| secondaryColor       | calculated from primaryColor       |                                                                                                                                  |
+| primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |
+| secondaryBorderColor | calculated from secondaryColor     | Color to be used as border in nodes using `secondaryColor`                                                                       |
+| primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |
+| secondaryTextColor   | calculated from secondaryColor     | Color to be used as text color in nodes using `secondaryColor`                                                                   |
+| tertiaryColor        | calculated from primaryColor       |                                                                                                                                  |
+| tertiaryBorderColor  | calculated from tertiaryColor      | Color to be used as border in nodes using `tertiaryColor`                                                                        |
+| tertiaryTextColor    | calculated from tertiaryColor      | Color to be used as text color in nodes using `tertiaryColor`                                                                    |
+| noteBkgColor         | #fff5ad                            | Color used as background in notes                                                                                                |
+| noteTextColor        | #333                               | Text color in note rectangles                                                                                                    |
+| noteBorderColor      | calculated from noteBkgColor       | Border color in note rectangles                                                                                                  |
+| lineColor            | calculated from background         |                                                                                                                                  |
+| textColor            | calculated from primaryTextColor   | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram |
+| mainBkg              | calculated from primaryColor       | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc                                  |
+| errorBkgColor        | tertiaryColor                      | Color for syntax error message                                                                                                   |
+| errorTextColor       | tertiaryTextColor                  | Color for syntax error message                                                                                                   |
+
+## Flowchart Variables
+
+| Variable            | Default value                  | Description                 |
+| ------------------- | ------------------------------ | --------------------------- |
+| nodeBorder          | primaryBorderColor             | Node Border Color           |
+| clusterBkg          | tertiaryColor                  | Background in subgraphs     |
+| clusterBorder       | tertiaryBorderColor            | Cluster Border Color        |
+| defaultLinkColor    | lineColor                      | Link Color                  |
+| titleColor          | tertiaryTextColor              | Title Color                 |
+| edgeLabelBackground | calculated from secondaryColor |                             |
+| nodeTextColor       | primaryTextColor               | Color for text inside Nodes |
+
+## Sequence Diagram Variables
+
+| Variable              | Default value                  | Description                 |
+| --------------------- | ------------------------------ | --------------------------- |
+| actorBkg              | mainBkg                        | Actor Background Color      |
+| actorBorder           | primaryBorderColor             | Actor Border Color          |
+| actorTextColor        | primaryTextColor               | Actor Text Color            |
+| actorLineColor        | grey                           | Actor Line Color            |
+| signalColor           | textColor                      | Signal Color                |
+| signalTextColor       | textColor                      | Signal Text Color           |
+| labelBoxBkgColor      | actorBkg                       | Label Box Background Color  |
+| labelBoxBorderColor   | actorBorder                    | Label Box Border Color      |
+| labelTextColor        | actorTextColor                 | Label Text Color            |
+| loopTextColor         | actorTextColor                 | Loop Text Color             |
+| activationBorderColor | calculated from secondaryColor | Activation Border Color     |
+| activationBkgColor    | secondaryColor                 | Activation Background Color |
+| sequenceNumberColor   | calculated from lineColor      | Sequence Number Color       |
+
+## State Colors
+
+| Variable      | Default value    | Description                                  |
+| ------------- | ---------------- | -------------------------------------------- |
+| labelColor    | primaryTextColor |                                              |
+| altBackground | tertiaryColor    | Used for background in deep composite states |
+
+## Class Colors
+
+| Variable  | Default value | Description                     |
+| --------- | ------------- | ------------------------------- |
+| classText | textColor     | Color of Text in class diagrams |
+
+## User Journey Colors
+
+| Variable  | Default value                  | Description                             |
+| --------- | ------------------------------ | --------------------------------------- |
+| fillType0 | primaryColor                   | Fill for 1st section in journey diagram |
+| fillType1 | secondaryColor                 | Fill for 2nd section in journey diagram |
+| fillType2 | calculated from primaryColor   | Fill for 3rd section in journey diagram |
+| fillType3 | calculated from secondaryColor | Fill for 4th section in journey diagram |
+| fillType4 | calculated from primaryColor   | Fill for 5th section in journey diagram |
+| fillType5 | calculated from secondaryColor | Fill for 6th section in journey diagram |
+| fillType6 | calculated from primaryColor   | Fill for 7th section in journey diagram |
+| fillType7 | calculated from secondaryColor | Fill for 8th section in journey diagram |
diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md
index 78f3546cc..2dcc9a561 100644
--- a/packages/mermaid/src/docs/config/theming.md
+++ b/packages/mermaid/src/docs/config/theming.md
@@ -1,30 +1,26 @@
 # Theme Configuration
 
-With Version 8.7.0 Mermaid comes out with a system for dynamic and integrated configuration of themes. The intent is to increase the customizability and ease of styling for mermaid diagrams.
+Dynamic and integrated theme configuration was introduced in Mermaid version 8.7.0.
 
-The theme can be altered by changing the root level variable `theme` variable in the configuration. To change it for the whole site you must use the `initialize` call. To do it for just for a single diagram you can use the `%%init%%` directive
+Themes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the `initialize` call is used. For diagram specific customization, the `init` directive is used.
 
-Themes follow and build upon the Levels of Configuration, and employ `directives` to modify and create custom configurations, as they were introduced in Version [8.6.0](./8.6.0_docs.md).
+## Available Themes
 
-## Deployable Themes
+1. **default** - This is the default theme for all diagrams.
 
-The following are a list of **Deployable themes**, sample `%%init%%` directives and `initialize` calls.
+1. **neutral** - This theme is great for black and white documents that will be printed.
 
-1. **base**- Designed to be modified, as the name implies it is supposed to be used as the base for making custom themes.
+1. **dark** - This theme goes well with dark-colored elements or dark-mode.
 
-2. **forest**- A theme full of light greens that is easy on the eyes.
+1. **forest** - This theme contains shades of green.
 
-3. **dark**- A theme that would go well with other dark-colored elements.
+1. **base** - This is the only theme that can be modified. Use this theme as the base for customizations.
 
-4. **default**- The default theme for all diagrams.
+## Site-wide Theme
 
-5. **neutral**- The theme to be used for black and white printing.
+To customize themes site-wide, call the `initialize` method on the `mermaidAPI`.
 
-## Site-wide Themes
-
-Site-wide themes are declared via `initialize` by site owners.
-
-Example of `Initialize` call setting `theme` to `base`:
+Example of `initialize` call setting `theme` to `base`:
 
 ```javascript
 mermaidAPI.initialize({
@@ -33,22 +29,46 @@ mermaidAPI.initialize({
 });
 ```
 
-**Notes**: Only site owners can use the `mermaidAPI.initialize` call, to set values. Site-Users will have to use `%%init%%` to modify or create the theme for their diagrams.
+## Diagram-specific Themes
 
-## Themes at the Local or Current Level
+To customize the theme of an individual diagram, use the `init` directive.
 
-When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
+Example of `init` directive setting the `theme` to `forest`:
 
 ```mmd
-%%{init: {'theme':'base'}}%%
+%%{init: {'theme':'forest'}}%%
   graph TD
     a --> b
 ```
 
-Here is an example of how `%%init%%` can set the theme to 'base', this assumes that `themeVariables` are set to default:
+> **Reminder**: the only theme that can be customed is the `base` theme. The following section covers how to use `themeVariables` for customizations.
+
+## Customizing Themes with `themeVariables`
+
+To make a custom theme, modify `themeVariables` via `init`.
+
+You will need to use the [base](#available-themes) theme as it is the only modifiable theme.
+
+| Parameter      | Description                                                        | Type   | Properties                         |
+| -------------- | ------------------------------------------------------------------ | ------ | ---------------------------------- |
+| themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables-reference-table)) |
+
+Example of modifying `themeVariables` using the `init` directive:
 
 ```mermaid-example
-%%{init: {'theme':'base'}}%%
+%%{
+  init: {
+    'theme': 'base',
+    'themeVariables': {
+      'primaryColor': '#BB2528',
+      'primaryTextColor': '#fff',
+      'primaryBorderColor': '#7C0000',
+      'lineColor': '#F8B229',
+      'secondaryColor': '#006100',
+      'tertiaryColor': '#fff'
+    }
+  }
+}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
           B --> C{Let me think}
@@ -65,402 +85,93 @@ Here is an example of how `%%init%%` can set the theme to 'base', this assumes t
           end
 ```
 
-# List of Themes
-
-# Customizing Themes with `themeVariables`
-
-The easiest way to make a custom theme is to start with the base theme, and just modify theme variables through `themeVariables`, via `%%init%%`.
-
-| Parameter      | Description                                                        | Type  | Required | Objects contained                  |
-| -------------- | ------------------------------------------------------------------ | ----- | -------- | ---------------------------------- |
-| themeVariables | Array containing objects, modifiable with the `%%init%%` directive | Array | Required | primaryColor, lineColor, textColor |
-
-**Here is an example of overriding `primaryColor` through `themeVariables` and giving everything a different look, using `%%init%%`.**
-
-```mermaid-example
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-**Notes:**
-Leaving it empty will set all variable values to default.
-
-## Color and Color Calculation:
-
-Color definitions have certain interactions in mermaid, this is in order to ensure visibility for diagrams. Mermaid will adjust some variables automatically, when colors are changed in order to compensate and maintain readability.
-
-**The Default Value Column** to the right of the Variable column will denote the Variable paired/associated with the Variable on the left and the nature of this pairing or association. If it for instance says primaryColor it means that it gets primaryColor as default value. If it says "based on primaryColor" it means that it is calculated/ derived from primaryColor. This calculation can be primary color inversion, a change of hue, darkening or lightening by 10%, etc.
-
-You can create your own themes, by changing any of the given variables below. If you are using a dark background, set dark mode to true to adjust the colors. It is possible to override the calculations using the variable names below, with `%%init%%` if you wish to style it differently.
-
-## Theme Variables Reference Table
-
-```note
-Variables that are unique to some diagrams can be affected by changes in Theme Variables
-```
-
-| Variable             | Default/Base/Factor value      | Calc | Description                                                                                                                      |
-| -------------------- | ------------------------------ | ---- | -------------------------------------------------------------------------------------------------------------------------------- |
-| darkMode             | false                          |      | Boolean Value that dictates how to calculate colors. "true" will activate darkmode.                                              |
-| background           | #f4f4f4                        |      | Used to calculate color for items that should either be background colored or contrasting to the background.                     |
-| fontFamily           | "trebuchet ms", verdana, arial |      |                                                                                                                                  |
-| fontSize             | 16px                           |      | Font Size, in pixels                                                                                                             |
-| primaryColor         | #fff4dd                        |      | Color to be used as background in nodes, other colors will be derived from this                                                  |
-| primaryBorderColor   | based on primaryColor          | \*   | Color to be used as border in nodes using primaryColor                                                                           |
-| primaryTextColor     | based on darkMode #ddd/#333    | \*   | Color to be used as text color in nodes using primaryColor                                                                       |
-| secondaryColor       | based on primaryColor          | \*   |                                                                                                                                  |
-| secondaryBorderColor | based on secondaryColor        | \*   | Color to be used as border in nodes using secondaryColor                                                                         |
-| secondaryTextColor   | based on secondaryColor        | \*   | Color to be used as text color in nodes using secondaryColor                                                                     |
-| tertiaryColor        | based on primaryColor          | \*   |                                                                                                                                  |
-| tertiaryBorderColor  | based on tertiaryColor         | \*   | Color to be used as border in nodes using tertiaryColor                                                                          |
-| tertiaryTextColor    | based on tertiaryColor         | \*   | Color to be used as text color in nodes using tertiaryColor                                                                      |
-| noteBkgColor         | #fff5ad                        |      | Color used as background in notes                                                                                                |
-| noteTextColor        | #333                           |      | Text color in note rectangles.                                                                                                   |
-| noteBorderColor      | based on noteBkgColor          | \*   | Border color in note rectangles.                                                                                                 |
-| lineColor            | based on background            | \*   |                                                                                                                                  |
-| textColor            | based on primaryTextColor      | \*   | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in gantt diagram |
-| mainBkg              | based on primaryColor          | \*   | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc                                  |
-| errorBkgColor        | tertiaryColor                  | \*   | Color for syntax error message                                                                                                   |
-| errorTextColor       | tertiaryTextColor              | \*   | Color for syntax error message                                                                                                   |
-
-# What follows are Variables, specific to different diagrams and charts.
-
-## Some Theme Variables serve as, or affect the Default Values for Specific Diagram Variables, unless changed using `%%init%%` .
-
-## Flowchart
-
-| Variable            | Default/ Associated Value | Calc | Description                  |
-| ------------------- | ------------------------- | ---- | ---------------------------- |
-| nodeBorder          | primaryBorderColor        | \*   | Node Border Color            |
-| clusterBkg          | tertiaryColor             | \*   | Background in subgraphs      |
-| clusterBorder       | tertiaryBorderColor       | \*   | Cluster Border Color         |
-| defaultLinkColor    | lineColor                 | \*   | Link Color                   |
-| titleColor          | tertiaryTextColor         | \*   | Title Color                  |
-| edgeLabelBackground | based on secondaryColor   | \*   |                              |
-| nodeTextColor       | primaryTextColor          | \*   | Color for text inside Nodes. |
-
-# sequence diagram
-
-| name                  | Default value           | Calc | Description                 |
-| --------------------- | ----------------------- | ---- | --------------------------- |
-| actorBorder           | primaryBorderColor      | \*   | Actor Border Color          |
-| actorBkg              | mainBkg                 | \*   | Actor Background Color      |
-| actorTextColor        | primaryTextColor        | \*   | Actor Text Color            |
-| actorLineColor        | grey                    | \*   | Actor Line Color            |
-| signalColor           | textColor               | \*   | Signal Color                |
-| signalTextColor       | textColor               | \*   | Signal Text Color           |
-| labelBoxBkgColor      | actorBkg                | \*   | Label Box Background Color  |
-| labelBoxBorderColor   | actorBorder             | \*   | Label Box Border Color      |
-| labelTextColor        | actorTextColor          | \*   | Label Text Color            |
-| loopTextColor         | actorTextColor          | \*   | Loop ext Color              |
-| activationBorderColor | based on secondaryColor | \*   | Activation Border Color     |
-| activationBkgColor    | secondaryColor          | \*   | Activation Background Color |
-| sequenceNumberColor   | based on lineColor      | \*   | Sequence Number Color       |
-
-# state colors
-
-| name          | Default value    | Calc | Description                                  |
-| ------------- | ---------------- | ---- | -------------------------------------------- |
-| labelColor    | primaryTextColor | \*   |                                              |
-| altBackground | tertiaryColor    | \*   | Used for background in deep composite states |
-
-# class colors
-
-| name      | Default value | Calc | Description                     |
-| --------- | ------------- | ---- | ------------------------------- |
-| classText | textColor     | \*   | Color of Text in class diagrams |
-
-# User journey colors
-
-| name      | Default value           | Calc | Description                             |
-| --------- | ----------------------- | ---- | --------------------------------------- |
-| fillType0 | primaryColor            | \*   | Fill for 1st section in journey diagram |
-| fillType1 | secondaryColor          | \*   | Fill for 2nd section in journey diagram |
-| fillType2 | based on primaryColor   | \*   | Fill for 3rd section in journey diagram |
-| fillType3 | based on secondaryColor | \*   | Fill for 4th section in journey diagram |
-| fillType4 | based on primaryColor   | \*   | Fill for 5th section in journey diagram |
-| fillType5 | based on secondaryColor | \*   | Fill for 6th section in journey diagram |
-| fillType6 | based on primaryColor   | \*   | Fill for 7th section in journey diagram |
-| fillType7 | based on secondaryColor | \*   | Fill for 8th section in journey diagram |
-
-\*\*Notes: Values are meant to create an alternating look.
-
-# Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
-
-```mermaid-example
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-\*\*This got a bit too dark and bit too colorful. With some easy steps this can be fixed:
-
-- Make the primary color a little lighter
-- set the tertiary color to a reddish shade as well
-- make the edge label background differ from the subgraph by setting the edgeLabelBackground
-
-```mermaid-example
-%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-The Theming Engine does not admit color codes and will only accept proper color values. Color Names is not supported so for instance, the color value 'red' will not work, but '#ff0000' will work.
-
-# Common theming activities
-
-## How to change the color of the arrows
-
-# Examples:
-
-When adjusting a theme it might be helpful to look at how your preferred theme goes with the diagrams, to evaluate whether everything is visible and looks good.
-In the following examples, the directive `init` is used, with the `theme` being declared as `base`. For more information on using directives, read the documentation for [Version 8.6.0](/8.6.0_docs.md)
-
-### Flowchart
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        graph TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[/Another/]
-          C ==>|One| D[Laptop]
-          C -->|Two| E[iPhone]
-          C -->|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-### Flowchart (beta)
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        flowchart TD
-          A[Christmas] -->|Get money| B(Go shopping)
-          B --> C{Let me think}
-          B --> G[Another]
-          C ==>|One| D[Laptop]
-          C x--x|Two| E[iPhone]
-          C o--o|Three| F[fa:fa-car Car]
-          subgraph section
-            C
-            D
-            E
-            F
-            G
-          end
-```
-
-### Sequence diagram
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-        sequenceDiagram
-          autonumber
-          par Action 1
-            Alice->>John: Hello John, how are you?
-          and Action 2
-            Alice->>Bob: Hello Bob, how are you?
-          end
-          Alice->>+John: Hello John, how are you?
-          Alice->>+John: John, can you hear me?
-          John-->>-Alice: Hi Alice, I can hear you!
-          Note right of John: John is perceptive
-          John-->>-Alice: I feel great!
-              loop Every minute
-                John-->Alice: Great!
-            end
-```
-
-### Class diagram
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-
-classDiagram
-	Animal "1" <|-- Duck
-	Animal <|-- Fish
-	Animal <--o Zebra
-	Animal : +int age
-	Animal : +String gender
-	Animal: +isMammal()
-	Animal: +mate()
-	class Duck{
-		+String beakColor
-		+swim()
-		+quack()
-	}
-	class Fish{
-		-int sizeInFeet
-		-canEat()
-	}
-	class Zebra{
-		+bool is_wild
-		+run()
-	}
-```
-
-### Gantt
-
-```mermaid-example
-gantt
-       dateFormat                YYYY-MM-DD
-       title                     Adding GANTT diagram functionality to mermaid
-       excludes                  :excludes the named dates/days from being included in a charted task..
-       section A section
-       Completed task            :done,    des1, 2014-01-06,2014-01-08
-       Active task               :active,  des2, 2014-01-09, 3d
-       Future task               :         des3, after des2, 5d
-       Future task2              :         des4, after des3, 5d
-
-       section Critical tasks
-       Completed task in the critical line :crit, done, 2014-01-06,24h
-       Implement parser and jison          :crit, done, after des1, 2d
-       Create tests for parser             :crit, active, 3d
-       Future task in critical line        :crit, 5d
-       Create tests for renderer           :2d
-       Add to mermaid                      :1d
-
-       section Documentation
-       Describe gantt syntax               :active, a1, after des1, 3d
-       Add gantt diagram to demo page      :after a1  , 20h
-       Add another diagram to demo page    :doc1, after a1  , 48h
-
-       section Last section
-       Describe gantt syntax               :after doc1, 3d
-       Add gantt diagram to demo page      :20h
-       Add another diagram to demo page    :48h
-```
-
-### State diagram
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-      stateDiagram
-        [*] --> Active
-
-        state Active {
-            [*] --> NumLockOff
-            NumLockOff --> NumLockOn : EvNumLockPressed
-            NumLockOn --> NumLockOff : EvNumLockPressed
-            --
-            [*] --> CapsLockOff
-            CapsLockOff --> CapsLockOn : EvCapsLockPressed
-            CapsLockOn --> CapsLockOff : EvCapsLockPressed
-            --
-            [*] --> ScrollLockOff
-            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
-        }
-        state SomethingElse {
-          A --> B
-          B --> A
-        }
-
-        Active --> SomethingElse
-        note right of SomethingElse : This is the note to the right.
-
-        SomethingElse --> [*]
-
-```
-
-### State diagram (beta)
-
-```mermaid-example
-%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
-stateDiagram-v2
-        [*] --> Active
-
-        state Active {
-            [*] --> NumLockOff
-            NumLockOff --> NumLockOn : EvNumLockPressed
-            NumLockOn --> NumLockOff : EvNumLockPressed
-            --
-            [*] --> CapsLockOff
-            CapsLockOff --> CapsLockOn : EvCapsLockPressed
-            CapsLockOn --> CapsLockOff : EvCapsLockPressed
-            --
-            [*] --> ScrollLockOff
-            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
-        }
-        state SomethingElse {
-          A --> B
-          B --> A
-        }
-
-        Active --> SomethingElse2
-        note right of SomethingElse2 : This is the note to the right.
-
-        SomethingElse2 --> [*]
-```
-
-### Entity Relations diagram
-
-```mermaid-example
-      erDiagram
-        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-        CUSTOMER ||--o{ ORDER : places
-        CUSTOMER ||--o{ INVOICE : "liable for"
-        DELIVERY-ADDRESS ||--o{ ORDER : receives
-        INVOICE ||--|{ ORDER : covers
-        ORDER ||--|{ ORDER-ITEM : includes
-        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-        PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-```
-
-### User journey diagram
-
-```mermaid-example
-journey
-            title My working day
-            section Go to work
-              Make tea: 5: Me
-              Go upstairs: 3: Me
-              Do work: 1: Me, Cat
-            section Go home
-              Go downstairs: 5: Me
-              Sit down: 5: Me
-```
+## Color and Color Calculation
+
+To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, `primaryBorderColor` is derived from the `primaryColor` variable. So if the `primaryColor` variable is customized, Mermaid will adjust `primaryBorderColor` automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc.
+
+The theming engine will only recognize hex colors and not color names. So, the value `#ff0000` will work, but `red` will not.
+
+## Theme Variables
+
+| Variable             | Default value                          | Description                                                                                                                      |
+| -------------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| darkMode             | false                                  | Affects how derived colors are calculated. Set value to `true` for darkmode.                                                     |
+| background           | #f4f4f4                                | Used to calculate color for items that should either be background colored or contrasting to the background                      |
+| fontFamily           | trebuchet ms, verdana, arial           |                                                                                                                                  |
+| fontSize             | 16px                                   | Font size in pixels                                                                                                              |
+| primaryColor         | #fff4dd                                | Color to be used as background in nodes, other colors will be derived from this                                                  |
+| primaryBorderColor   | calculated from primaryColor           | Color to be used as border in nodes using `primaryColor`                                                                         |
+| primaryBorderColor   | calculated from primaryColor           | Color to be used as border in nodes using `primaryColor`                                                                         |
+| primaryTextColor     | calculated from darkMode #ddd/#333     | Color to be used as text color in nodes using `primaryColor`                                                                     |
+| secondaryColor       | calculated from primaryColor           |                                                                                                                                  |
+| primaryBorderColor   | calculated from primaryColor           | Color to be used as border in nodes using `primaryColor`                                                                         |
+| secondaryBorderColor | calculated from secondaryColor         | Color to be used as border in nodes using `secondaryColor`                                                                       |
+| primaryBorderColor   | calculated from primaryColor           | Color to be used as border in nodes using `primaryColor`                                                                         |
+| secondaryTextColor   | calculated from secondaryColor         | Color to be used as text color in nodes using `secondaryColor`                                                                   |
+| tertiaryColor        | calculated from primaryColor           |                                                                                                                                  |
+| tertiaryBorderColor  | calculated from tertiaryColor          | Color to be used as border in nodes using `tertiaryColor`                                                                        |
+| tertiaryTextColor    | calculated from tertiaryColor          | Color to be used as text color in nodes using `tertiaryColor`                                                                    |
+| noteBkgColor         | #fff5ad                                | Color used as background in notes                                                                                                |
+| noteTextColor        | #333                                   | Text color in note rectangles                                                                                                    |
+| noteBorderColor      | calculated from noteBkgColor           | Border color in note rectangles                                                                                                  |
+| lineColor            | calculated from background             |                                                                                                                                  |
+| textColor            | calculated from primaryTextColor       | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram |
+| mainBkg              | calculated from primaryColor           | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc                                  |
+| errorBkgColor        | tertiaryColor                          | Color for syntax error message                                                                                                   |
+| errorTextColor       | tertiaryTextColor                      | Color for syntax error message                                                                                                   |
+
+## Flowchart Variables
+
+| Variable            | Default value                    | Description                  |
+| ------------------- | -------------------------------- | ---------------------------- |
+| nodeBorder          | primaryBorderColor               | Node Border Color            |
+| clusterBkg          | tertiaryColor                    | Background in subgraphs      |
+| clusterBorder       | tertiaryBorderColor              | Cluster Border Color         |
+| defaultLinkColor    | lineColor                        | Link Color                   |
+| titleColor          | tertiaryTextColor                | Title Color                  |
+| edgeLabelBackground | calculated from secondaryColor   |                              |
+| nodeTextColor       | primaryTextColor                 | Color for text inside Nodes  |
+
+## Sequence Diagram Variables
+
+| Variable              | Default value                  | Description                 |
+| --------------------- | ------------------------------ | --------------------------- |
+| actorBkg              | mainBkg                        | Actor Background Color      |
+| actorBorder           | primaryBorderColor             | Actor Border Color          |
+| actorTextColor        | primaryTextColor               | Actor Text Color            |
+| actorLineColor        | grey                           | Actor Line Color            |
+| signalColor           | textColor                      | Signal Color                |
+| signalTextColor       | textColor                      | Signal Text Color           |
+| labelBoxBkgColor      | actorBkg                       | Label Box Background Color  |
+| labelBoxBorderColor   | actorBorder                    | Label Box Border Color      |
+| labelTextColor        | actorTextColor                 | Label Text Color            |
+| loopTextColor         | actorTextColor                 | Loop Text Color              |
+| activationBorderColor | calculated from secondaryColor | Activation Border Color     |
+| activationBkgColor    | secondaryColor                 | Activation Background Color |
+| sequenceNumberColor   | calculated from lineColor      | Sequence Number Color       |
+
+## State Colors
+
+| Variable      | Default value    | Description                                  |
+| ------------- | ---------------- | -------------------------------------------- |
+| labelColor    | primaryTextColor |                                              |
+| altBackground | tertiaryColor    | Used for background in deep composite states |
+
+## Class Colors
+
+| Variable  | Default value | Description                     |
+| --------- | ------------- | ------------------------------- |
+| classText | textColor     | Color of Text in class diagrams |
+
+## User Journey Colors
+
+| Variable  | Default value                  | Description                             |
+| --------- | ------------------------------ | --------------------------------------- |
+| fillType0 | primaryColor                   | Fill for 1st section in journey diagram |
+| fillType1 | secondaryColor                 | Fill for 2nd section in journey diagram |
+| fillType2 | calculated from primaryColor   | Fill for 3rd section in journey diagram |
+| fillType3 | calculated from secondaryColor | Fill for 4th section in journey diagram |
+| fillType4 | calculated from primaryColor   | Fill for 5th section in journey diagram |
+| fillType5 | calculated from secondaryColor | Fill for 6th section in journey diagram |
+| fillType6 | calculated from primaryColor   | Fill for 7th section in journey diagram |
+| fillType7 | calculated from secondaryColor | Fill for 8th section in journey diagram |
\ No newline at end of file

From 24560b7d1329e9f7f239659a3dda4f67a15f91c0 Mon Sep 17 00:00:00 2001
From: steph <steph@huynhicode.dev>
Date: Sun, 4 Dec 2022 21:51:29 -0800
Subject: [PATCH 82/98] fix lint

---
 packages/mermaid/src/docs/config/theming.md | 78 ++++++++++-----------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md
index 2dcc9a561..02b0c9a1c 100644
--- a/packages/mermaid/src/docs/config/theming.md
+++ b/packages/mermaid/src/docs/config/theming.md
@@ -49,8 +49,8 @@ To make a custom theme, modify `themeVariables` via `init`.
 
 You will need to use the [base](#available-themes) theme as it is the only modifiable theme.
 
-| Parameter      | Description                                                        | Type   | Properties                         |
-| -------------- | ------------------------------------------------------------------ | ------ | ---------------------------------- |
+| Parameter      | Description                          | Type   | Properties                                                                                          |
+| -------------- | ------------------------------------ | ------ | --------------------------------------------------------------------------------------------------- |
 | themeVariables | Modifiable with the `init` directive | Object | `primaryColor`, `primaryTextColor`, `lineColor` ([see full list](#theme-variables-reference-table)) |
 
 Example of modifying `themeVariables` using the `init` directive:
@@ -93,44 +93,44 @@ The theming engine will only recognize hex colors and not color names. So, the v
 
 ## Theme Variables
 
-| Variable             | Default value                          | Description                                                                                                                      |
-| -------------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| darkMode             | false                                  | Affects how derived colors are calculated. Set value to `true` for darkmode.                                                     |
-| background           | #f4f4f4                                | Used to calculate color for items that should either be background colored or contrasting to the background                      |
-| fontFamily           | trebuchet ms, verdana, arial           |                                                                                                                                  |
-| fontSize             | 16px                                   | Font size in pixels                                                                                                              |
-| primaryColor         | #fff4dd                                | Color to be used as background in nodes, other colors will be derived from this                                                  |
-| primaryBorderColor   | calculated from primaryColor           | Color to be used as border in nodes using `primaryColor`                                                                         |
-| primaryBorderColor   | calculated from primaryColor           | Color to be used as border in nodes using `primaryColor`                                                                         |
-| primaryTextColor     | calculated from darkMode #ddd/#333     | Color to be used as text color in nodes using `primaryColor`                                                                     |
-| secondaryColor       | calculated from primaryColor           |                                                                                                                                  |
-| primaryBorderColor   | calculated from primaryColor           | Color to be used as border in nodes using `primaryColor`                                                                         |
-| secondaryBorderColor | calculated from secondaryColor         | Color to be used as border in nodes using `secondaryColor`                                                                       |
-| primaryBorderColor   | calculated from primaryColor           | Color to be used as border in nodes using `primaryColor`                                                                         |
-| secondaryTextColor   | calculated from secondaryColor         | Color to be used as text color in nodes using `secondaryColor`                                                                   |
-| tertiaryColor        | calculated from primaryColor           |                                                                                                                                  |
-| tertiaryBorderColor  | calculated from tertiaryColor          | Color to be used as border in nodes using `tertiaryColor`                                                                        |
-| tertiaryTextColor    | calculated from tertiaryColor          | Color to be used as text color in nodes using `tertiaryColor`                                                                    |
-| noteBkgColor         | #fff5ad                                | Color used as background in notes                                                                                                |
-| noteTextColor        | #333                                   | Text color in note rectangles                                                                                                    |
-| noteBorderColor      | calculated from noteBkgColor           | Border color in note rectangles                                                                                                  |
-| lineColor            | calculated from background             |                                                                                                                                  |
-| textColor            | calculated from primaryTextColor       | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram |
-| mainBkg              | calculated from primaryColor           | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc                                  |
-| errorBkgColor        | tertiaryColor                          | Color for syntax error message                                                                                                   |
-| errorTextColor       | tertiaryTextColor                      | Color for syntax error message                                                                                                   |
+| Variable             | Default value                      | Description                                                                                                                      |
+| -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| darkMode             | false                              | Affects how derived colors are calculated. Set value to `true` for darkmode.                                                     |
+| background           | #f4f4f4                            | Used to calculate color for items that should either be background colored or contrasting to the background                      |
+| fontFamily           | trebuchet ms, verdana, arial       |                                                                                                                                  |
+| fontSize             | 16px                               | Font size in pixels                                                                                                              |
+| primaryColor         | #fff4dd                            | Color to be used as background in nodes, other colors will be derived from this                                                  |
+| primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |
+| primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |
+| primaryTextColor     | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using `primaryColor`                                                                     |
+| secondaryColor       | calculated from primaryColor       |                                                                                                                                  |
+| primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |
+| secondaryBorderColor | calculated from secondaryColor     | Color to be used as border in nodes using `secondaryColor`                                                                       |
+| primaryBorderColor   | calculated from primaryColor       | Color to be used as border in nodes using `primaryColor`                                                                         |
+| secondaryTextColor   | calculated from secondaryColor     | Color to be used as text color in nodes using `secondaryColor`                                                                   |
+| tertiaryColor        | calculated from primaryColor       |                                                                                                                                  |
+| tertiaryBorderColor  | calculated from tertiaryColor      | Color to be used as border in nodes using `tertiaryColor`                                                                        |
+| tertiaryTextColor    | calculated from tertiaryColor      | Color to be used as text color in nodes using `tertiaryColor`                                                                    |
+| noteBkgColor         | #fff5ad                            | Color used as background in notes                                                                                                |
+| noteTextColor        | #333                               | Text color in note rectangles                                                                                                    |
+| noteBorderColor      | calculated from noteBkgColor       | Border color in note rectangles                                                                                                  |
+| lineColor            | calculated from background         |                                                                                                                                  |
+| textColor            | calculated from primaryTextColor   | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram |
+| mainBkg              | calculated from primaryColor       | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc                                  |
+| errorBkgColor        | tertiaryColor                      | Color for syntax error message                                                                                                   |
+| errorTextColor       | tertiaryTextColor                  | Color for syntax error message                                                                                                   |
 
 ## Flowchart Variables
 
-| Variable            | Default value                    | Description                  |
-| ------------------- | -------------------------------- | ---------------------------- |
-| nodeBorder          | primaryBorderColor               | Node Border Color            |
-| clusterBkg          | tertiaryColor                    | Background in subgraphs      |
-| clusterBorder       | tertiaryBorderColor              | Cluster Border Color         |
-| defaultLinkColor    | lineColor                        | Link Color                   |
-| titleColor          | tertiaryTextColor                | Title Color                  |
-| edgeLabelBackground | calculated from secondaryColor   |                              |
-| nodeTextColor       | primaryTextColor                 | Color for text inside Nodes  |
+| Variable            | Default value                  | Description                 |
+| ------------------- | ------------------------------ | --------------------------- |
+| nodeBorder          | primaryBorderColor             | Node Border Color           |
+| clusterBkg          | tertiaryColor                  | Background in subgraphs     |
+| clusterBorder       | tertiaryBorderColor            | Cluster Border Color        |
+| defaultLinkColor    | lineColor                      | Link Color                  |
+| titleColor          | tertiaryTextColor              | Title Color                 |
+| edgeLabelBackground | calculated from secondaryColor |                             |
+| nodeTextColor       | primaryTextColor               | Color for text inside Nodes |
 
 ## Sequence Diagram Variables
 
@@ -145,7 +145,7 @@ The theming engine will only recognize hex colors and not color names. So, the v
 | labelBoxBkgColor      | actorBkg                       | Label Box Background Color  |
 | labelBoxBorderColor   | actorBorder                    | Label Box Border Color      |
 | labelTextColor        | actorTextColor                 | Label Text Color            |
-| loopTextColor         | actorTextColor                 | Loop Text Color              |
+| loopTextColor         | actorTextColor                 | Loop Text Color             |
 | activationBorderColor | calculated from secondaryColor | Activation Border Color     |
 | activationBkgColor    | secondaryColor                 | Activation Background Color |
 | sequenceNumberColor   | calculated from lineColor      | Sequence Number Color       |
@@ -174,4 +174,4 @@ The theming engine will only recognize hex colors and not color names. So, the v
 | fillType4 | calculated from primaryColor   | Fill for 5th section in journey diagram |
 | fillType5 | calculated from secondaryColor | Fill for 6th section in journey diagram |
 | fillType6 | calculated from primaryColor   | Fill for 7th section in journey diagram |
-| fillType7 | calculated from secondaryColor | Fill for 8th section in journey diagram |
\ No newline at end of file
+| fillType7 | calculated from secondaryColor | Fill for 8th section in journey diagram |

From f0aea0e6af42347f82675ac09186248329fdfff0 Mon Sep 17 00:00:00 2001
From: steph <steph@huynhicode.dev>
Date: Sun, 4 Dec 2022 22:04:20 -0800
Subject: [PATCH 83/98] fix cspell

---
 cSpell.json                                 | 1 +
 docs/config/theming.md                      | 2 +-
 packages/mermaid/src/docs/config/theming.md | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/cSpell.json b/cSpell.json
index 08fce1d1c..a4af6c785 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -59,6 +59,7 @@
     "playfair",
     "podlite",
     "ranksep",
+    "rect",
     "redmine",
     "sandboxed",
     "setupgraphviewbox",
diff --git a/docs/config/theming.md b/docs/config/theming.md
index 6c12ee75f..b34913af5 100644
--- a/docs/config/theming.md
+++ b/docs/config/theming.md
@@ -137,7 +137,7 @@ The theming engine will only recognize hex colors and not color names. So, the v
 
 | Variable             | Default value                      | Description                                                                                                                      |
 | -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| darkMode             | false                              | Affects how derived colors are calculated. Set value to `true` for darkmode.                                                     |
+| darkMode             | false                              | Affects how derived colors are calculated. Set value to `true` for dark mode.                                                    |
 | background           | #f4f4f4                            | Used to calculate color for items that should either be background colored or contrasting to the background                      |
 | fontFamily           | trebuchet ms, verdana, arial       |                                                                                                                                  |
 | fontSize             | 16px                               | Font size in pixels                                                                                                              |
diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md
index 02b0c9a1c..2d4da9530 100644
--- a/packages/mermaid/src/docs/config/theming.md
+++ b/packages/mermaid/src/docs/config/theming.md
@@ -95,7 +95,7 @@ The theming engine will only recognize hex colors and not color names. So, the v
 
 | Variable             | Default value                      | Description                                                                                                                      |
 | -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| darkMode             | false                              | Affects how derived colors are calculated. Set value to `true` for darkmode.                                                     |
+| darkMode             | false                              | Affects how derived colors are calculated. Set value to `true` for dark mode.                                                    |
 | background           | #f4f4f4                            | Used to calculate color for items that should either be background colored or contrasting to the background                      |
 | fontFamily           | trebuchet ms, verdana, arial       |                                                                                                                                  |
 | fontSize             | 16px                               | Font size in pixels                                                                                                              |

From 2cce562bc43892afe5ec673b273d1c302e458b8d Mon Sep 17 00:00:00 2001
From: steph <steph@huynhicode.dev>
Date: Sun, 4 Dec 2022 22:10:33 -0800
Subject: [PATCH 84/98] fix cspell

---
 cSpell.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cSpell.json b/cSpell.json
index a4af6c785..0849dc1d0 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -60,6 +60,7 @@
     "podlite",
     "ranksep",
     "rect",
+    "rects",
     "redmine",
     "sandboxed",
     "setupgraphviewbox",

From 7a086890fd180545f774a82ad08e15a0f2939894 Mon Sep 17 00:00:00 2001
From: MrCoder <eagle.xiao@gmail.com>
Date: Tue, 6 Dec 2022 19:44:14 +1100
Subject: [PATCH 85/98] Made mermaidConfig a local variable so that it cannot
 be shared cross rendering.

---
 .../mermaid/src/docs/.vitepress/theme/Mermaid.vue     | 11 +++++------
 packages/mermaid/src/docs/.vitepress/theme/mermaid.ts |  4 +---
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
index c99141601..566543001 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
+++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
@@ -20,11 +20,6 @@ const props = defineProps({
 const svg = ref(null);
 let mut = null;
 
-const mermaidConfig = {
-  securityLevel: 'loose',
-  startOnLoad: false,
-};
-
 onMounted(async () => {
   mut = new MutationObserver(() => renderChart());
   mut.observe(document.documentElement, { attributes: true });
@@ -58,7 +53,11 @@ onUnmounted(() => mut.disconnect());
 const renderChart = async () => {
   console.log('rendering chart' + props.id + props.graph);
   const hasDarkClass = document.documentElement.classList.contains('dark');
-  mermaidConfig.theme = hasDarkClass ? 'dark' : 'default';
+  const mermaidConfig = {
+        securityLevel: 'loose',
+        startOnLoad: false,
+        theme: hasDarkClass ? 'dark' : 'default',
+      };
 
   console.log({ mermaidConfig });
   let svgCode = await render(props.id, decodeURIComponent(props.graph), mermaidConfig);
diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
index fef090ea9..b287346f9 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
@@ -8,9 +8,7 @@ try {
 }
 
 export const render = async (id: string, code: string, config: MermaidConfig): Promise<string> => {
-  // make a clone of config, so we don't mutate the original
-  const mermaidConfig = { ...config };
-  mermaid.initialize(mermaidConfig);
+  mermaid.initialize(config);
   const svg = await mermaid.renderAsync(id, code);
   return svg;
 };

From fdf261bda3eed435fde103a268c1d74f70fce628 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 6 Dec 2022 15:53:36 +0530
Subject: [PATCH 86/98] chore: Format Mermaid.vue

---
 packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
index 566543001..85c13393c 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
+++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue
@@ -54,10 +54,10 @@ const renderChart = async () => {
   console.log('rendering chart' + props.id + props.graph);
   const hasDarkClass = document.documentElement.classList.contains('dark');
   const mermaidConfig = {
-        securityLevel: 'loose',
-        startOnLoad: false,
-        theme: hasDarkClass ? 'dark' : 'default',
-      };
+    securityLevel: 'loose',
+    startOnLoad: false,
+    theme: hasDarkClass ? 'dark' : 'default',
+  };
 
   console.log({ mermaidConfig });
   let svgCode = await render(props.id, decodeURIComponent(props.graph), mermaidConfig);

From 792c1a8320fa12519b9d59acffa729917fc4ebe5 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 7 Dec 2022 11:19:44 +0530
Subject: [PATCH 87/98] chore: Rebuild docs if linting fails

---
 .github/workflows/lint-docs.yml | 74 ---------------------------------
 .github/workflows/lint.yml      | 16 ++++++-
 2 files changed, 15 insertions(+), 75 deletions(-)
 delete mode 100644 .github/workflows/lint-docs.yml

diff --git a/.github/workflows/lint-docs.yml b/.github/workflows/lint-docs.yml
deleted file mode 100644
index d9f0ddae0..000000000
--- a/.github/workflows/lint-docs.yml
+++ /dev/null
@@ -1,74 +0,0 @@
-name: Lint Docs
-
-on:
-  pull_request:
-    types:
-      - opened
-      - synchronize
-      - ready_for_review
-
-permissions:
-  contents: write
-
-jobs:
-  lint:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [16.x]
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          repository: ${{ github.event.pull_request.head.repo.full_name }}
-          ref: ${{ github.event.pull_request.head.ref }}
-
-      - name: Get branch name
-        id: branch-name
-        uses: tj-actions/branch-names@v5
-
-      - uses: nrwl/last-successful-commit-action@v1
-        id: last_successful_commit_pull_request
-        with:
-          branch: ${{ steps.branch-name.outputs.base_ref_branch }}
-          workflow_id: 'lint-docs.yml'
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Check if source docs are changed
-        id: changed-docs
-        uses: tj-actions/changed-files@v29
-        with:
-          base_sha: ${{ steps.last_successful_commit_pull_request.outputs.commit_hash }}
-          files: |
-            packages/mermaid/src/docs/*
-            packages/mermaid/src/docs.mts
-
-      - uses: pnpm/action-setup@v2
-        if: steps.changed-docs.outputs.only_modified == 'true'
-
-      - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        if: steps.changed-docs.outputs.only_modified == 'true'
-        with:
-          cache: pnpm
-          node-version: ${{ matrix.node-version }}
-
-      - name: Install Packages
-        if: steps.changed-docs.outputs.only_modified == 'true'
-        run: |
-          pnpm install --frozen-lockfile
-        env:
-          CYPRESS_CACHE_FOLDER: .cache/Cypress
-
-      - name: Run step if any file(s) in the docs folder change
-        if: steps.changed-docs.outputs.only_modified == 'true'
-        run: |
-          echo "Only files in the src/docs folder has changed."
-          echo "List all the files that have changed: ${{ steps.changed-files-specific.outputs.all_changed_files }}"
-          yarn docs:build
-
-      - name: Commit changes
-        uses: EndBug/add-and-commit@v9
-        if: steps.changed-docs.outputs.only_modified == 'true'
-        with:
-          message: 'Update docs'
-          add: 'docs/*'
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 8ba06989d..917a2731c 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -9,7 +9,7 @@ on:
       - ready_for_review
 
 permissions:
-  contents: read
+  contents: write
 
 jobs:
   lint:
@@ -39,5 +39,19 @@ jobs:
         run: pnpm run lint
 
       - name: Verify Docs
+        id: verifyDocs
         working-directory: ./packages/mermaid
+        continue-on-error: true
         run: pnpm run docs:verify
+
+      - name: Rebuild Docs
+        if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
+        run: |
+          yarn docs:build
+
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v9
+        if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
+        with:
+          message: 'Update docs'
+          add: 'docs/*'

From 755382798589f28c936300c311589a4606a1f9a0 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 7 Dec 2022 11:40:17 +0530
Subject: [PATCH 88/98] fix: docs build command

---
 .github/workflows/lint.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 917a2731c..f1ab5726b 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -46,8 +46,8 @@ jobs:
 
       - name: Rebuild Docs
         if: ${{ steps.verifyDocs.outcome == 'failure' && github.event_name == 'push' }}
-        run: |
-          yarn docs:build
+        working-directory: ./packages/mermaid
+        run: pnpm run docs:build
 
       - name: Commit changes
         uses: EndBug/add-and-commit@v9

From b2489523f24ed271e7c9dc281078e859e6026619 Mon Sep 17 00:00:00 2001
From: sidharthv96 <sidharthv96@users.noreply.github.com>
Date: Wed, 7 Dec 2022 06:13:07 +0000
Subject: [PATCH 89/98] Update docs

---
 docs/syntax/classDiagram.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
index 5870d0743..b6d48c9de 100644
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -7,7 +7,8 @@
 # Class diagrams
 
 > "In software engineering, a class diagram in the Unified Modeling Language (UML) is a type of static structure diagram that describes the structure of a system by showing the system's classes, their attributes, operations (or methods), and the relationships among objects."
-> Wikipedia
+>
+> \-Wikipedia
 
 The class diagram is the main building block of object-oriented modeling. It is used for general conceptual modeling of the structure of the application, and for detailed modeling to translate the models into programming code. Class diagrams can also be used for data modeling. The classes in a class diagram represent both the main elements, interactions in the application, and the classes to be programmed.
 

From 1a767ee492f74aa3475cf50ecc0baf0f10545d3e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 7 Dec 2022 11:48:51 +0530
Subject: [PATCH 90/98] chore: Update cspell

---
 cSpell.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cSpell.json b/cSpell.json
index 64187e1ca..3ddf84102 100644
--- a/cSpell.json
+++ b/cSpell.json
@@ -64,6 +64,7 @@
     "phpbb",
     "plantuml",
     "playfair",
+    "pnpm",
     "podlite",
     "ranksep",
     "redmine",

From 59fdaa3b534e32437aeb7ac4ade9685511fb6a7e Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 7 Dec 2022 11:58:09 +0530
Subject: [PATCH 91/98] fix: Fail docs:verify on non push events

---
 .github/workflows/lint.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index f1ab5726b..d67144540 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -41,7 +41,7 @@ jobs:
       - name: Verify Docs
         id: verifyDocs
         working-directory: ./packages/mermaid
-        continue-on-error: true
+        continue-on-error: ${{ github.event_name == 'push' }}
         run: pnpm run docs:verify
 
       - name: Rebuild Docs

From 1c9a55936201db54aab405e86603a86840d4b69d Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Wed, 7 Dec 2022 10:19:30 -0800
Subject: [PATCH 92/98] common function for a11y; add to renderAsync; +
 renderAsync spec

---
 docs/config/setup/modules/mermaidAPI.md |  2 +-
 packages/mermaid/src/mermaidAPI.spec.ts | 52 +++++++++++++++++++++++++
 packages/mermaid/src/mermaidAPI.ts      | 23 ++++++++++-
 3 files changed, 74 insertions(+), 3 deletions(-)

diff --git a/docs/config/setup/modules/mermaidAPI.md b/docs/config/setup/modules/mermaidAPI.md
index 7902c1be9..1b840dcd3 100644
--- a/docs/config/setup/modules/mermaidAPI.md
+++ b/docs/config/setup/modules/mermaidAPI.md
@@ -90,7 +90,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:949](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L949)
+[mermaidAPI.ts:968](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L968)
 
 ## Functions
 
diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts
index dd36b1d0c..f9bad66d7 100644
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -734,4 +734,56 @@ describe('mermaidAPI', function () {
       });
     });
   });
+
+  describe('renderAsync', () => {
+    // Be sure to add async before each test (anonymous) method
+
+    // These are more like integration tests right now because nothing is mocked.
+    // But it is faster that a cypress test and there's no real reason to actually evaluate an image pixel by pixel.
+
+    // render(id, text, cb?, svgContainingElement?)
+
+    // Test all diagram types.  Note that old flowchart 'graph' type will invoke the flowRenderer-v2. (See the flowchart v2 detector.)
+    // We have to have both the specific textDiagramType and the expected type name because the expected type may be slightly different than was is put in the diagram text (ex: in -v2 diagrams)
+    const diagramTypesAndExpectations = [
+      { textDiagramType: 'C4Context', expectedType: 'c4' },
+      { textDiagramType: 'classDiagram', expectedType: 'classDiagram' },
+      { textDiagramType: 'classDiagram-v2', expectedType: 'classDiagram' },
+      { textDiagramType: 'erDiagram', expectedType: 'er' },
+      { textDiagramType: 'graph', expectedType: 'flowchart-v2' },
+      { textDiagramType: 'flowchart', expectedType: 'flowchart-v2' },
+      { textDiagramType: 'gitGraph', expectedType: 'gitGraph' },
+      { textDiagramType: 'gantt', expectedType: 'gantt' },
+      { textDiagramType: 'journey', expectedType: 'journey' },
+      { textDiagramType: 'pie', expectedType: 'pie' },
+      { textDiagramType: 'requirementDiagram', expectedType: 'requirement' },
+      { textDiagramType: 'sequenceDiagram', expectedType: 'sequence' },
+      { textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' },
+    ];
+
+    describe('accessibility', () => {
+      const id = 'mermaid-fauxId';
+      const a11yTitle = 'a11y title';
+      const a11yDescr = 'a11y description';
+
+      diagramTypesAndExpectations.forEach((testedDiagram) => {
+        describe(`${testedDiagram.textDiagramType}`, () => {
+          const diagramType = testedDiagram.textDiagramType;
+          const diagramText = `${diagramType}\n accTitle: ${a11yTitle}\n accDescr: ${a11yDescr}\n`;
+          const expectedDiagramType = testedDiagram.expectedType;
+
+          it('aria-roledscription is set to the diagram type, addSVGa11yTitleDescription is called', async () => {
+            const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo');
+            const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription');
+            await mermaidAPI.renderAsync(id, diagramText);
+            expect(a11yDiagramInfo_spy).toHaveBeenCalledWith(
+              expect.anything(),
+              expectedDiagramType
+            );
+            expect(a11yTitleDesc_spy).toHaveBeenCalled();
+          });
+        });
+      });
+    });
+  });
 });
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 1ac03c4f6..a77aed96d 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -519,10 +519,9 @@ const render = function (
 
   // This is the d3 node for the svg element
   const svgNode = root.select(`${enclosingDivID_selector} svg`);
-  setA11yDiagramInfo(svgNode, graphType);
   const a11yTitle = diag.db.getAccTitle?.();
   const a11yDescr = diag.db.getAccDescription?.();
-  addSVGa11yTitleDescription(svgNode, a11yTitle, a11yDescr, svgNode.attr('id'));
+  addA11yInfo(graphType, svgNode, a11yTitle, a11yDescr);
 
   // -------------------------------------------------------------------------------
   // Clean up SVG code
@@ -720,6 +719,12 @@ const renderAsync = async function (
     throw e;
   }
 
+  // This is the d3 node for the svg element
+  const svgNode = root.select(`${enclosingDivID_selector} svg`);
+  const a11yTitle = diag.db.getAccTitle?.();
+  const a11yDescr = diag.db.getAccDescription?.();
+  addA11yInfo(graphType, svgNode, a11yTitle, a11yDescr);
+
   // -------------------------------------------------------------------------------
   // Clean up SVG code
   root.select(`[id="${id}"]`).selectAll('foreignobject > *').attr('xmlns', XMLNS_XHTML_STD);
@@ -884,6 +889,20 @@ function initialize(options: MermaidConfig = {}) {
   addDiagrams();
 }
 
+/**
+ * Add accessibility (a11y) information to the diagram.
+ *
+ */
+function addA11yInfo(
+  graphType: string,
+  svgNode: D3Element,
+  a11yTitle: string | undefined,
+  a11yDescr: string | undefined
+) {
+  setA11yDiagramInfo(svgNode, graphType);
+  addSVGa11yTitleDescription(svgNode, a11yTitle, a11yDescr, svgNode.attr('id'));
+}
+
 /**
  * ## mermaidAPI configuration defaults
  *

From de795a915e0b1136faf347c7131db388d265ceef Mon Sep 17 00:00:00 2001
From: "Ashley Engelund (weedySeaDragon @ github)" <ashley.engelund@gmail.com>
Date: Fri, 9 Dec 2022 04:56:55 -0800
Subject: [PATCH 93/98] remove links from atom.io; add note Atom has been
 archived

---
 docs/misc/integrations.md                      | 8 ++++----
 packages/mermaid/src/docs/misc/integrations.md | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/misc/integrations.md b/docs/misc/integrations.md
index 007b9e778..23a95c0a1 100644
--- a/docs/misc/integrations.md
+++ b/docs/misc/integrations.md
@@ -109,10 +109,10 @@ They also serve as proof of concept, for the variety of things that can be built
   - [md-it-mermaid](https://github.com/iamcco/md-it-mermaid)
   - [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new)
   - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
-- [Atom](https://atom.io)
-  - [Markdown Preview Enhanced](https://atom.io/packages/markdown-preview-enhanced)
-  - [Atom Mermaid](https://atom.io/packages/atom-mermaid)
-  - [Language Mermaid Syntax Highlighter](https://atom.io/packages/language-mermaid)
+- Atom _(Atom has been [archived.](https://github.blog/2022-06-08-sunsetting-atom/))_
+  - Markdown Preview Enhanced
+  - [Atom Mermaid](https://github.com/y-takey/atom-mermaid)
+  - Language Mermaid Syntax Highlighter
 - [Sublime Text 3](https://sublimetext.com)
   - [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
 - [Astah](https://astah.net)
diff --git a/packages/mermaid/src/docs/misc/integrations.md b/packages/mermaid/src/docs/misc/integrations.md
index 06d09634f..78fc33df9 100644
--- a/packages/mermaid/src/docs/misc/integrations.md
+++ b/packages/mermaid/src/docs/misc/integrations.md
@@ -103,10 +103,10 @@ They also serve as proof of concept, for the variety of things that can be built
   - [md-it-mermaid](https://github.com/iamcco/md-it-mermaid)
   - [markdown-it-mermaid-fence-new](https://github.com/Revomatico/markdown-it-mermaid-fence-new)
   - [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
-- [Atom](https://atom.io)
-  - [Markdown Preview Enhanced](https://atom.io/packages/markdown-preview-enhanced)
-  - [Atom Mermaid](https://atom.io/packages/atom-mermaid)
-  - [Language Mermaid Syntax Highlighter](https://atom.io/packages/language-mermaid)
+- Atom _(Atom has been [archived.](https://github.blog/2022-06-08-sunsetting-atom/))_
+  - Markdown Preview Enhanced
+  - [Atom Mermaid](https://github.com/y-takey/atom-mermaid)
+  - Language Mermaid Syntax Highlighter
 - [Sublime Text 3](https://sublimetext.com)
   - [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
 - [Astah](https://astah.net)

From 76e9e0737011d19977e0fbaed2d3f7b9a5b196d0 Mon Sep 17 00:00:00 2001
From: Ashley Engelund <weedySeaDragon@users.noreply.github.com>
Date: Sat, 10 Dec 2022 13:46:24 -0800
Subject: [PATCH 94/98] Add links to github atom add-ons

Co-authored-by: Alois Klink <alois@aloisklink.com>
---
 packages/mermaid/src/docs/misc/integrations.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/docs/misc/integrations.md b/packages/mermaid/src/docs/misc/integrations.md
index 78fc33df9..55d0e5b20 100644
--- a/packages/mermaid/src/docs/misc/integrations.md
+++ b/packages/mermaid/src/docs/misc/integrations.md
@@ -104,9 +104,9 @@ They also serve as proof of concept, for the variety of things that can be built
   - [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
+  - [Markdown Preview Enhanced](https://github.com/shd101wyy/markdown-preview-enhanced)
   - [Atom Mermaid](https://github.com/y-takey/atom-mermaid)
-  - Language Mermaid Syntax Highlighter
+  - [Language Mermaid Syntax Highlighter](https://github.com/ytisf/language-mermaid)
 - [Sublime Text 3](https://sublimetext.com)
   - [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
 - [Astah](https://astah.net)

From e4c9aa198e0fdf6973acadc6fcba6cbca98f40da Mon Sep 17 00:00:00 2001
From: Ashley Engelund <weedySeaDragon@users.noreply.github.com>
Date: Sat, 10 Dec 2022 13:47:01 -0800
Subject: [PATCH 95/98] Update docs/misc/integrations.md

Co-authored-by: Alois Klink <alois@aloisklink.com>
---
 docs/misc/integrations.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/misc/integrations.md b/docs/misc/integrations.md
index 23a95c0a1..5f4d87792 100644
--- a/docs/misc/integrations.md
+++ b/docs/misc/integrations.md
@@ -110,9 +110,9 @@ They also serve as proof of concept, for the variety of things that can be built
   - [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
+  - [Markdown Preview Enhanced](https://github.com/shd101wyy/markdown-preview-enhanced)
   - [Atom Mermaid](https://github.com/y-takey/atom-mermaid)
-  - Language Mermaid Syntax Highlighter
+  - [Language Mermaid Syntax Highlighter](https://github.com/ytisf/language-mermaid)
 - [Sublime Text 3](https://sublimetext.com)
   - [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
 - [Astah](https://astah.net)

From a975c8c9cdd92b49445aeb950cb7b6f13ea0dc61 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 12 Dec 2022 01:45:57 +0000
Subject: [PATCH 96/98] chore(deps): update all non-major dependencies

---
 package.json   |   4 +-
 pnpm-lock.yaml | 244 ++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 233 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 1faa1628d..11dcaa236 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "9.2.2",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@7.17.1",
+  "packageManager": "pnpm@7.18.1",
   "keywords": [
     "diagram",
     "markdown",
@@ -75,7 +75,7 @@
     "coveralls": "^3.1.1",
     "cypress": "^10.11.0",
     "cypress-image-snapshot": "^4.0.1",
-    "esbuild": "^0.15.13",
+    "esbuild": "^0.16.0",
     "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 55d775801..ad57e3bef 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,8 +68,8 @@ importers:
         specifier: ^4.0.1
         version: 4.0.1_bg25yee4qeg7mpleuvd346a3tq
       esbuild:
-        specifier: ^0.15.13
-        version: 0.15.13
+        specifier: ^0.16.0
+        version: 0.16.4
       eslint:
         specifier: ^8.27.0
         version: 8.27.0
@@ -1727,6 +1727,96 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/android-arm/0.16.4:
+    resolution: {integrity: sha512-rZzb7r22m20S1S7ufIc6DC6W659yxoOrl7sKP1nCYhuvUlnCFHVSbATG4keGUtV8rDz11sRRDbWkvQZpzPaHiw==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm64/0.16.4:
+    resolution: {integrity: sha512-VPuTzXFm/m2fcGfN6CiwZTlLzxrKsWbPkG7ArRFpuxyaHUm/XFHQPD4xNwZT6uUmpIHhnSjcaCmcla8COzmZ5Q==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-x64/0.16.4:
+    resolution: {integrity: sha512-MW+B2O++BkcOfMWmuHXB15/l1i7wXhJFqbJhp82IBOais8RBEQv2vQz/jHrDEHaY2X0QY7Wfw86SBL2PbVOr0g==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-arm64/0.16.4:
+    resolution: {integrity: sha512-a28X1O//aOfxwJVZVs7ZfM8Tyih2Za4nKJrBwW5Wm4yKsnwBy9aiS/xwpxiiTRttw3EaTg4Srerhcm6z0bu9Wg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-x64/0.16.4:
+    resolution: {integrity: sha512-e3doCr6Ecfwd7VzlaQqEPrnbvvPjE9uoTpxG5pyLzr2rI2NMjDHmvY1E5EO81O/e9TUOLLkXA5m6T8lfjK9yAA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-arm64/0.16.4:
+    resolution: {integrity: sha512-Oup3G/QxBgvvqnXWrBed7xxkFNwAwJVHZcklWyQt7YCAL5bfUkaa6FVWnR78rNQiM8MqqLiT6ZTZSdUFuVIg1w==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-x64/0.16.4:
+    resolution: {integrity: sha512-vAP+eYOxlN/Bpo/TZmzEQapNS8W1njECrqkTpNgvXskkkJC2AwOXwZWai/Kc2vEFZUXQttx6UJbj9grqjD/+9Q==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm/0.16.4:
+    resolution: {integrity: sha512-A47ZmtpIPyERxkSvIv+zLd6kNIOtJH03XA0Hy7jaceRDdQaQVGSDt4mZqpWqJYgDk9rg96aglbF6kCRvPGDSUA==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm64/0.16.4:
+    resolution: {integrity: sha512-2zXoBhv4r5pZiyjBKrOdFP4CXOChxXiYD50LRUU+65DkdS5niPFHbboKZd/c81l0ezpw7AQnHeoCy5hFrzzs4g==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ia32/0.16.4:
+    resolution: {integrity: sha512-uxdSrpe9wFhz4yBwt2kl2TxS/NWEINYBUFIxQtaEVtglm1eECvsj1vEKI0KX2k2wCe17zDdQ3v+jVxfwVfvvjw==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@esbuild/linux-loong64/0.15.13:
     resolution: {integrity: sha512-+BoyIm4I8uJmH/QDIH0fu7MG0AEx9OXEDXnqptXCwKOlOqZiS4iraH1Nr7/ObLMokW3sOCeBNyD68ATcV9b9Ag==}
     engines: {node: '>=12'}
@@ -1736,6 +1826,114 @@ packages:
     dev: true
     optional: true
 
+  /@esbuild/linux-loong64/0.16.4:
+    resolution: {integrity: sha512-peDrrUuxbZ9Jw+DwLCh/9xmZAk0p0K1iY5d2IcwmnN+B87xw7kujOkig6ZRcZqgrXgeRGurRHn0ENMAjjD5DEg==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-mips64el/0.16.4:
+    resolution: {integrity: sha512-sD9EEUoGtVhFjjsauWjflZklTNr57KdQ6xfloO4yH1u7vNQlOfAlhEzbyBKfgbJlW7rwXYBdl5/NcZ+Mg2XhQA==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ppc64/0.16.4:
+    resolution: {integrity: sha512-X1HSqHUX9D+d0l6/nIh4ZZJ94eQky8d8z6yxAptpZE3FxCWYWvTDd9X9ST84MGZEJx04VYUD/AGgciddwO0b8g==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-riscv64/0.16.4:
+    resolution: {integrity: sha512-97ANpzyNp0GTXCt6SRdIx1ngwncpkV/z453ZuxbnBROCJ5p/55UjhbaG23UdHj88fGWLKPFtMoU4CBacz4j9FA==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-s390x/0.16.4:
+    resolution: {integrity: sha512-pUvPQLPmbEeJRPjP0DYTC1vjHyhrnCklQmCGYbipkep+oyfTn7GTBJXoPodR7ZS5upmEyc8lzAkn2o29wD786A==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-x64/0.16.4:
+    resolution: {integrity: sha512-N55Q0mJs3Sl8+utPRPBrL6NLYZKBCLLx0bme/+RbjvMforTGGzFvsRl4xLTZMUBFC1poDzBEPTEu5nxizQ9Nlw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/netbsd-x64/0.16.4:
+    resolution: {integrity: sha512-LHSJLit8jCObEQNYkgsDYBh2JrJT53oJO2HVdkSYLa6+zuLJh0lAr06brXIkljrlI+N7NNW1IAXGn/6IZPi3YQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/openbsd-x64/0.16.4:
+    resolution: {integrity: sha512-nLgdc6tWEhcCFg/WVFaUxHcPK3AP/bh+KEwKtl69Ay5IBqUwKDaq/6Xk0E+fh/FGjnLwqFSsarsbPHeKM8t8Sw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/sunos-x64/0.16.4:
+    resolution: {integrity: sha512-08SluG24GjPO3tXKk95/85n9kpyZtXCVwURR2i4myhrOfi3jspClV0xQQ0W0PYWHioJj+LejFMt41q+PG3mlAQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-arm64/0.16.4:
+    resolution: {integrity: sha512-yYiRDQcqLYQSvNQcBKN7XogbrSvBE45FEQdH8fuXPl7cngzkCvpsG2H9Uey39IjQ6gqqc+Q4VXYHsQcKW0OMjQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-ia32/0.16.4:
+    resolution: {integrity: sha512-5rabnGIqexekYkh9zXG5waotq8mrdlRoBqAktjx2W3kb0zsI83mdCwrcAeKYirnUaTGztR5TxXcXmQrEzny83w==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-x64/0.16.4:
+    resolution: {integrity: sha512-sN/I8FMPtmtT2Yw+Dly8Ur5vQ5a/RmC8hW7jO9PtPSQUPkowxWpcUZnqOggU7VwyT3Xkj6vcXWd3V/qTXwultQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@eslint/eslintrc/1.3.3:
     resolution: {integrity: sha512-uj3pT6Mg+3t39fvLrj8iuCIJ38zKO9FpGtJ4BBJebJhEwjoT+KLVNCcHT5QC9NGRIEi7fZ0ZR8YRb884auB4Lg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -5505,6 +5703,36 @@ packages:
       esbuild-windows-arm64: 0.15.13
     dev: true
 
+  /esbuild/0.16.4:
+    resolution: {integrity: sha512-qQrPMQpPTWf8jHugLWHoGqZjApyx3OEm76dlTXobHwh/EBbavbRdjXdYi/GWr43GyN0sfpap14GPkb05NH3ROA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/android-arm': 0.16.4
+      '@esbuild/android-arm64': 0.16.4
+      '@esbuild/android-x64': 0.16.4
+      '@esbuild/darwin-arm64': 0.16.4
+      '@esbuild/darwin-x64': 0.16.4
+      '@esbuild/freebsd-arm64': 0.16.4
+      '@esbuild/freebsd-x64': 0.16.4
+      '@esbuild/linux-arm': 0.16.4
+      '@esbuild/linux-arm64': 0.16.4
+      '@esbuild/linux-ia32': 0.16.4
+      '@esbuild/linux-loong64': 0.16.4
+      '@esbuild/linux-mips64el': 0.16.4
+      '@esbuild/linux-ppc64': 0.16.4
+      '@esbuild/linux-riscv64': 0.16.4
+      '@esbuild/linux-s390x': 0.16.4
+      '@esbuild/linux-x64': 0.16.4
+      '@esbuild/netbsd-x64': 0.16.4
+      '@esbuild/openbsd-x64': 0.16.4
+      '@esbuild/sunos-x64': 0.16.4
+      '@esbuild/win32-arm64': 0.16.4
+      '@esbuild/win32-ia32': 0.16.4
+      '@esbuild/win32-x64': 0.16.4
+    dev: true
+
   /escalade/3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
     engines: {node: '>=6'}
@@ -6161,16 +6389,6 @@ packages:
     resolution: {integrity: sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==}
     dev: true
 
-  /follow-redirects/1.15.2:
-    resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-    dev: true
-
   /follow-redirects/1.15.2_debug@4.3.2:
     resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==}
     engines: {node: '>=4.0'}
@@ -6715,7 +6933,7 @@ packages:
     engines: {node: '>=8.0.0'}
     dependencies:
       eventemitter3: 4.0.7
-      follow-redirects: 1.15.2
+      follow-redirects: 1.15.2_debug@4.3.2
       requires-port: 1.0.0
     transitivePeerDependencies:
       - debug

From 32fcea3bdd7433cc414e7e807a9b3bea1e6815f9 Mon Sep 17 00:00:00 2001
From: Jesper Hasselquist <jesper.hasselquist@pm.me>
Date: Mon, 12 Dec 2022 21:39:19 +0900
Subject: [PATCH 97/98] fix(docs): remove duplicate section

Remove duplicate `Return Type` section
---
 packages/mermaid/src/docs/syntax/classDiagram.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/mermaid/src/docs/syntax/classDiagram.md b/packages/mermaid/src/docs/syntax/classDiagram.md
index a0f4e5611..8cd5796ff 100644
--- a/packages/mermaid/src/docs/syntax/classDiagram.md
+++ b/packages/mermaid/src/docs/syntax/classDiagram.md
@@ -141,10 +141,6 @@ Square : +setMessages(List~string~ messages)
 Square : +getMessages() List~string~
 ```
 
-#### Return Type
-
-Optionally you can end the method/function definition with the data type that will be returned.
-
 #### Visibility
 
 To describe the visibility (or encapsulation) of an attribute or method/function that is a part of a class (i.e. a class member), optional notation may be placed before that members' name:

From dfa1d2695225e1cd203908f26bd32bc49474a2bd Mon Sep 17 00:00:00 2001
From: Jesper Hasselquist <jesper.hasselquist@gmail.com>
Date: Mon, 12 Dec 2022 22:32:50 +0900
Subject: [PATCH 98/98] fix(docs): build the docs

---
 docs/syntax/classDiagram.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/docs/syntax/classDiagram.md b/docs/syntax/classDiagram.md
index b6d48c9de..c4fc07732 100644
--- a/docs/syntax/classDiagram.md
+++ b/docs/syntax/classDiagram.md
@@ -238,10 +238,6 @@ Square : +setMessages(List~string~ messages)
 Square : +getMessages() List~string~
 ```
 
-#### Return Type
-
-Optionally you can end the method/function definition with the data type that will be returned.
-
 #### Visibility
 
 To describe the visibility (or encapsulation) of an attribute or method/function that is a part of a class (i.e. a class member), optional notation may be placed before that members' name: